user experience talk

Corilus – User experience

Robin De Croon

Joris Klerkx & Erik Duval †

http://[email protected]

Wednesday, May 11, 2016 1

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


Robin De 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



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


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 betweenusers and machines

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/

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 Graphical User Interface



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

Myth“We can fix the interface at the end”

• good design is more than just user interface

• having right features, building those features right


Usability

The effectiveness, efficiency, and satisfaction with which specified users achieve specified goals in particular environments


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)

Traditional Design Process


Today



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/

Know your users à Study workflow & habits



“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


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

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

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 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?


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 needs of the most important target group

NOT:

• representation of all user groups

• describe all needs of a product


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



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



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/i mage/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

Usability


Mobile Affordances


Medical Affordances

GPS to patient & open right file


Some Sketches


Participatory design approach

• WEL à Onderzoek• Vergelijkend onderzoek

5/11/16 105

5/11/16 106

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). New York, New York, 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 Research Techniques. IEEE. doi:10.4108/icst.pervasivehealth.2013.252026

Messages


113Tom De Buyser

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


“Users spend most of their time on websites other than yours” (Jakob’s Law of Web User Experience)

115Shopping Cart Expectations

However...

Thursday, May 12, 2016 116Groupthink or the bandwagon bias

Human working memory

• The magical number 7 (plus or minus 2)



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 complicated procedures for carrying out tasks

• Promote recognition rather than recall

• Allow encoding digital information to 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


Polymer-project


Step 4: Build your own paper prototype

Today



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 something does (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.phpwww.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

User Tracking


A/B testing


Engage Readers


Eye tracking

151Sebastian Kerckhof - T-Commerce in a second screen application

Eye tracking

152Sebastian Kerckhof - T-Commerce in a 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 of guidelines


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?


Concurrent Think Aloud

• Typically participant perform certain tasks

• Participant is asked to ‘think aloud’


Example Usability Test with a Paper Prototype

Thursday, May 12, 2016 158https://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)• 7! (user 6 finds new issues)• 8! (user 7 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

• 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


Thank you!


http://2.bp.blogspot.com/-gZjNR3XVULs/T_ZOVgE-5lI/AAAAAAAAAg8/6YVmd5Q064o/s1600/questions11.jpg

[email protected]