Download - Avoiding UI Mistakes
![Page 1: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/1.jpg)
KCDC 2013
Avoiding UI Mistakes
Introduction to User Experience Methods
1
Danielle Gobert Cooley @dgcooley
03 May 2013 #KCDC2013
![Page 2: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/2.jpg)
KCDC 2013
2
03 May 2013 @dgcooley #KCDC2013
![Page 3: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/3.jpg)
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
![Page 4: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/4.jpg)
KCDC 2013
Good sites?
4
03 May 2013 @dgcooley #KCDC2013
![Page 5: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/5.jpg)
KCDC 2013 03 May 2013 @dgcooley #KCDC2013
5
![Page 6: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/6.jpg)
KCDC 2013 03 May 2013 @dgcooley #KCDC2013
6
![Page 7: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/7.jpg)
KCDC 2013 03 May 2013 @dgcooley #KCDC2013
7
![Page 8: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/8.jpg)
KCDC 2013 03 May 2013 @dgcooley #KCDC2013
8 hOp://www.theworldsworstwebsiteever.com/
![Page 9: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/9.jpg)
KCDC 2013 03 May 2013 @dgcooley #KCDC2013
9 hOp://metatech.org/
![Page 10: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/10.jpg)
KCDC 2013 03 May 2013 @dgcooley #KCDC2013
10 hOp://www.fgmarchitects.com/
![Page 11: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/11.jpg)
KCDC 2013
The 10 Heuristics
11
03 May 2013 @dgcooley #KCDC2013
![Page 12: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/12.jpg)
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?
![Page 13: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/13.jpg)
KCDC 2013
Visibility of System Status
03 May 2013 @dgcooley #KCDC2013
13
How do I get Home?
![Page 14: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/14.jpg)
KCDC 2013
Visibility of System Status
03 May 2013 @dgcooley #KCDC2013
14
How do I get Home?
![Page 15: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/15.jpg)
KCDC 2013
Visibility of System Status
03 May 2013 @dgcooley #KCDC2013
15
How much longer will it
take?
![Page 16: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/16.jpg)
KCDC 2013
Visibility of System Status
03 May 2013 @dgcooley #KCDC2013
16
How many steps are there?
![Page 17: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/17.jpg)
KCDC 2013
Visibility of System Status
03 May 2013 @dgcooley #KCDC2013
17
Was my data saved?
Mailchimp.com, Kayak.com
![Page 18: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/18.jpg)
KCDC 2013
Visibility of System Status
03 May 2013 @dgcooley #KCDC2013
18
Was my data saved?
hOp://swagbucks.com
![Page 19: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/19.jpg)
KCDC 2013
Visibility of System Status
03 May 2013 @dgcooley #KCDC2013
19
Was my data saved?
HootSuite iPad app, April 2012
![Page 20: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/20.jpg)
KCDC 2013
Visibility of System Status
03 May 2013 @dgcooley #KCDC2013
20
Am I logged in?
![Page 21: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/21.jpg)
KCDC 2013
Visibility of System Status
03 May 2013 @dgcooley #KCDC2013
21
Where am I?
![Page 22: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/22.jpg)
KCDC 2013
Visibility of System Status
03 May 2013 @dgcooley #KCDC2013
22
Where am I?
![Page 23: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/23.jpg)
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
![Page 24: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/24.jpg)
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
![Page 25: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/25.jpg)
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
?
![Page 26: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/26.jpg)
KCDC 2013
Consistency and Standards
03 May 2013 @dgcooley #KCDC2013
26
![Page 27: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/27.jpg)
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.
![Page 28: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/28.jpg)
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
![Page 29: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/29.jpg)
KCDC 2013
Consistency and Standards
03 May 2013 @dgcooley #KCDC2013
29
![Page 30: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/30.jpg)
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
![Page 31: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/31.jpg)
KCDC 2013
Error PrevenMon
03 May 2013 @dgcooley #KCDC2013
31
![Page 32: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/32.jpg)
KCDC 2013
Error PrevenMon
03 May 2013 @dgcooley #KCDC2013
32 hOp://www.lukew.com/ff/entry.asp?571
![Page 33: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/33.jpg)
KCDC 2013
Error PrevenMon
03 May 2013 @dgcooley #KCDC2013
33 Microsoa Word, Unknown version; Microsoa Word for Mac 2011, Version 14.3.1
![Page 34: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/34.jpg)
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/
![Page 35: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/35.jpg)
KCDC 2013
RecogniMon > Recall
03 May 2013 @dgcooley #KCDC2013
35 Microsoa PowerPoint for Mac 2011, Version 14.3.1
![Page 36: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/36.jpg)
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
![Page 37: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/37.jpg)
KCDC 2013
Flexibility and Efficiency of Use
03 May 2013 @dgcooley #KCDC2013
37 American Giant, ThinkGeek
![Page 38: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/38.jpg)
KCDC 2013
Flexibility and Efficiency of Use
03 May 2013 @dgcooley #KCDC2013
38 Chrome’s right-‐click menu
![Page 39: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/39.jpg)
KCDC 2013
Flexibility and Efficiency of Use
03 May 2013 @dgcooley #KCDC2013
39 Microsoa Word and PowerPoint for Mac 2011, Version 14.3.1
![Page 40: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/40.jpg)
KCDC 2013
Flexibility and Efficiency of Use
03 May 2013 @dgcooley #KCDC2013
40 TwiOer’s iOS app, November 2011
![Page 41: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/41.jpg)
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
![Page 42: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/42.jpg)
KCDC 2013
AestheMc and Minimalist Design
03 May 2013 @dgcooley #KCDC2013
42
![Page 43: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/43.jpg)
KCDC 2013
AestheMc and Minimalist Design
03 May 2013 @dgcooley #KCDC2013
43 Lane Furniture (2011)
![Page 44: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/44.jpg)
KCDC 2013
AestheMc and Minimalist Design
03 May 2013 @dgcooley #KCDC2013
44
![Page 45: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/45.jpg)
KCDC 2013
AestheMc and Minimalist Design
03 May 2013 @dgcooley #KCDC2013
45 hOp://lesscontentmorestrategy.com
![Page 46: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/46.jpg)
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
![Page 47: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/47.jpg)
KCDC 2013
Help users recognize, diagnose, and recover from errors
03 May 2013 @dgcooley #KCDC2013
47
![Page 48: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/48.jpg)
KCDC 2013
Help users recognize, diagnose, and recover from errors
03 May 2013 @dgcooley #KCDC2013
48
![Page 49: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/49.jpg)
KCDC 2013
Help users recognize, diagnose, and recover from errors
03 May 2013 @dgcooley #KCDC2013
49 Chrome, version 26.0.141065 – May 2013
![Page 50: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/50.jpg)
KCDC 2013
Help users recognize, diagnose, and recover from errors
03 May 2013 @dgcooley #KCDC2013
50
![Page 51: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/51.jpg)
KCDC 2013
Help users recognize, diagnose, and recover from errors
03 May 2013 @dgcooley #KCDC2013
51
![Page 52: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/52.jpg)
KCDC 2013
Help users recognize, diagnose, and recover from errors
03 May 2013 @dgcooley #KCDC2013
52 AmericanGiant.com
![Page 53: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/53.jpg)
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
![Page 54: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/54.jpg)
KCDC 2013
Help and DocumentaMon
03 May 2013 @dgcooley #KCDC2013
54
![Page 55: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/55.jpg)
KCDC 2013
Help and DocumentaMon
03 May 2013 @dgcooley #KCDC2013
55 Microsoa PowerPoint for Mac 2011, Version 14.3.1
![Page 56: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/56.jpg)
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
![Page 57: Avoiding UI Mistakes](https://reader033.vdocument.in/reader033/viewer/2022051210/54c898394a7959c6408b4618/html5/thumbnails/57.jpg)
KCDC 2013
References
03 May 2013 @dgcooley #KCDC2013
57