Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designing & prototyping useful apps

Workshop during bizbootcamp course 2017 - KIC InnoEnergy - Leuven.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

  • Be the first to like this

Designing & prototyping useful apps

  1. 1. Designing & prototyping useful apps ir. Robin De Croon http://augment.cs.kuleuven.be robin.decroon@cs.kuleuven.be Tuesday, March 14, 2017 1
  2. 2. Who am I? • Master in Computer Science – KU Leuven • master thesis: visualizing energy usage of smart home • specialization: HCI à iterative design • PhD Student at Department of Computer Science – KU Leuven • Strong interest in information visualization and health informatics • Will post these slides on http://slideshare.net Tuesday, March 14, 2017 2 Robin De Croon
  3. 3. Today • Introduction • User-centered design • Rapid prototyping • Evaluation methods • Digital prototyping Tuesday, March 14, 2017 3
  4. 4. Today • Introduction • User-centered design • Rapid prototyping • Evaluation methods • Digital prototyping Tuesday, March 14, 2017 4
  5. 5. Human-Computer Interaction a discipline concerned with the • design • evaluation and • implementation of interactive computing systems for human use and with the study of major phenomena surrounding them. ACM Tuesday, March 14, 2017 5
  6. 6. HCI - augment Tuesday, March 14, 2017 6 “To augment the human intellect” (Engelbart, 1962)
  7. 7. Frustration with computers Tuesday, March 14, 2017 7 www.web42.com/badday/
  8. 8. Tuesday, March 14, 2017 8www.interaction-design.org/encyclopedia/usability_evaluation.html
  9. 9. Tuesday, March 14, 2017 9 Remove friction between users and machines
  10. 10. Tuesday, March 14, 2017 10
  11. 11. Not so easy... Tuesday, March 14, 2017 11 www.popsci.com/gadgets/article/2013-07/one-laptop-childs-de-evolution http://erikduval.wordpress.com/2008/09/10/laptop-fun/
  12. 12. But important... Tuesday, March 14, 2017 12http://www.sitepoint.com/bad-ux-healthcare/
  13. 13. Also important... Tuesday, March 14, 2017 13
  14. 14. Tuesday, March 14, 2017 14 HCI Task UserTechnology Context
  15. 15. Task – taking notes Microsoft Word OneNote Tuesday, March 14, 2017 15
  16. 16. Task – quick sketch Autocad Paint Tuesday, March 14, 2017 16
  17. 17. Task – company communication Mail Slack Tuesday, March 14, 2017 17
  18. 18. Task – search information Tuesday, March 14, 2017 18www.insidefacebook.com/2013/10/03/why-facebook-hashtags-were-doomed-to-fail/
  19. 19. Technology / context Tuesday, March 14, 2017 19
  20. 20. Technology Tuesday, March 14, 2017 20
  21. 21. Technology as an enabler! Tuesday, March 14, 2017
  22. 22. Technology Tuesday, March 14, 2017 22
  23. 23. Technology Tuesday, March 14, 2017 23
  24. 24. Technology Tuesday, March 14, 2017 24
  25. 25. User Tuesday, March 14, 2017 25
  26. 26. User Tuesday, March 14, 2017 26
  27. 27. Tuesday, March 14, 2017 27
  28. 28. Tuesday, March 14, 2017 28
  29. 29. Building a Graphical User Interface Tuesday, March 14, 2017 29
  30. 30. Tuesday, March 14, 2017 30 https://www.nngroup.com/articles/definition-user-experience/
  31. 31. Tuesday, March 14, 2017 31
  32. 32. Myth “We can fix the interface at the end” • good design is more than just user interface
 • having right features, building those features right Tuesday, March 14, 2017 32
  33. 33. Usability The effectiveness, efficiency, and satisfaction with which specified users achieve specified goals in particular environments Tuesday, March 14, 2017 33 This does not mean you have to create a “dry” design or something that is only good for novices – it all depends on your goals (user/task/context/technology)
  34. 34. Traditional Design Process Tuesday, March 14, 2017 34
  35. 35. Today • Introduction • User-centered design • Rapid prototyping • Evaluation methods Tuesday, March 14, 2017 35
  36. 36. User-Centered Design “The central premise of user-centered design is that the best designed products and services result from understanding the needs of people who will use them.” You are NOT the user! (if you are the designer) Tuesday, March 14, 2017 http://blog.experientia.com/uk-design-council-on-user-centred-design-and-experience-design/
  37. 37. Know your users à Study workflow & habits Tuesday, March 14, 2017 37
  38. 38. Tuesday, March 14, 2017 38 “Logical analysis is not a good way to predict people's behavior (nor are focus groups or surveys): observation is the key” — Donald A. Norman
  39. 39. Tuesday, March 14, 2017 39 https://www.nngroup.com/articles/first-rule-of-usability-dont-listen-to-users/
  40. 40. 41 It’s really hard to design products by focus groups. A lot of times, people don’t know what they want until you show it to them... That doesn’t mean we don’t listen to customers, but it’s hard for them to tell you what they want when they’ve never seen anything remotely like it. — Steve Jobs
  41. 41. User Observations • Don’t ask for opinions • Study behavior not opinions Tuesday, March 14, 2017 42
  42. 42. The Confirmation Bias Tuesday, March 14, 2017 43http://jamesclear.com/
  43. 43. The user is always right If the user does something “wrong” à it is the fault of the system designer! Tuesday, March 14, 2017 44
  44. 44. Mental Models “Internal constructions of ‘some’ aspect of the external world that are manipulated, enabling predictions and inferences to be made “ Craik, 1943 Both conscious & unconscious Tuesday, March 14, 2017 45
  45. 45. A mental model represents what a person thinks is true… but isn’t necessarily true Tuesday, March 14, 2017 46
  46. 46. Tuesday, March 14, 2017 47
  47. 47. Tuesday, March 14, 2017 48
  48. 48. Tuesday, March 14, 2017 49
  49. 49. Tuesday, March 14, 2017 50
  50. 50. Users ó Designers different mental models Tuesday, March 14, 2017 51
  51. 51. Tuesday, March 14, 2017 52
  52. 52. DESIGN PROCESS Tuesday, March 14, 2017 53
  53. 53. User-centered Rapid Prototyping Design Tuesday, March 14, 2017 54 EMPIRICAL evaluation in REALISTIC settings Implement Design Evaluate
  54. 54. Iterative design Tuesday, March 14, 2017 55 paper prototype digital prototype usable product
  55. 55. Where do you start? Tuesday, March 14, 2017 56
  56. 56. Step 1: Define purpose • Define goals of your application • Your vision for it • The intended tasks to use it for • Who is the end user? • What is the context of use? Tuesday, March 14, 2017 57 HCI Task UserTechnology Context
  57. 57. Step 2: User research • Develop persona’s • Fictive users based on real data & facts Tuesday, March 14, 2017 58
  58. 58. Tuesday, March 14, 2017 59http://www.usability.gov/how-to-and-tools/methods/personas.html
  59. 59. Tuesday, March 14, 2017 60
  60. 60. Tuesday, March 14, 2017 61http://user.com/assets/files/downloads/sample-persona-from-interaction-design-inc.pdf
  61. 61. Tuesday, March 14, 2017 62www.usability.gov/how-to-and-tools/methods/personas.html
  62. 62. Tuesday, March 14, 2017 63http://www.usability.gov/how-to-and-tools/methods/personas.html
  63. 63. Why? • Build empathy • Develop focus • Communicate and form consensus • Make and defend decisions • Measure effectiveness • Focus on the needs of the most important target group NOT: • representation of all user groups • describe all needs of a product Tuesday, March 14, 2017 64
  64. 64. Effective personas • Representative of a ‘big’ user group • Show user needs and expectations • Show how an app will be used • Make universal features and functionalities apparent • Describe ‘real’ people with background, goals and values • Rule of thumb: max. 3 à 4 personas per project Tuesday, March 14, 2017 65http://www.usability.gov/how-to-and-tools/methods/personas.html
  65. 65. Tuesday, March 14, 2017 66 https://www.interaction-design.org/literature/book/the- encyclopedia-of-human-computer-interaction-2nd-ed/personas
  66. 66. Tuesday, March 14, 2017 67 Step 1: Define purpose Step 2: User research (persona)
  67. 67. Step 3: storyboarding Tuesday, March 14, 2017 68http://www.smashingmagazine.com/2014/08/a-closer-look-at-personas-part-1/
  68. 68. Tuesday, March 14, 2017 69hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf
  69. 69. Tuesday, March 14, 2017 70hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf
  70. 70. Tuesday, March 14, 2017 71hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf
  71. 71. Tuesday, March 14, 2017 72hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf
  72. 72. Tuesday, March 14, 2017 73hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf
  73. 73. Tuesday, March 14, 2017 74hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf
  74. 74. Tuesday, March 14, 2017 75hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf
  75. 75. Tuesday, March 14, 2017 76hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf
  76. 76. Tuesday, March 14, 2017 77hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf
  77. 77. Tuesday, March 14, 2017 78hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf
  78. 78. Tuesday, March 14, 2017 79 http://dl.acm.org/citation.cfm?id=163268
  79. 79. Tuesday, March 14, 2017 80 Step 1: Define purpose Step 2: User research (persona) Step 3: Develop storyboard
  80. 80. Today • Introduction • User-centered design • Rapid prototyping • Evaluation methods • Digital prototyping Tuesday, March 14, 2017 81
  81. 81. Step 4: Prototyping Tuesday, March 14, 2017 82www.paperprototyping.com/
  82. 82. Tuesday, March 14, 2017 83
  83. 83. Tuesday, March 14, 2017 84
  84. 84. Tuesday, March 14, 2017 85
  85. 85. Typical set-up Tuesday, March 14, 2017 86
  86. 86. No need for artistic skills! Tuesday, March 14, 2017 87http://www.userfocus.co.uk/articles/paperprototyping.html
  87. 87. Should be fast! Tuesday, March 14, 2017 88
  88. 88. Wireframes are not Paper Prototypes Tuesday, March 14, 2017 89http://www.userfocus.co.uk/articles/paperprototyping.html
  89. 89. Whiteboarding is not as effective! Tuesday, March 14, 2017 90
  90. 90. Paper Prototypes Tuesday, March 14, 2017 91 • Early feedback • Time efficient
  91. 91. PERSONAL EXAMPLES MyMedicationData Triatriumph Tuesday, March 14, 2017 92
  92. 92. Tuesday, March 14, 2017 93
  93. 93. Tuesday, March 14, 2017 95
  94. 94. 96 Tom De Buyser
  95. 95. Four myths •Only experts create good designs
 • experts faster, simple and effective techniques anyone can apply •We can fix the user interface at the end
 • good design is more than just user interface
 • having right features, building those features right •Good design takes too long / costs too much • simple and effective techniques can reduce total development time & cost (finds problems early on) •Good design is just cool graphics • graphics part of bigger picture of what to communicate & how Tuesday, March 14, 2017 97
  96. 96. “Users spend most of their time on websites other than yours” 

 (Jakob’s Law ofWeb User Experience) 98Shopping Cart Expectations
  97. 97. However... Tuesday, March 14, 2017 99 Groupthink or the bandwagon bias
  98. 98. Human working memory • The magical number 7 (plus or minus 2) Tuesday, March 14, 2017 100
  99. 99. Tuesday, March 14, 2017 101 So • 7 options on a menu • 7 icons on a menu bar • 7 bullets in a list • 7 tabs at the top of a website • 7 items in a pull-down menu
  100. 100. Tuesday, March 14, 2017 102 Scan & recognise versus recall from short-term memory
  101. 101. Memory: Design implications • Avoid complicated procedures for carrying out tasks • Promote recognition rather than recall • Allow encoding digital information to help remember where the have stored them Tuesday, March 14, 2017 103 Implications
  102. 102. Tuesday, March 14, 2017 104
  103. 103. Tuesday, March 14, 2017 105
  104. 104. Mobile Interfaces Tuesday, March 14, 2017 106
  105. 105. Speech interfaces Tuesday, March 14, 2017 107
  106. 106. Air-based gestural interfaces Tuesday, March 14, 2017 108
  107. 107. Shareable interfaces Tuesday, March 14, 2017 109
  108. 108. Tangible interfaces Tuesday, March 14, 2017 110
  109. 109. Wearable interfaces Tuesday, March 14, 2017 111
  110. 110. Wearable interfaces Tuesday, March 14, 2017 112
  111. 111. Augmented reality Tuesday, March 14, 2017 113
  112. 112. Virtual reality Tuesday, March 14, 2017 114
  113. 113. Brainwave interfaces Tuesday, March 14, 2017 115
  114. 114. Tuesday, March 14, 2017 116 Step 1: Define purpose Step 2: User research (persona) Step 3: Develop storyboard Step 4: Paper prototype
  115. 115. TODO – short presentation • 3 minutes presentation • 2 minutes feedback • Use your storyboard to guide your ‘presentation’ • Present paper prototype Tuesday, March 14, 2017 117 Paper prototype
  116. 116. Designing & prototyping useful apps – part 2 ir. Robin De Croon http://augment.cs.kuleuven.be robin.decroon@cs.kuleuven.be Tuesday, March 14, 2017 118
  117. 117. Today • Introduction • User-centered design • Rapid prototyping • Evaluation methods • Digital prototyping Tuesday, March 14, 2017 119
  118. 118. User-centered Rapid Prototyping Design Tuesday, March 14, 2017 120 EMPIRICAL evaluation in REALISTIC settings Implement Design Evaluate
  119. 119. Criteria • Usability • Usefulness • Meaning • (Aesthetic) qualities • Sociability • ... Tuesday, March 14, 2017 121
  120. 120. User Experience Honeycomb Tuesday, March 14, 2017 122
  121. 121. When to perform usability testing? • Summative • at the end • to prove something does (not) work • Formative: • during development • to improve Tuesday, March 14, 2017 123
  122. 122. Evaluation Methods • questionnaire • usability testing • expert evaluation • usage tracking • interviews • focus groups • participatory design • cognitive walkthrough • heuristic evaluation • eye tracking • card sorting • A/B testing • clickstream analysis •... Tuesday, March 14, 2017 124 www.measuringu.com/blog/method-when.php www.nngroup.com/articles/which-ux-research-methods/
  123. 123. 125Jenny Preece,Yvonne Rogers, Helen Sharp - Interaction Design: Beyond Human-Computer Interaction
  124. 124. UserTracking 126
  125. 125. A/B testing Tuesday, March 14, 2017 127
  126. 126. Engage Readers Tuesday, March 14, 2017 128
  127. 127. Eye tracking Tuesday, March 14, 2017 129
  128. 128. Eye tracking 130Sebastian Kerckhof -T-Commerce in a second screen application
  129. 129. Eye tracking 131Sebastian Kerckhof -T-Commerce in a second screen application
  130. 130. Tuesday, March 14, 2017 132
  131. 131. By experts • In HCI or Domain • very effective • Delicate relation with developers • Identify problems • Suggest solutions • Through checklist of guidelines Tuesday, March 14, 2017 133
  132. 132. https://www.nngroup.com/articles/which-ux-research-methods/
  133. 133. Usability study • With real end users • ‘Think-aloud protocol’ • concurrent vs retrospective • Video recording with annotation • Log, remarks, etc. for analysis • Scenario • Comparative test of user interface Tuesday, March 14, 2017 135
  134. 134. ConcurrentThink Aloud • Typically participant perform certain tasks • Participant is asked to ‘think aloud’ Tuesday, March 14, 2017 136
  135. 135. Evaluation Scenario • Give the user some tasks to perform • Which medications can interact with Dafalgan? • Include open ended tasks • Can you still drink grape juice? Tuesday, March 14, 2017 137
  136. 136. Example UsabilityTest with a Paper Prototype Tuesday, March 14, 2017 138 https://www.youtube.com/watch?v=9wQkLthhHKA
  137. 137. 139https://www.interaction-design.org/literature/article/6-blind-men-walk-into-a-bar-the-ux-punchline
  138. 138. How many? 140https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/
  139. 139. Rule of thumb Tuesday, March 14, 2017 141 • 5! • 6! (user 5 finds new issues) • 7! (user 6 finds new issues) • 8! (user 7 finds new issues) • etc...
  140. 140. Tuesday, March 14, 2017 142
  141. 141. Some factors that influence usability • Culture • colors, icons, ... • Cognitive • fatigue, boredom, stress, fear, ... • Gender • ‘abort’ • Carry-over effect • multiple tests after each other • Personality Tuesday, March 14, 2017 143
  142. 142. Personality difference Tuesday, March 14, 2017 144
  143. 143. Tuesday, March 14, 2017 145 Step 5: Prepare an evaluation scenario Step 6: Perform a think aloud evaluation
  144. 144. Today • Introduction • User-centered design • Rapid prototyping • Evaluation methods • Digital prototyping Tuesday, March 14, 2017 146
  145. 145. POP Tuesday, March 14, 2017 147
  146. 146. Tuesday, March 14, 2017 148http://www.cooper.com/prototyping-tools
  147. 147. Proto.io Tuesday, March 14, 2017 149
  148. 148. Fluid UI Tuesday, March 14, 2017 150
  149. 149. Native Applications Tuesday, March 14, 2017 151 android studio and many more!
  150. 150. Polymer-project
  151. 151. Tuesday, March 14, 2017 153
  152. 152. Tuesday, March 14, 2017 154 Step 7: Create a digital prototype Step 8: Perform an evaluation of digital prototype
  153. 153. proto.io tutorial Tuesday, March 14, 2017 155
  154. 154. Acknowledgements • Slides based on courses of Joris Klerkx & Erik Duval † • Usability and user experience: https://www.nngroup.com/ • 3d person images: https://www.flickr.com/photos/dom_fr/albums/72157639144430484 Tuesday, March 14, 2017 156
  155. 155. Thank you! Tuesday, March 14, 2017 157 http://2.bp.blogspot.com/-gZjNR3XVULs/T_ZOVgE-5lI/AAAAAAAAAg8/6YVmd5Q064o/s1600/questions11.jpg robin.decroon@cs.kuleuven.be

×