user experience talk
TRANSCRIPT
![Page 1: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/1.jpg)
Corilus – User experience
Robin De Croon
Joris Klerkx & Erik Duval †
http://[email protected]
Wednesday, May 11, 2016 1
![Page 2: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/2.jpg)
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• Working on healthcare related projects
• MAPC (Corilus)• Emurgency• MyHealthData (Corilus)
• Strong interest in information visualization and health informatics
• Will post these slides on http://slideshare.net
Wednesday, May 11, 2016 2
Robin De Croon
![Page 3: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/3.jpg)
Slides based on work of my supervisors
Wednesday, May 11, 2016 3
Dr. Joris Klerkx Prof. dr. ir. Erik Duval✝
you can find their slides on slideshare.net
![Page 4: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/4.jpg)
Today
• Introduction• User-centered design• Rapid prototyping• Evaluation methods
Thursday, May 12, 2016 4
![Page 5: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/5.jpg)
Today
• Introduction• User-centered design• Rapid prototyping• Evaluation methods
Thursday, May 12, 2016 5
![Page 6: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/6.jpg)
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
Thursday, May 12, 2016 6
![Page 7: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/7.jpg)
HCI - augment
Wednesday, May 11, 2016 7
“To augment the human intellect” (Engelbart, 1962)
![Page 8: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/8.jpg)
Frustration with computers
Wednesday, May 11, 2016 8
www.web42.com/badday/
![Page 9: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/9.jpg)
Wednesday, May 11, 2016 9www.interaction-design.org/encyclopedia/usability_evaluation.html
![Page 10: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/10.jpg)
Wednesday, May 11, 2016 10
Remove friction betweenusers and machines
![Page 11: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/11.jpg)
Not so easy...
Wednesday, May 11, 2016 11www.popsci.com/gadgets/article/2013-07/one-laptop-childs-de-evolutionhttp://erikduval.wordpress.com/2008/09/10/laptop-fun/
![Page 12: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/12.jpg)
But important...
Wednesday, May 11, 2016 12http://www.sitepoint.com/bad-ux-healthcare/
![Page 13: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/13.jpg)
Everywhere...
Wednesday, May 11, 2016 13
![Page 14: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/14.jpg)
Also important...
Wednesday, May 11, 2016 14
![Page 15: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/15.jpg)
Wednesday, May 11, 2016 15
HCI
Task
UserTechnology
Context
![Page 16: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/16.jpg)
Task – taking notes
Wednesday, May 11, 2016 16
![Page 17: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/17.jpg)
Task – taking notes
Microsoft Word Evernote
Wednesday, May 11, 2016 17
![Page 18: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/18.jpg)
Task – quick sketch
Autocad Paint
Wednesday, May 11, 2016 18
![Page 19: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/19.jpg)
Task – company communication
Mail Slack
Wednesday, May 11, 2016 19
![Page 20: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/20.jpg)
Task – search information
Wednesday, May 11, 2016 20www.insidefacebook.com/2013/10/03/why-facebook-hashtags-were-doomed-to-fail/
![Page 21: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/21.jpg)
Technology / context
Wednesday, May 11, 2016 21
![Page 22: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/22.jpg)
Technology
Wednesday, May 11, 2016 22
![Page 23: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/23.jpg)
Technology
Wednesday, May 11, 2016 23
![Page 24: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/24.jpg)
Technology
Wednesday, May 11, 2016 24
![Page 25: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/25.jpg)
Technology
Wednesday, May 11, 2016 25
![Page 26: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/26.jpg)
Technology as an enabler!
Wednesday, May 11, 2016
![Page 27: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/27.jpg)
User
Wednesday, May 11, 2016 27
![Page 28: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/28.jpg)
User
Wednesday, May 11, 2016 28
![Page 29: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/29.jpg)
Wednesday, May 11, 2016 29
![Page 30: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/30.jpg)
Wednesday, May 11, 2016 30
![Page 31: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/31.jpg)
Building a Graphical User Interface
Wednesday, May 11, 2016 31
![Page 32: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/32.jpg)
Wednesday, May 11, 2016 32
https://www.nngroup.com/articles/definition-user-experience/
![Page 33: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/33.jpg)
Wednesday, May 11, 2016 33
![Page 34: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/34.jpg)
Myth“We can fix the interface at the end”
• good design is more than just user interface
• having right features, building those features right
Wednesday, May 11, 2016 34
![Page 35: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/35.jpg)
Usability
The effectiveness, efficiency, and satisfaction with which specified users achieve specified goals in particular environments
Wednesday, May 11, 2016 35
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)
![Page 36: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/36.jpg)
Traditional Design Process
Wednesday, May 11, 2016 36
![Page 37: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/37.jpg)
Today
• Introduction• User-centered design• Rapid prototyping• Evaluation methods
Thursday, May 12, 2016 37
![Page 38: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/38.jpg)
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)
Wednesday, May 11, 2016 http://blog.experientia.com/uk-design-council-on-user-centred-design-and-experience-design/
![Page 39: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/39.jpg)
Know your users à Study workflow & habits
Wednesday, May 11, 2016 39
![Page 40: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/40.jpg)
Wednesday, May 11, 2016 40
“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
![Page 41: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/41.jpg)
Wednesday, May 11, 2016 41
https://www.nngroup.com/articles/first-rule-of-usability-dont-listen-to-users/
![Page 42: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/42.jpg)
![Page 43: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/43.jpg)
43
It’s really hard to design products by focusgroups.
A lot of times, people don’t know whatthey want until you show it to them...
That doesn’t mean we don’t listen tocustomers, but it’s hard for them to tell youwhat they want when they’ve never seenanything remotely like it.
— Steve Jobs
![Page 44: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/44.jpg)
User Observations
• Don’t ask for opinions
• Study behavior not opinions
Wednesday, May 11, 2016 44
![Page 45: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/45.jpg)
The user is always right
If the user does something “wrong”
à it is the fault of the system designer!
Wednesday, May 11, 2016 45
![Page 46: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/46.jpg)
The Confirmation Bias
Wednesday, May 11, 2016 46http://jamesclear.com/
![Page 47: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/47.jpg)
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
Wednesday, May 11, 2016 47
![Page 48: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/48.jpg)
A mental model represents what a person thinks is true… but isn’t necessarily true
Wednesday, May 11, 2016 48
![Page 49: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/49.jpg)
Wednesday, May 11, 2016 49
![Page 50: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/50.jpg)
Wednesday, May 11, 2016 50
![Page 51: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/51.jpg)
Wednesday, May 11, 2016 51
![Page 52: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/52.jpg)
Wednesday, May 11, 2016 52
![Page 53: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/53.jpg)
Users ó Designers different mental models
Wednesday, May 11, 2016 53
![Page 54: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/54.jpg)
Wednesday, May 11, 2016 54
![Page 55: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/55.jpg)
DESIGN PROCESS
Wednesday, May 11, 2016 55
![Page 56: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/56.jpg)
User-centered Rapid Prototyping Design
Wednesday, May 11, 2016 56
EMPIRICAL evaluation in REALISTIC settings
Implement
Design
Evaluate
![Page 57: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/57.jpg)
Iterative design
Wednesday, May 11, 2016 57
paper prototype
digital prototype
usable product
![Page 58: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/58.jpg)
Where do you start?
Wednesday, May 11, 2016 58
![Page 59: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/59.jpg)
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?
Wednesday, May 11, 2016 59
HCI
Task
UserTechnology
Context
![Page 60: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/60.jpg)
Step 2: User research
• Develop persona’s• Fictive users based on real data & facts
Wednesday, May 11, 2016 60
![Page 61: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/61.jpg)
Wednesday, May 11, 2016 61http://www.usability.gov/how-to-and-tools/methods/personas.html
![Page 62: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/62.jpg)
Wednesday, May 11, 2016 62
![Page 63: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/63.jpg)
Wednesday, May 11, 2016 63http://user.com/assets/files/downloads/sample-persona-from-interaction-design-inc.pdf
![Page 64: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/64.jpg)
Wednesday, May 11, 2016 64www.usability.gov/how-to-and-tools/methods/personas.html
![Page 65: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/65.jpg)
Wednesday, May 11, 2016 65http://www.usability.gov/how-to-and-tools/methods/personas.html
![Page 66: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/66.jpg)
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
Wednesday, May 11, 2016 66
![Page 67: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/67.jpg)
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
Wednesday, May 11, 2016 67http://www.usability.gov/how-to-and-tools/methods/personas.html
![Page 68: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/68.jpg)
Wednesday, May 11, 2016 68
https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed/personas
![Page 69: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/69.jpg)
Step 3: storyboarding
Wednesday, May 11, 2016 69http://www.smashingmagazine.com/2014/08/a-closer-look-at-personas-part-1/
![Page 70: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/70.jpg)
Wednesday, May 11, 2016 70hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf
![Page 71: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/71.jpg)
Wednesday, May 11, 2016 71hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf
![Page 72: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/72.jpg)
Wednesday, May 11, 2016 72hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf
![Page 73: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/73.jpg)
Wednesday, May 11, 2016 73hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf
![Page 74: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/74.jpg)
Wednesday, May 11, 2016 74hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf
![Page 75: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/75.jpg)
Wednesday, May 11, 2016 75hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf
![Page 76: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/76.jpg)
Wednesday, May 11, 2016 76hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf
![Page 77: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/77.jpg)
Wednesday, May 11, 2016 77hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf
![Page 78: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/78.jpg)
Wednesday, May 11, 2016 78hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf
![Page 79: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/79.jpg)
Wednesday, May 11, 2016 79hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf
![Page 80: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/80.jpg)
Wednesday, May 11, 2016 80
http://dl.acm.org/citation.cfm?id=163268
![Page 81: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/81.jpg)
Wednesday, May 11, 2016 81
Take a short break and form teams of ?
Step 1: Define purpose
Step 2: User research (persona)
Step 3: Develop storyboard
![Page 82: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/82.jpg)
Medication intake• Tasks• Context • Difficulties? • .. ?
Wednesday, May 11, 2016 82
![Page 83: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/83.jpg)
Today
• Introduction• User-centered design• Rapid prototyping• Evaluation methods
Thursday, May 12, 2016 83
![Page 84: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/84.jpg)
Step 4: Prototyping
Wednesday, May 11, 2016 84www.paperprototyping.com/
![Page 85: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/85.jpg)
Wednesday, May 11, 2016 85
![Page 86: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/86.jpg)
Wednesday, May 11, 2016 86
![Page 87: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/87.jpg)
Wednesday, May 11, 2016 87
![Page 88: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/88.jpg)
Typical set-up
Wednesday, May 11, 2016 88
![Page 89: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/89.jpg)
No need for artistic skills!
Wednesday, May 11, 2016 89http://www.userfocus.co.uk/articles/paperprototyping.html
![Page 90: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/90.jpg)
Wireframes are not Paper Prototypes
Wednesday, May 11, 2016 90http://www.userfocus.co.uk/articles/paperprototyping.html
![Page 91: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/91.jpg)
Whiteboarding is not as effective!
Wednesday, May 11, 2016 91
![Page 92: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/92.jpg)
Paper Prototypes
Thursday, May 12, 2016 92
• Early feedback
• Time efficient
![Page 93: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/93.jpg)
PERSONAL EXAMPLES
CareConnect Mobile
MyMedicationData
Triatriumph
Wednesday, May 11, 2016 93
![Page 94: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/94.jpg)
Battery
Thursday, May 12, 2016 94
![Page 95: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/95.jpg)
Weight
Thursday, May 12, 2016 95
http://www.elmospa.com/userfiles/i mage/Varie/forza.png
![Page 96: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/96.jpg)
No internet connection
Thursday, May 12, 2016 96
![Page 97: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/97.jpg)
Time expensive
Thursday, May 12, 2016 97
![Page 98: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/98.jpg)
Information overload
Thursday, May 12, 2016 98
http://m.c.lnkd.licdn.com/mpr/mpr/p /5/005/061/1de/3cc6bc7.jpg
![Page 99: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/99.jpg)
Usability
![Page 100: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/100.jpg)
Thursday, May 12, 2016 100
![Page 101: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/101.jpg)
Thursday, May 12, 2016 101
Mobile Affordances
![Page 102: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/102.jpg)
Thursday, May 12, 2016 102
Medical Affordances
![Page 103: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/103.jpg)
GPS to patient & open right file
Thursday, May 12, 2016 103
![Page 104: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/104.jpg)
Some Sketches
Thursday, May 12, 2016 104
![Page 105: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/105.jpg)
Participatory design approach
• WEL à Onderzoek• Vergelijkend onderzoek
5/11/16 105
![Page 106: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/106.jpg)
5/11/16 106
![Page 107: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/107.jpg)
Subjective Input
Wednesday, May 11, 2016 107
Stocky, T., Faaborg, A., & Lieberman, H. (2004). A commonsense approach to predictive text entry. In Extended abstracts of the 2004 conference on Human factors and computing systems - CHI ’04 (p. 1163). New York, New York, USA: ACM Press. doi:10.1145/985921.986014
![Page 108: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/108.jpg)
Objective Input
Wednesday, May 11, 2016 108
Weibel, N., Emmenegger, C., Lyons, J., Dixit, R., Hill, L., & Hollan, J. (2013). Interpreter-Mediated Physician-Patient Communication: Opportunities for Multimodal Healthcare Interfaces. In Proceedings of the ICTs for improving Patients Rehabilitation Research Techniques. IEEE. doi:10.4108/icst.pervasivehealth.2013.252026
![Page 109: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/109.jpg)
Messages
Wednesday, May 11, 2016 109
![Page 110: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/110.jpg)
Wednesday, May 11, 2016 110
![Page 111: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/111.jpg)
![Page 112: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/112.jpg)
Wednesday, May 11, 2016 112
![Page 113: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/113.jpg)
113Tom De Buyser
![Page 114: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/114.jpg)
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
Thursday, May 12, 2016 114
![Page 115: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/115.jpg)
“Users spend most of their time on websites other than yours” (Jakob’s Law of Web User Experience)
115Shopping Cart Expectations
![Page 116: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/116.jpg)
However...
Thursday, May 12, 2016 116Groupthink or the bandwagon bias
![Page 117: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/117.jpg)
Human working memory
• The magical number 7 (plus or minus 2)
Wednesday, May 11, 2016 117
![Page 118: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/118.jpg)
Wednesday, May 11, 2016 118
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
![Page 119: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/119.jpg)
Wednesday, May 11, 2016 119
Scan & recognise versus recall from short-term memory
![Page 120: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/120.jpg)
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
Wednesday, May 11, 2016 120
Implications
![Page 121: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/121.jpg)
Wednesday, May 11, 2016 121
![Page 122: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/122.jpg)
Wednesday, May 11, 2016 122
![Page 123: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/123.jpg)
Mobile Interfaces
Thursday, May 12, 2016 123
![Page 124: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/124.jpg)
Speech interfaces
Thursday, May 12, 2016 124
![Page 125: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/125.jpg)
Air-based gestural interfaces
Thursday, May 12, 2016 125
![Page 126: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/126.jpg)
Shareable interfaces
Thursday, May 12, 2016 126
![Page 127: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/127.jpg)
Tangible interfaces
Thursday, May 12, 2016 127
![Page 128: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/128.jpg)
Wearable interfaces
Thursday, May 12, 2016 128
![Page 129: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/129.jpg)
Wearable interfaces
Thursday, May 12, 2016 129
![Page 130: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/130.jpg)
Augmented reality
Thursday, May 12, 2016 130
![Page 131: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/131.jpg)
Virtual reality
Thursday, May 12, 2016 131
![Page 132: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/132.jpg)
Brainwave interfaces
Thursday, May 12, 2016 132
![Page 133: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/133.jpg)
‘HIGH’ FIDELITY TOOLS
Wednesday, May 11, 2016 133
![Page 134: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/134.jpg)
POP
Wednesday, May 11, 2016 134
![Page 135: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/135.jpg)
Proto.io
Wednesday, May 11, 2016 135
![Page 136: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/136.jpg)
Wednesday, May 11, 2016 136http://www.cooper.com/prototyping-tools
![Page 137: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/137.jpg)
Pixate
Thursday, May 12, 2016 137
![Page 138: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/138.jpg)
Polymer-project
![Page 139: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/139.jpg)
Thursday, May 12, 2016 139
Step 4: Build your own paper prototype
![Page 140: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/140.jpg)
Today
• Introduction• User-centered design• Rapid prototyping• Evaluation methods
Thursday, May 12, 2016 140
![Page 141: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/141.jpg)
User-centered Rapid Prototyping Design
Thursday, May 12, 2016 141
EMPIRICAL evaluation in REALISTIC settings
Implement
Design
Evaluate
![Page 142: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/142.jpg)
Criteria
• Usability
• Usefulness
• Meaning
• (Aesthetic) qualities
• Sociability
• ...
Wednesday, May 11, 2016 142
![Page 143: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/143.jpg)
User Experience Honeycomb
Wednesday, May 11, 2016 143
![Page 144: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/144.jpg)
When to perform usability testing?
• Summative• at the end• to prove something does (not) work
• Formative:• during development• to improve
Wednesday, May 11, 2016 144
![Page 145: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/145.jpg)
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•...
Wednesday, May 11, 2016 145
www.measuringu.com/blog/method-when.phpwww.nngroup.com/articles/which-ux-research-methods/
![Page 146: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/146.jpg)
https://www.nngroup.com/articles/which-ux-research-methods/
![Page 147: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/147.jpg)
147Jenny Preece, Yvonne Rogers, Helen Sharp - Interaction Design: Beyond Human-Computer Interaction
![Page 148: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/148.jpg)
User Tracking
Wednesday, May 11, 2016 148
![Page 149: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/149.jpg)
A/B testing
Wednesday, May 11, 2016 149
![Page 150: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/150.jpg)
Engage Readers
Thursday, May 12, 2016 150
![Page 151: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/151.jpg)
Eye tracking
151Sebastian Kerckhof - T-Commerce in a second screen application
![Page 152: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/152.jpg)
Eye tracking
152Sebastian Kerckhof - T-Commerce in a second screen application
![Page 153: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/153.jpg)
Thursday, May 12, 2016 153
![Page 154: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/154.jpg)
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
Thursday, May 12, 2016 154
![Page 155: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/155.jpg)
By experts
• In HCI or Domain • very effective
• Delicate relation with developers
• Identify problems• Suggest solutions
• Through checklist of guidelines
Thursday, May 12, 2016 155
![Page 156: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/156.jpg)
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?
Thursday, May 12, 2016 156
![Page 157: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/157.jpg)
Concurrent Think Aloud
• Typically participant perform certain tasks
• Participant is asked to ‘think aloud’
Thursday, May 12, 2016 157
![Page 158: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/158.jpg)
Example Usability Test with a Paper Prototype
Thursday, May 12, 2016 158https://www.youtube.com/watch?v=9wQkLthhHKA
![Page 159: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/159.jpg)
159https://www.interaction-design.org/literature/article/6-blind-men-walk-into-a-bar-the-ux-punchline
![Page 160: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/160.jpg)
How many?
160https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/
![Page 161: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/161.jpg)
Rule of thumb
Wednesday, May 11, 2016 161
• 5!• 6! (user 5 finds new issues)• 7! (user 6 finds new issues)• 8! (user 7 finds new issues)• etc...
![Page 162: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/162.jpg)
Thursday, May 12, 2016 162
![Page 163: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/163.jpg)
Some factors that influence usability
• Culture• colors, icons, ...
• Cognitive• fatigue, boredom, stress, fear, ...
• Gender • ‘abort’
• Carry-over effect• multiple tests after each other
• Personality
Wednesday, May 11, 2016 163
![Page 164: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/164.jpg)
Personality difference
Wednesday, May 11, 2016 164
![Page 165: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/165.jpg)
Thursday, May 12, 2016 165
Step 5: Prepare an evaluation scenario
Step 6: Perform a think aloud evaluation
![Page 166: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/166.jpg)
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
Thursday, May 12, 2016 166
![Page 167: User Experience Talk](https://reader031.vdocument.in/reader031/viewer/2022030318/58f059601a28ab25478b45c7/html5/thumbnails/167.jpg)
Thank you!
Thursday, May 12, 2016 167
http://2.bp.blogspot.com/-gZjNR3XVULs/T_ZOVgE-5lI/AAAAAAAAAg8/6YVmd5Q064o/s1600/questions11.jpg