Practical Usability
81
Our Awards: Practical Usability 16.10.2014
-
Upload
karolina-coates -
Category
Design
-
view
110 -
download
0
Transcript of Practical Usability
Our Awards:
Practical Usability
16.10.2014
Agenda(or what to expect)
1. What is usability?
2. Recipe for great usability
Know your user
Keep It Simple S.. (KISS)
Guide the user and be forgiving
3. What to do when you don’t know what to do
4. Q&A
Image credit: xkcd http://xkcd.com/970/
Who am I?
Karolina CoatesUX Consultant
Afraid of monkeys
Follow me: @KarolinaCoates
What is usability
Video: User’s reaction to Windows 8:
https://www.youtube.com/watch?v=v4boTbv9_nU
What is usability?
Image credit: Luminis (http://www.luminis.eu/en/expertise/user-experience-design-2/)
What is usability?
“The extent to which a product can be used by specified users
to achieve specified goals
with effectiveness, efficiency and satisfaction
in a specified context of use.
Definition of usability (ISO 9241-11):
HCI, IA, UI, UX, Usability?
Image credit: Kicker Studio
What usability is NOT
#1 Usability = making things pretty
People generally perceive that an attractive product is
easier to use.
An attractive design builds trust – don’t backstab trust
with bad usability!
#2 Usability is an extra
#3 ‘Let’s call usability person to fix things’
‘Let’s call usability person to fix things’
Launch
Houston we have a problem...
Learn
No problem, here’s what you need to do...
Image credit: NASA (A long scroll of data from Venus, seen in front of JPL's Mariner 2 mission board)
..off you go!
Image credit: D. Alan Harris Photography
A better way
Learn sooner
Save time
Reduce risk
Launch
Learn Learn Learn
[1]
What is usability?
Definition of usability (Karolina):
Give the users a tool to do what they need to do
in an easy, intuitive way, without unnecessary obstructions.
+ =
What is usability?
Usability is about risk management
Great usabilityA High-Level Recipe
Recipe for great usability
BUSINESSStrategy, people, process, organization
TECHNICALApplication architecture, code, back-end, infrastructure
USER End user / customer needs, front-end design, content
architecture, interaction
Collaboration
Recipe for great usability
LOGOOnline Service B1
Home | Online Service A | Online Service B | Contact Us
Online Service B2
Page Title
Page content, page content, page
content News
25/09/2014 News Item 1
25/09/2014 News Item 2
25/09/2014 News Item 3, this one
has a really long title
Category 1Page content , page content , page
content , page content , page content ,
page content , page content , page
content
Category 2Page content , page content , page
content , page content , page content ,
page content , page content , page
content
Featured Link 1
Featured Link 2
Home | Online Service A | Online Service A2 | Contact Us
Recipe for great usability
BUSINESSStrategy, people, process, organization
TECHNICALApplication architecture, code, back-end,
infrastructure
USER End user / customer wants and needs, front-end
design & content, content architecture, interaction
Collaboration
Image credit: Rovio
Recipe for great usability – what happens if..
Collaboration
TECHNICALApplication architecture, code, back-end,
infrastructure
Image credit: Rovio
Great usabilityDeep Diving
Who is your user?
What are the user groups ?
Image credit: Neal @flickr - http://www.flickr.com/photos/31878512@N06/4596278442/
Know your user
Know your user
What do YOU want the user to do?
Know your user
What the USER wants to do?
Know your user
What is the CONTEXT?
Know your user
Focus on TASKS not actions.
Use the language that is familiar to the user, not organization.
‘As a (user)… I want to… so that…’
Image credit: Web Usability on a Budget by timgthomas
Organization says: User says:
Keep It Simple Stupid
Perfection is achieved, not when there is nothing more to add,
but when there is nothing left to take away.
Antoine de Saint-Exupery
..but why?
Simplicity
Video: Attention test
http://www.youtube.com/v/vJG698U2Mvo
Laws of Simplicity
1. Reduce thoughtfully
2. Organise (SLIP)
3. Hide
4. Emphasize what's important
5. Deemphasize what's less important
Simplicity
1. Reduce thoughtfully
How much is too much?
How much is too much?
It depends…
Image credit: jbgeronimi @flickr - http://www.flickr.com/photos/jbgeronimi/6363087361/
It depends…
How much is too much?
Image credit: quinn.anya @flickr - http://www.flickr.com/photos/quinnanya/3286023692/
Simplicity
1. Reduce thoughtfully
Identify what is critical for task / page
Question everything else
No ranting
Omit needless words
Half the word count (or less) than conventional writing
Language appropriate for audience, e.g. no legal / technical talk*
Simplicity
1. Reduce thoughtfully
X
Simplicity
1. Reduce thoughtfully
Simplicity
2. Organise (SLIP)Sort, Label, Integrate & Prioritise: group related items, mark groups with clear
headers, use headers to show visual hierarchy, add whitespace between
groups, use patterns
>>?
Simplicity
2. Organise (SLIP)Sort, Label, Integrate & Prioritise: group related items, mark groups with clear
headers, use headers to show visual hierarchy, add whitespace between groups
Simplicity
3. Hide.. what you don't need immediately (progressive disclosure)
Conditional content
Simplicity
4. Emphasize what's important (hierarchy)
Image credit: Web Accessiblity Initiative
Simplicity
4. Emphasize what's important (hierarchy)
<h1> <h2>
<h3>
Simplicity
4. Emphasize what's important
Image credit: Web Usability on a Budget by timgthomas
Simplicity
5. Deemphasize what’s less important
Image credit: Web Usability on a Budget by timgthomas
Guide the user and be forgiving
Call to action
Error prevention
Error messages
Feedback
Call to Action
Image credit: Luke Clum (Distilled.net) Design For People Not For Bots
Call to Action
Call to Action
Call to Action
Call to Action - what the user sees
Call to Action & emphasis of what’s important
Call to Action
Error prevention
Required fields
Default values
Masking
Smart enabling
Confirm critical or irreversible actions
Offer help on demand
Error prevention – required fields*
Error prevention – default values
Defaults can save lives
Image credit: Eric J. Johnson and Daniel Goldstein Do Defaults Save Lives?
Error prevention - masking
Masking
Error messages
Do:
Be visible
Be specific
Be relevant
Use plain language
Make is clear what is the source of the error
Give a hint how to recover
Don’t:
Make general / meaningless statements
Use technical language / error codes
Be negative
Error messages
Make error messages human-readable
Feedback
Error messages-only approach is not good
Feedback
What to do..when you don’t know what to do
What to do when you don’t know what to do
Case 1: You know something is wrong but can’t put your finger on it.
OR
Case 2: You need to prioritise changes / user stories
Case 3: You need to validate your screens / changes / assumptions
Are we building the right thing?
Are we doing it right?
Need to make an informed decision
What to do when you don’t know what to do
Image credit: mksystem http://www.flickr.com/photos/mksystem/4900610110/
We’re too familiar with our own work to be able to spot where it fails..
- Test with users instead
I like clover,
preferably in
pink
Usability testing 101
This is not about gathering opinions, this is observation
• Find your user
• Plan & Prepare: create scenarios and tasks, the screen / mockup /
wireframe
• Instruct the user to do what they would normally do in this scenario and
OBSERVE. If you’re the one doing most of the talking, you’re doing it wrong.
• Look out for stumbling blocks and opportunities.
• Always thank your user
• Document & share the results with the team
• Iterate
What to do when you don’t know what to do
But how about the general public?
• Hallway testing
• Lab-based usability testing
• Remote usability testing
• Usability inspection
• A/B testing*
• Google Analytics*
Usability testing 101
Image credit: NNGroup: http://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/
Zero users give zero insights
What to do when you don’t know what to do
Number of deaths resulting from badly done usability testing:
How to do usability testing video: https://www.youtube.com/watch?v=QckIzHC99Xc
0
Usability in projects
Usability in projects
Research & evaluation
What do you actually do?
Strategy and Ideation Design
Stakeholder Interviews
Field Research
Expert Reviews
Usability Testing
Workshops
Design Studio (method)
Rapid Prototyping
Iterative Refinement
Information Architecture
Interaction Design
Visual Design
Branding
Usability in projects
Guerrilla Usability
If it’s not built in to the project,
it won’t happen
Image credit: diana MĂRGĂRIT https://www.flickr.com/photos/kaleid/295763937
Usability in projects
Whose responsibility is it?
Throwing a UX resource at the problem doesn’t work
UX Champion
Team buy-in & shared responsibility
Executive support
Usability in projects – what is the process?
Image credit: Jeff Gothelf, Lean UX
Usability in projects – where does it fit?
Image credit: Ross Unger and Carolyn Chandlerr- ‘Project guiide to UX Design’
Example of a waterfall approach
Challenge: Learn early to minimise cost of change
Usability in projects – where does it fit?
Image credit: Ross Unger and Carolyn Chandlerr- ‘Project guiide to UX Design’
Usability in projects – where does it fit?
Image credit: Ross Unger and Carolyn Chandlerr- ‘Project guiide to UX Design’
Example of an agile approach
Challenge:
Maintain a consistent view of the UI while developing it in short iterative cycles
Usability in projects
Agile Development that Incorporates User Experience Practices
UX must work at least one step ahead of the sprint
UX work is early, flexible: done up-front to storyboard level with good
expectation setting that changes will happen
Low-fidelity prototype is the ongoing spec: owned by UX, agreed by
stakeholders (communication tool, not a deliverable!)
UX work happens in a parallel track: pair complex back-end sprints
with UX intensive work
Guerrilla style UX validation: fast, discount methods run frequently
and regularly on early code
Usability in projects – where does it fit?
Integrating usability with Agile
Image credit: Dr. Charles B. Kreitzberg and Ambrose Little http://msdn.microsoft.com/en-us/magazine/dd882523.aspx
Usability in projects – where does it fit?
Example of an agile approach – Project 1
Image credit: John Whalen http://www.slideshare.net/johnwhalen
Usability in projects – where does it fit?
Image credit: John Whalen http://www.slideshare.net/johnwhalen
Example of an agile approach – Project 2
Key takeaways
• Good usability doesn’t happen by accident.
• Usability is a mature discipline but there is no one-size-fits-all process
• Best practice is well defined – follow it
• Help people on the project make informed decisions
• You have a choice: enable users’ voice to be heard during project or
hear what they say on youtube
• Testing with users is crucial, easy and effective
• Rinse & repeat – small but often goes a long way
What to do when you don’t know what to do
General usability Usability testing The brain lady
Good-all round resource
Worth following:
@UXPA_Int
@uxmag
@IxDA
@KarolinaCoates (me )
UX in projects
Maturing Usability: Quality in Software, Interaction and Value, Effie Lai-Chong Law, Ebba ThoraHvannberg, Gilbert Cockton
Web Usability on a Budget by Tim G. Thomas: https://speakerdeck.com/timgthomas/web-usability-on-a-budget
Laws of Simplicity, John Maeda: http://www.slideshare.net/bright9977/10-laws-of-simplicity
Usability testing on 10 cents a day: http://sensible.com/downloads/DMMTchapter09_for_personal_use_only.pdf
Startup Lab workshop: User Research, Quick 'n' Dirty (Google Ventures), Michael Margolis
Usability.gov Guidelines: http://guidelines.usability.gov/
UK Government’s Digital Service:
https://gds.blog.gov.uk/
GDS is a team leading digital transformation of UK’s
government with the goal of making it easy and
preferred by people. They share openly their findings for
everyone to learn:
https://designnotes.blog.gov.uk/
Caroline Jarrett (@cjforms) is one of the leads at GDS
and also UX-industry lead. You’ll find plenty of
resources on her website:
http://www.formsthatwork.com/
Recent findings that help designing better forms:
http://www.slideshare.net/UXPA/straub-self-
serviceformsuxpa14
Luke Wroblewski’s book: Web Form Design: Filling in
the Blanks.
References
