Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Fundamentals of Object-Oriented UX

1,706 views

Published on

Here's an updated deck from my Introduction to Object-Oriented UX workshop.

Published in: Design
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Fundamentals of Object-Oriented UX

  1. 1. FUNDAMENTALS OF OBJECT-ORIENTED UX
  2. 2. SOPHIA VOYCHEHOVSKI #OOUX @sophiaVUX
  3. 3. GAME TIME! “Which site is responsive?”
  4. 4. RESPONSIVE DESIGN CHANGED EVERYTHING
  5. 5. 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)
  6. 6. OOUX ≠ MODULAR DESIGN OOUX informs MODULAR DESIGN
  7. 7. OBJECT: “Performance” MODULE: “Calendar item” MODULE: “Landing Page tile” MODULE: “sidebar module”
  8. 8. 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
  9. 9. WHAT HAPPENS WHEN A PATTERN LIBRARY DOESN’T HAVE AN OBJECT MODEL TO REPRESENT?
  10. 10. OOUX = SYSTEM DESIGN
  11. 11. MODULAR DESIGN = REPRESENTING THE SYSTEM CONSISTENTLY
  12. 12. OBJECT MODEL MODULE/PATTERN LIBRARY
  13. 13. WHAT IS OOUX?
  14. 14. OBJECT ORIENTED PROGRAMMING A programming language model organized around objects rather than "actions" and data rather than logic.
  15. 15. OBJECT ORIENTED PROGRAMMING A programming language model organized around objects rather than "actions" and data rather than logic. UX design
  16. 16. 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.
  17. 17. 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
  18. 18. COMMUNICATION = NOUNS (OBJECTS) 
 VERBS (ACTIONS)
 MODIFIERS (ADJECTIVES, ADVERBS)
  19. 19. OOUX IS NOT A NEW PROCESS, IT’S A NEW PIECE OF YOUR PROCESS
  20. 20. Persistent Navigation Task Flows and Storyboards Discovery/research > > > Page Layouts Build/Test > THEN pattern library
  21. 21. Persistent Navigation Task Flows and Storyboards Discovery/research > > > Build/Test >Object Oriented UX NOW pattern/module library
  22. 22. OOUX IS FOR EVERYWHERE
  23. 23. WHAT IS AN “OBJECT”? In the OOUX world…
  24. 24. 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.
  25. 25. OBJECT INSTANCE Real,unique content applied to the abstract/template system object. Celebrity Celebrity Celebrity
  26. 26. OBJECTS ARE THE COOKIE CUTTERS
  27. 27. INSTANCES ARE THE COOKIES
  28. 28. THREE REASONS TO “GO OO” HUMANS THINK IN OBJECTS DESIGN MODULES FOR A SYSTEM, NOT FOR PAGES. THE NAVIGATION IS YOUR FIRE ESCAPE.
  29. 29. REASON 1: HUMANS THINK IN OBJECTS (like all humans,not just developer-humans)
  30. 30. 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
  31. 31. “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
  32. 32. Browse Compare Select Checkout Products Orders Depts Products Depts My Orders
  33. 33. 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
  34. 34. REASON 2: Consistency for efficiency and maintainability Subtitle REASON 2: OOUX HELPS DESIGN MODULES FOR A SYSTEM, NOT FOR PAGES.
  35. 35. NO MORE SHAPER-SHIFTER MODULES!
  36. 36. Map view Grid view
  37. 37. Google Docs Google Drive
  38. 38. Homepage Search results
  39. 39. Search results: Less Map Search results: Mo’ Map+Flyout
  40. 40. TITLE •Bullet points
  41. 41. TITLE •Bullet points
  42. 42. Search preview Search Results Connections AxureWorld Group page Axure Company page
  43. 43. Axure Company page Flyout on Axure Company Page
  44. 44. AN EASIER LIFE FOR ALL = INTERGRITY MODULES
  45. 45. Fashion landing page homepage search results grid Search results list
  46. 46. Featured Search preview, search results, “Design” landing page
  47. 47. Art Basel’s Curated Page
  48. 48. Projects I’ve backed
  49. 49. 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
  50. 50. CUSTOM MODULES FOR CONTEXT: INTENTIONAL, CONSERVATIVE, & DEFINITELY NOT “MVP”
  51. 51. REASON 3: THE NAVIGATION IS YOUR FIRE ESCAPE.
  52. 52. “…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
  53. 53. 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
  54. 54. FOUR TYPES OF OBJECTS ELEMENTS CORE CONTENT METADATA METADATA CTA NESTED OBJECT NESTED OBJECT NESTED OBJECT NESTED OBJ
  55. 55. MOVIE MOVIE MOVIE CITY IMG NAME FAN FAN FAN NESTED OBJECTS = CONTEXTUAL NAV!
  56. 56. NESTED OBJECTS MATRIX Let’s create some awesome contextual navigation
  57. 57. 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
  58. 58. DEAD METADATA Non-actionable, does not take user to a filtered list of that object. Examples: Date, size,ratings
  59. 59. 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
  60. 60. WHAT IF GENRE IS AN OBJECT!? (UPGRADE!) Comedy Movie detail: Wayne’s World Genre Detail: Comedy movie object movie object movie object movie object
  61. 61. 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
  62. 62. A WAY TO CHEAT AT THIS
  63. 63. lucy
  64. 64. lucy movie
  65. 65. lucy Actress movie
  66. 66. lucy news story Actress movie
  67. 67. NOW LET’S DO IT: HOT SAUCERY A destination for all things hot sauce: specialty blends,ingredients,and expertise
  68. 68. 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
  69. 69. 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.
  70. 70. 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.
  71. 71. Locations Sauces Mixologist s Ingredient s/tools Classes Recipes
  72. 72. 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
  73. 73. 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
  74. 74. 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
  75. 75. 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
  76. 76. MODULE DETAIL LIST
  77. 77. MODULE DETAIL LIST
  78. 78. 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
  79. 79. 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
  80. 80. 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
  81. 81. 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
  82. 82. 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
  83. 83. Thank you! @SophiaVUX

×