UX 101 for developers, project managers and business stakeholders.

1. Our Awards:
Practical Usability
16.10.2014

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

3. Who am I?
Karolina Coates
UX Consultant
Afraid of monkeys
Follow me: @KarolinaCoates

4. What is usability
Video: User’s reaction to Windows 8:
https://www.youtube.com/watch?v=v4boTbv9_nU

5. What is usability?
Image credit: Luminis (http://www.luminis.eu/en/expertise/user-experience-design-2/)

6. 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):

7. HCI, IA, UI, UX, Usability?
Image credit: Kicker Studio

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

9. ‘Let’s call usability person to fix things’
Launch
Houston we have a
problem...
Learn

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

11. ..off you go!
Image credit: D. Alan Harris Photography

12. A better way
Learn sooner
Save time
Reduce risk
Launch
Learn Learn Learn
[1]

13. 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.
+ =

14. What is usability?
Usability is about risk management

15. Great usability
A High-Level Recipe

16. Recipe for great usability
BUSINESS
Strategy, people, process, organization
TECHNICAL
Application architecture, code, back-end, infrastructure
USER
End user / customer needs, front-end design, content
architecture, interaction
Collaboration

17. Recipe for great usability
LOGO
Online 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 1
Page content , page content , page
content , page content , page content ,
page content , page content , page
content
Category 2
Page 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

18. Recipe for great usability
BUSINESS
Strategy, people, process, organization
TECHNICAL
Application architecture, code, back-end,
infrastructure
USER
End user / customer wants and needs, front-end
design & content, content architecture, interaction
Collaboration
Image credit: Rovio

19. Recipe for great usability – what happens if..
Collaboration
TECHNICAL
Application architecture, code, back-end,
infrastructure
Image credit: Rovio

20. Great usability
Deep Diving

21. Who is your user?
What are the user groups ?
Image credit: Neal @flickr - http://www.flickr.com/photos/31878512@N06/4596278442/
Know your user

22. Know your user
What do YOU want the user to do?

23. Know your user
What the USER wants to do?

24. Know your user
What is the CONTEXT?

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

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

27. Simplicity
Video: Attention test
http://www.youtube.com/v/vJG698U2Mvo

28. Laws of Simplicity
1. Reduce thoughtfully
2. Organise (SLIP)
3. Hide
4. Emphasize what's important
5. Deemphasize what's less important

29. Simplicity
1. Reduce thoughtfully
How much is too much?

30. How much is too much?
It depends…
Image credit: jbgeronimi @flickr - http://www.flickr.com/photos/jbgeronimi/6363087361/

31. It depends…
How much is too much?
Image credit: quinn.anya @flickr - http://www.flickr.com/photos/quinnanya/3286023692/

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

33. Simplicity
1. Reduce thoughtfully
X

34. Simplicity
1. Reduce thoughtfully

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

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

37. Simplicity
3. Hide
.. what you don't need immediately (progressive disclosure)
Conditional content

38. Simplicity
4. Emphasize what's important (hierarchy)
Image credit: Web Accessiblity Initiative

39. Simplicity
4. Emphasize what's important (hierarchy)
<h1> <h2>
<h3>

40. Simplicity
4. Emphasize what's important
Image credit: Web Usability on a Budget by timgthomas

41. Simplicity
5. Deemphasize what’s less important
Image credit: Web Usability on a Budget by timgthomas

42. Guide the user and be forgiving
Call to action
Error prevention
Error messages
Feedback

43. Call to Action
Image credit: Luke Clum (Distilled.net) Design For People Not For Bots

44. Call to Action

45. Call to Action

46. Call to Action

47. Call to Action - what the user sees

48. Call to Action & emphasis of what’s important

49. Call to Action

50. Error prevention
Required fields
Default values
Masking
Smart enabling
Confirm critical or irreversible actions
Offer help on demand

51. Error prevention – required fields
*

52. Error prevention – default values
Defaults can save lives
Image credit: Eric J. Johnson and Daniel Goldstein Do Defaults Save Lives?

53. Error prevention - masking
Masking

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

55. Error messages
Make error messages human-readable

56. Feedback
Error messages-only approach is not good

57. Feedback

58. Feedback
Image credit: Bruce Tognazzini

59. What to do
..when you don’t know what to do

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

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

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

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

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

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

66. Usability in projects

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

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

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

70. Usability in projects – what is the process?
Image credit: Jeff Gothelf, Lean UX

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

72. Usability in projects – where does it fit?
Image credit: Ross Unger and Carolyn Chandlerr- ‘Project guiide to UX Design’

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

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

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

76. Usability in projects – where does it fit?
Example of an agile approach – Project 1
Image credit: John Whalen http://www.slideshare.net/johnwhalen

77. Usability in projects – where does it fit?
Image credit: John Whalen http://www.slideshare.net/johnwhalen
Example of an agile approach – Project 2

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

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

81. Maturing Usability: Quality in Software, Interaction
and Value, Effie Lai-Chong Law, Ebba Thora
Hvannberg, 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_f
or_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