Gdc2013 macton usability_is_not_random

943 views
755 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
943
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
24
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Gdc2013 macton usability_is_not_random

  1. 1. Usability is notrandom #gdc13MACTON@INSOMNIACGAMES.COM@MIKE_ACTON
  2. 2. Where do we apply usabilitylessons?
  3. 3. Where do we apply usabilitylessons?  Tools UI  Game  API design  ….everywhere!
  4. 4. Today‟s goal  Mentalmodel for recognizing and breaking down usability issues
  5. 5. Today‟s goal  Mentalmodel for recognizing and breaking down usability issues  Not even going to scratch the tip of the iceberg
  6. 6. Today‟s goal  Mentalmodel for recognizing and breaking down usability issues  Not even going to scratch the tip of the iceberg  Not a numbers talk
  7. 7. TL;DL
  8. 8. TL;DL  The only way is to watch it live
  9. 9. TL;DL  The only way is to watch it live  Choice is bad
  10. 10. TL;DL  The only way is to watch it live  Choice is bad  Choice is good
  11. 11. TL;DL  The only way is to watch it live  Choice is bad  Choice is good  20 Questions is all you ever need
  12. 12. TL;DL  The only way is to watch it live  Choice is bad  Choice is good  20 Questions is all you ever need  Learning curve is bad
  13. 13. TL;DL  The only way is to watch it live  Choice is bad  Choice is good  20 Questions is all you ever need  Learning curve is bad  Learning curve is good
  14. 14. TL;DL  The only way is to watch it live  Choice is bad  Choice is good  20 Questions is all you ever need  Learning curve is bad  Learning curve is good  One minute is worth 12 iterations
  15. 15. TL;DL  The only way is to watch it live  Choice is bad  Choice is good  20 Questions is all you ever need  Learning curve is bad  Learning curve is good  One minute is worth 12 iterations  When in doubt, be like Maya
  16. 16. Working definition: Usability  Totaltime required to solve the specified problem at the desired level of quality.
  17. 17. Let‟s get this out of the way…
  18. 18. Let‟s get this out of the way…  What tools do you use to measure?
  19. 19. Let‟s get this out of the way…  What tools do you use to measure? The only way is to watch it live
  20. 20. Let‟s get this out of the way…  What tools do you use to measure? The only way is to watch it live To make things more usable, asking good questions is way more valuable than better tools.
  21. 21. What is usability a function of? Information Message Message Message Context density creation translation response  Let‟s understand each of these elements by example…
  22. 22. Example 1: Search
  23. 23. Example 1: Search Information Message Message Message Context density creation translation response Context is all agreed upon information.
  24. 24. Example 1: Search Information Message Message Message Context density creation translation response Context is all agreed upon information. What problem are we trying to solve?
  25. 25. Example 1: Search Information Message Message Message Context density creation translation response Do we agree on what we‟re trying to accomplish?
  26. 26. Example 1: Search Information Message Message Message Context density creation translation response Do we agree on what we‟re trying to accomplish? Magic words? Magic store? Music video? Etymology?
  27. 27. Example 1: Search Information Message Message Message Context density creation translation response What‟s the impact of such a broad context?
  28. 28. Must visually parse the results…
  29. 29. Must guess at possible answer and click link…
  30. 30. Must visually scan page for answer…
  31. 31. Scroll…
  32. 32. Scroll more…
  33. 33. Keep scrolling…
  34. 34. Eventually… if we‟re paying attention, get answer.
  35. 35. If not… start over with another link
  36. 36. Improving, but…
  37. 37. Example 1: Search Information Message Message Message Context density creation translation response What if we had more context? i.e. more agreed upon information
  38. 38. e.g. “computational knowledge”
  39. 39. …or files in a file system
  40. 40. …or models in an asset tree
  41. 41. …or google-fu
  42. 42. ...agree on more context in advance
  43. 43. Example 1: Search Information Message Message Message Context density creation translation response What if we had less context?
  44. 44. e.g. generic text entry box
  45. 45. e.g. generic text entry box Less context = fewer constraints?
  46. 46. e.g. generic text entry box Less context = fewer constraints? How many characters?
  47. 47. e.g. generic text entry box Less context = fewer constraints? How many characters? What kind of characters?
  48. 48. e.g. generic text entry box Less context = fewer constraints? How many characters? What kind of characters? What do we know about the problem?
  49. 49. Example 1: Search Information Message Message Message Context density creation translation response The upper limit of usability is determined by the amount of agreed upon information we start with.
  50. 50. This is more usable…
  51. 51. …than this…
  52. 52. …but only if we agree beforehand that we‟re searching for “computational knowledge”
  53. 53. Example 1: Search Information Message Message Message Context density creation translation response The upper limit of usability is determined by the amount of agreed upon information we start with.
  54. 54. Example 1: Search Information Message Message Message Context density creation translation response The upper limit of usability is determined by the amount of agreed upon information we start with. i.e. More constraints = More (potentially) usable
  55. 55. Example 1: Search Information Message Message Message Context density creation translation response Choice is Bad The upper limit of usability is determined by the amount of agreed upon information we start with. i.e. More constraints = More (potentially) usable
  56. 56. Example 1: Search Information Message Message Message Context density creation translation response Choice is Bad The upper limit of usability is determined by the amount of agreed upon information we start with. To make things more usable, solve more specific, not more generic, problem. i.e. More constraints = More (potentially) usable
  57. 57. Choice is Bad  How do you measure it?  How do you know when to stop?
  58. 58. Example 1: Search Information Message Message Message Context density creation translation response Hunt (What we‟ve seen so far…)
  59. 59. Example 1: Search Information Message Message Message Context density creation translation response Hunt (Know what the end result is…)
  60. 60. Example 1: Search Information Message Message Message Context density creation translation response Hunt Play
  61. 61. Example 1: Search Information Message Message Message Context density creation translation response Hunt Play “I don‟t know what I‟m looking for, but I‟ll know it when I see it.”
  62. 62. (Play)i.e. Iteration, Inspiration, Creative, …
  63. 63. In other words, (hunt vs. play)…. A xform B  The only purpose of any program is to transform some data from one form (A) into another form (B)
  64. 64. In other words, (hunt vs. play)…. A hunt B  When you know what (B) is
  65. 65. In other words, (hunt vs. play)…. A play ?  When you don‟t
  66. 66. (Play)Many choices, quickly…
  67. 67. (Play)Recommend more choices, quickly…
  68. 68. In other words, (hunt vs. play)…. A play ?  Whenyou don‟t know what you want…
  69. 69. In other words, (hunt vs. play)…. AChoice is Good ? play  Whenyou don‟t know what you want…
  70. 70. In other words, (hunt vs. play)…. AChoice is Good ? play  When you don‟t know what you To make things more usable, present lots of want… relevant, comparable options quickly.
  71. 71. Choice is Good  How do you measure it?  How do you know what to show?
  72. 72. Example 1: Search Information Message Message Message Context density creation translation response Hunt Very different problems. Very different solutions. Play
  73. 73. Example 1: Search Information Message Message Message Context density creation translation response
  74. 74. Example 1: Search Information Message Message Message Context density creation translation response Amount of the problem that can be solved with any particular message.
  75. 75. Example 1: Search Information Message Message Message Context density creation translation response Amount of the problem that can be solved with any particular message. Message = data associated with each step of a process
  76. 76. Start search
  77. 77. Start searchVisually parse the results…
  78. 78. Start search Visually parse the results…Guess at possible answer and click link…
  79. 79. Start search Visually parse the results…Guess at possible answer and click link… Scan page for answer…
  80. 80. Start search Visually parse the results…Guess at possible answer and click link… Scan page for answer… Scroll…
  81. 81. Start search Visually parse the results…Guess at possible answer and click link… Scan page for answer… Scroll… Found result?
  82. 82. Start search Visually parse the results…Guess at possible answer and click link… Scan page for answer… Scroll… Found result? No
  83. 83. Start search Search text Visually parse the results…Guess at possible answer and click link… Scan page for answer… Scroll… Found result? No
  84. 84. Start search Search text List of possibilities Visually parse the results…Guess at possible answer and click link… Scan page for answer… Scroll… Found result? No
  85. 85. Start search Search text List of possibilities Mouse scroll, Visually parse the results… page clickGuess at possible answer and click link… Scan page for answer… Scroll… Found result? No
  86. 86. Start search Search text List of possibilities Mouse scroll, Visually parse the results… List more possibilities page clickGuess at possible answer and click link… Scan page for answer… Scroll… Found result? No
  87. 87. Start search Search text List of possibilities Mouse scroll, Visually parse the results… List more possibilities page clickGuess at possible answer and Link click click link… Scan page for answer… Scroll… Found result? No
  88. 88. Start search Search text List of possibilities Mouse scroll, Visually parse the results… List more possibilities page clickGuess at possible answer and Link click Page result click link… Scan page for answer… Scroll… Found result? No
  89. 89. Start search Search text List of possibilities Mouse scroll, Visually parse the results… List more possibilities page clickGuess at possible answer and Link click Page result click link… Scan page for answer… Scroll… Found result? No
  90. 90. Start search Search text List of possibilities Mouse scroll, Visually parse the results… List more possibilities page clickGuess at possible answer and Link click Page result click link… Scan page for answer… Mouse scroll, Scroll… Page down Found result? No
  91. 91. Start search Search text List of possibilities Mouse scroll, Visually parse the results… List more possibilities page clickGuess at possible answer and Link click Page result click link… Scan page for answer… Mouse scroll, Scroll… More page result Page down Found result? No
  92. 92. Start search Search text List of possibilities Mouse scroll, Visually parse the results… List more possibilities page clickGuess at possible answer and Link click Page result click link… Scan page for answer… Mouse scroll, Scroll… More page result Page down Found result? No
  93. 93. Start search Search text List of possibilities Mouse scroll, Visually parse the results… List more possibilities page clickGuess at possible answer and Link click Page result click link… Scan page for answer… Mouse scroll, Scroll… More page result Page down Found result? No Back button
  94. 94. Start search Search text List of possibilities Mouse scroll, Visually parse the results… List more possibilities page clickGuess at possible answer and Link click Page result click link… Scan page for answer… Mouse scroll, Scroll… More page result Page down Found result? No Back button List of possibilities
  95. 95. Example 1: Search Information Message Message Message Context density creation translation response The amount that each message reduces the search space
  96. 96. Example 1: Search Information Message Message Message Context density creation translation response The amount that each message reduces the search space Every problem is like a game of 20 Questions.
  97. 97. Example 1: Search Information Message Message Message Context density creation translation response This message is made up of smaller messages… a b r a c a d a b r a
  98. 98. a b r a c a d a b r aWhat does the first message tell us?
  99. 99. a b r a c a d a b r aWhat does the first message tell us?„a‟ is U+0061, which is in the „Basic Latin‟ Unicode block
  100. 100. a b r a c a d a b r aWhat does the first message tell us?„a‟ is U+0061, which is in the „Basic Latin‟ Unicode blockWhich means we‟re likely searching in EFIGS
  101. 101. a b r a c a d a b r aWhat does the first message tell us?„a‟ is U+0061, which is in the „Basic Latin‟ Unicode blockWhich means we‟re likely searching in EFIGSBased on context: Most likely in English
  102. 102. a b r a c a d a b r aWhat does the first message tell us?„a‟ is U+0061, which is in the „Basic Latin‟ Unicode blockWhich means we‟re likely searching in EFIGSBased on context: Most likely in EnglishIn dictionary of ~110,000 common English words, there areonly ~6,500 words that begin with „a‟.
  103. 103. a b r a c a d a b r aWhat does the first message tell us?„a‟ is U+0061, which is in the „Basic Latin‟ Unicode blockWhich means we‟re likely searching in EFIGSBased on context: Most likely in EnglishIn dictionary of ~110,000 common English words, there areonly ~6,500 words that begin with „a‟. Reduced likely results from near-infinite to ~6,500
  104. 104. a b r a c a d a b r a …and together „a‟ + „b‟ reduces our search space to ~420 words in the same dictionary.
  105. 105. a b r a c a d a b r a …and together „a‟ + „b‟ reduces our search space to ~420 words in the same dictionary. We can start to make reasonable guesses… (Obviously Google‟s search space is much bigger than a sample dictionary.)
  106. 106. a b r a c a d a b r a By the 5th message, the most likely answer is the correct one…
  107. 107. a b r a c a d a b r aA lot Almost none If context is well-defined, information density should map like this… (Like a game of 20 Questions)
  108. 108. http://en.wikipedia.org/wiki/File:Gamma_distribution_pdf.svg Not every well-formed case looks like this…
  109. 109. http://en.wikipedia.org/wiki/File:Gamma_distribution_pdf.svg …but it should be in this family of distributions
  110. 110. If we look back at our search messages…
  111. 111. Start search Search text List of possibilities Mouse scroll, Visually parse the results… List more possibilities page clickGuess at possible answer and Link click Page result click link… Scan page for answer… Mouse scroll, Scroll… More page result Page down Found result? No Back button List of possibilities
  112. 112. What would that information density look like?
  113. 113. If your information density looks like this… or
  114. 114. If your information density looks like this… orYour context probably isn‟t well-defined.
  115. 115. If your information density looks like this… 20 Questions is all or you ever needYour context probably isn‟t well-defined. To make things more usable, map context so that most likely stuff comes first
  116. 116. Example 2: Screenshot Dialog Information Message Message Message Context density creation translation response Amount of time required to act correctly
  117. 117. What‟s wrong with this?Need to do calculations in your head
  118. 118. What‟s wrong with this?Need to do calculations in your head
  119. 119. What‟s wrong with this? Need to do calculations in your headNeed to choose between a lot of unknown options
  120. 120. What‟s wrong with this? Need to do calculations in your headNeed to choose between a lot of unknown options Options too granular
  121. 121. What‟s wrong with this? Need to do calculations in your headNeed to choose between a lot of unknown options Options too granular Lots of unused, not useful options
  122. 122. What‟s wrong with this? Need to do calculations in your headNeed to choose between a lot of unknown options Options too granular Lots of unused, not useful options Even more unused, not useful options
  123. 123. What‟s wrong with this? Need to do calculations in your headNeed to choose between a lot of unknown options Options too granular Lots of unused, not useful options Even more unused, not useful options Unclear how to choose the right answer
  124. 124. Example 2: Screenshot Dialog Information Message Message Message Context density creation translation response Things to Measure
  125. 125. Example 2: Screenshot Dialog Information Message Message Message Context density creation translation response Things to Measure Parsing time
  126. 126. Example 2: Screenshot Dialog Information Message Message Message Context density creation translation response Things to Measure Parsing time Thinking time
  127. 127. Example 2: Screenshot Dialog Information Message Message Message Context density creation translation response Things to Measure Parsing time Thinking time Working on wrong problem
  128. 128. Example 2: Screenshot Dialog Information Message Message Message Context density creation translation response Things to Measure Parsing time Thinking time Working on wrong problem Error rate
  129. 129. Example 2: Screenshot Dialog Information Message Message Message Context density creation translation response Learning curve is Things to Measure bad Parsing time Thinking time Working on wrong problem Error rate To make things more usable, reduce the time needed to work out what the right thing to do is
  130. 130. Example 2: Screenshot Dialog Information Message Message Message Context density creation translation response However… message creation time improves over time.
  131. 131. Initial difficulty isn‟t always bad...e.g. Driving
  132. 132. e.g. vi(m)
  133. 133. e.g. maya
  134. 134. e.g. making games
  135. 135. Example 2: Screenshot Dialog Information Message Message Message Context density creation translation response Learning curve is However… message creation time improves over time. good
  136. 136. Example 2: Screenshot Dialog Information Message Message Message Context density creation translation response Learning curve is However… message creation time improves over time. good To make things more usable, allow for some features that are only useful with lots of practice.
  137. 137. Example 3: Build times Information Message Message Message Context density creation translation response Latency to transform message to useful result.
  138. 138. Example 3: Build times Information Message Message Message Context density creation translation response Latency to transform message to useful result. When people say “iteration”…
  139. 139. Example 3: Build times Information Message Message Message Context density creation translation response Latency to transform message to useful result. When people say “iteration”… Easiest to measure
  140. 140. Example 3: Build times Information Message Message Message Context density creation translation response Latency to transform message to useful result. When people say “iteration”… Easiest to measure e.g. Building levels
  141. 141. Example 3: Build times Information Message Message Message Context density creation translation response Latency to transform message to useful result. When people say “iteration”… Easiest to measure e.g. Building levels e.g. Building lightmaps
  142. 142. Example 3: Build times Information Message Message Message Context density creation translation response Latency to transform message to useful result. When people say “iteration”… Easiest to measure e.g. Building levels e.g. Building lightmaps e.g. Compile, link, reload
  143. 143. Example 3: Build times Information Message Message Message Context density creation translation response Latency to transform message to useful result. When people say “iteration”… Easiest to measure e.g. Building levels e.g. Building lightmaps e.g. Compile, link, reload “5 second rule”
  144. 144. Example 3: Build times Information Message Message Message Context density creation translation response One minute is worth Latency to transform message to useful result. 12 iterations When people say “iteration”… Easiest to measure e.g. Building levels e.g. Building lightmaps e.g. Compile, link, reload “5 second rule”
  145. 145. Example 3: Build times Information Message Message Message Context density creation translation response One minute is worth Latency to transform message to useful result. 12 iterations When people say “iteration”… Easiest to measure e.g. Building levels e.g. Building lightmaps To make things more usable, reduce the e.g. Compile, link, reload time needed to “5 second rule” work out what the right thing to do is
  146. 146. Example 3: Build times Information Message Message Message Context density creation translation response Throughput of message. i.e. time until can begin next message
  147. 147. Example 4: Stamp mode
  148. 148. E.g. 3D manipulators have very little context.(“Move/rotate/scale some object”)
  149. 149. Redefine context:“building things made up ofconnected, modular parts”
  150. 150. Hotkey: Modular stamp mode
  151. 151. Hotkey: Modular stamp modeSee ghosted set of connectable pieces
  152. 152. Tab another set of connectable pieces
  153. 153. Click on ghosted piece to “stamp”
  154. 154. Tab back to other set
  155. 155. Example 4: Stamp mode  What happened?
  156. 156. Example 4: Stamp mode  What happened?  More specific context
  157. 157. Example 4: Stamp mode  What happened?  More specific context  Better information density
  158. 158. Example 4: Stamp mode  What happened?  More specific context  Better information density  Fast and simple message creation
  159. 159. Example 4: Stamp mode  What happened?  More specific context  Better information density  Fast and simple message creation  Immediate message translation and response
  160. 160. Example 4: Stamp mode  What happened?  More specific context  Better information density  Fast and simple message creation  Immediate message translation and response  Forgot: Muscle memory
  161. 161. Example 4: Stamp mode  What happened? More specific context When in doubt, be   Better information density  like Maya Fast and simple message creation  Immediate message translation and response  Forgot: Muscle memory
  162. 162. Example 4: Stamp mode  What happened? More specific context When in doubt, be   Better information density  like Maya Fast and simple message creation  Immediate message translation and response  Forgot: Muscle memory different something is, the bigger The more the bridge to the old way needs to be.
  163. 163. Review
  164. 164. Review  The only way is to watch it live
  165. 165. Review  The only way is to watch it live  Choice is bad
  166. 166. Review  The only way is to watch it live  Choice is bad  Choice is good
  167. 167. Review  The only way is to watch it live  Choice is bad  Choice is good  20 Questions is all you ever need
  168. 168. Review  The only way is to watch it live  Choice is bad  Choice is good  20 Questions is all you ever need  Learning curve is bad
  169. 169. Review  The only way is to watch it live  Choice is bad  Choice is good  20 Questions is all you ever need  Learning curve is bad  Learning curve is good
  170. 170. Review  The only way is to watch it live  Choice is bad  Choice is good  20 Questions is all you ever need  Learning curve is bad  Learning curve is good  One minute is worth 12 iterations
  171. 171. Review  The only way is to watch it live  Choice is bad  Choice is good  20 Questions is all you ever need  Learning curve is bad  Learning curve is good  One minute is worth 12 iterations  When in doubt, be like Maya
  172. 172. Review  The only way is to watch it live  Choice is bad  Choice is good   Usability is triage 20 Questions is all you ever need Learning curve is bad  Learning curve is good  One minute is worth 12 iterations  When in doubt, be like Maya
  173. 173. Review  The only way is to watch it live  Choice is bad  Choice is good   Usability is triage 20 Questions is all you ever need Learning curve is bad  Learning curve is good  One minute is worth 12 iterationsmore usable, don‟t try to To make things  When in doubt, be like maximize usability in everything Maya
  174. 174. #README  “A mathematical theory of communication” -- Claude Shannon  “The Design of Everyday Things” -- Donald A. Norman  “The Man Who Lied to His Laptop: What We Can Learn About Ourselves from Our Machines” -- Clifford Nass and Corina Yen
  175. 175. Usability is notrandom #gdc13MACTON@INSOMNIACGAMES.COM@MIKE_ACTON

×