Intro to Usability HeuristicsSamples of good and bad design

Kseniya KoltunUX Specialist

kseniya.koltun

10 Usability Heuristics by Nielsen & Molich, 1993

1 Visibility of system status

2 Match between system and the real world

3 User control and freedom

4 Consistency and standards

5 Error prevention

6 Recognition rather than recall

7 Flexibility and efficiency of use

8 Aesthetic and minimalist design

9 Help users recognize, diagnose, and recover from errors

10 Help and documentation

Eight Golden Rules of Interface Design by Shneiderman & Plaisant, 2005

1 Strive for consistency

2 Enable frequent users to use shortcuts

3 Offer informative feedback

4 Design dialog to yield closure

5 Offer simple error handling

6 Permit easy reversal of actions

7 Support internal locus of control

8 Reduce short-term memory load

UI Design Guidelines by D. Stone and others, 2005

1 Visibility: First step to goal should be clear

2 Affordance: Control suggests how to use it

3 Feedback: Should be clear what happened or is happening

4 Simplicity: as simple as possible & task-focused

5 Structure: content organized sensibly

6 Consistency: similarity for predictability

7 Tolerance: prevent errors, help recovery

8 Accessibility: usable by all intended users, despite handicap, access device, or environmental conditions

UI Guidelines are based on how people perceive, think, learn, act

Basic Usability Heuristics

10 Usability Heuristics by Nielsen & Molich, 1993

1 Visibility of system status

2 Match between system and the real world

3 User control and freedom

4 Consistency and standards

5 Error prevention

6 Recognition rather than recall

7 Flexibility and efficiency of use

8 Aesthetic and minimalist design

9 Help users recognize, diagnose, and recover from errors

10 Help and documentation

1 Visibility of system status

Sample of good design1 Visibility of system status

Sample of bad design1 Visibility of system status

2 Match between system and the real world

Sample of good design2 Match between system and the real world

Sample of bad design2 Match between system and the real world

Sample ofbad design

2 Match between system and the real world

3 User control and freedom

Sample of good design3 User control and freedom

Sample of bad design3 User control and freedom

4 Consistency and standards

Sample of good design4 Consistency and standards

http://sixtiespress.co.ukSample of bad design4 Consistency and standards

5 Error prevention

Sample of good design5 Error prevention

Sample of good design5 Error prevention

Sample of bad design5 Error prevention

6 Recognition rather than recall

Sample of good designYelp app

6 Recognition rather than recall

Sample of good design6 Recognition rather than recall

7 Flexibility and efficiency of use

Sample of good design7 Flexibility and efficiency of use

8 Aesthetic and minimalist design

Sample of good design8 Aesthetic and minimalist design

Sample of good design

Moogly app

8 Aesthetic and minimalist design

Sample of bad design8 Aesthetic and minimalist design

9 Help users recognize, diagnose, and recover from errors

Sample of good design9 Help users recognize, diagnose and recover from errors

Sample of bad design9 Help users recognize, diagnose and recover from errors

10 Help and documentation

Sample of good design10 Help and documentation

Sample of bad design10 Help and documentation

Conclusion

1 UI Design Guidelines

2 Good as arguments for issues

3 More samples on http://epa.ms/Usability

kseniya.koltun