Recommandé
Recommandé
Contenu connexe
Plus de ux singapore
Plus de ux singapore (20)
Dernier
Dernier (20)
UXSG#8 Workshop
- 2. 2 I would not give a fig for the simplicity this side of complexity, but I would give my life for the simplicity on the other side of complexity. Oliver Wendell Holmes Jr.
- 4. 4
- 5. 5
- 6. 6
- 7. 7
- 9. 9
- 10. 10
- 11. 11
- 13. Donald Norman 13 Simplicity is not the answer
- 14. Leonardo Da Vinci 14 Simplicity is the ultimate sophistication
- 15. Simplicity is an experience 15
- 17. 17
- 18. 18
- 19. How it feels to use 19 How it’s engineered How it looks
- 20. 20
- 23. Nov 2013 GO 23
- 24. May 2012 GO 24
- 25. May 2013 Apr 2013 Mar 2013 Feb 2013 Jan 2013 Dec 2012 25 Simple
- 26. Simplicity = Extreme usability 26
- 27. Efficiency Effectiveness Satisfaction Usability ISO 9241-11 27
- 28. Efficiency Effectiveness Satisfaction Business system 28
- 29. Efficiency Effectiveness Satisfaction Call centre 29
- 30. Efficiency Effectiveness Satisfaction Web site 30
- 32. 32 A B GOMS KLM
- 33. 33 Keying (average typist) PointingHomingMentally preparing Waiting for a response Icons: The Noun Project and Camila Bertoco GOMS KLM M = 1.35 sec K = 0.2 sec H = 0.4 sec P = 1.1 sec R = ?
- 34. 34 A B GOMS KLM Put hand on mouse Point to radio button Click Point to text field Click Move hand to keyboard Enter temperature (31) Put hand on mouse Point to text field Click Move hand to keyboard Enter temperature (31) 1. Walk through the interface step by step.
- 35. 35 A B GOMS KLM Put hand on mouse Point to radio button Click Point to text field Click Move hand to keyboard Enter temperature (31) Put hand on mouse Point to text field Click Move hand to keyboard Enter temperature (31) 2. List the Mental Preparation (M), Keying (K), Pointing (P), Homing(H) and Response times (R). H P K P K H KK H P K H KK
- 36. 36 A B GOMS KLM 3. Place Ms in front of all Ks and Ps Put hand on mouse Point to radio button Click Point to text field Click Move hand to keyboard Enter temperature (31) Put hand on mouse Point to text field Click Move hand to keyboard Enter temperature (31) H P K P K H KMK H P K H KMK M M M M M M M M
- 37. 37 A B GOMS KLM 4. Delete Ms that appear between Ks Put hand on mouse Point to radio button Click Point to text field Click Move hand to keyboard Enter temperature (31) Put hand on mouse Point to text field Click Move hand to keyboard Enter temperature (31) H P K P K H KMK H P K H KMK M M M M M M M M
- 38. 38 A B GOMS KLM 4. Delete Ms that appear between Ks Put hand on mouse Point to radio button Click Point to text field Click Move hand to keyboard Enter temperature (31) Put hand on mouse Point to text field Click Move hand to keyboard Enter temperature (31) H P K P K H KK H P K H KK M M M M M M M M
- 39. 39 A B GOMS KLM 4. Delete Ms that appear between Ps and Ks (PMK becomes PK) Put hand on mouse Point to radio button Click Point to text field Click Move hand to keyboard Enter temperature (31) Put hand on mouse Point to text field Click Move hand to keyboard Enter temperature (31) H P K P K H KK H P K H KK M M M M M
- 40. 40 A B GOMS KLM Put hand on mouse Point to radio button Click Point to text field Click Move hand to keyboard Enter temperature (31) Put hand on mouse Point to text field Click Move hand to keyboard Enter temperature (31) H P K P K H KK H P K H KK M M M M M M = 1.35 sec K = 0.2 sec H = 0.4 sec P = 1.1 sec R = ?
- 41. 41 A B GOMS KLM Put hand on mouse Point to radio button Click Point to text field Click Move hand to keyboard Enter temperature (31) Put hand on mouse Point to text field Click Move hand to keyboard Enter temperature (31) 0.4 2.45 0.2 2.45 0.2 0.4 1.75 0.4 2.45 0.2 0.4 0.2 M = 1.35 sec K = 0.2 sec H = 0.4 sec P = 1.1 sec R = ? 7.85 3.65
- 42. 42 Enter your Post Code BS1 4ND OK ADDRESS Type your address 22 Queen Square Br| ADDRESS Which is more efficient? 22 Queen Square, Bristol, BS1 4ND
- 43. 43 Keying PointingHomingMentally preparing Waiting for a response Icons: The Noun Project and Camila Bertoco GOMS KLM M = 1.35 sec K = 0.2 sec H = 0.4 sec P = 1.1 sec R = ?
- 44. 22 Queen Sq Bristol BS1 4ND OKOK 20 Queen Sq Bristol, BS1 4ND 21 Queen Sq Bristol, BS1 4ND 22 Queen Sq Bristol, BS1 4ND 23 Queen Sq Bristol, BS1 4ND 22 Queen Sq Bristol, BS1 4ND 44 Enter your Post Code ADDRESS BS1 4ND Choose an address
- 45. 22 Queen Square Br| 22 Queen Sq, Bristol, BS1 4ND 45 ADDRESS 22 Queen Sq, Bristol, BS1 4ND 22 Queen Sq, Bristol, BS1 4ND
- 46. 46 Rules (simplified) Walk through the interface step by step. List the Mental Preparation (M), Keying (K), Pointing (P), Homing(H) and Response times (R). Place Ms in front of all Ks and Ps Delete Ms between Keying characters in a single unit (like a word or a sentence) But keep the first M (thinking what to type). Delete Ms that come between Pointing and Keying (so PMK becomes PK) M = 1.35 sec K = 0.2 sec H = 0.4 sec P = 1.1 sec R = ?
- 47. 22 Queen Sq Bristol BS1 4ND OKOK 20 Queen Sq Bristol, BS1 4ND 21 Queen Sq Bristol, BS1 4ND 22 Queen Sq Bristol, BS1 4ND 23 Queen Sq Bristol, BS1 4ND 22 Queen Sq Bristol, BS1 4ND 47 Enter your Post Code ADDRESS M Figure out what to do H Put hand on mouse P Move the mouse into position K Click into the text field H Put hand on keyboard MKKKKKKK Remember and Enter Post Code M Figure out what to do H Put hand on mouse P Move the mouse into position and click OK R Wait for the system to refresh (0. 5 seconds) M Figure out what to do P Move the mouse into position K Click the drop down list M Figure out what to do P Move the mouse into position K Click on the correct item R Wait for the system to refresh (0. 5 seconds) M Check the address is correct TOTAL = 16.5 seconds 6 points where you figure out what to do (M) BS1 4ND Choose an address
- 48. 22 Queen Square Br| 22 Queen Sq, Bristol, BS1 4ND 48 ADDRESS 22 Queen Sq, Bristol, BS1 4ND 22 Queen Sq, Bristol, BS1 4ND M Figure out what to do H Put hand on mouse P Move the mouse into position K Click into the text field H Put hands on keyboard MKKKKKKKKKKKKKKKKKK Enter address M Figure out what to do H Put hand on mouse P Move the pointer into position K Click on the address M Check the address is correct TOTAL = 12.8 seconds 4 points where you figure out what to do (M)
- 50. 50 Think of an experience that felt complicated What was it? What made it feel like that?
- 51. Expert Mainstreamer Focus on details Focus on goals Perfection Completion Precise control Ease of control Principles Examples, stories Take it apart, explore Afraid of breaking it Detailed mental model Loose mental model Invest time in learning What does RFTM mean? 51
- 52. Not everyone wants simplicity 52
- 53. 53
- 54. 54
- 55. 55
- 56. 56 Phase 1 name Description of phase this phase in the users journey Phase 2 name Description of phase this phase in the users journey Phase 3 name Description of phase this phase in the users journey Phase 4 name Description of phase this phase in the users journey Phase 5 name Description of phase this phase in the users journey An item needs replaceing How can we support our customers? Customeractions Ask what I need Ask what to look for in a product Ask where to look View forums Ask what they have used before Ask about previous experience Ask how much it should cost Show to partner Discover I'm pregnant Needs have changed Receives a lot of disposable income An item needs replaceing Learns about and event -Birth -Birthday Realise this is realy complicated Realise this is realy complicated Ask friends and family for advice Ask friends and family for advice Look for advice online Look for advice online Asks what they would like Asks what they would like Uses knowledge gained from previous purchases Ask friends and family for opinions Ask friends and family for opinions Look at catalogues Look at catalogues Searches for specific product that they have bought before Doesn't find it Doesn't find it Search for d specifics that match needs Is it the right size Is it the right colour What's the quality like Search for preferred brands Research online Research online Looks for offers and deals Look for best sellers Searches for specific item or brand Is it the right size Is it the right colour What's the quality like Compare specifics Compare specifics Compare cost Compare cost Compare user ratings Compare user ratings Compare price with other products Compare product specifics against my needs Read impartial reviews on chosen product Show choice to third party Show choice to third party Ask parent if gift is suitable for child Ask if its suitable Purchase process What the user is thinking What the user is thinking What the user is thinking What the user is thinking What the user is thinking What the user is thinking What the user is thinking What the user is thinking Customeremotions Customer Experience Map What customers do when purchasing For a specific item For a specific brand Trying stuff they have got Ask friends and family for advice Notice what people in the street have got Look for advice online Realises specific needs for product Learn brands Should I buy new? Look at specific detail of product Try the product Ask for advice Research in store Research in store See what the supermarket sells See what the supermarket sells See what the supermarket sells Consider second hand Check competitor prices on phone View forums and social networks Compare cost Talk to other people who already own products Show to Gifter Is it safe I don't want to spend too much Compare user ratings Decide which one I Prefer What the user is thinking User type Description of of typical user behaviour and their information needs. Include what difficulties they normally have and anything that could potentially influence them User type Description of of typical user behaviour and their information needs. Include what difficulties they normally have and anything that could potentially influence them User type Description of of typical user behaviour and their information needs. Include what difficulties they normally have and anything that could potentially influence them User type Description of of typical user behaviour and their information needs. Include what difficulties they normally have and anything that could potentially influence them What the user is thinking Gap analysis How to support customers in this phase How to support customers in this phase How to support customers in this phase How to support customers in this phase How to support customers in this phase How to support customers in this phase How to support customers in this phase How to support customers in this phase How to support customers in this phase How to support customers in this phase How to support customers in this phase How to support customers in this phase How to support customers in this phase How to support customers in this phase How to support customers in this phase How to support customers in this phase How to support customers in this phase How to support customers in this phase How to support customers in this phase How to support customers in this phase
- 57. Thinking like an expert 57
- 58. 58
- 59. 59
- 60. 60
- 62. 62
- 63. 63
- 64. Feels simple to my (mainstream) users 64
- 65. 65 Your turn
- 67. On/Off Quick OSD (On-Screen Display menu) FL Select (change the display on DVD player) Open/Close (Eject DVD) Advanced Disc Review (Review playlist) AV Enhancer (Adjust audio and video) Repeat (Repeat play) Multi Re-Master (Improve audio quality) Numeric Keypad Depth Enhancer (Reduce picture ‘noise’) Manual Skip (Skip 30 seconds forward) Quick Replay (Skip back a few seconds) Cancel Skip Forward Skip Back Slow Forward Slow Back Stop Pause Play Direct Navigator/Top Menu (Main menu) Play List/Menu (Show a disk menu or play list) Functions (Change on screen menu) Return (Return to previous menu) Up Arrow Down Arrow Left Arrow Right Arrow Enter Subtitle Audio (Change soundtracks) Angle/Page (Change angle/advance still pictures) Setup (Quick setup menu) Play Mode (All/group/random play) Play Speed (Changes play speed) Zoom Group (Selects groups of items to play) 67
- 68. 68
- 69. #1 Remove 69
- 70. 70
- 71. Perfection is achieved not when there is nothing more to add but when there is nothing more to take away 71 Antoine de Saint Exupery
- 73. 73
- 74. 74
- 75. Expert Mainstreamer Focus on details focus on goals Precise control Ease of control Perfection Good enough Principles Examples, stories Deferred gratification i want it now! invest time in learning What does RFTM mean? 75
- 76. 76
- 77. 77 Rules for ‘Remove’ Features that add steps for unneeded fine control Multiple ways of doing the same thing Features that are responsible for a lot of errors Unnecessary options and preferences Visual clutter ‘Nice to haves’ that no one will miss
- 78. 78 A B 247
- 80. 80 BUY!
- 81. #2 Organise 81
- 82. 82
- 83. Ready? 83
- 84. 19 7 2 6 4 83 5 84
- 85. ? 85
- 86. Ready? 86
- 87. 1 2 3 4 5 6 7 8 9 87
- 88. ? 88
- 89. 89
- 90. 90
- 91. 91
- 92. 92
- 93. 93
- 94. 94
- 95. 95
- 96. 96 Projects Photos Garden Tax Travel School Credit Music Video Boat Bike Car
- 97. 97 Finance Office Home Projects Photos Garden
- 98. 98 Rules for ‘Organise’ Follow patterns that the user knows Clearly frame your terms of reference Simple, consistent groupings Highlight the single most important thing Don’t force the user to learn codes
- 99. #3 Hide 99
- 100. 100
- 101. 101
- 102. 102
- 103. 103
- 104. 104
- 105. 105
- 106. 106
- 107. 107
- 108. 108
- 109. 109 Rules for ‘Hide’ Organise around patterns of use, not frequency Look for behaviours that signal patterns of use Let users go from general to specific Ensure mainstreamer tasks are clearly visible Ensure next steps are clearly visible Never penalise errors or experiments - undo!
- 110. #4 Displace 110
- 111. 111
- 113. LONDON OXFORD STRATFORD-UPON-AVON BATH The Roman Baths Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Mon-Fri 0900-1830 (includes Bank Holidays) Sat-Sun 0900-1730 Christmas: Closed £10 Adults, £5 Children / Student / Over 65 Allow 1 hour minimum Add this My Travel Plan 113
- 114. LONDON OXFORD STRATFORD-UPON-AVON BATH LOCATION ACTIVITY TIME Bath Excelsior Hotel N/A Bath The Roman Baths 0930-1030 Bath Train to Oxford 1042-1153 Oxford The King’s Head 1230-1400 Oxford Punting 1415-1515 Oxford Ashmolean Museum 1530-1700 Oxford Train to London 1722-1835 My Travel Plan The Roman Baths Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Mon-Fri 0900-1830 (includes Bank Holidays) Sat-Sun 0900-1730 Christmas: Closed £10 Adults, £5 Children / Student / Over 65 Allow 1 hour minimum Add this 114
- 115. LONDON OXFORD STRATFORD-UPON-AVON BATH LOCATION ACTIVITY TIME Bath Excelsior Hotel N/A Bath The Roman Baths 0930-1030 Bath Train to Oxford 1042-1153 Oxford The King’s Head 1230-1400 Oxford Punting 1415-1515 Oxford Ashmolean Museum 1530-1700 Oxford Train to London 1722-1835 My Travel Plan 115
- 116. No plan survives contact with the enemy Helmuth von Moltke 116
- 119. 119
- 120. 120 So, in order: 1. Displace 2. Remove 3. Organise 4. Hide How can you apply that?
- 121. 121 BONUS!
- 122. The trouble with simplicity is... it’s boring. (Right?) 122
- 123. 123 Simplicity does not mean the absence of any decoration. It means that the decor should belong intimately to the design proper, and that anything foreign to it should be taken away. Paul Jacques Grillo
- 126. 126 Name of product / service Practical: it makes Simpler Emotional: it makes me feel Values: What it says about me Experience Cheat Sheet
- 127. 127 Name of product / service Practical: it makes Simpler Emotional: it makes me feel Values: What it says about me Experience CHeat Sheet Photojojo Buying Photo supplies Playful i’m Creative
- 128. 128
- 129. 129
- 130. 130 Name of product / service Practical: it makes Simpler Emotional: it makes me feel Values: What it says about me Experience Cheat Sheet
- 131. 131 Name of product / service Practical: it makes Simpler Emotional: it makes me feel Values: it Shows i believe in Brand Cheat Sheet Phase 1 name Description of phase this phase in the users journey Phase 2 name Description of phase this phase in the users journey Phase 3 name Description of phase this phase in the users journey Phase 4 name Description of phase this phase in the users journey Phase 5 name Description of phase this phase in the users journey An item needs replaceing How can we support our customers? Customeractions Ask what I need Ask what to look for in a product Ask where to look View forums Ask what they have used before Ask about previous experience Ask how much it should cost Show to partner Discover I'm pregnant Needs have changed Receives a lot of disposable income An item needs replaceing Learns about and event -Birth -Birthday Realise this is realy complicated Realise this is realy complicated Ask friends and family for advice Ask friends and family for advice Look for advice online Look for advice online Asks what they would like Asks what they would like Uses knowledge gained from previous purchases Ask friends and family for opinions Ask friends and family for opinions Look at catalogues Look at catalogues Searches for specific product that they have bought before Doesn't find it Doesn't find it Search for d specifics that match needs Is it the right size Is it the right colour What's the quality like Search for preferred brands Research online Research online Looks for offers and deals Look for best sellers Searches for specific item or brand Is it the right size Is it the right colour What's the quality like Compare specifics Compare specifics Compare cost Compare cost Compare user ratings Compare user ratings Compare price with other products Compare product specifics against my needs Read impartial reviews on chosen product Show choice to third party Show choice to third party Ask parent if gift is suitable for child Ask if its suitable Purchase process What the user is thinking What the user is thinking What the user is thinking What the user is thinking What the user is thinking What the user is thinking What the user is thinking What the user is thinking Customeremotions Customer Experience Map What customers do when purchasing For a specific item For a specific brand Trying stuff they have got Ask friends and family for advice Notice what people in the street have got Look for advice online Realises specific needs for product Learn brands Should I buy new? Look at specific detail of product Try the product Ask for advice Research in store Research in store See what the supermarket sells See what the supermarket sells See what the supermarket sells Consider second hand Check competitor prices on phone View forums and social networks Compare cost Talk to other people who already own products Show to Gifter Is it safe I don't want to spend too much Compare user ratings Decide which one I Prefer What the user is thinking User type Description of of typical user behaviour and their information needs. Include what difficulties they normally have and anything that could potentially influence them User type Description of of typical user behaviour and their information needs. Include what difficulties they normally have and anything that could potentially influence them User type Description of of typical user behaviour and their information needs. Include what difficulties they normally have and anything that could potentially influence them User type Description of of typical user behaviour and their information needs. Include what difficulties they normally have and anything that could potentially influence them What the user is thinking Gap analysis How to support customers in this phase How to support customers in this phase How to support customers in this phase How to support customers in this phase How to support customers in this phase How to support customers in this phase How to support customers in this phase How to support customers in this phase How to support customers in this phase How to support customers in this phase How to support customers in this phase How to support customers in this phase How to support customers in this phase How to support customers in this phase How to support customers in this phase How to support customers in this phase How to support customers in this phase How to support customers in this phase How to support customers in this phase How to support customers in this phase
- 132. 132 Step by step 1. Displace 2. Remove 3. Organise 4. Hide 5. Add character
- 133. No matter how cool your user interface… ...it would be better if there were less of it 133 Alan Cooper
- 134. 134 @gilescolborne