Your SlideShare is downloading. ×
  • Like
Gdc2013 macton usability_is_not_random
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Gdc2013 macton usability_is_not_random

  • 426 views
Published

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
426
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
15
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Usability is notrandom #gdc13MACTON@INSOMNIACGAMES.COM@MIKE_ACTON
  • 2. Where do we apply usabilitylessons?
  • 3. Where do we apply usabilitylessons?  Tools UI  Game  API design  ….everywhere!
  • 4. Today‟s goal  Mentalmodel for recognizing and breaking down usability issues
  • 5. Today‟s goal  Mentalmodel for recognizing and breaking down usability issues  Not even going to scratch the tip of the iceberg
  • 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. TL;DL
  • 8. TL;DL  The only way is to watch it live
  • 9. TL;DL  The only way is to watch it live  Choice is bad
  • 10. TL;DL  The only way is to watch it live  Choice is bad  Choice is good
  • 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. 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. 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. 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. 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. Working definition: Usability  Totaltime required to solve the specified problem at the desired level of quality.
  • 17. Let‟s get this out of the way…
  • 18. Let‟s get this out of the way…  What tools do you use to measure?
  • 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. 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. 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. Example 1: Search
  • 23. Example 1: Search Information Message Message Message Context density creation translation response Context is all agreed upon information.
  • 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. Example 1: Search Information Message Message Message Context density creation translation response Do we agree on what we‟re trying to accomplish?
  • 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. Example 1: Search Information Message Message Message Context density creation translation response What‟s the impact of such a broad context?
  • 28. Must visually parse the results…
  • 29. Must guess at possible answer and click link…
  • 30. Must visually scan page for answer…
  • 31. Scroll…
  • 32. Scroll more…
  • 33. Keep scrolling…
  • 34. Eventually… if we‟re paying attention, get answer.
  • 35. If not… start over with another link
  • 36. Improving, but…
  • 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. e.g. “computational knowledge”
  • 39. …or files in a file system
  • 40. …or models in an asset tree
  • 41. …or google-fu
  • 42. ...agree on more context in advance
  • 43. Example 1: Search Information Message Message Message Context density creation translation response What if we had less context?
  • 44. e.g. generic text entry box
  • 45. e.g. generic text entry box Less context = fewer constraints?
  • 46. e.g. generic text entry box Less context = fewer constraints? How many characters?
  • 47. e.g. generic text entry box Less context = fewer constraints? How many characters? What kind of characters?
  • 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. 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. This is more usable…
  • 51. …than this…
  • 52. …but only if we agree beforehand that we‟re searching for “computational knowledge”
  • 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. 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. 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. 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. Choice is Bad  How do you measure it?  How do you know when to stop?
  • 58. Example 1: Search Information Message Message Message Context density creation translation response Hunt (What we‟ve seen so far…)
  • 59. Example 1: Search Information Message Message Message Context density creation translation response Hunt (Know what the end result is…)
  • 60. Example 1: Search Information Message Message Message Context density creation translation response Hunt Play
  • 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. (Play)i.e. Iteration, Inspiration, Creative, …
  • 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. In other words, (hunt vs. play)…. A hunt B  When you know what (B) is
  • 65. In other words, (hunt vs. play)…. A play ?  When you don‟t
  • 66. (Play)Many choices, quickly…
  • 67. (Play)Recommend more choices, quickly…
  • 68. In other words, (hunt vs. play)…. A play ?  Whenyou don‟t know what you want…
  • 69. In other words, (hunt vs. play)…. AChoice is Good ? play  Whenyou don‟t know what you want…
  • 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. Choice is Good  How do you measure it?  How do you know what to show?
  • 72. Example 1: Search Information Message Message Message Context density creation translation response Hunt Very different problems. Very different solutions. Play
  • 73. Example 1: Search Information Message Message Message Context density creation translation response
  • 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. 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. Start search
  • 77. Start searchVisually parse the results…
  • 78. Start search Visually parse the results…Guess at possible answer and click link…
  • 79. Start search Visually parse the results…Guess at possible answer and click link… Scan page for answer…
  • 80. Start search Visually parse the results…Guess at possible answer and click link… Scan page for answer… Scroll…
  • 81. Start search Visually parse the results…Guess at possible answer and click link… Scan page for answer… Scroll… Found result?
  • 82. Start search Visually parse the results…Guess at possible answer and click link… Scan page for answer… Scroll… Found result? No
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Example 1: Search Information Message Message Message Context density creation translation response The amount that each message reduces the search space
  • 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. 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. a b r a c a d a b r aWhat does the first message tell us?
  • 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. 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. 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. 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. 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. 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. 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. a b r a c a d a b r a By the 5th message, the most likely answer is the correct one…
  • 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. http://en.wikipedia.org/wiki/File:Gamma_distribution_pdf.svg Not every well-formed case looks like this…
  • 109. http://en.wikipedia.org/wiki/File:Gamma_distribution_pdf.svg …but it should be in this family of distributions
  • 110. If we look back at our search messages…
  • 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. What would that information density look like?
  • 113. If your information density looks like this… or
  • 114. If your information density looks like this… orYour context probably isn‟t well-defined.
  • 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. Example 2: Screenshot Dialog Information Message Message Message Context density creation translation response Amount of time required to act correctly
  • 117. What‟s wrong with this?Need to do calculations in your head
  • 118. What‟s wrong with this?Need to do calculations in your head
  • 119. What‟s wrong with this? Need to do calculations in your headNeed to choose between a lot of unknown options
  • 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. 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. 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. 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. Example 2: Screenshot Dialog Information Message Message Message Context density creation translation response Things to Measure
  • 125. Example 2: Screenshot Dialog Information Message Message Message Context density creation translation response Things to Measure Parsing time
  • 126. Example 2: Screenshot Dialog Information Message Message Message Context density creation translation response Things to Measure Parsing time Thinking time
  • 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. 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. 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. Example 2: Screenshot Dialog Information Message Message Message Context density creation translation response However… message creation time improves over time.
  • 131. Initial difficulty isn‟t always bad...e.g. Driving
  • 132. e.g. vi(m)
  • 133. e.g. maya
  • 134. e.g. making games
  • 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. 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. Example 3: Build times Information Message Message Message Context density creation translation response Latency to transform message to useful result.
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. Example 4: Stamp mode
  • 148. E.g. 3D manipulators have very little context.(“Move/rotate/scale some object”)
  • 149. Redefine context:“building things made up ofconnected, modular parts”
  • 150. Hotkey: Modular stamp mode
  • 151. Hotkey: Modular stamp modeSee ghosted set of connectable pieces
  • 152. Tab another set of connectable pieces
  • 153. Click on ghosted piece to “stamp”
  • 154. Tab back to other set
  • 155. Example 4: Stamp mode  What happened?
  • 156. Example 4: Stamp mode  What happened?  More specific context
  • 157. Example 4: Stamp mode  What happened?  More specific context  Better information density
  • 158. Example 4: Stamp mode  What happened?  More specific context  Better information density  Fast and simple message creation
  • 159. Example 4: Stamp mode  What happened?  More specific context  Better information density  Fast and simple message creation  Immediate message translation and response
  • 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. 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. 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. Review
  • 164. Review  The only way is to watch it live
  • 165. Review  The only way is to watch it live  Choice is bad
  • 166. Review  The only way is to watch it live  Choice is bad  Choice is good
  • 167. Review  The only way is to watch it live  Choice is bad  Choice is good  20 Questions is all you ever need
  • 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. 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. 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. 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. 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. 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. #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. Usability is notrandom #gdc13MACTON@INSOMNIACGAMES.COM@MIKE_ACTON