Avoiding UI Mistakes
-
Upload
danielle-cooley -
Category
Technology
-
view
109 -
download
1
description
Transcript of Avoiding UI Mistakes
KCDC 2013
Avoiding UI Mistakes
Introduction to User Experience Methods
1
Danielle Gobert Cooley @dgcooley
03 May 2013 #KCDC2013
KCDC 2013
2
03 May 2013 @dgcooley #KCDC2013
KCDC 2013
Danielle Gobert Cooley
3
03 May 2013 @dgcooley #KCDC2013
@dgcooley
14 years as a UX Specialist BE, Biomedical and Electrical Engineering – Vanderbilt University MS, Human Factors in InformaMon Design – Bentley University
Selected Clients
hOp://linkedin.com/in/dgcooley
KCDC 2013
Good sites?
4
03 May 2013 @dgcooley #KCDC2013
KCDC 2013 03 May 2013 @dgcooley #KCDC2013
5
KCDC 2013 03 May 2013 @dgcooley #KCDC2013
6
KCDC 2013 03 May 2013 @dgcooley #KCDC2013
7
KCDC 2013 03 May 2013 @dgcooley #KCDC2013
8 hOp://www.theworldsworstwebsiteever.com/
KCDC 2013 03 May 2013 @dgcooley #KCDC2013
9 hOp://metatech.org/
KCDC 2013 03 May 2013 @dgcooley #KCDC2013
10 hOp://www.fgmarchitects.com/
KCDC 2013
The 10 Heuristics
11
03 May 2013 @dgcooley #KCDC2013
KCDC 2013
Visibility of System Status
12
03 May 2013 @dgcooley #KCDC2013
The system should always keep users informed about what is going on, through appropriate feedback within reasonable Mme.
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?
KCDC 2013
Visibility of System Status
03 May 2013 @dgcooley #KCDC2013
13
How do I get Home?
KCDC 2013
Visibility of System Status
03 May 2013 @dgcooley #KCDC2013
14
How do I get Home?
KCDC 2013
Visibility of System Status
03 May 2013 @dgcooley #KCDC2013
15
How much longer will it
take?
KCDC 2013
Visibility of System Status
03 May 2013 @dgcooley #KCDC2013
16
How many steps are there?
KCDC 2013
Visibility of System Status
03 May 2013 @dgcooley #KCDC2013
17
Was my data saved?
Mailchimp.com, Kayak.com
KCDC 2013
Visibility of System Status
03 May 2013 @dgcooley #KCDC2013
18
Was my data saved?
hOp://swagbucks.com
KCDC 2013
Visibility of System Status
03 May 2013 @dgcooley #KCDC2013
19
Was my data saved?
HootSuite iPad app, April 2012
KCDC 2013
Visibility of System Status
03 May 2013 @dgcooley #KCDC2013
20
Am I logged in?
KCDC 2013
Visibility of System Status
03 May 2013 @dgcooley #KCDC2013
21
Where am I?
KCDC 2013
Visibility of System Status
03 May 2013 @dgcooley #KCDC2013
22
Where am I?
KCDC 2013
Match Between System and Real World
The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-‐oriented terms. Follow real-‐world convenMons, making informaMon appear in a natural and logical order.
03 May 2013 @dgcooley #KCDC2013
23
KCDC 2013
User Control and Freedom
Users oaen choose system funcMons 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.
03 May 2013 @dgcooley #KCDC2013
24
KCDC 2013
Consistency and Standards
Users should not have to wonder whether different words, situaMons, or acMons mean the same thing. Follow plaform convenMons.
03 May 2013 @dgcooley #KCDC2013
25
?
KCDC 2013
Consistency and Standards
03 May 2013 @dgcooley #KCDC2013
26
KCDC 2013
Consistency and Standards
03 May 2013 @dgcooley #KCDC2013
27
Recommenda)on: Both for consistency and intui5veness, use the tradi5onal calendar picker tool throughout the applica5on.
KCDC 2013
Consistency and Standards
03 May 2013 @dgcooley #KCDC2013
28
The three-‐way toggle, though not unique to this tool, is not an immediately-‐recognizable control.
Recommenda)on: Consider a more tradi5onal radio bu>on control:
Exists: ¤Yes ¢No ¢Either
KCDC 2013
Consistency and Standards
03 May 2013 @dgcooley #KCDC2013
29
KCDC 2013
Error PrevenMon
Even beOer than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-‐prone condiMons or check for them and present users with a confirmaMon opMon before they commit to the acMon.
03 May 2013 @dgcooley #KCDC2013
30
KCDC 2013
Error PrevenMon
03 May 2013 @dgcooley #KCDC2013
31
KCDC 2013
Error PrevenMon
03 May 2013 @dgcooley #KCDC2013
32 hOp://www.lukew.com/ff/entry.asp?571
KCDC 2013
Error PrevenMon
03 May 2013 @dgcooley #KCDC2013
33 Microsoa Word, Unknown version; Microsoa Word for Mac 2011, Version 14.3.1
KCDC 2013
RecogniMon > Recall
Minimize the user’s memory load by making objects, acMons, and opMons visible. The user should not have to remember informaMon from one part of the dialogue to another. InstrucMons for use of the system should be visible or easily retrievable whenever appropriate.
03 May 2013 @dgcooley #KCDC2013
34 hOp://online.epocrates.com/noFrame/
KCDC 2013
RecogniMon > Recall
03 May 2013 @dgcooley #KCDC2013
35 Microsoa PowerPoint for Mac 2011, Version 14.3.1
KCDC 2013
Flexibility and Efficiency of Use
Accelerators – unseen by the novice user – may oaen speed up the interacMon for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent acMons.
03 May 2013 @dgcooley #KCDC2013
36
KCDC 2013
Flexibility and Efficiency of Use
03 May 2013 @dgcooley #KCDC2013
37 American Giant, ThinkGeek
KCDC 2013
Flexibility and Efficiency of Use
03 May 2013 @dgcooley #KCDC2013
38 Chrome’s right-‐click menu
KCDC 2013
Flexibility and Efficiency of Use
03 May 2013 @dgcooley #KCDC2013
39 Microsoa Word and PowerPoint for Mac 2011, Version 14.3.1
KCDC 2013
Flexibility and Efficiency of Use
03 May 2013 @dgcooley #KCDC2013
40 TwiOer’s iOS app, November 2011
KCDC 2013
AestheMc and Minimalist Design
Dialogues should not contain informaMon which is irrelevant or rarely needed. Every extra unit of informaMon in a dialogue competes with the relevant units of informaMon and diminishes their relaMve visibility.
03 May 2013 @dgcooley #KCDC2013
41
KCDC 2013
AestheMc and Minimalist Design
03 May 2013 @dgcooley #KCDC2013
42
KCDC 2013
AestheMc and Minimalist Design
03 May 2013 @dgcooley #KCDC2013
43 Lane Furniture (2011)
KCDC 2013
AestheMc and Minimalist Design
03 May 2013 @dgcooley #KCDC2013
44
KCDC 2013
AestheMc and Minimalist Design
03 May 2013 @dgcooley #KCDC2013
45 hOp://lesscontentmorestrategy.com
KCDC 2013
Help users recognize, diagnose, and recover from errors
Error messages should be expressed in plain language (no codes), precisely indicate the problem, and construcMvely suggest a soluMon.
03 May 2013 @dgcooley #KCDC2013
46
KCDC 2013
Help users recognize, diagnose, and recover from errors
03 May 2013 @dgcooley #KCDC2013
47
KCDC 2013
Help users recognize, diagnose, and recover from errors
03 May 2013 @dgcooley #KCDC2013
48
KCDC 2013
Help users recognize, diagnose, and recover from errors
03 May 2013 @dgcooley #KCDC2013
49 Chrome, version 26.0.141065 – May 2013
KCDC 2013
Help users recognize, diagnose, and recover from errors
03 May 2013 @dgcooley #KCDC2013
50
KCDC 2013
Help users recognize, diagnose, and recover from errors
03 May 2013 @dgcooley #KCDC2013
51
KCDC 2013
Help users recognize, diagnose, and recover from errors
03 May 2013 @dgcooley #KCDC2013
52 AmericanGiant.com
KCDC 2013
Help and DocumentaMon
Even though it is beOer if the system can be used without documentaMon, it may be necessary to provide help and documentaMon. Any such informaMon should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.
03 May 2013 @dgcooley #KCDC2013
53
KCDC 2013
Help and DocumentaMon
03 May 2013 @dgcooley #KCDC2013
54
KCDC 2013
Help and DocumentaMon
03 May 2013 @dgcooley #KCDC2013
55 Microsoa PowerPoint for Mac 2011, Version 14.3.1
KCDC 2013
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 accommodaMng both my novices and my experts? (How about
repeat novices? • Is there too much crap in here? • Have I given them the informaMon they need to recover from their
errors? • Can they find the help they need? Quickly and easily? When and where
they need it?
56
03 May 2013 @dgcooley #KCDC2013
KCDC 2013
References
03 May 2013 @dgcooley #KCDC2013
57