User Experience Talk

Corilus – User experience
Robin De Croon
Joris Klerkx & Erik Duval †
http://augment.cs.kuleuven.be
robin.decroon@cs.kuleuven.be
Wednesday, May 11, 2016 1

Who am I?
• Master inComputer Science – KU Leuven
• master thesis: visualizing energy usage of smart home
• specialization: HCI à iterative design
• PhD Student at Department ofComputer Science – KU Leuven
• Working on healthcare related projects
• MAPC (Corilus)
• Emurgency
• MyHealthData(Corilus)
• Strong interest in informationvisualization and health informatics
• Will post these slideson http://slideshare.net
RobinDe Croon

Slides based on work of my supervisors
Dr. Joris Klerkx Prof. dr. ir. Erik Duval✝
you can find their slides on slideshare.net

Today
• Introduction
• User-centered design
• Rapid prototyping
• Evaluation methods
Thursday, May 12, 2016 4

Today
• Introduction

Human-Computer Interaction
a discipline concerned with the
• design
• evaluationand
• implementation
of interactive computing systems for human use
and with the study of major phenomena
surrounding them.
ACM

HCI - augment
“To augment the human intellect” (Engelbart, 1962)

Frustration with computers
www.web42.com/badday/

Wednesday, May 11, 2016 9www.interaction-design.org/encyclopedia/usability_evaluation.html

Remove friction between
users and machines

Not so easy...
www.popsci.com/gadgets/article/2013-07/one-laptop-childs-de-evolution
http://erikduval.wordpress.com/2008/09/10/laptop-fun/

But important...
Wednesday, May 11, 2016 12http://www.sitepoint.com/bad-ux-healthcare/

Everywhere...

Also important...

HCI
Task
UserTechnology
Context

Task – taking notes

Task – taking notes
Microsoft Word Evernote

Task – quick sketch
Autocad
Paint

Task – company communication
Mail Slack

Task – search information
Wednesday, May 11, 2016 20www.insidefacebook.com/2013/10/03/why-facebook-hashtags-were-doomed-to-fail/

Technology / context

Technology

Technology as an enabler!
Wednesday, May 11, 2016

User

Building a GraphicalUser Interface

https://www.nngroup.com/articles/definition-user-experience/

Myth
“We can fix the interface at the end”
• good design ismore than just user interface 
• having right features, building those featuresright

Usability
The effectiveness,efficiency, and satisfactionwith
which specified users achieve specified goals in
particular environments
This doesnot mean you have to create a “dry” design or something
that is only good for novices– it all dependson your goals
(user/task/context/technology)

Traditional Design Process

Today
• Introduction

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 NOTthe user!
(if you are the designer)
Wednesday, May 11, 2016 http://blog.experientia.com/uk-design-council-on-user-centred-design-and-experience-design/

Know your users
à Study workflow & habits

“Logical analysis is not a good way to
predict people'sbehavior (nor are focus
groups or surveys): observationis the key”
— DonaldA.Norman

https://www.nngroup.com/articles/first-rule-of-usability-dont-listen-to-users/

43
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

User Observations
• Don’t ask for opinions
• Study behavior not opinions

The user is always right
If the user does something“wrong”
à it is the fault of the system designer!

The Confirmation Bias
Wednesday, May 11, 2016 46http://jamesclear.com/

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

A mental model represents what a person thinks
is true… but isn’t necessarily true

Users ó Designers
different mental models

DESIGN PROCESS

User-centered Rapid Prototyping Design
EMPIRICAL evaluation in REALISTIC settings
Implement
Design
Evaluate

Iterative design
paper prototype
digital prototype
usable product

Where do you start?

Step 1: Define purpose
• Define goalsof your application
• Your vision for it
• The intended tasksto use it for
• Who is the end user?
• What is the context of use?
HCI
Task
UserTechnology
Context

Step 2: User research
• Develop persona’s
• Fictive users based on real data & facts

Wednesday, May 11, 2016 61http://www.usability.gov/how-to-and-tools/methods/personas.html

Wednesday, May 11, 2016 63http://user.com/assets/files/downloads/sample-persona-from-interaction-design-inc.pdf

Wednesday, May 11, 2016 64www.usability.gov/how-to-and-tools/methods/personas.html

Why?
• Build empathy
• Develop focus
• Communicate and form consensus
• Make and defend decisions
• Measure effectiveness
• Focus on the needsof the most important target group
NOT:
• representation ofall user groups
• describe all needsof a product

Effective personas
• Representative ofa ‘big’ user group
• Showuser needs and expectations
• Showhow an app will be used
• Make universal features and functionalitiesapparent
• Describe ‘real’ people with background,goalsand values
• Rule of thumb:max. 3 à 4 personasper project

https://www.interaction-design.org/literature/book/the-
encyclopedia-of-human-computer-interaction-2nd-ed/personas

Step 3: storyboarding
Wednesday, May 11, 2016 69http://www.smashingmagazine.com/2014/08/a-closer-look-at-personas-part-1/

Wednesday, May 11, 2016 70hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf

http://dl.acm.org/citation.cfm?id=163268

Take a short break and form teams of ?
Step 1: Define purpose
Step 2: User research (persona)
Step 3: Develop storyboard

Medication intake
• Tasks
• Context
• Difficulties?
• .. ?

