Date post: | 27-Jan-2015 |
Category: |
Education |
Upload: | danielle-cooley |
View: | 107 times |
Download: | 1 times |
01 October 2013 @dgcooley #D2WC
1
Avoiding UI Mistakes
Introduction to User Experience MethodsDanielle Gobert Cooley
@dgcooley
01 October 2013 #D2W2013
01 October 2013 @dgcooley #D2WC
2
Danielle Gobert Cooley
@dgcooley
14 years as a UX Specialist
BE, Biomedical and Electrical Engineering – Vanderbilt UniversityMS, Human Factors in Information Design – Bentley University
Selected Work
http://linkedin.com/in/dgcooley
01 October 2013 @dgcooley #D2WC
3
01 October 2013 @dgcooley #D2WC
4
Good sites?
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/
01 October 2013 @dgcooley #D2WC
11
Mistake #1: Keeping Secrets
01 October 2013 @dgcooley #D2WC
12
Tell the user what’s going on.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?
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?
01 October 2013 @dgcooley #D2WC
23
Mistake #2: Poor Word Choice
01 October 2013 @dgcooley #D2WC
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
25
Use words people care about
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
01 October 2013 @dgcooley #D2WC
26
Use words people can relate to
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.
01 October 2013 @dgcooley #D2WC
27
Mistake #3: Taking Over
01 October 2013 @dgcooley #D2WC
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
29
Mistake #4: Being Inconsistent
01 October 2013 @dgcooley #D2WC
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
31
01 October 2013 @dgcooley #D2WC
32
Recommendation: Both for consistency and intuitiveness, use the traditional calendar picker tool throughout the application.
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
01 October 2013 @dgcooley #D2WC
34
Consistency and Standards
01 October 2013 @dgcooley #D2WC
35
Mistake #5: Making Mistakes Easy
01 October 2013 @dgcooley #D2WC
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
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
01 October 2013 @dgcooley #D2WC
40
Mistake #6: Relying on People’s Memories
01 October 2013 @dgcooley #D2WC
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.
http://online.epocrates.com/noFrame/
01 October 2013 @dgcooley #D2WC
42Microsoft PowerPoint for Mac 2011, Version 14.3.1
01 October 2013 @dgcooley #D2WC
43
Mistake #7: Failing to Balance Ease & Speed
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
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
01 October 2013 @dgcooley #D2WC
49
Mistake #8: Too Much Stuff
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
51
01 October 2013 @dgcooley #D2WC
52
Aesthetic and Minimalist Design
Lane Furniture (2011)
01 October 2013 @dgcooley #D2WC
53
01 October 2013 @dgcooley #D2WC
54http://lesscontentmorestrategy.com
01 October 2013 @dgcooley #D2WC
55
Mistake #9: Bad Error Messages
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
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
01 October 2013 @dgcooley #D2WC
63
Mistake #10: No or Bad Help
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
65
01 October 2013 @dgcooley #D2WC
66
Help and Documentation
Microsoft PowerPoint for Mac 2011, Version 14.3.1
01 October 2013 @dgcooley #D2WC
67
Bonus Mistake: Being Evil
01 October 2013 @dgcooley #D2WC
68
Dark Patterns
darkpatterns.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.
01 October 2013 @dgcooley #D2WC
69
Road Block
01 October 2013 @dgcooley #D2WC
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?
01 October 2013 @dgcooley #D2WC
71
10 Heuristics for User Interface Design
01 October 2013 @dgcooley #D2WC
72
References
01 October 2013 @dgcooley #D2WC
73
More from me?
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
01 October 2013 @dgcooley #D2WC
74