Avoiding UI Mistakes
Introduction to
User Experience Methods
1
Danielle Gobert Cooley
@dgcooley
01 October 2013 #D2W2013
0...
Danielle Gobert Cooley
2
01 October 2013 @dgcooley #D2WC
danielle@dgcooley.com
@dgcooley
14 years as a UX Specialist
BE, B...
01 October 2013 @dgcooley #D2WC
3
Good sites?
4
01 October 2013 @dgcooley #D2WC
01 October 2013 @dgcooley #D2WC
5
01 October 2013 @dgcooley #D2WC
6
01 October 2013 @dgcooley #D2WC
7
01 October 2013 @dgcooley #D2WC
8http://www.theworldsworstwebsiteever.com/
01 October 2013 @dgcooley #D2WC
9http://metatech.org/
01 October 2013 @dgcooley #D2WC
10http://www.fgmarchitects.com/
Mistake #1: Keeping Secrets
11
01 October 2013 @dgcooley #D2WC
Tell the user what’s going on.
12
01 October 2013 @dgcooley #D2WC
The system should always keep users informed about what ...
01 October 2013 @dgcooley #D2WC
13
How do I
get Home?
01 October 2013 @dgcooley #D2WC
14
How do I
get Home?
01 October 2013 @dgcooley #D2WC
15
How much
longer will it
take?
01 October 2013 @dgcooley #D2WC
16
How many
steps are
there?
01 October 2013 @dgcooley #D2WC
17
Was my
data saved?
Mailchimp.com, Kayak.com
01 October 2013 @dgcooley #D2WC
18
Was my
data saved?
http://swagbucks.com
01 October 2013 @dgcooley #D2WC
19
Was my
data saved?
HootSuite iPad app, April 2012
01 October 2013 @dgcooley #D2WC
20
Am I
logged in?
01 October 2013 @dgcooley #D2WC
21
Where am I?
01 October 2013 @dgcooley #D2WC
22
Where am I?
Mistake #2: Poor Word Choice
23
01 October 2013 @dgcooley #D2WC
Use words people will understand.
The system should speak the users’ language, with words, phrases and
concepts familiar t...
Use words people care about
01 October 2013 @dgcooley #D2WC
25
http://www.nngroup.com/articles/user-centric-language/
Orth...
Use words people can relate to
01 October 2013 @dgcooley #D2WC
26
http://www.nngroup.com/articles/user-centric-language/
C...
Mistake #3: Taking Over
27
01 October 2013 @dgcooley #D2WC
User Control and Freedom
Users often choose system functions by mistake and will need a clearly
marked “emergency exit” to...
Mistake #4: Being Inconsistent
29
01 October 2013 @dgcooley #D2WC
Consistency and Standards
Users should not have to wonder whether different words, situations, or
actions mean the same th...
01 October 2013 @dgcooley #D2WC
31
01 October 2013 @dgcooley #D2WC
32
Recommendation: Both for
consistency and intuitiveness,
use the traditional calendar
pi...
01 October 2013 @dgcooley #D2WC
33
The three-way toggle, though not unique to this tool, is
not an immediately-recognizabl...
Consistency and Standards
01 October 2013 @dgcooley #D2WC
34
Mistake #5: Making Mistakes
Easy
35
01 October 2013 @dgcooley #D2WC
Error Prevention
Even better than good error messages is a careful design which prevents a
problem from occurring in the f...
01 October 2013 @dgcooley #D2WC
37
01 October 2013 @dgcooley #D2WC
38http://www.lukew.com/ff/entry.asp?571
01 October 2013 @dgcooley #D2WC
39Microsoft Word, Unknown version; Microsoft Word for Mac 2011, Version 14.3.1
Mistake #6: Relying on People’s
Memories
40
01 October 2013 @dgcooley #D2WC
Recognition > Recall
Minimize the user’s memory load by making objects, actions, and options
visible. The user should not ...
01 October 2013 @dgcooley #D2WC
42Microsoft PowerPoint for Mac 2011, Version 14.3.1
Mistake #7: Failing to Balance
Ease & Speed
43
01 October 2013 @dgcooley #D2WC
Flexibility and Efficiency of Use
Accelerators – unseen by the novice user – may often speed up the
interaction for the ex...
01 October 2013 @dgcooley #D2WC
45American Giant, ThinkGeek
01 October 2013 @dgcooley #D2WC
46Chrome’s right-click menu
01 October 2013 @dgcooley #D2WC
47Microsoft Word and PowerPoint for Mac 2011, Version 14.3.1
01 October 2013 @dgcooley #D2WC
48Twitter’s iOS app, November 2011
Mistake #8: Too Much Stuff
49
01 October 2013 @dgcooley #D2WC
Aesthetic and Minimalist Design
Dialogues should not contain information which is irrelevant or rarely
needed. Every extra...
01 October 2013 @dgcooley #D2WC
51
Aesthetic and Minimalist Design
01 October 2013 @dgcooley #D2WC
52Lane Furniture (2011)
01 October 2013 @dgcooley #D2WC
53
01 October 2013 @dgcooley #D2WC
54http://lesscontentmorestrategy.com
Mistake #9: Bad Error Messages
55
01 October 2013 @dgcooley #D2WC
Help users recognize, diagnose,
and recover from errors
Error messages should be expressed in plain language (no codes), p...
01 October 2013 @dgcooley #D2WC
57
01 October 2013 @dgcooley #D2WC
58
01 October 2013 @dgcooley #D2WC
59Chrome, version 26.0.141065 – May 2013
01 October 2013 @dgcooley #D2WC
60
01 October 2013 @dgcooley #D2WC
61
01 October 2013 @dgcooley #D2WC
62AmericanGiant.com
Mistake #10: No or Bad Help
63
01 October 2013 @dgcooley #D2WC
Help and Documentation
Even though it is better if the system can be used without
documentation, it may be necessary to pr...
01 October 2013 @dgcooley #D2WC
65
Help and Documentation
01 October 2013 @dgcooley #D2WC
66Microsoft PowerPoint for Mac 2011, Version 14.3.1
Bonus Mistake: Being Evil
67
01 October 2013 @dgcooley #D2WC
Dark Patterns
01 October 2013 @dgcooley #D2WC
68darkpatterns.org
A Dark Pattern is a type of user interface that appears t...
Road Block
01 October 2013 @dgcooley #D2WC
69
So, ask yourself:
• Am I keeping them informed about what’s going on?
• Will they understand this terminology?
• If I do X...
10 Heuristics for User Interface Design
01 October 2013 @dgcooley #D2WC
71
References
01 October 2013 @dgcooley #D2WC
72
More from me?
01 October 2013 @dgcooley #D2WC
73
Code: DCSPECIAL
12 December: How to Design Intuitive and Usable Products ...
01 October 2013 @dgcooley #D2WC
74
Upcoming SlideShare
Loading in …5
×

