Designing and prototyping useful apps (2019 version)
1 like122 views
The document discusses a presentation given by Dr. Robin De Croon on designing and prototyping useful apps. It provides information about Dr. De Croon's background and areas of research interest, which include information visualization, health informatics, and gamification. The presentation covers topics like human-computer interaction, user-centered design, rapid prototyping, evaluation methods, and digital prototyping.
Designing and prototyping useful apps (2019 version)
- 1. Designing & prototyping useful apps Dr. ir. Robin De Croon Augment Department of Computer Science Celestijnenlaan 200A, Leuven http://augment.cs.kuleuven.be robin.decroon@cs.kuleuven.be
- 2. • PhD in Computer Science – KU Leuven • master: visualizing energy usage of smart home • PhD: eHealth, information visualization • Postdoc at Department of Computer Science – KU Leuven • Strong interest in information visualization, health informatics, and gamification • Will post these slides on http://slideshare.net Who am I? Robin De Croon 26-Mar-192 Human-Computer Interaction (augment)
- 3. • Introduction • User-centered design • Rapid prototyping • Evaluation methods • Digital prototyping Today 26-Mar-193 Human-Computer Interaction (augment)
- 4. • Introduction • User-centered design • Rapid prototyping • Evaluation methods • Digital prototyping Today 26-Mar-194 Human-Computer Interaction (augment)
- 5. 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 Human-Computer Interaction 26-Mar-195 Human-Computer Interaction (augment)
- 6. HCI - augment “To augment the human intellect” (Engelbart, 1962) 26-Mar-196 Human-Computer Interaction (augment)
- 7. Frustration with computers https://www.youtube.com/watch?v=wXaPB7slzNE 26-Mar-197 Human-Computer Interaction (augment)
- 8. www.interaction-design.org/encyclopedia/usability_evaluation.html 26-Mar-198 Human-Computer Interaction (augment)
- 9. Remove friction between users and machines 26-Mar-199 Human-Computer Interaction (augment)
- 10. 26-Mar-1910 Human-Computer Interaction (augment)
- 11. Not so easy... www.popsci.com/gadgets/article/2013-07/one-laptop-childs-de-evolution http://erikduval.wordpress.com/2008/09/10/laptop-fun/ 26-Mar-1911 Human-Computer Interaction (augment)
- 12. But important... http://www.sitepoint.com/bad-ux-healthcare/ 26-Mar-1912 Human-Computer Interaction (augment)
- 13. 26-Mar-19 Human-Computer Interaction (augment)13 Boeing 737 MAX
- 14. 26-Mar-19 Human-Computer Interaction (augment)14 Don’t go to the right http://baddesigns.com/examples.html
- 15. 26-Mar-19 Human-Computer Interaction (augment)15
- 16. Also important... 26-Mar-1916 Human-Computer Interaction (augment)
- 18. Task – taking notes Microsoft Word OneNote 26-Mar-1918 Human-Computer Interaction (augment)
- 19. Task – quick sketch Autocad Paint 26-Mar-1919 Human-Computer Interaction (augment)
- 20. Task – company communication Mail Slack 26-Mar-1920 Human-Computer Interaction (augment)
- 21. Task – search information www.insidefacebook.com/2013/10/03/why-facebook-hashtags-were-doomed-to-fail/ 26-Mar-1921 Human-Computer Interaction (augment)
- 22. Context 26-Mar-1922 Human-Computer Interaction (augment)
- 23. User 26-Mar-1923 Human-Computer Interaction (augment)
- 24. User 26-Mar-1924 Human-Computer Interaction (augment)
- 25. Technology 26-Mar-1925 Human-Computer Interaction (augment)
- 26. Technology as an enabler! 26-Mar-1926 Human-Computer Interaction (augment)
- 27. Technology 26-Mar-1927 Human-Computer Interaction (augment)
- 28. Technology 26-Mar-1928 Human-Computer Interaction (augment)
- 29. 26-Mar-1929 Human-Computer Interaction (augment)
- 30. 26-Mar-1930 Building a Graphical User Interface Human-Computer Interaction (augment)
- 31. 26-Mar-1931 Human-Computer Interaction (augment)
- 32. https://www.nngroup.com/articles/definition-user-experience/ 26-Mar-1932 Human-Computer Interaction (augment)
- 33. 26-Mar-1933 Human-Computer Interaction (augment)
- 34. 26-Mar-1934 “We can fix the interface at the end” • good design is more than just user interface • having right features, building those features right Myth Human-Computer Interaction (augment)
- 35. 26-Mar-1935 The effectiveness, efficiency, and satisfaction with which specified users achieve specified goals in particular environments. Usability 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) Human-Computer Interaction (augment)
- 36. 26-Mar-1936 • Introduction • User-centered design • Rapid prototyping • Evaluation methods Today Human-Computer Interaction (augment)
- 37. 26-Mar-1937 “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) User-Centered Design http://blog.experientia.com/uk-design-council-on-user-centred-design-and-experience-design/ Human-Computer Interaction (augment)
- 38. 26-Mar-1938 Human-Computer Interaction (augment)
- 41. 41 “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 Human-Computer Interaction (augment)26-Mar-19
- 42. 42 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 Human-Computer Interaction (augment)26-Mar-19
- 43. Human-Computer Interaction (augment)43 Know your users → Study workflow & habits 26-Mar-19
- 44. Human-Computer Interaction (augment)44 • Don’t ask for opinions • Study behavior not opinions User Observations 26-Mar-19
- 45. Human-Computer Interaction (augment)45 • Demographics: • Nationality, educational background, age, gender • Gamer type: • Killers, achievers, socializers, explorers • Mobile use: novice, expert, casual, frequent • Novice: prompted, constrained, clear • Expert: flexibility, access/power • Frequent: short cuts Who are your users? 26-Mar-19
- 46. Human-Computer Interaction (augment)46 • Size • size of hands → positioning of buttons • height if designing a physical kiosk • Strength • child’s toy little strength to operate • greater strength needed to change batteries • Disabilities • sight • hearing • dexterity Different human ‘dimensions’ 26-Mar-19
- 48. Human-Computer Interaction (augment)48 Player profile http://www.theesa.com/wp-content/uploads/2017/09/ESA-AnnualReport-Digital-91917.pdf 26-Mar-19
- 49. Human-Computer Interaction (augment)49 Hexad user types 26-Mar-19
- 51. Human-Computer Interaction (augment)51 26-Mar-19
- 53. Human-Computer Interaction (augment)53 26-Mar-19
- 54. 54 Human-Computer Interaction (augment)26-Mar-19
- 56. Human-Computer Interaction (augment)56 26-Mar-19
- 57. Human-Computer Interaction (augment & eMedia)57
- 58. Human-Computer Interaction (augment)58 • Capture a set of user characteristics (user profile) • Not real people, but based on real users • Should not be idealized • Representative of a ‘big’ user group • Show user needs and expectations • Describe ‘real’ people with name, background, goals and values • Rule of thumb: max. 3 à 4 personas per project Personas 26-Mar-19
- 59. Human-Computer Interaction (augment)59 • 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 Why? 26-Mar-19
- 61. Human-Computer Interaction (augment)61 Interviews: • sample scenarios of use, prototypes, informal talk • good for exploring issues • connect with stakeholders Focus groups: • group interviews • consensus view and/or highlighting areas of conflict • dominated by individuals Data gathering for requirements 26-Mar-19
- 62. Human-Computer Interaction (augment)62 Questionnaires: • in conjunction with other techniques • quantitative or qualitative data • specific questions from a large, dispersed group of people Researching similar products: • good for prompting requirements Data gathering for requirements 26-Mar-19
- 63. Human-Computer Interaction (augment)63 Direct observation: • insights into stakeholders’ tasks • understand the nature and context of the tasks • time and commitment + a huge amount of data Studying documentation/literature: • procedures and rules • steps involved • regulations governing a task • background information Data gathering for requirements 26-Mar-19
- 64. 26-Mar-1964 • Define goals of your application • Your vision for it • The intended tasks to use it for • Who is the end user? → PERSONA • What is the context of use? Step 1: Define purpose and persona’s HCI Task UserTechnology Context Human-Computer Interaction (augment)
- 77. hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf Human-Computer Interaction (augment)78 26-Mar-19
- 78. http://dl.acm.org/citation.cfm?id=163268 26-Mar-1979 Human-Computer Interaction (augment)
- 79. Human-Computer Interaction (augment)80 Step 2: Storyboarding Design your own storyboard 26-Mar-19
- 80. 26-Mar-1981 • Introduction • User-centered design • Rapid prototyping • Evaluation methods • Digital prototyping Today Human-Computer Interaction (augment)
- 81. Human-Computer Interaction (augment)82 Low-fidelity prototyping https://www.smashingmagazine.com/2014/10/the-skeptics-guide-to-low-fidelity-prototyping/ 26-Mar-19
- 82. Human-Computer Interaction (augment)83 Fidelity Prototype ➔ protos (“first”) and typos (“mold,” “pattern,” “impression”) Low-fidelity prototyping 26-Mar-19
- 83. Human-Computer Interaction (augment)84 Design thinking Lean business User-centered design Agile design methodologies 26-Mar-19
- 84. Human-Computer Interaction (augment)85 26-Mar-19
- 85. Human-Computer Interaction (augment)86 26-Mar-19
- 86. 87 Human-Computer Interaction (augment)26-Mar-19
- 87. 88 Human-Computer Interaction (augment)26-Mar-19
- 88. Choice of fonts, color use, and button sizes ➔ High-level concepts such as user flow, layout and language Forces users to think about content rather than appearance Human-Computer Interaction (augment & eMedia)89 Feedback on high-level concepts
- 89. Design is stripped to the basis Design should look ’quick and dirty’ (within limits) More feedback Discover core issues More easily to address issues Human-Computer Interaction (augment & eMedia)90 Detect and address major problems early
- 90. No technical and portability requirements Paper can be folded, cut, scribbled on Pop-up menus, messages, and boxes simulated with Post-it, or overlays Paper encourages collaborative work more readily than screens Human-Computer Interaction (augment & eMedia)91 Paper prototype Paul Luff, Christian Heath, and David Greatbatch. 1992. Tasks-in- interaction: paper and screen based documentation in collaborative activity. In Proceedings of the 1992 ACM conference on Computer-supported cooperative work (CSCW '92). ACM, New York, NY, USA, 163-170. https://cdn.lynda.com/course/534422/534422-636216304801408812-16x9.jpg
- 91. Little to no skill required Short time span but goals need to be clear Good investment of resources? Which features are key for the user? Right direction? Human-Computer Interaction (augment & eMedia)92 Easy to build
- 92. White boarding is not paper prototyping Human-Computer Interaction (augment)93 26-Mar-19
- 93. Human-Computer Interaction (augment)94 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 Four myths 26-Mar-19
- 94. Human-Computer Interaction (augment)95 Examples from our group 26-Mar-19
- 95. Human-Computer Interaction (augment)96 26-Mar-19
- 96. 26-Mar-19 Human-Computer Interaction (augment)97
- 97. 98 Tom De Buyser Human-Computer Interaction (augment)26-Mar-19
- 98. Human-Computer Interaction (augment)99 26-Mar-19
- 99. 26-Mar-19100 • Early feedback • Time efficient Paper Prototypes Human-Computer Interaction (augment)
- 100. 26-Mar-19 Human-Computer Interaction (augment)101 Some concepts to consider
- 101. 26-Mar-19102 “Internal constructions of ‘some’ aspect of the external world that are manipulated, enabling predictions and inferences to be made,” Craik, 1943 Both conscious & unconscious Mental Models Human-Computer Interaction (augment)
- 102. 26-Mar-19103 A mental model represents what a person thinks is true… but isn’t necessarily true Human-Computer Interaction (augment)
- 106. 26-Mar-19107 Human-Computer Interaction (augment)
- 107. 26-Mar-19108 Users Designers different mental models Human-Computer Interaction (augment)
- 108. 26-Mar-19109 Human-Computer Interaction (augment)
- 109. The Confirmation Bias 110 Human-Computer Interaction (augment)26-Mar-19
- 110. 26-Mar-19111 If the user does something “wrong” → it is the fault of the system designer! The user is always right Human-Computer Interaction (augment)
- 111. 26-Mar-19112 • The magical number 7 (plus or minus 2) Human working memory Human-Computer Interaction (augment)
- 112. 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
- 113. 26-Mar-19114 Scan & recognise versus recall from short-term memory Human-Computer Interaction (augment)
- 114. 26-Mar-19115 • Avoid complicated procedures for carrying out tasks • Promote recognition rather than recall • Allow encoding digital information to help remember where the have stored them Memory: Design implications Implications Human-Computer Interaction (augment)
- 115. 26-Mar-19116 “Users spend most of their time on websites other than yours” (Jakob’s Law of Web User Experience) Shopping Cart Expectations Human-Computer Interaction (augment)
- 116. However... Groupthink or the bandwagon bias 26-Mar-19117 Human-Computer Interaction (augment)
- 118. 26-Mar-19119 Human-Computer Interaction (augment)
- 119. 26-Mar-19 Human-Computer Interaction (augment)120 Interfaces
- 120. 26-Mar-19121 Mobile Interfaces Human-Computer Interaction (augment)
- 121. Speech interfaces 26-Mar-19122 Human-Computer Interaction (augment)
- 122. 26-Mar-19123 Air-based gestural interfaces Human-Computer Interaction (augment)
- 123. Shareable interfaces 26-Mar-19124 Human-Computer Interaction (augment)
- 124. Tangible interfaces 26-Mar-19125 Human-Computer Interaction (augment)
- 125. Wearable interfaces 26-Mar-19126 Human-Computer Interaction (augment)
- 126. 26-Mar-19 Human-Computer Interaction (augment)127 Wearable interfaces
- 127. 26-Mar-19128 Virtual reality Human-Computer Interaction (augment)
- 128. 26-Mar-19129 Augmented reality Human-Computer Interaction (augment)
- 129. Mixed reality 26-Mar-19130 Human-Computer Interaction (augment)
- 130. Brainwave interfaces 26-Mar-19131 Human-Computer Interaction (augment)
- 131. 132 “Low-fidelity prototyping is not about how sophisticated your model looks, but about the conversation it generates about the future of the product. Remember, not form or function, but focus.” Human-Computer Interaction (augment) https://www.smashingmagazine.com/2014/10/the-skeptics-guide-to-low-fidelity-prototyping/ Step 3: Prototyping 26-Mar-19
- 132. 26-Mar-19133 • 2 minutes presentation • 2 minutes feedback • Use your storyboard to guide your ‘presentation’ • Present paper prototype TODO – short presentation Paper prototype Human-Computer Interaction (augment)
- 133. Designing & prototyping useful apps – part 2 Dr. ir. Robin De Croon Augment Department of Computer Science Celestijnenlaan 200A, Leuven http://augment.cs.kuleuven.be robin.decroon@cs.kuleuven.be
- 134. Human-Computer Interaction (augment)135 Case study: mobile pay foursquare https://medium.com/@martafioni/payfour-foursquare-ux-design-79965f6fb835 26-Mar-19
- 135. Human-Computer Interaction (augment)136 Survey – 76 participants 26-Mar-19
- 136. Human-Computer Interaction (augment)137 In-depth interview – 7 participants 26-Mar-19
- 137. Human-Computer Interaction (augment)138 26-Mar-19
- 139. Human-Computer Interaction (augment)140 Mental models 26-Mar-19
- 140. Human-Computer Interaction (augment)141 Mental models… 26-Mar-19
- 141. Human-Computer Interaction (augment)142 User testing 26-Mar-19
- 142. Human-Computer Interaction (augment)143 More user testing 26-Mar-19
- 143. Human-Computer Interaction (augment)144 Iterative design 26-Mar-19
- 144. 26-Mar-19145 • Introduction • User-centered design • Rapid prototyping • Evaluation methods • Digital prototyping Today Human-Computer Interaction (augment)
- 145. User-centered Rapid Prototyping Design EMPIRICAL evaluation in REALISTIC settings Implement Design Evaluate 26-Mar-19146 Human-Computer Interaction (augment)
- 146. Iterative design paper prototype digital prototype usable product 26-Mar-19147 Human-Computer Interaction (augment)
- 147. 26-Mar-19148 • Usability • Usefulness • Meaning • (Aesthetic) qualities • Sociability • ... Criteria Human-Computer Interaction (augment)
- 148. 26-Mar-19149 User Experience Honeycomb Human-Computer Interaction (augment)
- 149. 26-Mar-19150 • Summative • at the end • to prove something does (not) work • Formative: • during development • to improve When to perform usability testing? Human-Computer Interaction (augment)
- 150. 26-Mar-19151 • 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 • ... Evaluation Methods www.measuringu.com/blog/method-when.php www.nngroup.com/articles/which-ux-research-methods/ Human-Computer Interaction (augment)
- 151. Jenny Preece, Yvonne Rogers, Helen Sharp - Interaction Design: Beyond Human-Computer Interaction 26-Mar-19152 Human-Computer Interaction (augment)
- 152. 26-Mar-19153 User Tracking Human-Computer Interaction (augment)
- 153. A/B testing 26-Mar-19154 Human-Computer Interaction (augment)
- 154. Engage Readers 26-Mar-19155 Human-Computer Interaction (augment)
- 155. 26-Mar-19156 Eye tracking Human-Computer Interaction (augment)
- 156. 26-Mar-19157 Eye tracking Sebastian Kerckhof - T-Commerce in a second screen application Human-Computer Interaction (augment)
- 157. 26-Mar-19158 Eye tracking Sebastian Kerckhof - T-Commerce in a second screen application Human-Computer Interaction (augment)
- 158. 26-Mar-19159 Human-Computer Interaction (augment)
- 159. 26-Mar-19160 • In HCI or Domain • very effective • Delicate relation with developers • Identify problems • Suggest solutions • Through checklist of guidelines By experts Human-Computer Interaction (augment)
- 161. 26-Mar-19162 • 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 Usability study Human-Computer Interaction (augment)
- 163. 26-Mar-19 Human-Computer Interaction (augment)164
- 164. Human-Computer Interaction (augment)165 Real users A Facilitator → record usability issues Human computer → knows how the ‘system’ works Observers → interpret interaction with paper prototype People needed 26-Mar-19
- 165. Typical set-up Human-Computer Interaction (augment)166 26-Mar-19
- 166. Human-Computer Interaction (augment)167 Participant performs certain tasks Participant is asked to ‘think aloud’ Concurrent Think Aloud 26-Mar-19
- 167. Human-Computer Interaction (augment)168 Representative participants Representative tasks to perform Let the user do the talking What is needed? 26-Mar-19
- 168. Human-Computer Interaction (augment)169 Please make an account by clicking on the register button Please open your shopping basket using the shopping cart icon Tasks 26-Mar-19
- 169. Human-Computer Interaction (augment)170 Please make an account by clicking on the register button Please open your shopping basket using the shopping cart icon → NO, do not provide hints Can you please make an account? You want to see which items you already indicated you wanted to buy. How would you do this? → DO include open ended tasks Tasks 26-Mar-19
- 170. Human-Computer Interaction (augment)171 No special equipment needed Robust Flexible Easy to learn Pros and cons Unnatural Filtered statements Biasing user behavior No panacea https://www.nngroup.com/articles/thinking-aloud-the-1-usability-tool/ 26-Mar-19
- 171. Human-Computer Interaction (augment)172 Who you are & what you are doing That you are testing your interface, and not testing them That they can quit at any time That you won’t be able to help them That you require them to continue talking, and you will remind them to “please keep talking” if they fall silent To simply verbalize what it is they are doing, as they are doing it Explain 26-Mar-19
- 172. Human-Computer Interaction (augment)173 Take good notes Remind participants to keep talking Do not help Do not defend your designs Record setting Be thoughtful – these are real people Important 26-Mar-19
- 173. Human-Computer Interaction (augment)174 Goal cannot be completed within certain time frame User gives up User needs to try several times User expresses surprise Critical incidents 26-Mar-19
- 174. Human-Computer Interaction (augment)175 What are the main problems? ➔ With how many users did you observe this? Present in a table Show screen shot, mark the problem Include actual quotes from users Propose recommendation fix Mention demographics of participants Afterwards 26-Mar-19
- 175. 26-Mar-19176 • Typically participant perform certain tasks • Participant is asked to ‘think aloud’ Concurrent Think Aloud Human-Computer Interaction (augment)
- 176. Where do you start? 26-Mar-19177 Human-Computer Interaction (augment)
- 177. 26-Mar-19178 Example Usability Test with a Paper Prototype https://www.youtube.com/watch?v=9wQkLthhHKA Human-Computer Interaction (augment)
- 180. 26-Mar-19181 • 5! • 6! (user 5 finds new issues) • 7! (user 6 finds new issues) • 8! (user 7 finds new issues) • etc... Rule of thumb Human-Computer Interaction (augment)
- 181. 26-Mar-19182 Human-Computer Interaction (augment)
- 182. 26-Mar-19183 • Culture • colors, icons, ... • Cognitive • fatigue, boredom, stress, fear, ... • Gender • ‘abort’ • Carry-over effect • multiple tests after each other • Personality Some factors that influence usability Human-Computer Interaction (augment)
- 183. Personality difference 26-Mar-19184 Human-Computer Interaction (augment)
- 184. 26-Mar-19185 Step 4: Prepare an evaluation scenario Step 5: Perform a think aloud evaluation Human-Computer Interaction (augment)
- 185. 26-Mar-19186 • Introduction • User-centered design • Rapid prototyping • Evaluation methods • Digital prototyping Today Human-Computer Interaction (augment)
- 186. 26-Mar-19187 Human-Computer Interaction (augment)
- 187. http://www.cooper.com/prototyping-tools 26-Mar-19188 Human-Computer Interaction (augment)
- 188. 26-Mar-19189 Fluid UI Human-Computer Interaction (augment)
- 190. Native platforms android studio and many more! 26-Mar-19191 Human-Computer Interaction (augment)
- 191. React 26-Mar-19192 Human-Computer Interaction (augment)
- 192. 26-Mar-19193 Human-Computer Interaction (augment)
- 193. 26-Mar-19 Human-Computer Interaction (augment)194 FIGMA tutorial
- 194. 26-Mar-19 Human-Computer Interaction (augment)195 Live demo backup ☺
- 195. 26-Mar-19 Human-Computer Interaction (augment)196 iOS • https://www.figma.com/file/LZM21Y7iswNvyDN9rBayrjZ w/iOS-11-GUI-%E2%80%93-iPhone-X-by-Great- Simple-Studio---Screens Android • https://www.figma.com/file/NMeZfmwo9Nhqi72S0bw3T n/Android-UI-Kit UI kits
- 196. 26-Mar-19197 Step 6: Create a digital prototype Step 7: Evaluate the digital prototype Human-Computer Interaction (augment)
- 197. Visualizing information e-Media - Augment198 26-Mar-19
- 198. 1. Above all else show the data. 2. Maximize the data-ink ratio, within reason. 3. Erase non-data ink, within reason. 4. Erase redundant data-ink. 5. Revise and edit. Design aesthetics: five principles 26-Mar-19 e-Media - Augment199
- 199. 1. Above all else show the data. 2. Maximize the data-ink ratio, within reason. 3. Erase non-data ink, within reason. 4. Erase redundant data-ink. 5. Revise and edit. Design aesthetics: five principles 26-Mar-19 e-Media - Augment200
- 200. Data-ink ratio Data-ink ratio = data-ink Total ink used to print graphic = Proportion of a graphic’s ink devoted to the non-redundant display of data-information. = 1.0 – proportion of graphic that can be erased without the loss of information 26-Mar-19 e-Media - Augment201
- 201. What is the data-ink ratio of this graphic? 26-Mar-19 e-Media - Augment202
- 202. What is the data-ink ratio of this graphic? < 0,001 26-Mar-19 e-Media - Augment203
- 203. What is the data-ink ratio? 26-Mar-19 e-Media - Augment204
- 204. What is the data-ink ratio? < 0,05 26-Mar-19 e-Media - Augment205
- 205. source: Joey Cherdarchuk 26-Mar-19 e-Media - Augment206
- 206. source: Joey Cherdarchuk 26-Mar-19 e-Media - Augment207
- 207. source: Joey Cherdarchuk 26-Mar-19 e-Media - Augment208
- 208. source: Joey Cherdarchuk 26-Mar-19 e-Media - Augment209
- 209. source: Joey Cherdarchuk 26-Mar-19 e-Media - Augment210
- 210. source: Joey Cherdarchuk 26-Mar-19 e-Media - Augment211
- 211. source: Joey Cherdarchuk 26-Mar-19 e-Media - Augment212
- 212. 26-Mar-19 e-Media - Augment213
- 213. source: Joey Cherdarchuk 26-Mar-19 e-Media - Augment214
- 214. source: Joey Cherdarchuk 26-Mar-19 e-Media - Augment215
- 215. source: Joey Cherdarchuk 26-Mar-19 e-Media - Augment216
- 216. source: Joey Cherdarchuk 26-Mar-19 e-Media - Augment217
- 217. source: Joey Cherdarchuk 26-Mar-19 e-Media - Augment218
- 218. source: Joey Cherdarchuk 26-Mar-19 e-Media - Augment219
- 219. source: Joey Cherdarchuk 26-Mar-19 e-Media - Augment220
- 220. source: Joey Cherdarchuk 26-Mar-19 e-Media - Augment221
- 221. source: Joey Cherdarchuk 26-Mar-19 e-Media - Augment222
- 222. source: Joey Cherdarchuk 26-Mar-19 e-Media - Augment223
- 223. 26-Mar-19 e-Media - Augment224
- 224. Revise and edit 26-Mar-19 e-Media - Augment225
- 225. Pre-attentive processing How do we make things pop-out? 26-Mar-19 e-Media - Augment226
- 226. How many 3’s? 1281768756138976546984506985604982826762 9809858458224509856458945098450980943585 9091030209905959595772564675050678904567 8845789809821677654876364908560912949686 e-Media - Augment227 26-Mar-19
- 227. How many 3’s? 1281768756138976546984506985604982826762 9809858458224509856458945098450980943585 9091030209905959595772564675050678904567 8845789809821677654876364908560912949686 e-Media - Augment228 26-Mar-19
- 228. Pre-attentive vs. attentive Pre-attentive ≤500 ms ≤10 ms parallel processing Attentive >500 ms >10 ms sequential processing Differences in speed of perception task individual object Slide adapted from Michael Porath e-Media - Augment229 26-Mar-19
- 229. Pre-attentive processing “An understanding of what is processed pre-attentively is probably the most important contribution that visual science can make to data visualization” (Ware, 2004, p. 19) e-Media - Augment230 26-Mar-19
- 230. Different shapes can often pop out e-Media - Augment231 26-Mar-19
- 231. A single lack of enclosure can quickly be identified pre- attentively e-Media - Augment232 26-Mar-19
- 232. The ‘odd one out’ can quickly be identified, by pre-attentive processing Pre-attentive processing: ‘things that pop out’ e-Media - Augment233 26-Mar-19
- 233. A different color can be pre-attentively identified e-Media - Augment234 26-Mar-19
- 234. e-Media - Augment235 26-Mar-19
- 235. Find the price of a double room at the Holiday Inn in Bradley 26-Mar-19 e-Media - Augment236
- 236. Find the price of a double room at the Quality Inn in Columbia 26-Mar-19 e-Media - Augment237
- 237. 26-Mar-19 e-Media - Augment238
- 238. Pre-attentive features e-Media - Augment239 26-Mar-19
- 239. Where is Waldo? Slide adapted from Michael Porath e-Media - Augment240 26-Mar-19
- 240. Where is Waldo? Slide adapted from Michael Porath e-Media - Augment241 26-Mar-19
- 241. Encoding methods 26-Mar-19 e-Media - Augment242
- 242. Magnitude estimation How much bigger is the lower bar? Slide adapted from Michael Porath e-Media - Augment243 26-Mar-19
- 243. Magnitude estimation How much bigger is the lower bar? X 4 Slide adapted from Michael Porath e-Media - Augment244 26-Mar-19
- 244. Magnitude estimation How much bigger is the right circle? Slide adapted from Michael Porath e-Media - Augment245 26-Mar-19
- 245. Magnitude estimation How much bigger is the right circle? X 5 Slide adapted from Michael Porath e-Media - Augment246 26-Mar-19
- 246. Magnitude estimation How much bigger is the right circle? Slide adapted from Michael Porath e-Media - Augment247 26-Mar-19
- 247. Magnitude estimation How much bigger is the right circle? X 9 Slide adapted from Michael Porath e-Media - Augment248 26-Mar-19
- 248. Which one is more accurate? Slide adapted from Michael Porath e-Media - Augment249 26-Mar-19
- 249. Perceptual or apparent scaling Compensating magnitude to match perception Slide adapted from Michael Porath e-Media - Augment250 26-Mar-19
- 250. Apparent magnitude curves http://makingmaps.net/2007/08/28/perceptual-scaling-of-map-symbols/ Slide adapted from Michael Porath e-Media - Augment251 26-Mar-19
- 251. Cleveland and McGill (1984) Accuracy of judgment of encoded quantitative data e-Media - Augment
- 252. Choice of encoding • Bertin’s guidance • suitability of various encoding methods • to support common tasks e-Media - Augment253
- 253. Guidance for the encoding of quantitative, ordinal and categorical data (Mackinlay 1986) Quantitative, ordinal and categorical data e-Media - Augment254 26-Mar-19
- 254. Case study Save the pies for dessert https://www.perceptualedge.com/articles/visual_busines s_intelligence/save_the_pies_for_dessert.pdf 26-Mar-19 e-Media - Augment255
- 255. 26-Mar-19 e-Media - Augment256
- 256. Market share 26-Mar-19 e-Media - Augment257
- 257. Market share 26-Mar-19 e-Media - Augment258
- 258. Market share 26-Mar-19 e-Media - Augment259
- 259. Market share 26-Mar-19 e-Media - Augment260
- 260. Market share 26-Mar-19 e-Media - Augment261
- 261. 26-Mar-19 e-Media - Augment262
- 262. Market share 26-Mar-19 e-Media - Augment263
- 263. Market share 26-Mar-19 e-Media - Augment264
- 264. Market share 26-Mar-19 e-Media - Augment265
- 265. 26-Mar-19 e-Media - Augment266
- 266. 26-Mar-19 e-Media - Augment267 https://infovis-wiki.net/w/images/0/0b/Mackinlay_PerceptualTask.jpg
- 267. 26-Mar-19268 • Slides based on courses of Katrien Verbert, Joris Klerkx & Erik Duval † • Usability and user experience: https://www.nngroup.com/ • 3d person images: https://www.flickr.com/photos/dom_fr/albums/72157639144430484 Acknowledgements Human-Computer Interaction (augment)
- 268. Thank you! 26-Mar-19269 Human-Computer Interaction (augment)