Designing the User Experience
•
23 j'aime•4,969 vues
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.
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (8)
Similaire à Designing the User Experience
Similaire à Designing the User Experience (20)
Dernier
Dernier (20)
Designing the User Experience
- 1. DESIGNING THE USER EXPERIENCE Marc Escobosa April 2015
- 2. WHAT DOES IT MEAN TO DESIGN AN EXPERIENCE? Source: Reddit
- 3. WHAT’S WITHIN YOUR CONTROL? Source: Reddit
- 5. DESIGN?
- 8. Everyone is a designer.”“ — Tim Brown
- 9. DESIGN PROCESS Define ImplementUnderstand Solve Hypotheses Experiments ValidationScope & Inspiration
- 10. DESIGN PROCESS Define Understand Solve Implement HypothesesExperiments Validation Scope & Inspiration
- 11. SCOPE & INSPIRATION Define & Understand
- 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
- 14. BREAKING IT DOWN actors scenario goals motivations & triggers affordances & obstaclesdesired outcome
- 15. CAN YOU PAINT A PICTURE?
- 16. UNDERSTAND Research & Analyze
- 19. FRAMING YOUR RESEARCH Specific Actionable Practical Courtesy of Erika Hall
- 20. BAD QUESTION What do people think about pets? Courtesy of Erika Hall
- 21. GOOD QUESTION How do single urban adults choose and acquire a pet? Courtesy of Erika Hall
- 22. A WORD ABOUT BIASES Confirmation Sampling Interviewer Social Desirability Anchoring Curse of Knowledge … Source: Wikipedia entry on Cognitive Biases
- 23. THE FIRST PLACE YOU SHOULD LOOK IS IN THE DATA YOU ALREADY HAVE
- 24. BUT THERE ARE THINGS YOUR DATA CAN’T TELL YOU
- 25. WHAT DATA HELPS FIND Correlations Sequences Patterns Frequencies Yes No Intent Rationale Cognitive Frames Almosts
- 26. DATA ANALYSIS
- 29. SOMETIMES YOU JUST HAVE TO ASK PEOPLE WHAT THEY THINK AND WHY
- 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. TYPEFORM
- 32. JOURNEY MAPPING From UX Mag
- 35. Courtesy of Bill Verplank
- 36. ALMOST EVERY GREAT SOLUTION STARTS WITH AN INSIGHT INTO HUMAN NATURE
- 37. FIND YOUR NORTH STAR Your digital hub End car ownership Relentless pursuit of perfection Hawaii starts when you board
- 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.
- 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?
- 43. From a framework developed by Bill Verplank for Music 250a @ Stanford University BUILDING BLOCKS
- 44. From classwork by Celine Perrin for Music 250a @ Stanford University, courtesy of Bill Verplank
- 45. GET THE BIG PICTURE
- 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. 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. 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
- 50. DETAILED DESIGN
- 51. ENVISIONING HOW YOUR SOLUTION WILL WORK
- 52. EPICENTER DESIGN From Getting Real by the 37Signals team, now basecamp.com Start here
- 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. 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. GEEK OUT AS A TEAM
- 56. CRAZY 8S Have everyone sketch 8 distinct solutions in 5 minutes then pick the best ones with dot voting
- 57. CRAZY 8S
- 58. READ THESE
- 60. NOW IT’S TIME TO PUT PIXELS TO SCREEN
- 61. FUNDAMENTALS Layout Language Typography Color Information Interaction
- 63. LANGUAGE Clarity Just enough specificity Credibility No lorem ipsum Consider i18n
- 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. READ THESE
- 67. COLOR
- 68. COLOR
- 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. INFORMATION By Charles Joseph Minard via Edward Tufte
- 71. READ THESE
- 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. CREATING DIMENSION From Google’s Material Design and Erik Kennedy’s 7 Rules for Creating Gorgeous UI Physicality Shadow Bevel
- 75. INTERFACE GUIDELINES From Design Explosions by UX Launchpad on Medium
- 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. OK, SO NOW WHAT?
- 78. SKETCH!
- 79. WIREFRAMES
- 80. GEOMETRY From Design Explosions by UX Launchpad on Medium
- 81. VISUALS
- 82. INVISION
- 83. PROTO.IO
- 84. The only way to experience an experience is to experience it.” “ — Bill Moggridge
- 85. YOU MUST BRING YOUR PROTOTYPE TO LIFE
- 86. DESIGNING FOR TOUCH Physical metaphors Direct manipulation Gestures Rationalized physics Fatigue
- 87. USE AFFORDANCES From Matt Sundstrom
- 90. NAVIGATION PATTERNS Overflow Menus Sticky Headers Swipe Views Cards Floating Controls Loaded GesturesSwipe Commands Basement
- 92. CAPPTIVATE
- 93. READ THIS
- 94. PIXATE
- 95. ORIGAMI 2
- 96. PUTTING IT ALL TOGETHER
- 97. GREAT EXPERIENCES OFTEN SURPRISE YOU IN A GOOD WAY
- 98. HOW WILL YOU DELIGHT? Discover First Experience Habit Formation Pass It On Contribute
- 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. 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. REDUCE CLUTTER
- 102. EVALUATION
- 103. DOES IT WORK?
- 104. USER TESTING
- 105. SUMMARY
- 106. INGREDIENTS FOR GREAT DESIGN
- 107. AN OPEN MIND
- 109. A WILLINGNESS TO ABANDON YOUR IDEAS
- 110. A SPIRIT OF CONTINUOUS IMPROVEMENT
- 111. A DEFT HAND
- 112. HUMILITY