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.

Designing the User Experience

4,523 views

Published on

An end to end deep dive through the process of designing user experiences — especially for mobile and responsive web apps. The presentation covers the design process from defining and understanding the problem through iterative solution sprints where hypotheses are tested with lean prototypes.

This talk was originally prepared for a three hour course on User Experience design for a group of start-ups working with an incubator for whom I serve as a mentor.

Published in: Design
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/qURD } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/qURD } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/qURD } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/qURD } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/qURD } ......................................................................................................................... Download doc Ebook here { https://soo.gd/qURD } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I can see two major upsides in Product Development and Management: (1) looking at business models as part of the product itself and (2) Ux, Ux, Ux!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Designing the User Experience

  1. 1. DESIGNING THE USER EXPERIENCE Marc Escobosa April 2015
  2. 2. WHAT DOES IT MEAN TO DESIGN AN EXPERIENCE? Source: Reddit
  3. 3. WHAT’S WITHIN 
 YOUR CONTROL? Source: Reddit
  4. 4. GOOD DESIGN Useful Usable Desirable
  5. 5. DESIGN?
  6. 6. PRE-EMPTIVE PROBLEM SOLVING
  7. 7. PORTUNISM PRE-EMPTIVE PROBLEM SOLVING OPP
  8. 8. Everyone is a designer.”“ — Tim Brown
  9. 9. DESIGN PROCESS Define ImplementUnderstand Solve Hypotheses Experiments ValidationScope & Inspiration
  10. 10. DESIGN PROCESS Define Understand Solve Implement HypothesesExperiments Validation Scope & Inspiration
  11. 11. SCOPE & INSPIRATION
 Define & Understand
  12. 12. THE PROBLEM SPACE Just offered a job in a new city Need to list house for sale Don’t have an agent Not sure what house is worth Need to move quickly Feeling panicky
  13. 13. WHAT’S YOUR 
 INSPIRATION?
  14. 14. BREAKING IT DOWN actors scenario goals motivations 
 & triggers affordances & obstaclesdesired outcome
  15. 15. CAN YOU PAINT A PICTURE?
  16. 16. UNDERSTAND 
 Research & Analyze
  17. 17. WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY?
  18. 18. RESEARCH SPRINTS AnalyzeHypothesis Experiment 1–3 weeks
  19. 19. FRAMING YOUR RESEARCH Specific Actionable Practical Courtesy of Erika Hall
  20. 20. BAD QUESTION What do people 
 think about pets? Courtesy of Erika Hall
  21. 21. GOOD QUESTION How do single urban adults choose and acquire a pet? Courtesy of Erika Hall
  22. 22. A WORD ABOUT BIASES Confirmation Sampling Interviewer Social Desirability Anchoring Curse of Knowledge … Source: Wikipedia entry on Cognitive Biases
  23. 23. THE FIRST PLACE YOU SHOULD LOOK IS IN THE DATA YOU ALREADY HAVE
  24. 24. BUT THERE ARE THINGS 
 YOUR DATA CAN’T TELL YOU
  25. 25. WHAT DATA HELPS FIND Correlations Sequences Patterns Frequencies Yes No Intent Rationale Cognitive Frames Almosts
  26. 26. DATA ANALYSIS
  27. 27. GENERATING INSIGHTS Embodying Shadowing Interviews Surveys Journaling
  28. 28. ETHNOGRAPHIC RESEARCH
  29. 29. SOMETIMES YOU 
 JUST HAVE TO ASK PEOPLE WHAT THEY THINK AND WHY
  30. 30. QUESTION DESIGN Avoid ambiguous questions Speak their language Don’t ask leading questions Minimize effort required (within reason) Ask enough people Have some open ended questions
  31. 31. TYPEFORM
  32. 32. JOURNEY MAPPING From UX Mag
  33. 33. SOLVE
 Hypothesis → Experiments
  34. 34. HIGH-LEVEL DESIGN
  35. 35. Courtesy of Bill Verplank
  36. 36. ALMOST EVERY 
 GREAT SOLUTION STARTS WITH AN INSIGHT INTO HUMAN NATURE
  37. 37. FIND YOUR NORTH STAR Your digital hub End car ownership Relentless pursuit of perfection Hawaii starts when you board
  38. 38. MEANING PLEASURE BELONGING VALIDATION EFFICIENCY UNIVERSAL DRIVERS
  39. 39. WHAT WE’RE GOOD AT* Language Simple morality Simple physics Simple engineering Simple psychology Spatial recall Number recall Simple probability Simple economics Logical deduction Short term memory Empathy *We need help with everything else.
  40. 40. TECHNICAL CONTEXT
  41. 41. DOES THEIR CONTEXT ALLOW THEM TO DO IT? WHAT MOOD 
 ARE THEY IN? ARE THEY PHYSICALLY
 ABLE TO DO IT? HOW MUCH DO THEY 
 WANT TO ADDRESS THIS? DOES YOUR APP DO WHAT THEY NEED?
  42. 42. ENVIRONMENTAL
 CONTEXT TECHNICAL CONTEXT PHYSICAL ABILITIES EFFECTIVITY EMOTIONAL CONTEXT
  43. 43. From a framework developed by Bill Verplank for Music 250a @ Stanford University BUILDING BLOCKS
  44. 44. From classwork by Celine Perrin for Music 250a @ Stanford University, courtesy of Bill Verplank
  45. 45. GET THE BIG PICTURE
  46. 46. USER JOURNEY Title & Blurb Social buttons 16:9 Foodie TV iPad Design Draft v01 User Journey Mon May 06 2013 GLAM User launches the Foodie TV app. Orientation of loading screen prompts user to turn the device to landscape mode if not already in it. Goal is for app launch to last shorter than 1.5 seconds. 1. Launch the App For first launch, the user is brought to the most recent batch of videos with the first video selected. For subsequent launches, the app attempts to remember the state that user was last in and brings them exactly back to where they were. If a video asset was playing when they last suspended the app, the playhead is placed 2 seconds earlier than where it was and the video is paused. 2. Select the video you want to watch The user watches the video in full screen mode. If the user wants to skip a video, they can swipe to advance to the next video. If the user wants to return to a previous video, they can swipe to go backwards. Videos do not auto play when swiped to. Instead the user must tap to start playing. 3. Watch videos The user can tweet or post a link to the video to Facebook. They can also email a link to the video within the app. In all cases, the resulting link will attempt to launch the app if on an iOS device and take the recipient to the App Store if that is not possible. 4. Share or comment on video Key Anonymous Foodie User Loading State (as fast as possible) Current Scenario Alternative Scenario Play Mode Single Tap Main Screen — Tray closed 16:9 16:9 Pause/Play Toggle Once loading is completed Drag Flick If one or more new batch has been published since the last time you had the top of the video tray visible, then a new batch indicator appears. Tapping on that opens the tray and scrolls the user smoothly to the top of the tray revealing the new batch(es). Each flick snaps to next frame, bounces at end of batch Authenticate / Associate accounts 16:9 Sign in so we know who you are Sign in 16:9 Tweet Share With count incrementation Batch of 5 videos Current video Vertically scrollable tray of past batches Flick down to close Flick up to open tray FoodieTV Identity Most recent batch Last week's batch Title & Blurb 16:9 Batch from 2 weeks ago Tray slides down and scrolls to show batch in which selected video appears Main Screen — Tray open Main Screen — Tray closed with newly selected batch Immediately proceeds into play mode Screen fades, social controls emerge Selected video is highlighted New Batch Indicator (Tap scrolls to top) Pull to refresh also works
  47. 47. THE BIG LIST List every scenario, state, 
 or context that you can possibly imagine the user experiencing. And prioritize them by how much they affect the experience.
  48. 48. BENEFIT OF THE DOUBT I’m sure they’ll fix it Track record Benefitofthedoubt I see where they’re going with this I can’t wait to try that Here we go again They don’t even have my favorite feature! Sure it sounds cool but I’ll believe it when I see it
  49. 49. PROTOTYPE RIGHT VS.
  50. 50. DETAILED DESIGN
  51. 51. ENVISIONING HOW YOUR SOLUTION WILL WORK
  52. 52. EPICENTER DESIGN From Getting Real by the 37Signals team, now basecamp.com Start here
  53. 53. COMMON HEURISTICS Don’t make people think Choose your affordances wisely Great copywriting = great interface Design for touch React immediately Use natural transitions Minimize re-orientation Be forgiving
  54. 54. BEHAVIORAL PATTERNS Safe exploration Instant gratification Satisficing Midstream changes Deferred choices Incremental Construction Habituation Microbreaks Spatial Memory Prospective Memory Streamlined Repetition Social Proof From Designing Interfaces by Jenifer Tidwell
  55. 55. GEEK OUT AS A TEAM
  56. 56. CRAZY 8S Have everyone sketch 8 distinct solutions in 5 minutes then pick the best ones with dot voting
  57. 57. CRAZY 8S
  58. 58. READ THESE
  59. 59. INTERFACE &
 VISUAL DESIGN
  60. 60. NOW IT’S TIME TO 
 PUT PIXELS TO SCREEN
  61. 61. FUNDAMENTALS Layout Language Typography Color Information Interaction
  62. 62. LAYOUT Position Proportion Whitespace
  63. 63. LANGUAGE Clarity Just enough specificity Credibility No lorem ipsum Consider i18n
  64. 64. TYPOGRAPHY Formality Character Legibility & Contrast Appropriateness Flexibility Completeness
  65. 65. TYPOGRAPHY clear, objective, modern, universal cold, impersonal, boring + – modern yet human, clear yet empathetic wishy-washy and fake + – classic, readable, traditional± distinctive overly conspicuous + – strong, stylish, dynamic too conspicuous to be classic, too stodgy to be modern. + –
  66. 66. READ THESE
  67. 67. COLOR
  68. 68. COLOR
  69. 69. SIGNPOSTS Design in grayscale first The fewer colors, the better Select colors with HSB Choose your contrasts wisely Consider dark grey Restraint goes a long way
  70. 70. INFORMATION By Charles Joseph Minard via Edward Tufte
  71. 71. READ THESE
  72. 72. INTERACTION Familiar Discoverable Responsive Consistent
  73. 73. SIGNPOSTS People are very familiar with 3-D objects Light typically comes from the sky Our eyes gravitate to motion and contrast From Erik Kennedy’s 7 Rules for Creating Gorgeous UI
  74. 74. CREATING DIMENSION From Google’s Material Design and Erik Kennedy’s 7 Rules for Creating Gorgeous UI Physicality Shadow Bevel
  75. 75. INTERFACE GUIDELINES From Design Explosions by UX Launchpad on Medium
  76. 76. TRUISMS People spend more time in other apps than yours Visual prioritization helps guide attention People cannot tap what they cannot reach Larger targets are easier to hit Like things are expected to behave alike There’s rarely such a thing as too much feedback
  77. 77. OK, SO NOW WHAT?
  78. 78. SKETCH!
  79. 79. WIREFRAMES
  80. 80. GEOMETRY From Design Explosions by UX Launchpad on Medium
  81. 81. VISUALS
  82. 82. INVISION
  83. 83. PROTO.IO
  84. 84. The only way to experience an experience is to experience it.” “ — Bill Moggridge
  85. 85. YOU MUST BRING YOUR 
 PROTOTYPE TO LIFE
  86. 86. DESIGNING FOR TOUCH Physical metaphors Direct manipulation Gestures Rationalized physics Fatigue
  87. 87. USE AFFORDANCES From Matt Sundstrom
  88. 88. NAVIGATION DESIGN Recognizable Consistent Accessible Familiar Prevalent Secondary
  89. 89. WAYFINDING Circulation systems Spatial cues Signage
  90. 90. NAVIGATION PATTERNS Overflow Menus Sticky Headers Swipe Views Cards Floating Controls Loaded GesturesSwipe Commands Basement
  91. 91. MOTION DESIGN Rational Informative Grounding Fluid Emotive Responsive Restrained
  92. 92. CAPPTIVATE
  93. 93. READ THIS
  94. 94. PIXATE
  95. 95. ORIGAMI 2
  96. 96. PUTTING IT ALL TOGETHER
  97. 97. GREAT EXPERIENCES 
 OFTEN SURPRISE YOU 
 IN A GOOD WAY
  98. 98. HOW WILL YOU DELIGHT? Discover First Experience Habit Formation Pass It On Contribute
  99. 99. RECIPE Identify the conceptual frames that most closely match your user’s mindset Figure out who does that frame well Borrow heavily from it —
 adjusting it to your context Test it and repeat
  100. 100. Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away.” “ — Antoine de Saint-Exupery
  101. 101. REDUCE CLUTTER
  102. 102. EVALUATION
  103. 103. DOES IT WORK?
  104. 104. USER TESTING
  105. 105. SUMMARY
  106. 106. INGREDIENTS 
 FOR GREAT DESIGN
  107. 107. AN OPEN MIND
  108. 108. AN EVIDENCE-BASED ORIENTATION
  109. 109. A WILLINGNESS TO 
 ABANDON YOUR IDEAS
  110. 110. A SPIRIT OF 
 CONTINUOUS 
 IMPROVEMENT
  111. 111. A DEFT HAND
  112. 112. HUMILITY

×