Designing & prototyping useful apps

Designing & prototyping
useful apps
ir. 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

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

Today
• Introduction

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

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
“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 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 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
• Introduction

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

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 ofWeb User Experience)
98Shopping Cart Expectations

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

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 2
ir. Robin De Croon
http://augment.cs.kuleuven.be

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 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.php
www.nngroup.com/articles/which-ux-research-methods/

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

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

ConcurrentThink 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 UsabilityTest
with a Paper Prototype
https://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)
• 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
• Introduction

POP

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

Proto.io

Fluid UI

Native Applications
android studio
and many more!

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Designing & prototyping useful apps

Ähnlich wie Designing & prototyping useful apps (20)

Mehr von Robin De Croon

Mehr von Robin De Croon (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Designing & prototyping useful apps