designing & prototyping useful apps

Designing & prototyping useful appsir. Robin De Croon

http://augment.cs.kuleuven.be

robin.decroon@cs.kuleuven.be

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

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

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.

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

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

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

• 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/

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?

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

• Build empathy

• Develop focus

• Communicate and form consensus

• Make and defend decisions

• Measure effectiveness

• Focus on the needs of the most important target group

• 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

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)

• 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

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

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

A/B testing

Engage Readers

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

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

designing & prototyping useful apps

Design

prototype jujutsu - prototyping mobile apps without coding

how mobile apps are useful for healthcare industry?

prototyping data intensive apps: trendingtopics.org

top 10 useful yet unknown android apps

websites, useful apps, and tips for living in...

workshop designing useful apps

useful apps for learning

for mobile apps prototyping - city tech...

mobile user testing: recruiting subjects, paper-prototyping,...

5 most useful android financial apps

php for android: prototyping android apps in php

prototyping ios apps – tom bowden – nov 2015 –...

useful iphone apps in canada

codeless prototyping for web and mobile apps

prototyping location apps with real...

rapid prototyping google glass apps using wearscript

apps useful ref

applications of useful andriod apps

prototyping data intensive apps:...

useful and powerful apps to enhance teaching