Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Object-Oriented UX Workshop

Object-Oriented UX Workshop

Slides for a full two days of OOUX workshopping.

Sophia V Prater

August 01, 2018
Tweet

More Decks by Sophia V Prater

Other Decks in Design

Transcript

  1. @sophiavux FULL DAY AGENDA • 10am-11:30pm: Interactive Lecture • BREAK!

    • 11:45-1pm: Defining our objects • 1pm-2pm: LUNCH! • 2-4pm: Object Mapping: core content, metadata, nesting •BREAK! • 4:15-4:45pm: forced prioritization (sketching with stickies) • 4:45-5:30pm: Call to Action Inventory • 5:30-6pm: discussion and round robin workshop only
  2. @sophiavux ALL THIS TALKIN! WHO AM I? WHAT IS OOUX?

    WHY OOUX? OK, HOW DO WE DO THIS?
  3. @sophiavux Simplify your design by reducing moving parts Iterate on

    fidelity, not chunks of functionality Prioritize prioritization THE SIMPLICITY IMPERATIVE
  4. OBJECTS = REAL STUFF MODULES = PACKAGING DATE/TIME MY STATUS

    LOCATION AGENDA GROUP HOST MEMBERS GOING TITLE
  5. OBJECTS = REAL STUFF MODULES = PACKAGING DATE/TIME MY STATUS

    LOCATION AGENDA GROUP HOST MEMBERS GOING TITLE
  6. @sophiavux OBJECT ORIENTED PROGRAMMING A programming language model organized around

    objects rather than "actions" and data rather than logic.
  7. @sophiavux OBJECT ORIENTED PROGRAMMING A programming language model organized around

    objects rather than "actions" and data rather than logic. UX design
  8. @sophiavux OBJECT ORIENTED PROGRAMMING A programming language model organized around

    objects rather than "actions" and data rather than logic. UX design Data first. THEN logic.
 Procedures are derived from objects.
  9. @sophiavux THE PRACTICE OF OOUX 1. Starts with defining the

    system of real-world objects that make up a user’s mental model of the problem. (Objects are derived directly from the GOALS of a system…and GOALS should be derived from RESEARCH.) 2. Ensures the anatomy of every object is mapped before sketching, wireframes, interaction design, or visual design begins. 3. Roots every interaction in a well-defined direct object. 4. A definition: the missing part of the UX process that defines the NOUNS in our communication workshop only
  10. @sophiavux THE PRACTICE OF OOUX 1. Starts with defining the

    system of real-world objects that make up a user’s mental model of the problem. (Objects are derived directly from the GOALS of a system…and GOALS should be derived from RESEARCH.) 2. Ensures the anatomy of every object is mapped before sketching, wireframes, interaction design, or visual design begins. 3. Roots every interaction in a well-defined direct object. 4. A definition: the missing part of the UX process that defines the NOUNS in our communication workshop only
  11. @sophiavux HEY, SOPHIA…we call these content types. To a teacher,

    Not a content type. To a salesmen, Not a content type.
  12. @sophiavux Talk to your users. (and SMEs!) Listen to the

    nouns they use, over and over. Those are your objects.
  13. @sophiavux aligns to many are assigne d create many work

    on many are in many has many are scored on align to many
  14. “A USER’S MENTAL MODEL IS NOT SOMETHING YOU DESIGN. IT’S

    SOMETHING YOU REFLECT (AND RESPECT). IT’S A USER’S HEAD MOVIE OF THE PROBLEM DOMAIN.” -ME
  15. @sophiavux OBJECTS • The things that make up your user’s

    mental model while they are operating in the given problem area. • They are an IA and a content strategist’s “content types”… • They are a database engineer’s “classes”… • Psychologists and philosophers call them “objects.” • Users call them “things”… • (Alexa VUI designers call them “slot types”…)
  16. WHY “GO OO”? HUMANS THINK IN OBJECTS HUMANS NEED CONSISTENT,

    RECOGNIZABLE OBJECTS HUMANS UNDERSTAND OBJECTS THROUGH RELATIONSHIPS 1 2 3
  17. Lesson 1: The world is made of objects and they

    are separate from me. Lesson 2: I can understand the world by categorizing similar objects, assimilating new things into my existing schema.
  18. Lesson 1: The world is made of objects and they

    are separate from me. Lesson 2: I can understand the world by categorizing similar objects, assimilating new things into my existing schema. Lesson 3: I can build greater understanding of the world be taking new things and adjusting (accommodating) my schema.
  19. Lesson 1: The world is made of objects and they

    are separate from me. Lesson 2: I can understand the world by categorizing similar objects, assimilating new things into my existing schema. Lesson 3: I can build greater understanding of the world be taking new things and adjusting (accommodating) my schema. Lesson 4: I understand of ownership of objects.
  20. Lesson 1: The world is made of objects and they

    are separate from me. Lesson 2: I can understand the world by categorizing similar objects, assimilating new things into my existing schema. Lesson 3: I can build greater understanding of the world be taking new things and adjusting (accommodating) my schema. Lesson 5: I understand various perspectives of objects. Lesson 4: I understand of ownership of objects.
  21. Lesson 1: The world is made of objects and they

    are separate from me. Lesson 2: I can understand the world by categorizing similar objects, assimilating new things into my existing schema. Lesson 3: I can build greater understanding of the world be taking new things and adjusting (accommodating) my schema. Lesson 5: I understand various perspectives of objects. Lesson 4: I understand of ownership of objects. Cause and effect multistep procedures
  22. @sophiavux food fridge counter back clutter cooking clean cooking food

    oven food clean up cutting bake milk fire utensil microwave fridge sink knife fork microwave appliance tomato fridge smells smell knife pot pan oven stirring fridge sink microwave food food oven fork spoon red blender creativity love satisfaction white stove cabinets food food cereal toaster coffee maker food mixer stove fork plate oven fridge oven crumbs taste IKEA fridge cutting board clean tile copper counter mixer cabinet fork beer napkin food cooking sink table counter food work windows sour mango
  23. @sophiavux Shoes Appalachia n fun sweat? cat mountain hill calves

    water dogs shoes mountain mountain fun pain Switzerlan d north childhood nature boots shorts goretex boots peace mountain mountain trees river friends boots purple trees cliff boots dirt fir trees boots ascent shade rocks boots view nature mountain boot shoes mountains dirt rocks trees trees shoes trail boots rocks hill trees mountain boots trees camping camping camping walking walking climbing uphill exhausting hot green
  24. workshop only “The key is this: our visual systems are

    good at detecting blobs and edges…
  25. workshop only “But they are really bad at what our

    world has become, which is lot’s of screens with lots of data…
  26. OBJECTS = REAL STUFF MODULES = PACKAGING DATE/TIME MY STATUS

    LOCATION AGENDA GROUP HOST MEMBERS GOING TITLE
  27. OBJECTS = REAL STUFF MODULES = PACKAGING DATE/TIME MY STATUS

    LOCATION AGENDA GROUP HOST MEMBERS GOING TITLE
  28. @sophiavux HUMANS UNDERSTAND OBJECTS THROUGH RELATIONSHIPS You need your content

    (modules representing objects) to be your navigation. 3
  29. @sophiavux aligns to many are assigne d create many work

    on many are in many has many are scored on align to many
  30. @sophiavux CONTEXTUAL NAV GLOBAL NAV Navigation that transports to the

    user via a persistent, unchanging group of links.
  31. @sophiavux CONTEXTUAL NAV Navigation that transports the user from one

    object to other objects based on relationships, associations, similarity, and even user-preferences. GLOBAL NAV Navigation that transports to the user via a persistent, unchanging group of links.
  32. @sophiavux CONTEXTUAL NAV Navigation that transports the user from one

    object to other objects based on relationships, associations, similarity, and even user-preferences. GLOBAL NAV Navigation that transports to the user via a persistent, unchanging group of links. The OG
  33. @sophiavux CONTEXTUAL NAV Navigation that transports the user from one

    object to other objects based on relationships, associations, similarity, and even user-preferences. GLOBAL NAV Navigation that transports to the user via a persistent, unchanging group of links. The OG your way underrated new bestie
  34. @sophiavux “Content on the page first. The main menu is

    your fire escape.” -Val Jencks We can no longer rely on our main navigation.
  35. @sophiavux BUT…HOW? THE OOUX PROCESS OBJECT MAPPING/ MODELING SKETCHING WIRES/

    FLOWS IN AXURE DESIGN IN SKETCH CMS IN WEBFLOW DETAILED INTERACTIONS RESEARCH TEST THE MODEL! TEST THE INTERFACE!
  36. @sophiavux OOUX IS NOT A NEW PROCESS, IT’S A NEW

    PIECE OF YOUR PROCESS workshop only
  37. @sophiavux ORDER OF OPERATIONS FIND THE OBJECTS BREAKDOWN THE OBJECTS:

    ELEMENT AUDIT PRIORITIZE ELEMENTS CTA INVENTORY
  38. FOUR TYPES OF OBJECTS ELEMENTS Core Content CTA Metadata Metadata

    Nested Object Nested Object Nested Object
  39. FOUR TYPES OF OBJECTS ELEMENTS Core Content CTA Metadata Metadata

    Nested Object Nested Object Nested Object Nested Obj
  40. @sophiavux NOW LET’S DO IT: HOT SAUCERY A destination for

    all things hot sauce: specialty blends, ingredients, and expertise
  41. @sophiavux ORDER OF OPERATIONS FIND THE OBJECTS BREAKDOWN THE OBJECTS:

    CORE CONTENT AND METADATA CONNECT THE OBJECTS: NESTING!
  42. @sophiavux ORDER OF OPERATIONS FIND THE OBJECTS BREAKDOWN THE OBJECTS:

    CORE CONTENT AND METADATA PRIORITIZE ELEMENTS: SKETCHING WITH STICKIES CONNECT THE OBJECTS: NESTING!
  43. @sophiavux ORDER OF OPERATIONS FIND THE OBJECTS BREAKDOWN THE OBJECTS:

    CORE CONTENT AND METADATA PRIORITIZE ELEMENTS: SKETCHING WITH STICKIES CTA INVENTORY CONNECT THE OBJECTS: NESTING!
  44. @sophiavux GOALS • Drive visitors to each of our unique

    locations. • Introduce, promote and sell our specialty hot sauces. • Present our mixologists as the experts that they are! Encourage a whole new generation to become hot sauce mixologists. • Help build appreciation and exemplify our expertise in the art of hotsaucery through classes and workshops (online and in store) as well as free online recipes. • Teach about products we sell in the store, like specialty ingredients, tools, and bottles.
  45. @sophiavux GOALS • Drive visitors to each of our unique

    locations. • Introduce, promote and sell our specialty hot sauces. • Present our mixologists as the experts that they are! Encourage a whole new generation to become hot sauce mixologists. • Help build appreciation and exemplify our expertise in the art of hotsaucery through classes and workshops (online and in store) as well as free online recipes. • Teach about products we sell in the store, like specialty ingredients, tools, and bottles.
  46. @sophiavux GOALS • Drive visitors to each of our unique

    locations. • Introduce, promote and sell our specialty hot sauces. • Present our mixologists as the experts that they are! Encourage a whole new generation to become hot sauce mixologists. • Help build appreciation and exemplify our expertise in the art of hotsaucery through classes and workshops (online and in store) as well as free online recipes. • Teach about products we sell in the store, like specialty ingredients, tools, and bottles.
  47. @sophiavux GOALS • Drive visitors to each of our unique

    locations. • Introduce, promote and sell our specialty hot sauces. • Present our mixologists as the experts that they are! Encourage a whole new generation to become hot sauce mixologists. • Help build appreciation and exemplify our expertise in the art of hotsaucery through classes and workshops (online and in store) as well as free online recipes. • Teach about products we sell in the store, like specialty ingredients, tools, and bottles.
  48. @sophiavux GOALS • Drive visitors to each of our unique

    locations. • Introduce, promote and sell our specialty hot sauces. • Present our mixologists as the experts that they are! Encourage a whole new generation to become hot sauce mixologists. • Help build appreciation and exemplify our expertise in the art of hotsaucery through classes and workshops (online and in store) as well as free online recipes. • Teach about products we sell in the store, like specialty ingredients, tools, and bottles.
  49. @sophiavux GOALS • Drive visitors to each of our unique

    locations. • Introduce, promote and sell our specialty hot sauces. • Present our mixologists as the experts that they are! Encourage a whole new generation to become hot sauce mixologists. • Help build appreciation and exemplify our expertise in the art of hotsaucery through classes and workshops (online and in store) as well as free online recipes. • Teach about products we sell in the store, like specialty ingredients, tools, and bottles.
  50. @sophiavux GOALS • Drive visitors to each of our unique

    locations. • Introduce, promote and sell our specialty hot sauces. • Present our mixologists as the experts that they are! Encourage a whole new generation to become hot sauce mixologists. • Help build appreciation and exemplify our expertise in the art of hotsaucery through classes and workshops (online and in store) as well as free online recipes. • Teach about products we sell in the store, like specialty ingredients, tools, and bottles.
  51. Name Street image Address distance from user contact info inside

    images name descriptio n (why we love it) price images tag/ category Name descriptio n bottle $ shot heat index price Name bio headshot years with us twitter handle title descriptio n price type (workshop, ongoing class) date time Name date created image recipe content gallery of sauce on food Locations Sauces Mixologist s Ingredient s/tools Classes Recipes
  52. Location Sauce Mixologist s Ingredient s/tools Classes Recipes Name Street

    image Address distance from user contact info inside images name descriptio n (why we love it) price images tag/ category Name descriptio n bottle $ shot heat index price Name bio headshot years with us twitter handle title descriptio n price type (workshop, ongoing class) date time Name date created image recipe content gallery of sauce on food
  53. Location Sauce Mixologist s Ingredient s/tools Classes Recipes Mixologist that

    work here Classes calendar Mixologist creator Locations available at Class that teaches it Mixologist mentor Sauces created ingredient s/tools loved Classes teaching recipes posted Location works at Location available at related ingredient s Recipes that include Ingredient s/tools provided Recipes taught Mixologist teacher Sauce (parent) Ingredient s/tools needed Classes that feature Mixologist author Name Street image Address distance from user contact info inside images name descriptio n (why we love it) price images tag/ category Name descriptio n bottle $ shot heat index price Name bio headshot years with us twitter handle title descriptio n price type (workshop, ongoing class) date time Name date created image recipe content gallery of sauce on food
  54. Location Sauce Mixologist s Ingredient s/tools Classes Recipes Mixologist that

    work here Classes calendar Mixologist creator Locations available at Class that teaches it Mixologist mentor Sauces created ingredient s/tools loved Classes teaching recipes posted Location works at Location available at related ingredient s Recipes that include Ingredient s/tools provided Recipes taught Mixologist teacher Sauce (parent) Ingredient s/tools needed Classes that feature Mixologist author Name Street image Address distance from user contact info inside images name descriptio n (why we love it) price images tag/ category Name descriptio n bottle $ shot heat index price Name bio headshot years with us twitter handle title descriptio n price type (workshop, ongoing class) date time Name date created image recipe content gallery of sauce on food Location
  55. Location Sauce Mixologist s Ingredient s/tools Classes Recipes Mixologist that

    work here Classes calendar Mixologist creator Locations available at Class that teaches it Mixologist mentor Sauces created ingredient s/tools loved Classes teaching recipes posted Location works at Location available at related ingredient s Recipes that include Ingredient s/tools provided Recipes taught Mixologist teacher Sauce (parent) Ingredient s/tools needed Classes that feature Mixologist author Name Street image Address distance from user contact info inside images name descriptio n (why we love it) price images tag/ category Name descriptio n bottle $ shot heat index price Name bio headshot years with us twitter handle title descriptio n price type (workshop, ongoing class) date time Name date created image recipe content gallery of sauce on food Location
  56. Mixologist that work here Classes calendar Mixologist creator Locations available

    at Class that teaches it Mixologist mentor Sauces created ingredient s/tools loved Classes teaching recipes posted Location works at Location available at related ingredient s Recipes that include Ingredient s/tools provided Recipes taught Mixologist teacher Sauce (parent) Ingredient s/tools needed Classes that feature Mixologist author Name Street image Address distance from user contact info inside images name descriptio n (why we love it) price images tag/ category Name descriptio n bottle $ shot heat index price Name bio headshot years with us twitter handle title descriptio n price type (workshop, ongoing class) date time Name date created image recipe content gallery of sauce on food Location Locations Sauces Mixologist s Ingredient s/tools Classes Recipes
  57. Mixologist that work here Classes calendar Mixologist creator Locations available

    at Class that teaches it Sauces created ingredient s/tools loved Classes teaching recipes posted Location works at Locations available at related ingredient s Recipes that include Ingredient s/tools provided Recipes taught Mixologist teacher Sauce (parent) Ingredient s/tools needed Classes that feature Mixologist author Name Street image Address distance from user contact info inside images name descriptio n (why we love it) price images tag/ category Name descriptio n bottle $ shot heat index price Name bio headshot years with us twitter handle title descriptio n price type (workshop, ongoing class) date time Name date created image recipe content gallery of sauce on food Location Related Recipes Locations Sauces Mixologist s Ingredient s/tools Classes Recipes
  58. Location Sauce Mixologist Ingredient s/tools Classes Recipes Mixologist that work

    here Classes calendar Mixologist creator Locations available at Class that teaches it Sauces created ingredient s/tools loved Classes teaching recipes posted Location works at Locations available at related ingredient s Recipes that include Ingredient s/tools provided Recipes taught Mixologist teacher Sauce (parent) Ingredient s/tools needed Classes that feature Mixologist author Name Street image Address distance from user contact info inside images name descriptio n (why we love it) price images tag/ category Name descriptio n bottle $ shot heat index price Name bio headshot years with us twitter handle title descriptio n price type (workshop, ongoing class) date time Name date created image recipe content gallery of sauce on food Location Related Recipes
  59. Location Sauce Mixologist Ingredient s/tools Classes Recipes Mixologist creator Location

    works at Locations Mixologist teacher Sauce (parent) Ingredient s/tools Mixologist author Name Street image Address distance from user inside images name descriptio n (why we love it) price images tag/ category Name bottle $ shot price Name headshot years with us twitter handle title type (workshop, ongoing class) date time Name date created image gallery of sauce on food Location
  60. Location Sauce Mixologist Ingredient s/tools Classes Recipes Mixologist creator Location

    works at Locations Mixologist teacher Sauce (parent) Ingredient s/tools Mixologist author Name Street image Address distance from user inside images name descriptio n (why we love it) price images tag/ category Name bottle $ shot price Name headshot years with us twitter handle title type (workshop, ongoing class) date time Name date created image gallery of sauce on food Location Get Direction s Buy Share Share Share Send testimon y upvote? Sign up/ register invite friends? add to box print shopping list Buy
  61. Mixologist creator Locations available at Class that teaches it Name

    descriptio n bottle $ shot heat index price gallery of sauce on food
  62. Mixologist creator Locations available at Class that teaches it Name

    descriptio n bottle $ shot heat index price gallery of sauce on food
  63. Mixologist creator Class that teaches it Name description bottle $

    shot heat index price gallery of sauce on food description description gallery of sauce on food gallery of sauce on food gallery of sauce on food gallery of sauce on food Locations available at Locations available at Locations available at Class that teaches it Class that teaches it gallery of sauce on food gallery of sauce on food
  64. Mixologist creator Name bottle $ shot heat index price Mixologist

    creator Name bottle $ shot heat index price Mixologist creator Name bottle $ shot heat index price Mixologist creator Name bottle $ shot heat index price
  65. Mixologist creator Name bottle $ shot heat index price Mixologist

    creator Name bottle $ shot heat index price Mixologist creator Name bottle $ shot heat index price Mixologist creator Name bottle $ shot heat index price CHEAPEST FIRST MILD HOT
  66. “the issue with objects is not about user interfaces or

    OO programming, or anything to do with computers. It is about how people perceive and act on the world. We—end users, everyone—have evolved to deal with objects since the dawn of time.” -Dave Collins, in Designing Object-Oriented User Interfaces, 1995 PEOPLE THINK IN OBJECTS!
  67. @sophiavux ORDER OF OPERATIONS FIND THE OBJECTS BREAKDOWN THE OBJECTS:

    CORE CONTENT AND METADATA PRIORITIZE ELEMENTS: SKETCHING WITH STICKIES CTA INVENTORY CONNECT THE OBJECTS: NESTING!
  68. STEP 1: EXTRACT OBJECTS 1. Think about your users’ world

    within your problem domain. What are the main things that it is made out of? 2. Look at user goals, company goals, vision documents, case studies, and user interview transcripts. What are the nouns that get used over and over again? 3. Watch out for super fuzzy nouns. Some legit objects might be intangible (like “value proposition” or “campaign” or “route”) but they should be definable. 4. In fact, bonus points for writing a clear definition for each object! 5. Ok, are their a few object that ARE special and unique to your application? Put a star by those. Let’s talk. OBJECTS ON BLUE!
  69. @sophiavux OBJECTS MAKE UP YOUR SYSTEM • Objects have multiple

    instances (churned out by a CMS, piped in from an API, or generated by your users) • They need structure! Core content elements, metadata…and relationships with other objects. • They need consistency. They are what the user came for (articles, events, friends, students, lessons) so they need to be recognizable. Name CELEB Image Bio B’day # of fans Gender?
  70. @sophiavux OBJECT INSTANCES - LINES IN THE DB Name CELEB

    Image Bio # of fans Gender? Justin B David D Katie S Bieber has won numerous awards, including the American Music Award for Artist of the Year Bio Bio B’day 3/1/1994 400k male 8/7/1960 140k male 4/8/1980 340k female
  71. @sophiavux NAME 2-4 INSTANCES OF EACH OF YOUR OBJECTS. FOR

    PEOPLE, MAKE UP NAMES (PERSONAS?) OR USE PEOPLE YOU KNOW THAT FIT THE BILL
  72. STEP 1.3: MODEL THE OBJECTS 1. Using a scrap piece

    of paper, a whiteboard, or a program like Axure or Omnigraffle, write each object on a node 2. Cluster more closely related objects together. 3. Draw out the strongest connects, the most obvious ones. This does not need to be exhaustive. We will cover all the relationships when we tackle nested objects. 4. Label the arrows with simple verbs like: OBJECTS ON BLUE! has 1 parent has 0 to many includes many creates many
  73. @sophiavux • The real “meat” of the object • Text

    strings (without logic, requirements) • Media like images, videos, illustrations, icons, etc • Common Core Content Elements: • Name/title • Profile Pic • Bio/description • Article body (*might specify as “rich text” if contains its own media and formatting) Core Content workshop only
  74. @sophiavux • Data about the object • Helps your user

    sort and filter through a list of objects • Have formatting and/or taxonomy requirements • Common Metadata: • timestamp/date • size • category • popularity Metadata workshop only
  75. Describes the meat Dates, prices, location Format/taxonomy rules Need a

    specific mechanism for sort/filter. Could provide navigation to list of more of the same type of object. The meat Text strings and media Maybe size restriction? Could be keyword searchable… Does not provide navigation. Core Content Metadata workshop only
  76. STEP 2: ELEMENT AUDIT 1. Taking one object at a

    time, start cataloging the core content and metadata that should make up each object. 2. One element on each sticky! List elements in column and don’t worry about order. We’ll get to that later! 3. Don’t get too hung up on Core Content vs Metadata. But remember, if a user might sort and filter by this element, put it on RED! 4. If an element comes up that’s also another object put it on a BLUE STICKY! OBJECTS ON BLUE! CORE CONTENT ON YELLOW! METADATA ON RED! NESTED OBJECTS ON BLUE, TOO!
  77. @sophiavux • Objects that crosslink to other objects based on

    a relationship • Products similar to this product (movies similar to this movie) •Articles related to this neighborhood •People nearby this music venue • Objects that help make up other objects • The songs in a album • The reviews on a tourist attraction • The jobs in a department Nested Objects workshop only
  78. @sophiavux • Data about the object…that is also another object

    • Expresses relationship between two objects • Often is a 1 to 1 relationship • Common Metadata Objects: • Author (person who created this) • Location (if location is more than coordinates - Restaurant, City, Venue) • Category or Genre that has been “upgraded” (has its own metadata and/ or core content) Nested Object serving as Metadata workshop only
  79. METADATA NAVIGATION Movie detail: Wayne’s World Preview Add comedy Metadata

    Actor Actor Actor director movie object Movie list, filtered by Comedy Comedy m movie object movie object workshop only
  80. Movie detail: Wayne’s World Preview Add comedy Metadata Actor Actor

    Actor director NESTED OBJECT AS METADATA workshop only
  81. Movie detail: Wayne’s World Preview Add comedy Metadata Actor Actor

    Actor director NESTED OBJECT AS METADATA Genre detail: Comedy Gallery of famous clips follow # of followers top movie top movie top movie top actor top actor top actor workshop only
  82. Movie detail: Wayne’s World Preview Add comedy Metadata Actor Actor

    Actor director NESTED OBJECT AS CROSSLINKING workshop only
  83. Movie detail: Wayne’s World Preview Add comedy Metadata Actor Actor

    Actor director NESTED OBJECT AS CROSSLINKING Actor detail: Dana Carvey Profile Pic follow # of followers top movie top movie top movie similar actor similar actor similar actor workshop only
  84. DEAD METADATA LIVE METADATA METADATA OBJECT Non-actionable, does not take

    user to a filtered list of that object. Examples: Date, size, ratings Actionable! Takes user to a filtered list of that object. Examples: Author, category, location Live metadata that is also an object, part of the system in it’s own right. Examples: Author, category, location workshop only
  85. STEP 3: NESTED OBJECTS 1. Remember that matrix we did

    earlier? Taking one object at a time, have a quick brainstorm with your team about how EVERY OBJECT could nest inside that object. 2. Remember think about how that object will nest inside of itself! (Products > Similar Products) 3. Reference the relationship on the sticky as well. OBJECTS ON BLUE! CORE CONTENT ON YELLOW! METADATA ON RED! NESTED OBJECTS ON BLUE, TOO!
  86. STEP 3: NESTED OBJECTS 1. Remember that matrix we did

    earlier? Taking one object at a time, have a quick brainstorm with your team about how EVERY OBJECT could nest inside that object. 2. Remember think about how that object will nest inside of itself! (Products > Similar Products) 3. Reference the relationship on the sticky as well. OBJECTS ON BLUE! CORE CONTENT ON YELLOW! METADATA ON RED! NESTED OBJECTS ON BLUE, TOO! recipes OK
  87. STEP 3: NESTED OBJECTS 1. Remember that matrix we did

    earlier? Taking one object at a time, have a quick brainstorm with your team about how EVERY OBJECT could nest inside that object. 2. Remember think about how that object will nest inside of itself! (Products > Similar Products) 3. Reference the relationship on the sticky as well. OBJECTS ON BLUE! CORE CONTENT ON YELLOW! METADATA ON RED! NESTED OBJECTS ON BLUE, TOO! recipes OK recipes that this mixologist posted BETTER
  88. STEP 3: NESTED OBJECTS 1. Remember that matrix we did

    earlier? Taking one object at a time, have a quick brainstorm with your team about how EVERY OBJECT could nest inside that object. 2. Remember think about how that object will nest inside of itself! (Products > Similar Products) 3. Reference the relationship on the sticky as well. OBJECTS ON BLUE! CORE CONTENT ON YELLOW! METADATA ON RED! NESTED OBJECTS ON BLUE, TOO! recipes OK recipes that this mixologist posted BETTER recipes that this mixologist posted Main location of this mixologist AWESOME
  89. Mixologist creator Locations available at Class that teaches it Name

    descriptio n bottle $ shot heat index price gallery of sauce on food module elements at top! Make sure to include metadata that a user might sort or filter by. detail view content. Extra stuff that can be behind a click. STEP 4: SKETCHING W/ STICKIES One-to-many nested objects that might have a ton of instances!
  90. STEP 4: SKETCHING W/ STICKIES 1. Think about prioritization. What

    needs to be near the top and bottom of page. 2. Think about grouping. What elements should be together? 3. Try and keep stickies in one column “forcing prioritization.” 1. A way to think about it: what elements should be on the smallest module? Ok, those should be near the top of your column. And if the module was bigger? What elements would also be included? And finally, what elements can be saved for the detail view? 4. Think about nested objects that might have dozens (or hundreds of instances.)
  91. STEP 5: CTA INVENTORY 1. Taking one object at a

    time, brainstorm all actions that might associate with that object. What will a user want to DO to that object? 2. Feel free to invent a notation system that makes sense for organizing CTAs. Common notations: 1. #Phase2 for CTAs that are ambitious 2. #Admin #NewUser #PowerUser for user type. 3. #Research! for CTAs that need some validation OBJECTS ON BLUE! CORE CONTENT ON YELLOW! NESTED OBJECTS ON BLUE, TOO! CTAs on GREEN!
  92. @sophiavux U = USER GENERATED W = COPY WRITER ??

    = ?? S = SYSTEM WHO CREATES/OWNS EACH OBJECT? API
  93. CTA MATRIX FOR AN OBJECT create edit delete write review

    rate/star ask question answer question follow copy user 1 user 2
  94. CTA MATRIX FOR AN OBJECT create edit delete write review

    rate/star ask question answer question follow copy WHY? WHEN? WHERE? LOE Value user 1 user 2
  95. CTA MATRIX FOR AN OBJECT create edit delete write review

    rate/star ask question answer question follow copy WHY? WHEN? WHERE? LOE Value what is the purpose/ goal? user 1 user 2
  96. CTA MATRIX FOR AN OBJECT create edit delete write review

    rate/star ask question answer question follow copy WHY? WHEN? WHERE? LOE Value what is the purpose/ goal? any special circumsta nces? user 1 user 2
  97. CTA MATRIX FOR AN OBJECT create edit delete write review

    rate/star ask question answer question follow copy WHY? WHEN? WHERE? LOE Value what is the purpose/ goal? any special circumsta nces? where might the CTA(s) live? user 1 user 2
  98. CTA MATRIX FOR AN OBJECT create edit delete write review

    rate/star ask question answer question follow copy WHY? WHEN? WHERE? LOE Value what is the purpose/ goal? any special circumsta nces? where might the CTA(s) live? How much design effort is needed? user 1 user 2
  99. CTA MATRIX FOR AN OBJECT create edit delete write review

    rate/star ask question answer question follow copy WHY? WHEN? WHERE? LOE Value what is the purpose/ goal? any special circumsta nces? where might the CTA(s) live? How much design effort is needed? How critical is this to launch? user 1 user 2
  100. Mixologist creator Locations available at Class that teaches it Name

    descriptio n bottle $ shot heat index price gallery of sauce on food Share upvote? Buy
  101. Mixologist creator Locations available at Class that teaches it Name

    descriptio n bottle $ shot heat index price gallery of sauce on food Share upvote? Buy
  102. Mixologist creator Class that teaches it Name description bottle $

    shot heat index price gallery of sauce on food Share upvote? Buy description description gallery of sauce on food gallery of sauce on food gallery of sauce on food gallery of sauce on food Locations available at Locations available at Locations available at
  103. Mixologist creator Name bottle $ shot heat index price Mixologist

    creator Name bottle $ shot heat index price Mixologist creator Name bottle $ shot heat index price Mixologist creator Name bottle $ shot heat index price
  104. Mixologist creator Name bottle $ shot heat index price Mixologist

    creator Name bottle $ shot heat index price Mixologist creator Name bottle $ shot heat index price Mixologist creator Name bottle $ shot heat index price CHEAPEST FIRST MILD HOT
  105. MDL MATRIX Restaurant Dish Menu item Answer Question Customer Review

    Module? Detail? Container? Sizes? Nested modules? (author inside of article module)
  106. MDL MATRIX Restaurant Dish Menu item Answer Question Customer Review

    Module? Detail? Container? Sizes? Nested modules? (author inside of article module) Does the object need a detail? Page/url? Overlay/module- expanding?
  107. MDL MATRIX Restaurant Dish Menu item Answer Question Customer Review

    Module? Detail? Container? Sizes? Nested modules? (author inside of article module) Does the object need a detail? Page/url? Overlay/module- expanding? Does the object need it? Is the container actually another object’s detail? Filter/sort? Curated?
  108. QUESTIONS TO ASK Module? Detail? Container? What are the most

    important elements? Sizes? Nested modules? (author inside of article module)
  109. QUESTIONS TO ASK Module? Detail? Container? What are the most

    important elements? Sizes? Nested modules? (author inside of article module) Does the object need a detail? Page/url? Overlay/module- expanding?
  110. QUESTIONS TO ASK Module? Detail? Container? What are the most

    important elements? Sizes? Nested modules? (author inside of article module) Does the object need a detail? Page/url? Overlay/module- expanding? Does the object need it? Is the container actually another object’s detail? Filter/sort? Curated?
  111. @sophiavux STEP 6: SKETCHING 1. Within your group, have each

    team member pick an object to sketch. 2. 15 minute sketching sprint! FAST! When you run across a nested object…just Black Box it! Your teammate is sketching it! 1. Your object might not have a detail view. 2. Your object might not have a dedicated list view. Start thinking about how groups of your object might show up on other objects’ detail pages. How would they be filtered and sorted? 3. Present sketches to your team. Rinse and Repeat.