Simplicity2013

29,461 views

Published on

Published in: Technology, Health & Medicine

Simplicity2013

  1. cxpartners 1 @gilescolborne Simplicity
  2. 2 I would not give a fig for the simplicity this side of complexity, Oliver Wendell Holmes Jr.
  3. 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. Advanced simplicity @gilescolborne 3
  5. 141 See it at Amazon US See it at Amazon UK
  6. 4 They’re not rules so much as… guidelines, Giles
  7. 5
  8. 6
  9. 7
  10. 8
  11. http://www.flickr.com/photos/vanf/5321214369/ 9
  12. 10
  13. 11
  14. 12
  15. 13
  16. http://www.flickr.com/photos/iwouldstay/145628030/ 14
  17. Donald Norman 15 Simplicity is not the answer
  18. Leonardo Da Vinci 16 Simplicity is the ultimate sophistication
  19. Simplicity is an experience 17
  20. 18 How it’s engineered
  21. 19
  22. 20
  23. How it feels to use 21 How it’s engineered How it looks
  24. 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? 22 Experienced Novice
  25. Not everyone wants simplicity 23
  26. 24
  27. 25
  28. 26
  29. 27 What users do Tasks Content & features
  30. Thinking like an expert 28
  31. 29
  32. 30
  33. 31
  34. Performance Stress Difficult task Simple task Yerkes-Dodson Law 32
  35. 33
  36. 34
  37. Feels simple to my (mainstream) users 35
  38. 36
  39. What is minimal?GO 37
  40. August 2013 GO 38
  41. August 2013 GO Usable 38
  42. Nov 2013 GO 39
  43. Nov 2013 GO 39
  44. August 2012 GO 40
  45. August 2012 GO 40
  46. Aug 2013 Jul 2013 Jun 2013 May 2013 Apr 2013 Mar 2013 41
  47. Aug 2013 Jul 2013 Jun 2013 May 2013 Apr 2013 Mar 2013 41 Simple
  48. Simplicity = Extreme usability 42
  49. Efficiency Effectiveness Satisfaction Usability ISO 9241-11 43
  50. Efficiency Effectiveness Satisfaction Business system 44
  51. Efficiency Effectiveness Satisfaction Call centre 45
  52. Efficiency Effectiveness Satisfaction Web site 46
  53. Efficiency Effectiveness Satisfaction Web site 46
  54. Efficiency Effectiveness Satisfaction Simplicity 47
  55. 48 A B Which is more efficient?
  56. 49 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 = ?
  57. 50 A B GOMS KLM 1. Walk through the interface step by step.
  58. 50 A B GOMS KLM Think about what to do Put hand on mouse Point to radio button Click Point to text field Click Move hand to keyboard Enter temperature (31) 1. Walk through the interface step by step.
  59. 50 A B GOMS KLM Think about what to do Put hand on mouse Point to radio button Click Point to text field Click Move hand to keyboard Enter temperature (31) Think about what to do Put hand on mouse Point to text field Click Move hand to keyboard Enter temperature (31) 1. Walk through the interface step by step.
  60. 51 A B GOMS KLM Think about what to do Put hand on mouse Point to radio button Click Point to text field Click Move hand to keyboard Enter temperature (31) Think about what to do 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).
  61. 51 A B GOMS KLM Think about what to do Put hand on mouse Point to radio button Click Point to text field Click Move hand to keyboard Enter temperature (31) Think about what to do 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). M H P K P K H KK
  62. 51 A B GOMS KLM Think about what to do Put hand on mouse Point to radio button Click Point to text field Click Move hand to keyboard Enter temperature (31) Think about what to do 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). M H P K P K H KK M H P K H KK
  63. 52 A B GOMS KLM 3. Place Ms in front of all Ks and Ps Think about what to do Put hand on mouse Point to radio button Click Point to text field Click Move hand to keyboard Enter temperature (31) Think about what to do Put hand on mouse Point to text field Click Move hand to keyboard Enter temperature (31) M H P K P K H KMK M H P K H KMK
  64. 52 A B GOMS KLM 3. Place Ms in front of all Ks and Ps Think about what to do Put hand on mouse Point to radio button Click Point to text field Click Move hand to keyboard Enter temperature (31) Think about what to do Put hand on mouse Point to text field Click Move hand to keyboard Enter temperature (31) M H P K P K H KMK M H P K H KMK M M M M M
  65. 52 A B GOMS KLM 3. Place Ms in front of all Ks and Ps Think about what to do Put hand on mouse Point to radio button Click Point to text field Click Move hand to keyboard Enter temperature (31) Think about what to do Put hand on mouse Point to text field Click Move hand to keyboard Enter temperature (31) M H P K P K H KMK M H P K H KMK M M M M M M M M
  66. 53 A B GOMS KLM 4. Delete Ms that appear between Ks Think about what to do Put hand on mouse Point to radio button Click Point to text field Click Move hand to keyboard Enter temperature (31) Think about what to do Put hand on mouse Point to text field Click Move hand to keyboard Enter temperature (31) M H P K P K H KMK M H P K H KMK M M M M M M M M
  67. 54 A B GOMS KLM 4. Delete Ms that appear between Ks Think about what to do Put hand on mouse Point to radio button Click Point to text field Click Move hand to keyboard Enter temperature (31) Think about what to do Put hand on mouse Point to text field Click Move hand to keyboard Enter temperature (31) M H P K P K H KK M H P K H KK M M M M M M M M
  68. 55 A B GOMS KLM 4. Delete Ms that appear between Ps and Ks (PMK becomes PK) Think about what to do Put hand on mouse Point to radio button Click Point to text field Click Move hand to keyboard Enter temperature (31) Think about what to do Put hand on mouse Point to text field Click Move hand to keyboard Enter temperature (31) M H P K P K H KK M H P K H KK M M M M M
  69. 55 A B GOMS KLM 4. Delete Ms that appear between Ps and Ks (PMK becomes PK) Think about what to do Put hand on mouse Point to radio button Click Point to text field Click Move hand to keyboard Enter temperature (31) Think about what to do Put hand on mouse Point to text field Click Move hand to keyboard Enter temperature (31) M H P K P K H KK M H P K H KK M M M M M
  70. 56 A B GOMS KLM Think about what to do Put hand on mouse Point to radio button Click Point to text field Click Move hand to keyboard Enter temperature (31) Think about what to do Put hand on mouse Point to text field Click Move hand to keyboard Enter temperature (31) M H P K P K H KK M 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 = ?
  71. 57 A B GOMS KLM Think about what to do Put hand on mouse Point to radio button Click Point to text field Click Move hand to keyboard Enter temperature (31) Think about what to do Put hand on mouse Point to text field Click Move hand to keyboard Enter temperature (31) 1.35 0.4 2.45 0.2 2.45 0.2 0.4 1.75 1.35 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 = ? 10.20 4.00
  72. 58 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
  73. OK 59 Enter your Post Code ADDRESS
  74. OK 59 Enter your Post Code ADDRESS BS1 4ND
  75. OK 59 Enter your Post Code ADDRESS BS1 4ND Choose an address
  76. OK 20 Queen Sq Bristol, BS1 4ND 21 Queen Sq Bristol, BS1 4ND 22 Queen Sq Bristol, BS1 4ND 23 Queen Sq Bristol, BS1 4ND 59 Enter your Post Code ADDRESS BS1 4ND Choose an address
  77. 22 Queen Sq Bristol BS1 4ND OK 59 Enter your Post Code ADDRESS BS1 4ND
  78. 22 Queen Sq Bristol BS1 4ND OK 59 Enter your Post Code ADDRESS BS1 4ND
  79. 60 ADDRESS
  80. 22 Queen Square Br| 22 Queen Sq, Bristol, BS1 4ND 60 ADDRESS
  81. 60 ADDRESS 22 Queen Sq, Bristol, BS1 4ND
  82. 61 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 = ?
  83. 22 Queen Sq Bristol BS1 4ND OK 62 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 (1.0 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 = 17.0 seconds BS1 4ND
  84. 22 Queen Sq Bristol BS1 4ND OK 62 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 (1.0 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 = 17.0 seconds 6 points where you figure out what to do (M) BS1 4ND
  85. 63 ADDRESS 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)
  86. 64 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 = ?
  87. 64 Keying PointingMentally preparing Waiting for a response Icons: The Noun Project and Camila Bertoco GOMS KLM M = 1.35 sec K = 0.2 sec P = 1.1 sec R = ?
  88. 65 default numbers & punctuation number pad (for pins)url
  89. 66
  90. 67 Rules for ‘Efficiency’ Minimise thinking, effort (clicks, movement) No one likes home pages and start screens Remember users’ preferences and behavior Eliminate sources of error Minimise response time and device bulk the hidden UX differentiators Don’t make experienced users act like novices
  91. 68
  92. 69 Your turn
  93. Simplify this! 70
  94. 71
  95. 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) 71
  96. 72
  97. #1 Remove 73
  98. 74
  99. Perfection is achieved not when there is nothing more to add but when there is nothing more to take away 75 Antoine de Saint Exupery
  100. Reduce, thoughtfully 76 John Maeda
  101. 77
  102. 78
  103. 79
  104. 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? 80
  105. 81
  106. 82 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 Details that distract
  107. #2 Organise 83
  108. 84
  109. Ready? 85
  110. 19 7 2 6 4 83 5 86
  111. ? 87
  112. Ready? 88
  113. 1 2 3 4 5 6 7 8 9 89
  114. ? 90
  115. 91
  116. 91
  117. 92
  118. 93
  119. 94
  120. 95
  121. 96
  122. 97
  123. 98 Projects Photos Garden Tax Travel School Credit Music Video Boat Bike Car
  124. 99 Finance Office Home Projects Photos Garden
  125. 100 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
  126. #3 Hide 101
  127. 102
  128. 103
  129. 104
  130. 105
  131. 106
  132. 107
  133. 108
  134. 109
  135. 110
  136. 111 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 visible and dominant Trust expert users to find expert features
  137. #4 Displace 112
  138. 113
  139. LONDON OXFORD STRATFORD-UPON-AVON BATH My Travel Plan 114
  140. 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 115
  141. 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 116
  142. 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 117
  143. No plan survives contact with the enemy Helmuth von Moltke 118
  144. Tuesday Wednesday Thursday 119
  145. Tuesday Kid’s things Travel discounts 120
  146. 121 So, in order: 1. Displace 2. Remove 3. Organise 4. Hide
  147. 122 BONUS!
  148. The trouble with simplicity is... it’s boring. (Right?) 123
  149. 124 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
  150. 125 Modern Traditional Elegant
  151. 126 Logos Pathos Ethos
  152. 127 Name of product / service Practical: it makes Simpler Emotional: it makes me feel Values: What it says about me Experience Cheat Sheet
  153. 128 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
  154. 129
  155. 130
  156. 131 Name of product / service Practical: it makes Simpler Emotional: it makes me feel Values: What it says about me Experience Cheat Sheet
  157. 132 What users do Tasks Content & features
  158. 132 What users do Tasks Content & features
  159. 132 What users do Tasks Content & features
  160. 133 Rules for ‘Satisfaction’ Make something that works! Remove pain points, errors, waiting NEVER punish errors or experimentation Turn key interactions and unavoidable pain points into ‘signature moments’ Continual, small improvements
  161. 134 Step by step 1. Displace 2. Remove 3. Organise 4. Hide 5. Add character
  162. 135 Ever had a problem selling simplicity to your team?
  163. 136 Ever have success selling simplicity to your team?
  164. 137 BUY!
  165. 138 A B 247
  166. 139
  167. No matter how cool your user interface… ...it would be better if there were less of it 140 Alan Cooper

×