Today
• Introduction

Step 4: Prototyping
Wednesday, May 11, 2016 84www.paperprototyping.com/

Typical set-up

No need for artistic skills!
Wednesday, May 11, 2016 89http://www.userfocus.co.uk/articles/paperprototyping.html

Wireframes are not
Paper Prototypes
Wednesday, May 11, 2016 90http://www.userfocus.co.uk/articles/paperprototyping.html

Whiteboarding is not as effective!

Paper Prototypes
• Early feedback
• Time efficient

PERSONAL
EXAMPLES
CareConnect Mobile
MyMedicationData
Triatriumph

Battery

Weight
http://www.elmospa.com/userfiles/image/Varie/forza.png

No internet connection

Time expensive

Information overload
http://m.c.lnkd.licdn.com/mpr/mpr/p/5/005/061/1de/3cc6bc7.jpg

Mobile Affordances

MedicalAffordances

GPS to patient & open right file

Some Sketches

Participatory design approach
• WEL à Onderzoek
• Vergelijkend onderzoek
5/11/16 105

Subjective Input
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). NewYork, NewYork,
USA: ACM Press. doi:10.1145/985921.986014

Objective Input
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 ResearchTechniques. IEEE. doi:10.4108/icst.pervasivehealth.2013.252026

Messages

Four myths
•Only experts create good designs 
• experts faster, simple and effective techniquesanyone can apply
•We can fix the user interface at the end 
• good design ismore than just user interface 
• having right features, building those featuresright
•Good design takes too long / costs too much
• simple and effective techniques can reduce total development
time & cost (finds problemsearly on)
•Good design is just cool graphics
• graphicspart ofbigger picture of what to communicate &how

“Users spend most of their timeon websites other than yours”   
(Jakob’s Law ofWeb User Experience)
115ShoppingCart Expectations

However...
Groupthink or the bandwagonbias

Human working memory
• The magical number 7 (plusor minus2)

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

Scan & recognise versus recall from short-term memory

Memory: Design implications
• Avoid complicatedproceduresfor carryingout tasks
• Promote recognitionrather than recall
• Allow encodingdigitalinformationto help remember
where the have stored them
Implications

Mobile Interfaces

Speech interfaces

Air-based gestural interfaces

Shareable interfaces

Tangible interfaces

Wearable interfaces

Augmented reality

Virtual reality

Brainwave interfaces

‘HIGH’ FIDELITY
TOOLS

POP

Proto.io

Wednesday, May 11, 2016 136http://www.cooper.com/prototyping-tools

Pixate

Step 4: Build your own paper prototype

Today
• Introduction

User-centered Rapid Prototyping Design
EMPIRICAL evaluation in REALISTIC settings
Implement
Design
Evaluate

Criteria
• Usability
• Usefulness
• Meaning
• (Aesthetic) qualities
• Sociability
• ...

User Experience Honeycomb

When to perform usability testing?
• Summative
• at the end
• to prove somethingdoes (not) work
• Formative:
• during development
• to improve

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
•...
www.measuringu.com/blog/method-when.php
www.nngroup.com/articles/which-ux-research-methods/

https://www.nngroup.com/articles/which-ux-research-methods/

147Jenny Preece, Yvonne Rogers, Helen Sharp- Interaction Design: Beyond Human-Computer Interaction

UserTracking

A/B testing

Engage Readers

Eye tracking
151Sebastian Kerckhof -T-Commerce ina second screen application

Eye tracking
152Sebastian Kerckhof -T-Commerce ina second screen application

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

By experts
• In HCI or Domain
• very effective
• Delicate relation with developers
• Identify problems
• Suggest solutions
• Through checklist ofguidelines

Evaluation Scenario
• Give the user some tasksto perform
• Which medications can interact with Dafalgan?
• Include open ended tasks
• Can youstill drink grape juice?

ConcurrentThink Aloud
• Typically participant perform certaintasks
• Participant isasked to ‘think aloud’

Example UsabilityTest
with a Paper Prototype
https://www.youtube.com/watch?v=9wQkLthhHKA

159https://www.interaction-design.org/literature/article/6-blind-men-walk-into-a-bar-the-ux-punchline

How many?
160https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/

Rule of thumb
• 5!
• 6! (user 5 finds new issues)
• etc...

Some factors that influence usability
• Culture
• colors, icons, ...
• Cognitive
• fatigue, boredom, stress, fear, ...
• Gender
• ‘abort’
• Carry-over effect
• multiple tests after each other
• Personality

Personality difference

Step 5: Prepare an evaluation scenario
Step 6: Perform a think aloud evaluation

Acknowledgements
• Slidesbased on courses of JorisKlerkx & Erik Duval †
• Usability and user experience:https://www.nngroup.com/
• 3d person images:https://www.flickr.com/photos/dom_fr/albums/72157639144430484

Thank you!
http://2.bp.blogspot.com/-gZjNR3XVULs/T_ZOVgE-5lI/AAAAAAAAAg8/6YVmd5Q064o/s1600/questions11.jpg
robin.decroon@cs.kuleuven.be

User Experience Talk

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a User Experience Talk

Semelhante a User Experience Talk (20)

Mais de Robin De Croon

Mais de Robin De Croon (20)

Último

Último (20)

User Experience Talk