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.

WORKSHOP: Object Oriented UX for Responsive Design


Published on

Slides from UXStrat 2014 and UXweek 2014 workshops. By leveraging Object Oriented UX, we can create simple, efficient, and easy to use digital products that does not rely on the often-ignored persistent navigation.

OOUX is the new IA: we need modular systems, not silo-ed drill downs.

Published in: Design

WORKSHOP: Object Oriented UX for Responsive Design

  2. 2. Sophia Voychehovski @SophiaVUX
  3. 3. Experience/Knowledge in Responsive Design Experience/Knowledge in Sticky Note Artistry Experience/Knowledge in Content Strategy Groups!
  5. 5. AKA: Object Oriented UX In a post-responsive-revolution world
  6. 6. Simplify your design (modular design) Simplify your team (be lean) Prioritize Prioritization (“mobile-only” your MVP) Iterate on fidelity, not functionality (Agile done right) Make time for simple (UX waterfall / “double sprint zero”)
  8. 8. and ACTIONS
  9. 9. Web experiences are the same
  10. 10. 1990’s: static objects Information Architecture 2000s: actions Interaction Design Today: dynamic objects System Design / OOUX
  11. 11. Why Dynamic Objects First? Know your objects to know your actions Hierarchy and priority is now…a priority We’ve Hamburgered our Nav We have to be efficient
  12. 12. GAME TIME! “Which site is responsive?”
  13. 13. An OOUX (or System Design) Vocabulary
  14. 14. Often timely, often updated multiple instantiations is the purpose Evergreen single instantiation talks about the purpose
  15. 15. Object Elements Core content UI UI metadata metadata Core content CTA CTA nested obj nested obj nested obj
  16. 16. Meta Data Nested Objects author location genre
  17. 17. Author User Celebrity > > < Person Template
  18. 18. About us History Mission > > Static Template <
  19. 19. Information Architecture manifests in the persistent navigation - the fire escape, the constant. What static object rely on. Interaction Design manifests in the UI elements and action flows System Design manifests in the design of the dynamic objects and their flow
  20. 20. System Design > Interaction Design Information Architecture > >
  21. 21. Questions? Comments?
  22. 22. System Design in Action
  23. 23. Audit Site Inventory
  24. 24. 1. Dynamic Object Inventory 2. Dynamic Object Manifestation Article title Text Image date Author name bio Related articles shoe size related articles Product Name Comment s User date comment text name name Descriptio n Rating price Reviews related products Manufact urer User rating Name logo SHARE BUY > 3. Dynamic Object Sketching > 4. OOUX Prototyping (Demo) >
  25. 25. How to recognize a dynamic object • It has multiple instances, each with unique content • A user can create one • It could be a search results facet • You can imagine the organization adding or removing one • It has metadata (date posted, length, number of likes) • It’s not specific (Watch out for instances of objects!) If you answered yes to ANY of these, you probably have a dynamic object
  26. 26. GAME TIME! “Am I a dynamic Object?”
  27. 27. YES! Song
  28. 28. Nope “Viva Las Vegas”
  29. 29. App YES!
  30. 30. Nope the footer
  31. 31. Nope the top navigation
  32. 32. Lady Gaga Nope
  33. 33. Nope song popularity
  34. 34. Nope album cover image
  35. 35. Nope album cover
  36. 36. Article title Text Image date Author name bio Related articles shoe size related articles Product Name Comments User date comment text name name Descriptio n Rating price Reviews related products Manufactu rer available or not User rating comment Name logo descriptio n SHARE BUY Products Similar Manufactu rers Event Title Date/time descriptio n Related Product Users going REGISTER Dynamic Object dynamic objects Inventory core content and metadata CTAs profile pic number of likes date history size quantity in stock Blog name branding image descriptio n tags? all articles, archives
  37. 37. Dynamic Content DIynnavmiec Onbjetcot ry Spreadsheet
  38. 38. Column 1: List your dynamic objects Column 2: Does it have a module? (yes/no) Column 3: Does it have a detail page? (yes/no) Column 4: Does it have a list page? (yes/no) Column 6: How critical is the object? (1,2,3) Column 5: First pass of grouping similar objects into templates
  39. 39. = Hierarchy Sketches of D.O. modules, detail pages and lists
  40. 40. Pick 3 Dynamic Objects Phase 1 MVP Has Detail Page Various template groups
  41. 41. Object-Oriented design in Axure (Demo)
  42. 42. Sophia Voychehovski @SophiaVUX