Designing Object Oriented Experiences
•
53 j'aime•47,433 vues
This document outlines an object-oriented UX (OOUX) workshop on extracting objects, auditing elements, nesting objects, ranking calls-to-action, and prototyping a site for a hot sauce business called Hot Saucer. The goals of Hot Saucer are to drive visitors to locations, introduce and sell specialty hot sauces, present mixologists as experts, build appreciation for hotsaucery through classes and recipes, and teach about products sold in stores. The workshop will follow steps to extract system objects, audit elements, define object nesting, rank calls-to-action, and create prototypes.
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (20)
Similaire à Designing Object Oriented Experiences
Similaire à Designing Object Oriented Experiences (20)
Dernier
Dernier (20)
Designing Object Oriented Experiences
- 2. BEACH
- 3. CLEANING
- 5. 1 Hour Lecture on OOUX / Discussion Extract objects Element audit Object nesting Forced ranking CTA inventory Sketching sprints Prototyping! AGENDA
- 8. WHERE DID THIS ALL START?
- 9. Simplify your team (be lean) Simplify your design (modular design) Iterate on fidelity, not functionality (Agile done right) Make time for simple (UX waterfall / “double sprint zero”) Prioritize Prioritization (“mobile-only” your MVP)
- 10. Simplify your team (be lean) Simplify your design (modular design) Iterate on fidelity, not functionality (Agile done right) Make time for simple (UX waterfall / “double sprint zero”) Prioritize Prioritization (“mobile-only” your MVP)
- 11. GAME TIME! “Which site is responsive?”
- 25. OOUX ≠ MODULAR DESIGN
- 26. OOUX ≠ MODULAR DESIGN OOUX informs MODULAR DESIGN
- 28. OBJECT: “Performance” MODULE: “Calendar item” MODULE: “Landing Page tile” MODULE: “sidebar module”
- 29. OBJECT: “Performance” MODULE: “Calendar item” MODULE: “Landing Page tile” MODULE: “sidebar module” USER’S MENTAL MODEL OF THE REAL WORLD: OOUX
- 30. OBJECT: “Performance” MODULE: “Calendar item” MODULE: “Landing Page tile” MODULE: “sidebar module” USER’S MENTAL MODEL OF THE REAL WORLD: OOUX DIGITAL REPRESENTATION OF THE REAL WORLD: MODULAR DESIGN
- 31. OOUX = SYSTEM DESIGN
- 32. OOUX = SYSTEM DESIGN
- 33. MODULAR DESIGN = REPRESENTING THE SYSTEM CONSISTENTLY
- 34. MODULAR DESIGN = REPRESENTING THE SYSTEM CONSISTENTLY
- 37. OBJECT MODEL
- 42. Object Oriented Programming A programming language model organized around objects rather than "actions" and data rather than logic.
- 43. Object Oriented UX A design language model organized around objects rather than "actions" and data rather than logic.
- 44. An OOUX (the thing)
- 45. An OOUX (the thing) A digital system that is intentionally organized around real- world objects and their relationships. Users can clearly identify objects and their relationships. Navigation and interaction is intuitive because the digital object system matches the users’ mental model of the problem domain.
- 47. OOUX (the practice) UX that focuses on designing a system of real-world objects that align with with a user’s mental model of their particular problem domain. UX that puts object design before action design. UX that acknowledges that the purpose of interaction design is to provide a means for users to create, manipulate, move, or find instances of objects.
- 48. Customers Browse Compare Select Checkout Products Orders Depts Products Depts My Orders
- 49. Customers Browse Compare Select Checkout Products Orders Depts Products Depts My Orders
- 50. Customers Browse Compare Select Checkout Products Orders Depts Products Depts My Orders
- 51. Customers Browse Compare Select Checkout Products Orders Depts Products Depts My Orders
- 56. Subtitle
- 57. Subtitle
- 64. food fridge counter back splash 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 cream mango
- 67. 1990S We applied a couple hundred years of IA to the web. Taxonomies, hierarchies, categories inside categories inside categories… 2000S We start getting popular. Because $$$ is really moving around on the web. Interaction design, usability testing, task flows and user stories. 2010S We freak because now our designs have to move across devices. Shit just got complicated. Responsive design, modular design, OOUX IA HISTORY IN A NUTSHELL
- 68. A BETTER HISTORY LESSON http://abbytheia.com/2014/09/27/euroia/
- 69. Heterarchies Cross-linking Spiderwebs Hamburgered Navs Homepage last Cookie cutters Objects first Hierarchies Deep drill-downs Tree-like sitemaps Glorious Top Navs Homepage first Snowflakes Verb focused THEN NOW
- 70. Persistent Navigation Task Flows and Storyboards Discovery/research > > > Page Layouts Build/Test > THEN
- 71. Persistent Navigation Task Flows and Storyboards Discovery/research > > > Page Layouts Build/Test > THEN pattern library
- 72. Persistent Navigation Task Flows and Storyboards Discovery/research > > > Build/Test > NOW
- 73. Persistent Navigation Task Flows and Storyboards Discovery/research > > > Build/Test >Object Oriented UX NOW
- 74. Persistent Navigation Task Flows and Storyboards Discovery/research > > > Build/Test >Object Oriented UX NOW pattern/module library
- 75. WHY OOUX?
- 77. REASON 1: “The navigation is your fire escape.”
- 79. REASON 2: Consistent object representation for efficiency and maintainability
- 80. REASON 2: Consistent object representation for efficiency and maintainability AND BETTER USER EXPERIENCE!
- 95. Pledged $200 for - The Woodieful Chair - Personalized thank you card Est. Delivery August 2016 got it? 2 messages +
- 101. QUESTION BREAK We are about to get into the weeds…
- 102. SYSTEM OBJECTS VS SUPPORT CONTENT
- 103. SYSTEM OBJECTS
- 104. SYSTEM OBJECTS Objects that make up the system or the product, directly derived from the goals of the organization. An object with multiple instances.
- 105. SYSTEM OBJECTS Objects that make up the system or the product, directly derived from the goals of the organization. An object with multiple instances. Celebrity image bio birthday Event location image date Article timestamp author body copy
- 106. SYSTEM OBJECTS Objects that make up the system or the product, directly derived from the goals of the organization. An object with multiple instances. Rule of thumb: they are what the user came for. The meat. Celebrity image bio birthday Event location image date Article timestamp author body copy
- 107. SUPPORT CONTENT
- 108. SUPPORT CONTENT Content that support the system or the product. They are accoutrements (and often crutches) to the core experience. An object with a single instance.
- 109. SUPPORT CONTENT How it Works Privacy Policy About us Content that support the system or the product. They are accoutrements (and often crutches) to the core experience. An object with a single instance.
- 110. CONTEXTUAL NAV [IS MY JAM] Celebrity Object Fan Obj Fan Obj Fan Obj Fan Obj Movie ObjMovie ObjMovie Obj
- 111. GLOBAL NAV [IS USEFUL, TOO] Celebrity Object Fan Obj Fan Obj Fan Obj Fan Obj Movie ObjMovie ObjMovie Obj Global Nav MOVIES CELEBS ABOUT SIGN UP
- 112. Part of the heterarchy MULTIPLE INSTANCES Is the purpose Often created by user Often lots of metadata Accessed in context of other objects* Part of the hierarchy SINGLE INSTANCE Talks about the purpose Created by the org No metadata Accessed from persistent navigation* SUPPORT CONTENT SYSTEM OBJECTS
- 114. [SYSTEM] OBJECT INSTANCE Real, unique content applied to the abstract/template system object.
- 115. [SYSTEM] OBJECT INSTANCE Real, unique content applied to the abstract/template system object. Celebrity Celebrity Celebrity
- 116. [SYSTEM] OBJECT INSTANCE Real, unique content applied to the abstract/template system object. We are not so concerned with thinking through ALL the instances. We use instances to stress-test our objects. Celebrity Celebrity Celebrity
- 117. INSTANCES ARE THE COOKIES
- 118. OBJECTS ARE THE COOKIE CUTTERS
- 119. OUR CONCERN ARE THE SYSTEM OBJECTS. We already have the tools for support objects.
- 120. FIVE ELEMENTS OF OBJECTS
- 121. Core content Core content FIVE ELEMENTS OF OBJECTS
- 122. Core content Core content metadata metadata FIVE ELEMENTS OF OBJECTS
- 123. Core content Core content CTA CTA metadata metadata FIVE ELEMENTS OF OBJECTS
- 124. Core content Core content CTA CTA metadata metadata UIUI FIVE ELEMENTS OF OBJECTS
- 125. Core content Core content CTA CTA metadata metadata nested obj nested obj nested obj UIUI FIVE ELEMENTS OF OBJECTS
- 126. Core content Core content CTA CTA metadata metadata nested obj nested obj nested obj UIUI FIVE ELEMENTS OF OBJECTS nested obj
- 127. DEAD METADATA LIVE METADATA NESTED 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
- 128. DEAD METADATA Non-actionable, does not take user to a filtered list of that object. Examples: Date, size, ratings
- 129. METADATA NAV: TAKE ME TO A FILTERED LIST Comedy Movie detail: Wayne’s World
- 130. METADATA NAV: TAKE ME TO A FILTERED LIST Comedy Movie detail: Wayne’s World movie object movie object movie object Movie list, filtered by Comedy Comedy
- 131. METADATA NAV: TAKE ME TO A FILTERED LIST Comedy Movie detail: Wayne’s World movie object movie object movie object Movie list, filtered by Comedy Comedy
- 132. WHAT IF GENRE IS AN OBJECT!? (UPGRADE!) Comedy Movie detail: Wayne’s World
- 133. WHAT IF GENRE IS AN OBJECT!? (UPGRADE!) Comedy Movie detail: Wayne’s World Genre Detail: Comedy movie object movie object movie object movie object
- 134. WHAT IF GENRE IS AN OBJECT!? (UPGRADE!) Comedy Movie detail: Wayne’s World Genre Detail: Comedy movie object movie object movie object movie object
- 135. NESTED OBJECT NAV: TAKE ME TO ANOTHER OBJECT Comedy Movie detail: Wayne’s World Mike Myers Dana Carvey
- 136. NESTED OBJECT NAV: TAKE ME TO ANOTHER OBJECT Comedy Movie detail: Wayne’s World Mike Myers Dana Carvey Profile detail: Dana Carvey movie object movie object movie object movie object
- 137. NESTED OBJECT NAV: TAKE ME TO ANOTHER OBJECT Comedy Movie detail: Wayne’s World Mike Myers Dana Carvey Profile detail: Dana Carvey movie object movie object movie object movie object
- 144. GAME TIME! “Am I an object?”
- 145. SONG
- 146. SONG YES!
- 147. “VIVA LAS VEGAS”
- 149. ALBUM COVER IMAGE
- 151. ALBUM
- 152. ALBUM YES!
- 153. ARTIST BIO
- 154. ARTIST BIO NO
- 155. PLAYLIST
- 156. PLAYLIST YES!
- 157. THE SIDE BAR NAVIGATION
- 158. THE SIDE BAR NAVIGATION Nope
- 159. LADY GAGA
- 160. LADY GAGA Nope
- 161. POPULARITY RATING
- 163. lucy
- 164. lucy movie
- 165. lucy Actress movie
- 172. NOW LET’S DO AN EXAMPLE: HOT SAUCERY A destination for all things hot sauce: specialty blends, ingredients, and expertise
- 173. STEP 1: Extract objects STEP 2: Element audit STEP 3: Object nesting STEP 4: Forced ranking STEP 5: CTA inventory STEP 6: Sketching sprints STEP 7: Prototyping ORDER OF OPERATIONS
- 174. 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.
- 175. 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.
- 176. 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.
- 177. 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.
- 178. 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.
- 179. 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.
- 180. 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.
- 183. Location Sauce Mixologist Ingredient s/tools Classes Recipes year opened Name Street image Address distance from user Phone Number email address inside images history/ blurb name descriptio n (why we love it) priceimages tag/ category Name descriptio n image heat indexprice testimony Mixologist creator Name bio image years with us twitter handle Location works at title descriptio n price type (workshop, ongoing class) date time Location Prerequisit es Name summary date created image Mixologist creator recipe content
- 184. year opened Name Street image Address distance from user Name descriptio n Name name title Name Phone Number image heat index bio image years with us descriptio n (why we love it) price descriptio n summary date created price Location Sauce Mixologist Ingredient s/tools Classes/ Events Recipes email address inside images history/ blurb price testimony twitter handle images tag/ category type (workshop, ongoing class) date time Location Prerequisit es image Mixologist creator recipe content
- 185. year opened Name Street image Address distance from user Name descriptio n Name name title Name Phone Number image heat index bio image years with us descriptio n (why we love it) price descriptio n summary date created price Location Sauce Mixologist Ingredient s/tools Classes/ Events Recipes email address inside images history/ blurb price testimony twitter handle images tag/ category type (workshop, ongoing class) date time Location Prerequisit es image Mixologist creator recipe content Mixologist that work here sauces of the day Classes calendar Mixologist creator Locations available at Class that teaches it Mixologist mentor Location works at Sauce created ingredient s/tools loved Classes teaching recipes posted Sauce featured Mixologist teaching Ingredient s/tools provided Recipes that aligns Sauce (parent) Ingredient s/tools needed Classes that feature Location available at Sauce that use Current classes that teach Mixologist that love Recipes that include
- 186. year opened Name Street image Address distance from user Name descriptio n Name name title Name Phone Number imageheat index bioimage years with us descriptio n (why we love it) price descriptio n summary date created price Location Sauce Mixologist Ingredient s/tools Classes/ Events Recipes email address inside images history/ blurb price testimony twitter handle images tag/ category type (workshop, ongoing class) date time Mixologist creator Location works at Location Prerequisit es image Mixologist creator recipe content Mixologist that work here sauces of the day Classes calendar Locations available at Class that teaches it Sauce created ingredient s/tools loved Classes teaching recipes posted Location available at Sauce that use Current classes that teach Recipes that include Sauce featured Mixologist teaching Ingredient s/tools provided Sauce (parent) Ingredient s/tools needed Recipes that aligns Classes that feature
- 187. Name Street image Address distance from user Name descriptio n Name name title Name Phone Number imageheat index bioimage years with us descriptio n (why we love it) price descriptio n summary date created price Location Sauce Mixologist Ingredient s/tools Classes/ Events Recipes email address inside images price testimony images tag/ category date time Mixologist creator Location works at Location image Mixologist creator recipe content sauces of the day Locations available at Sauce created Classes teaching recipes posted Location available at Sauce that use Current classes that teach Sauce featured Mixologist teaching Sauce (parent) Ingredient s/tools needed Get Directions Contact BuyShare Share Share Share Share Share Share Send testimony upvote? Sign up/ register purchase invite friends? add to box print shopping list
- 188. Name Street image Address distance from user Name descriptio n Name name title Name Phone Number imageheat index bioimage years with us descriptio n (why we love it) price descriptio n summary date created price Location Sauce Mixologist Ingredient s/tools Classes/ Events Recipes email address inside images price testimony images tag/ category date time Mixologist creator Location works at Location image Mixologist creator recipe content sauces of the day Locations available at Sauce created Classes teaching recipes posted Location available at Sauce that use Current classes that teach Sauce featured Mixologist teaching Sauce (parent) Ingredient s/tools needed Get Directions Contact BuyShare Share Share Share Share Share Share Send testimony upvote? Sign up/ register purchase invite friends? add to box print shopping list MDL MDL MD MDL MDL MD
- 189. NOW IT’S YOUR TURN
- 192. STEP 1: Extract objects STEP 2: Element audit STEP 3: Object nesting STEP 4: Forced ranking STEP 5: CTA inventory STEP 6: Sketching sprints STEP 7: Prototyping ORDER OF OPERATIONS
- 193. STEP 1: EXTRACT OBJECTS OBJECTS ON BLUE!
- 194. STEP 1: EXTRACT OBJECTS 1. Read over the goals and the user research as a team, paying close attention to nouns. 2. Discuss potential objects. Start circling ones you think might be part of our new system. 3. Watch out for example nouns, super-abstract nouns, or nouns that are fancy words for lists like “map.” 4. Write each object on a BLUE Sticky. You should have about 4-7 objects. OBJECTS ON BLUE!
- 195. STEP 2: ELEMENT AUDIT OBJECTS ON BLUE! CORE CONTENT ON YELLOW CORE CONTENT ON YELLOW METADATA ON RED CORE CONTENT ON YELLOW NESTED OBJECTS ON BLUE!
- 196. STEP 2: ELEMENT AUDIT 1. Taking one object at a time, start cataloging all the elements that should make up this object. 2. Remember! One element on each sticky! 3. Core content: text, image, video 4. Metadata: will a user sort or filter objects by this? 5. Don’t get to hung up on Yellow vs Red. 6. If an element comes up that’s actually another object - put it on a BLUE STICKY! OBJECTS ON BLUE! CORE CONTENT ON YELLOW CORE CONTENT ON YELLOW METADATA ON RED CORE CONTENT ON YELLOW NESTED OBJECTS ON BLUE!
- 197. Describes the meat Dates, prices, location Format/taxonomy rules Need a specific mechanism for sort/filter. Could provide nav from detail template to list! The meat Text strings and media Maybe size restriction? Could be keyword searchable… Does not provide nav from detail template. CORE CONTENT METADATA/FACETS
- 198. STEP 3: SERIOUS NESTING OBJECT CORE CONTENT ON YELLOW CORE CONTENT ON YELLOW METADATA ON RED CORE CONTENT ON YELLOW NESTED OBJECTS ON BLUE! MORE NESTED OBJECTS!! MORE NESTED OBJECTS!!
- 199. STEP 3: SERIOUS NESTING 1. Taking one object at a time, do a series of short thought experiments. How will each of the OTHER objects nest into that object? Some will not have a relationship…but most will! 2. Even think about how that object will nest inside of itself! OBJECT CORE CONTENT ON YELLOW CORE CONTENT ON YELLOW METADATA ON RED CORE CONTENT ON YELLOW NESTED OBJECTS ON BLUE! MORE NESTED OBJECTS!! MORE NESTED OBJECTS!!
- 200. STEP 4: FORCED RANKING OBJECT CORE CONTENT ON YELLOW CORE CONTENT ON YELLOW METADATA ON RED CORE CONTENT ON YELLOW NESTED OBJECTS ON BLUE! MORE NESTED OBJECTS!! MORE NESTED OBJECTS!!
- 201. STEP 4: FORCED RANKING 1. Taking one object at a time, reorder the elements from what you think will be MOST important to the user to the LEAST important. OBJECT CORE CONTENT ON YELLOW CORE CONTENT ON YELLOW METADATA ON RED CORE CONTENT ON YELLOW NESTED OBJECTS ON BLUE! MORE NESTED OBJECTS!! MORE NESTED OBJECTS!!
- 202. STEP 5: CTA INVENTORY OBJECT CORE CONTENT ON YELLOW CORE CONTENT ON YELLOW METADAT ON RED NESTED OBJECTS ON BLUE! MORE NESTED OBJECTS!! ACTIONACTIONN
- 203. STEP 5: CTA INVENTORY 1. Taking one object at a time, brainstorm all actions that might associate with that object. 2.Feel free to make up notation - maybe star a CTA that needs user validation or “#2” a CTA that’s probably future state. OBJECT CORE CONTENT ON YELLOW CORE CONTENT ON YELLOW METADAT ON RED NESTED OBJECTS ON BLUE! MORE NESTED OBJECTS!! ACTIONACTIONN
- 204. STEP 6: OBJECT REPRESENTATION
- 205. STEP 6: OBJECT REPRESENTATION • Sketching! 10 minutes on each object. Play with: • Modules - the top most elements • Detail screens - all elements (do you need it?) • Lists - all instances of an object…how will a user want to sort, filter, and view? (Do you need it? Or should it just come up in search results?)