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.

Consistency in UX

475 views

Published on

Beyond the buzzword, consistency is about one of the fundamental tenets of good UX - learnability. But with our user’s journeys spanning so many devices, platforms and touch points, it can seem like an unattainable aspiration for a lot of teams. On the other end of the spectrum, forcing consistency without flexibility is a trap that is easy to fall into. This talk will explore three things you can do to create more consistent experiences across touch points without losing contextual relevancy.

Published in: Design
  • Be the first to comment

Consistency in UX

  1. 1. CONSISTENCY IN UX: BEYOND THE BUZZWORD @NirishShakya, UX Lead (NOW TV) & UX Coach and Trainer
  2. 2. @NIRISHSHAKYACONSISTENCY ▸ UX Lead @ NOWTV ▸ UX Coach & Trainer ▸ Nepalese Australian ABOUT ME
  3. 3. Why consistency?
  4. 4. CONSISTENCY = PREDICTABILITY = LEARNABILITY = USABILITY = GOAL ATTAINMENT
  5. 5. What needs to be consistent?
  6. 6. CONSISTENCY IS MORE THAN SCREEN DEEP
  7. 7. UX HAS LAYERS
  8. 8. 3 LAYERS OF UX CONSISTENCY
  9. 9. CONSISTENCY IN UX @NIRISHSHAKYA THE ELEMENTS OF USER EXPERIENCE Jesse James Garrett, the Elements of User Experience http://www.jjg.net/elements/
  10. 10. CONSISTENCY IN UX @NIRISHSHAKYA THE ELEMENTS OF USER EXPERIENCE (SIMPLIFIED) Interface Interactions Goals
  11. 11. CONSISTENCY IN UX @NIRISHSHAKYA CONSISTENCY IN… Interface Interactions Goals
  12. 12. COLLABORATIVE EARLY & OFTEN
  13. 13. CONSISTENCY IN UX @NIRISHSHAKYA HOW COLLABORATION USUALLY HAPPENS PO UX UI Dev Requirements Wireframes Visuals
  14. 14. CONSISTENCY IN UX @NIRISHSHAKYA HOW IT USED TO HAPPEN WHEN I WAS A DEVELOPER PO UX UI Dev Requirements
  15. 15. CONSISTENCY IN UX @NIRISHSHAKYA Requirements Wireframes Visuals Build SILOED PROCESS DeveloperUI designerUX designerProduct owner Involvement
  16. 16. CONSISTENCY IN UX @NIRISHSHAKYA Wireframes Visuals Build A MORE COLLABORATIVE PROCESS DeveloperUI designerUX designerProduct owner Involvement Collaborative ideation Review Review ReviewReview
  17. 17. DESIGN STUDIO WORKSHOP VIMEO.COM/37861987 Todd Zaki Warfel http://www.disneyclips.com/imagesnewb4/images/snowwhite-dwarfs.png
  18. 18. Always start on paper.
  19. 19. 90% of everything is crap. Sturgeon’s Law
  20. 20. 90% of meetings are crap. According to Sturgeon’s Law
  21. 21. CONSISTENCY IN UX @NIRISHSHAKYA BAD MEETINGS
  22. 22. User Story Mapping, by Jeff Patton (O’Reilly, 2014)
  23. 23. CONSISTENCY IN UX @NIRISHSHAKYA DESIGN STUDIO WORKSHOP Create 5 mins Pitch 2 mins Critique 2 mins
  24. 24. CONSISTENCY IN UX @NIRISHSHAKYA THE DESIGN FUNNEL Idea Idea Idea Idea Idea Idea Idea Idea Idea Idea Idea Easier and cheaper to fix More difficult and expensive to fix Paper sketches Visual designs and UI Wireframes Code
  25. 25. CONSISTENCY IN UX @NIRISHSHAKYA CONSISTENCY IN… Interface Interactions Goals
  26. 26. CONSISTENCY IN UX @NIRISHSHAKYA CONSISTENCY IN… Interface Interactions Goals
  27. 27. @NIRISHSHAKYACONSISTENCY WE USE WIREFRAMES AS A YARD STICK FOR OUR WORK
  28. 28. IT DOESN’T TAKE A GENIUS TO DESIGN A WIREFRAME
  29. 29. @NIRISHSHAKYACONSISTENCY YOUR REALITY (WIREFRAME) IS SHAPED BY YOUR PERSPECTIVE BUSINESS DESIGN TECH BRANDING
  30. 30. @NIRISHSHAKYACONSISTENCY WE NEED CONSISTENCY IN PERSPECTIVE BUSINESS DESIGN TECH BRANDING
  31. 31. @NIRISHSHAKYACONSISTENCY Context of Mobile Interaction http://www.giantant.com/publications/mobile_context_model.pdf USER CONTEXT
  32. 32. MOBILE FIRST BEFORE SCREENS SCENARIOS
  33. 33. CONSISTENCY IN UX @NIRISHSHAKYA WHAT SCENARIOS ARE NOT Use cases User stories
  34. 34. @NIRISHSHAKYACONSISTENCY ▸ Ideal (but plausible) description of the future interaction of the user with the product ▸ Begins with a trigger ▸ Consists of the user’s goal and the things the user does to get to the goal ▸ Created using user research data + storytelling skills ▸ Agnostic to specific solutions or technologies WHAT’S A SCENARIO? Kim Goodwin, Designing in the Digital Age, http://amzn.to/28M7weJ TRIGGER JOURNEY GOAL PERSONA
  35. 35. @NIRISHSHAKYACONSISTENCY ▸ They help imagine the future product. ▸ They are based on persona behaviour and needs. ▸ They capture a sequence of events rather than a set of screens. ▸ They guide design decisions from a user’s perspective and not just opinions and abstract concepts. WHY SCENARIOS? TRIGGER JOURNEY GOAL PERSONA Kim Goodwin, Designing in the Digital Age, http://amzn.to/28M7weJ
  36. 36. EVERYONE IN THE TEAM SHOULD BE ABLE TO TELL THE SAME CONSISTENT STORY ABOUT THE USER INTERACTING WITH THE PRODUCT.
  37. 37. CONSISTENCY IN UX @NIRISHSHAKYA WE NEED A ‘BUY NOW’ BUTTON RIGHT THERE! THIS PAGE NEEDS SOME CROSS-SELL STUFF. HOW ABOUT A FORM TO GET THEIR CONTACT DETAILS? THAT BUTTON NEEDS TO BE BIGGER AND RED! MAKE SURE IT’S A HAMBURGER MENU! HAMBURGER MENUS ARE COOL.
  38. 38. @NIRISHSHAKYACONSISTENCY AN EXAMPLE SCENARIO & REQUIREMENTS Scenario Requirements Harry is logged into his machine on a Friday. He needs to check the resourcing across the region to see how busy each court is. He looks at the information from each court. He looks at what trials are in progress in each court and which trials are due to start in each court. Harry notices that one of the courts has been overbooked. He looks to find why that has happened. He sees which individual trials have been happening in that court. Harry looks for other courts which are underbooked to see if he can move some of the trials from the overbooked court across. He finds a court that is not fully booked and finds the contact details of the listings officer for that court. He contacts the listing officer A list of courts and their schedules List of trials in progress and due to start for each court Booking status for each court Reason for overbooking List of courts and their schedules Ability to move trials between courts or to a holding pen Contact details of the listings officer of a court
  39. 39. @NIRISHSHAKYACONSISTENCY SCENARIOS GIVE US THE CONSISTENCY IN PERSPECTIVE BUSINESS DESIGN TECH BRANDING Scenarios
  40. 40. @NIRISHSHAKYACONSISTENCY BUY AND READ THIS BOOK!
  41. 41. CONSISTENCY IN UX @NIRISHSHAKYA CONSISTENCY IN… Interface Interactions Goals
  42. 42. CONSISTENCY IN UX @NIRISHSHAKYA CONSISTENCY IN… Interface Interactions Goals
  43. 43. ESTABLISH A COMMON VOCABULARY
  44. 44. CONSISTENCY IN UX @NIRISHSHAKYA ELEMENTS OF THE VOCABULARY BRANDING & COLOURS TYPOGRAPHY GRIDS LAYOUT ICONOGRAPHY TONE OF VOICE INTERACTIONS NAVIGATION
  45. 45. STAND ON THE SHOULDERS OF GIANTS http://pre01.deviantart.net/bbac/th/pre/f/2014/095/4/7/ the_subway__follow_the_white_rabbit___by_catalinprecup- d7cc71o.jpg
  46. 46. CONSISTENCY IN UX @NIRISHSHAKYA GOOGLE’S MATERIAL DESIGN https://material.google.com
  47. 47. CONSISTENCY IN UX @NIRISHSHAKYA APPLE DESIGN GUIDELINES https://developer.apple.com/design
  48. 48. CONSISTENCY IN UX @NIRISHSHAKYA BRAD FROST’S ATOMIC DESIGN Atomic Design, Brad Frost, http://atomicdesign.bradfrost.com/
  49. 49. Atomic Design, Brad Frost, http://atomicdesign.bradfrost.com/
  50. 50. The periodic table of HTML elements, Josh Duck
  51. 51. MODULARISE & RE-USE
  52. 52. The evolution of mass production, Ford, http://www.ford.co.uk/experience-ford/Heritage/EvolutionOfMassProduction
  53. 53. CONSISTENCY IN UX @NIRISHSHAKYA OBJECT-ORIENTED PROGRAMMING Animal Properties: brain legs nose Actions: Walk Run Human Properties: brain = 1 legs = 2 nose = 1 Actions: Walk Run Laugh Dog Properties: brain = 1 legs = 4 nose = 1 tail = 1 Actions: Walk Run Wag tail Poodle Properties: brain = 1 legs = 4 nose = 1 tail = 1 Actions: Walk Run Wag tail Boxer Properties: brain = 1 legs = 4 nose = 1 tail = 1 Actions: Walk Run Wag tail
  54. 54. CONSISTENCY IN UX @NIRISHSHAKYA ATOMS Atomic Design, Brad Frost, http://atomicdesign.bradfrost.com/
  55. 55. CONSISTENCY IN UX @NIRISHSHAKYA MOLECULES Atomic Design, Brad Frost, http://atomicdesign.bradfrost.com/
  56. 56. CONSISTENCY IN UX @NIRISHSHAKYA ORGANISMS Atomic Design, Brad Frost, http://atomicdesign.bradfrost.com/
  57. 57. CONSISTENCY IN UX @NIRISHSHAKYA TEMPLATES Atomic Design, Brad Frost, http://atomicdesign.bradfrost.com/
  58. 58. CONSISTENCY IN UX @NIRISHSHAKYA PAGES Atomic Design, Brad Frost, http://atomicdesign.bradfrost.com/
  59. 59. CONSISTENCY IN UX @NIRISHSHAKYA PATTERNS TOOLKIT
  60. 60. UX CONSISTENCY IS ABOUT CREATING A SHARED UNDERSTANDING OF GOALS, INTERACTIONS AND INTERFACE.
  61. 61. CONSISTENCY IN UX @NIRISHSHAKYA CONSISTENCY IS ABOUT CREATING A SHARED UNDERSTANDING OF… Interface Establish a common vocabulary Interactions Scenarios first before screens Goals Collaborate early and often
  62. 62. QUESTIONS? @NirishShakya UX Lead (NOWTV), & UX Coach / Trainer

×