Object-Oriented UX

Object-Oriented UX

A session by Sophia Voychehovski at Revolve Conference 2016

48c098b6579220a67a6ba949be6e4b5a?s=128

Revolve Conference

October 28, 2016
Tweet

Transcript

  1. OBJECT-ORIENTED UX @REVOLVECONF

  2. RESPONSIVE OR NOT?

  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. SOPHIA VOYCHEHOVSKI @sophiaVUX sophia@rewiredUX.com

  12. THE SIMPLICITY IMPERATIVE 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)
  13. THE SIMPLICITY IMPERATIVE 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)
  14. OOUX ≠ MODULAR DESIGN

  15. OOUX ≠ MODULAR DESIGN OOUX informs MODULAR DESIGN

  16. None
  17. OBJECT MODEL

  18. OBJECT MODEL MODULE/PATTERN LIBRARY

  19. OBJECT: “Performance”

  20. OBJECT: “Performance” MODULE: “Calendar item” MODULE: “Landing Page tile” MODULE:

    “sidebar module”
  21. OBJECT: “Performance” MODULE: “Calendar item” MODULE: “Landing Page tile” MODULE:

    “sidebar module” USER’S MENTAL MODEL OF THE REAL WORLD: OOUX
  22. 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
  23. WHAT IS OOUX?

  24. OBJECT ORIENTED PROGRAMMING A programming language model organized around objects

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

    rather than "actions" and data rather than logic. UX design
  26. 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.
  27. THE PRACTICE OF OOUX…

  28. THE PRACTICE OF OOUX… • STARTS with defining the system

    of real-world objects that make up a user’s mental model of the problem. • ENSURES the anatomy of every object is crystal clear before wireframes or visual design begins. • ROOTS every feature or interaction in a well-defined object.
  29. Explore Rate Purchase Invite Movie Actor Review Movie Actor Review

  30. Explore Rate Purchase Invite Movie Actor Review Movie Actor Review

  31. Explore Rate Purchase Invite Movie Actor Review Movie Actor Review

  32. Explore Rate Purchase Invite Movie Actor Review Movie Actor Review

  33. HOLD THE PHONE. DO USERS THINK IN OBJECTS?

  34. None
  35. None
  36. None
  37. None
  38. None
  39. food fridge counter back splash clutter cooking clean cooking food

    oven food clean up cutting bake milk fire utensil microwav e fridge sink knife fork microwav e appliance tomato fridge smells smell knife pot pan oven stirring fridge sink microwav e 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
  40. None
  41. Shoes Appalachi an 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 mountain s dirt rocks trees trees shoes trail boots rocks hill trees mountain boots trees camping camping camping walking walking climbing uphill exhaustin g hot green
  42. WHY OOUX?

  43. None
  44. REASON 1: “The navigation is your fire escape.”

  45. None
  46. REASON 2: Consistent object representation for efficiency and maintainability

  47. REASON 2: Consistent object representation for efficiency and maintainability AND

    BETTER USER EXPERIENCE!
  48. Map view Grid view

  49. Google Docs Google Drive

  50. Search results: Less Map Search results: Mo’ Map+Flyout

  51. Search preview Search Results Connections AxureWorld Group page Axure Company

    page
  52. Search preview Search Results Connections AxureWorld Group page Axure Company

    page
  53. Search preview Search Results Connections AxureWorld Group page Axure Company

    page
  54. Search preview Search Results Connections AxureWorld Group page Axure Company

    page
  55. Flyout on Axure Company Page

  56. Axure Company page Flyout on Axure Company Page

  57. Axure Company page Flyout on Axure Company Page

  58. Homepage Search results

  59. CONSISTENT OBJECT REPRESENTATION

  60. Fashion landing page homepage search results grid Search results list

  61. Featured Search preview, search results, “Design” landing page

  62. Art Basel’s Curated Page

  63. Projects I’ve backed

  64. None
  65. Pledged $200 for - The Woodieful Chair - Personalized thank

    you card Est. Delivery August 2016 got it! 2 messages June 8, 2016 +
  66. 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
  67. WHAT EXACTLY IS AN OBJECT?

  68. OBJECTS ARE THE COOKIE CUTTERS

  69. INSTANCES ARE THE COOKIES

  70. lucy

  71. lucy movie

  72. lucy Actress movie

  73. lucy news story N Actress movie

  74. None
  75. None
  76. None
  77. None
  78. FOUR TYPES OF OBJECTS ELEMENTS

  79. FOUR TYPES OF OBJECTS ELEMENTS CORE CONTENT

  80. FOUR TYPES OF OBJECTS ELEMENTS CORE CONTENT METADATA METADATA

  81. FOUR TYPES OF OBJECTS ELEMENTS CORE CONTENT METADATA METADATA CTA

  82. FOUR TYPES OF OBJECTS ELEMENTS CORE CONTENT METADATA METADATA CTA

    NESTED OBJECT NESTED OBJECT NESTED OBJECT
  83. FOUR TYPES OF OBJECTS ELEMENTS CORE CONTENT METADATA METADATA CTA

    NESTED OBJECT NESTED OBJECT NESTED OBJECT NESTED OBJ
  84. NOW LET’S DO IT: HOT SAUCERY A destination for all

    things hot sauce: specialty blends, ingredients, and expertise
  85. 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
  86. 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.
  87. 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.
  88. 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.
  89. 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.
  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.
  92. 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. Locations Sauces Mixologist s Ingredient s/tools Classes Recipes

  94. Locations Sauces Mixologist s Ingredient s/tools Classes Recipes

  95. 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
  96. 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
  97. 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
  98. 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
  99. 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
  100. 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
  101. 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
  102. 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
  103. 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
  104. 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
  105. MODULE DETAIL LIST

  106. MODULE DETAIL LIST

  107. MODULE DETAIL LIST

  108. 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
  109. 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
  110. 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
  111. Mixologist creator Name bottle $ shot heat index price

  112. 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
  113. 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
  114. None
  115. None
  116. None
  117. www.rewiredux.com/ooux (PSST - I love teaching this. I do workshops.

    Let’s talk.) (And ONE MORE THING! I’m making a game! Want to test it?)
  118. SOPHIA VOYCHEHOVSKI @sophiaVUX sophia@rewiredUX.com