Avoiding UI Mistakes - D2WC

1,338 views

Published on

A quick take on Nielsen & Molich's 10 Heuristics, phrased as mistakes to avoid, with current (good and bad) examples. Presented at the Designer 2 Developer Workflow Conference in Kansas City Missouri, 01 October 2013.

Published in: Education, Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,338
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
24
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • For example, don’t auto-play videos.
  • Avoiding UI Mistakes - D2WC

    1. 1. Avoiding UI Mistakes Introduction to User Experience Methods 1 Danielle Gobert Cooley @dgcooley 01 October 2013 #D2W2013 01 October 2013 @dgcooley #D2WC
    2. 2. Danielle Gobert Cooley 2 01 October 2013 @dgcooley #D2WC danielle@dgcooley.com @dgcooley 14 years as a UX Specialist BE, Biomedical and Electrical Engineering – Vanderbilt University MS, Human Factors in Information Design – Bentley University Selected Work http://linkedin.com/in/dgcooley
    3. 3. 01 October 2013 @dgcooley #D2WC 3
    4. 4. Good sites? 4 01 October 2013 @dgcooley #D2WC
    5. 5. 01 October 2013 @dgcooley #D2WC 5
    6. 6. 01 October 2013 @dgcooley #D2WC 6
    7. 7. 01 October 2013 @dgcooley #D2WC 7
    8. 8. 01 October 2013 @dgcooley #D2WC 8http://www.theworldsworstwebsiteever.com/
    9. 9. 01 October 2013 @dgcooley #D2WC 9http://metatech.org/
    10. 10. 01 October 2013 @dgcooley #D2WC 10http://www.fgmarchitects.com/
    11. 11. Mistake #1: Keeping Secrets 11 01 October 2013 @dgcooley #D2WC
    12. 12. Tell the user what’s going on. 12 01 October 2013 @dgcooley #D2WC The system should always keep users informed about what is going on, through appropriate feedback within reasonable time. Where am I? How do I get Home? Was my data saved? How much longer will it take? How many steps are there? Am I done? Am I logged in?
    13. 13. 01 October 2013 @dgcooley #D2WC 13 How do I get Home?
    14. 14. 01 October 2013 @dgcooley #D2WC 14 How do I get Home?
    15. 15. 01 October 2013 @dgcooley #D2WC 15 How much longer will it take?
    16. 16. 01 October 2013 @dgcooley #D2WC 16 How many steps are there?
    17. 17. 01 October 2013 @dgcooley #D2WC 17 Was my data saved? Mailchimp.com, Kayak.com
    18. 18. 01 October 2013 @dgcooley #D2WC 18 Was my data saved? http://swagbucks.com
    19. 19. 01 October 2013 @dgcooley #D2WC 19 Was my data saved? HootSuite iPad app, April 2012
    20. 20. 01 October 2013 @dgcooley #D2WC 20 Am I logged in?
    21. 21. 01 October 2013 @dgcooley #D2WC 21 Where am I?
    22. 22. 01 October 2013 @dgcooley #D2WC 22 Where am I?
    23. 23. Mistake #2: Poor Word Choice 23 01 October 2013 @dgcooley #D2WC
    24. 24. Use words people will understand. The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order. 01 October 2013 @dgcooley #D2WC 24
    25. 25. Use words people care about 01 October 2013 @dgcooley #D2WC 25 http://www.nngroup.com/articles/user-centric-language/ Ortholite ® anatomical footbed Keep feet comfortable with our Ortholite® washable foam insole Breathable mesh lining treated with Aegis® Fight odor with our Aegis® antimicrobial-treated mesh lining
    26. 26. Use words people can relate to 01 October 2013 @dgcooley #D2WC 26 http://www.nngroup.com/articles/user-centric-language/ Customer must return item within 30 days for full refund. We give you a 30-day, money-back guarantee on all of our products.
    27. 27. Mistake #3: Taking Over 27 01 October 2013 @dgcooley #D2WC
    28. 28. User Control and Freedom Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo. 01 October 2013 @dgcooley #D2WC 28
    29. 29. Mistake #4: Being Inconsistent 29 01 October 2013 @dgcooley #D2WC
    30. 30. Consistency and Standards Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions. 01 October 2013 @dgcooley #D2WC 30
    31. 31. 01 October 2013 @dgcooley #D2WC 31
    32. 32. 01 October 2013 @dgcooley #D2WC 32 Recommendation: Both for consistency and intuitiveness, use the traditional calendar picker tool throughout the application.
    33. 33. 01 October 2013 @dgcooley #D2WC 33 The three-way toggle, though not unique to this tool, is not an immediately-recognizable control. Recommendation: Consider a more traditional radio button control: Exists: Yes No Either
    34. 34. Consistency and Standards 01 October 2013 @dgcooley #D2WC 34
    35. 35. Mistake #5: Making Mistakes Easy 35 01 October 2013 @dgcooley #D2WC
    36. 36. Error Prevention Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action. 01 October 2013 @dgcooley #D2WC 36
    37. 37. 01 October 2013 @dgcooley #D2WC 37
    38. 38. 01 October 2013 @dgcooley #D2WC 38http://www.lukew.com/ff/entry.asp?571
    39. 39. 01 October 2013 @dgcooley #D2WC 39Microsoft Word, Unknown version; Microsoft Word for Mac 2011, Version 14.3.1
    40. 40. Mistake #6: Relying on People’s Memories 40 01 October 2013 @dgcooley #D2WC
    41. 41. Recognition > Recall Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate. 01 October 2013 @dgcooley #D2WC 41http://online.epocrates.com/noFrame/
    42. 42. 01 October 2013 @dgcooley #D2WC 42Microsoft PowerPoint for Mac 2011, Version 14.3.1
    43. 43. Mistake #7: Failing to Balance Ease & Speed 43 01 October 2013 @dgcooley #D2WC
    44. 44. Flexibility and Efficiency of Use Accelerators – unseen by the novice user – may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. 01 October 2013 @dgcooley #D2WC 44
    45. 45. 01 October 2013 @dgcooley #D2WC 45American Giant, ThinkGeek
    46. 46. 01 October 2013 @dgcooley #D2WC 46Chrome’s right-click menu
    47. 47. 01 October 2013 @dgcooley #D2WC 47Microsoft Word and PowerPoint for Mac 2011, Version 14.3.1
    48. 48. 01 October 2013 @dgcooley #D2WC 48Twitter’s iOS app, November 2011
    49. 49. Mistake #8: Too Much Stuff 49 01 October 2013 @dgcooley #D2WC
    50. 50. Aesthetic and Minimalist Design Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. 01 October 2013 @dgcooley #D2WC 50
    51. 51. 01 October 2013 @dgcooley #D2WC 51
    52. 52. Aesthetic and Minimalist Design 01 October 2013 @dgcooley #D2WC 52Lane Furniture (2011)
    53. 53. 01 October 2013 @dgcooley #D2WC 53
    54. 54. 01 October 2013 @dgcooley #D2WC 54http://lesscontentmorestrategy.com
    55. 55. Mistake #9: Bad Error Messages 55 01 October 2013 @dgcooley #D2WC
    56. 56. Help users recognize, diagnose, and recover from errors Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution. 01 October 2013 @dgcooley #D2WC 56
    57. 57. 01 October 2013 @dgcooley #D2WC 57
    58. 58. 01 October 2013 @dgcooley #D2WC 58
    59. 59. 01 October 2013 @dgcooley #D2WC 59Chrome, version 26.0.141065 – May 2013
    60. 60. 01 October 2013 @dgcooley #D2WC 60
    61. 61. 01 October 2013 @dgcooley #D2WC 61
    62. 62. 01 October 2013 @dgcooley #D2WC 62AmericanGiant.com
    63. 63. Mistake #10: No or Bad Help 63 01 October 2013 @dgcooley #D2WC
    64. 64. Help and Documentation Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large. 01 October 2013 @dgcooley #D2WC 64
    65. 65. 01 October 2013 @dgcooley #D2WC 65
    66. 66. Help and Documentation 01 October 2013 @dgcooley #D2WC 66Microsoft PowerPoint for Mac 2011, Version 14.3.1
    67. 67. Bonus Mistake: Being Evil 67 01 October 2013 @dgcooley #D2WC
    68. 68. Dark Patterns 01 October 2013 @dgcooley #D2WC 68darkpatterns.org A Dark Pattern is a type of user interface that appears to have been carefully crafted to trick users into doing things, such as buying insurance with their purchase or signing up for recurring bills.
    69. 69. Road Block 01 October 2013 @dgcooley #D2WC 69
    70. 70. So, ask yourself: • Am I keeping them informed about what’s going on? • Will they understand this terminology? • If I do X, will it take control away from my user? • Am I being consistent with standards? With myself? • How can I reduce the possibility that they will make this mistake? • Am I asking them to remember something unnecessarily? If they get a phone call in the middle of this, are they screwed? • Am I accommodating both my novices and my experts? (How about repeat novices?) • Is there too much crap in here? • Have I given them the information they need to recover from their errors? • Can they find the help they need? Quickly and easily? When and where they need it? • Are we being evil? 70 01 October 2013 @dgcooley #D2WC
    71. 71. 10 Heuristics for User Interface Design 01 October 2013 @dgcooley #D2WC 71
    72. 72. References 01 October 2013 @dgcooley #D2WC 72
    73. 73. More from me? 01 October 2013 @dgcooley #D2WC 73 Code: DCSPECIAL 12 December: How to Design Intuitive and Usable Products Through User Research 06 March: Don’t Guess: Test! The Why, What, and How of User Testing
    74. 74. 01 October 2013 @dgcooley #D2WC 74

    ×