Designing & prototyping useful apps

Designing & prototyping useful appsir. Robin De Croon

http://augment.cs.kuleuven.be

[email protected]

Tuesday, March 14, 2017 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

• Strong interest in information visualization and health informatics

• Will post these slides on http://slideshare.net


Robin De Croon

Today

• Introduction• User-centered design• Rapid prototyping• Evaluation methods• Digital prototyping


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/

Tuesday, March 14, 2017 8www.interaction-design.org/encyclopedia/usability_evaluation.html


Remove friction betweenusers and machines


Not so easy...

Tuesday, March 14, 2017 11www.popsci.com/gadgets/article/2013-07/one-laptop-childs-de-evolutionhttp://erikduval.wordpress.com/2008/09/10/laptop-fun/

But important...

Tuesday, March 14, 2017 12http://www.sitepoint.com/bad-ux-healthcare/

Also important...



HCI

Task

UserTechnology

Context

Task – taking notes

Microsoft Word OneNote


Task – quick sketch

Autocad Paint


Task – company communication

Mail Slack


Task – search information

Tuesday, March 14, 2017 18www.insidefacebook.com/2013/10/03/why-facebook-hashtags-were-doomed-to-fail/

Technology / context


Technology


Technology as an enabler!

Tuesday, March 14, 2017

Technology


Technology


Technology


User


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

• Introduction• User-centered design• Rapid prototyping• Evaluation methods


User-Centered Design

“The central premise of user-centered design is that the best designed products and services result from understanding the needs of people who will use them.”

You are NOT the user!

(if you are the designer)

Tuesday, March 14, 2017 http://blog.experientia.com/uk-design-council-on-user-centred-design-and-experience-design/

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/

41

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 Confirmation Bias

Tuesday, March 14, 2017 43http://jamesclear.com/

The user is always right

If the user does something “wrong”

à it is the fault of the system designer!


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


Tuesday, March 14, 2017 59http://www.usability.gov/how-to-and-tools/methods/personas.html


Tuesday, March 14, 2017 61http://user.com/assets/files/downloads/sample-persona-from-interaction-design-inc.pdf

Tuesday, March 14, 2017 62www.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 2: User research (persona)

Step 3: storyboarding

Tuesday, March 14, 2017 68http://www.smashingmagazine.com/2014/08/a-closer-look-at-personas-part-1/

Tuesday, March 14, 2017 69hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf











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




Step 3: Develop storyboard

Today



Step 4: Prototyping

Tuesday, March 14, 2017 82www.paperprototyping.com/




Typical set-up


No need for artistic skills!

Tuesday, March 14, 2017 87http://www.userfocus.co.uk/articles/paperprototyping.html

Should be fast!


Wireframes are not Paper Prototypes

Tuesday, March 14, 2017 89http://www.userfocus.co.uk/articles/paperprototyping.html

Whiteboarding is not as effective!


Paper Prototypes


• Early feedback

• Time efficient

PERSONAL EXAMPLES

MyMedicationData

Triatriumph




96Tom 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)

98Shopping Cart Expectations

However...

Tuesday, March 14, 2017 99Groupthink 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


Wearable interfaces


Augmented reality


Virtual reality


Brainwave interfaces





Step 3: Develop storyboard

Step 4: Paper prototype

TODO – short presentation

• 3 minutes presentation

• 2 minutes feedback

• Use your storyboard to guide your ‘presentation’

• Present paper prototype


Paper prototype

Designing & prototyping useful apps – part 2ir. Robin De Croon

http://augment.cs.kuleuven.be

[email protected]


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/

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

User Tracking

126

A/B testing


Engage Readers


Eye tracking


Eye tracking

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

Eye tracking

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


By experts

• In HCI or Domain • very effective

• Delicate relation with developers

• Identify problems• Suggest solutions

• Through checklist of guidelines


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

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


Concurrent Think Aloud

• Typically participant perform certain tasks

• Participant is asked to ‘think aloud’


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?


Example Usability Test with a Paper Prototype

Tuesday, March 14, 2017 138https://www.youtube.com/watch?v=9wQkLthhHKA

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

How many?

140https://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

Today



POP


Tuesday, March 14, 2017 148http://www.cooper.com/prototyping-tools

Proto.io


Fluid UI


Native Applications


android studioand many more!

Polymer-project



Step 7: Create a digital prototype

Step 8: Perform an evaluation of digital prototype

proto.io tutorial


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]