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.
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17
Avoiding UI Mistakes - D2WC
1. Avoiding UI Mistakes
Introduction to
User Experience Methods
1
Danielle Gobert Cooley
@dgcooley
01 October 2013 #D2W2013
01 October 2013 @dgcooley #D2WC
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
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?
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. 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. 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.
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
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
32. 01 October 2013 @dgcooley #D2WC
32
Recommendation: Both for
consistency and intuitiveness,
use the traditional calendar
picker tool throughout the
application.
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
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
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. 01 October 2013 @dgcooley #D2WC
42Microsoft PowerPoint for Mac 2011, Version 14.3.1
43. Mistake #7: Failing to Balance
Ease & Speed
43
01 October 2013 @dgcooley #D2WC
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
47. 01 October 2013 @dgcooley #D2WC
47Microsoft Word and PowerPoint for Mac 2011, Version 14.3.1
48. 01 October 2013 @dgcooley #D2WC
48Twitter’s iOS app, November 2011
49. Mistake #8: Too Much Stuff
49
01 October 2013 @dgcooley #D2WC
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
54. 01 October 2013 @dgcooley #D2WC
54http://lesscontentmorestrategy.com
55. Mistake #9: Bad Error Messages
55
01 October 2013 @dgcooley #D2WC
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
63. Mistake #10: No or Bad Help
63
01 October 2013 @dgcooley #D2WC
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
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.
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. 10 Heuristics for User Interface Design
01 October 2013 @dgcooley #D2WC
71
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