Fundamentals of Object-Oriented UX
•
14 likes•4,044 views
Here's an updated deck from my Introduction to Object-Oriented UX workshop.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Fundamentals of Object-Oriented UX
Similar to Fundamentals of Object-Oriented UX (20)
Recently uploaded
Recently uploaded (20)
Fundamentals of Object-Oriented UX
- 3. GAME TIME! “Which site is responsive?”
- 11. 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)
- 12. OOUX ≠ MODULAR DESIGN OOUX informs MODULAR DESIGN
- 13. OBJECT: “Performance” MODULE: “Calendar item” MODULE: “Landing Page tile” MODULE: “sidebar module”
- 14. 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
- 15. WHAT HAPPENS WHEN A PATTERN LIBRARY DOESN’T HAVE AN OBJECT MODEL TO REPRESENT?
- 17. OOUX = SYSTEM DESIGN
- 18. MODULAR DESIGN = REPRESENTING THE SYSTEM CONSISTENTLY
- 20. WHAT IS OOUX?
- 21. OBJECT ORIENTED PROGRAMMING A programming language model organized around objects rather than "actions" and data rather than logic.
- 22. OBJECT ORIENTED PROGRAMMING A programming language model organized around objects rather than "actions" and data rather than logic. UX design
- 23. OBJECT ORIENTED PROGRAMMING A programming language model organized around objects rather than "actions" and data rather than logic. UX design Data first. THEN logic. Objects first. Then procedures around objects.
- 24. 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. 3. Ensures the anatomy of every object is mapped before sketching, wireframes,interaction design,or visual design begins. 5. Roots every interaction in a well-defined direct object. 6. The missing part of the UX process that defines the NOUNS in our communication
- 25. COMMUNICATION = NOUNS (OBJECTS) VERBS (ACTIONS) MODIFIERS (ADJECTIVES, ADVERBS)
- 26. OOUX IS NOT A NEW PROCESS, IT’S A NEW PIECE OF YOUR PROCESS
- 27. Persistent Navigation Task Flows and Storyboards Discovery/research > > > Page Layouts Build/Test > THEN pattern library
- 28. Persistent Navigation Task Flows and Storyboards Discovery/research > > > Build/Test >Object Oriented UX NOW pattern/module library
- 29. OOUX IS FOR EVERYWHERE
- 30. WHAT IS AN “OBJECT”? In the OOUX world…
- 31. OBJECTS The tangible things that make up the system or the product,directly derived from the user’s mental model of their problem domain. Celebrity image bio birthday Event location image date Article timestamp author body copy • multiple instances (churned out by a CMS,API,or user-generated) • metadata such as location,date,category • Rule of thumb: they are what the user came for. The meat.
- 32. OBJECT INSTANCE Real,unique content applied to the abstract/template system object. Celebrity Celebrity Celebrity
- 33. OBJECTS ARE THE COOKIE CUTTERS
- 34. INSTANCES ARE THE COOKIES
- 35. THREE REASONS TO “GO OO” HUMANS THINK IN OBJECTS DESIGN MODULES FOR A SYSTEM, NOT FOR PAGES. THE NAVIGATION IS YOUR FIRE ESCAPE.
- 36. REASON 1: HUMANS THINK IN OBJECTS (like all humans,not just developer-humans)
- 38. Lesson 1: The world is made of objects that are separate from me. Lesson 2: I can understand the world by categorizing similar objects. Lesson 3: Putting new objects in existing categories VS creating a new category. Lesson 4: Objects from various perspectives. Lesson 5: Continued complexity of categorization, labeling,and understanding of properties. Causeandeffect multistep procedures
- 43. “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
- 44. Browse Compare Select Checkout Products Orders Depts Products Depts My Orders
- 45. Heterarchies Cross-linking Spiderwebs Hamburgered Navs Homepage last Cookie cutters Module libraries,style guides…and OOUX! Hierarchies Deep drill-downs Tree-like sitemaps Glorious Top Navs Homepage first Snowflakes Verb focused THEN NOW
- 46. REASON 2: Consistency for efficiency and maintainability Subtitle REASON 2: OOUX HELPS DESIGN MODULES FOR A SYSTEM, NOT FOR PAGES.
- 48. Map view Grid view
- 49. Google Docs Google Drive
- 51. Search results: Less Map Search results: Mo’ Map+Flyout
- 62. Axure Company page Flyout on Axure Company Page
- 63. AN EASIER LIFE FOR ALL = INTERGRITY MODULES
- 64. Fashion landing page homepage search results grid Search results list
- 65. Featured Search preview, search results, “Design” landing page
- 66. Art Basel’s Curated Page
- 68. Pledged $200 for - The Woodieful Chair - Personalized thank you card Est. Delivery August 2016 got it! 2 messages June 8, 2016 + Only show projects with unreceived perks
- 69. CUSTOM MODULES FOR CONTEXT: INTENTIONAL, CONSERVATIVE, & DEFINITELY NOT “MVP”
- 70. REASON 3: THE NAVIGATION IS YOUR FIRE ESCAPE.
- 71. “…users are increasingly likely to bypass your system’s top-down information architecture; instead they are using web-wide search tools like Google Search, clicking through ads, and clicking links while reading your content via social networks…” 4th edition Polar Bear book
- 72. CONTEXTUAL NAV Crosslinking on crack. Navigation that transports the user via objects modules nested within other objects modules and detail screens, providing relevant entry points to more objects instances. GLOBAL NAV Navigation that transports to the user via a persistent,unchanging mechanism. The OG your way underrated new bestie
- 73. FOUR TYPES OF OBJECTS ELEMENTS CORE CONTENT METADATA METADATA CTA NESTED OBJECT NESTED OBJECT NESTED OBJECT NESTED OBJ
- 74. MOVIE MOVIE MOVIE CITY IMG NAME FAN FAN FAN NESTED OBJECTS = CONTEXTUAL NAV!
- 75. NESTED OBJECTS MATRIX Let’s create some awesome contextual navigation
- 76. 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
- 77. DEAD METADATA Non-actionable, does not take user to a filtered list of that object. Examples: Date, size,ratings
- 78. 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
- 79. WHAT IF GENRE IS AN OBJECT!? (UPGRADE!) Comedy Movie detail: Wayne’s World Genre Detail: Comedy movie object movie object movie object movie object
- 80. 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
- 81. A WAY TO CHEAT AT THIS
- 82. lucy
- 83. lucy movie
- 88. NOW LET’S DO IT: HOT SAUCERY A destination for all things hot sauce: specialty blends,ingredients,and expertise
- 89. 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
- 90. 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.
- 91. 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.
- 93. 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
- 94. 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
- 95. 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
- 96. Location Sauce Mixologist Ingredient s/tools Classes Recipes Mixologist creator Location works at Locations available 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
- 99. 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
- 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 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 atLocations available atLocations available at
- 102. 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
- 103. 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