SlideShare a Scribd company logo
10 Usability Heuristics for
User Interface Design
As outlined by Jakob Nielsen
Disclaimer:
2
They are called “heuristics” because they
are broad rules of thumb and not specific
usability guidelines.
But they still matter.
About the Author:
Jakob Nielsen
These guidelines were created over 22 years ago
by Jakob Nielson of the Nielsen Norman Group.
These ten broad rules were refined from 249
different usability problems.
3
1. Visibility of System Status
“The system should always keep users informed about what is going on,
through appropriate feedback within reasonable time.”
4
51. System Status Example Oleg Frolov, Dribbble.com
The progress bar shows
what the system is doing
and provides feedback
while it working.
2. Match between System and
the 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 conventions, making
information appear in a natural and logical order.”
6
72. Match the World Example iOS Facebook Application
Iconography matches real
world objects, adding
additional context.
3. 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.”
8
93. User Control Example Gmail Web Application
The “Undo” and “View
Message” buttons grant the
user control over previous
actions within the system.
4. Consistency and Standards
“Users should not have to wonder whether different words, situations,
or actions mean the same thing. Follow platform conventions.”
10
114. Consistency Example Google Material Design, https://material.io
The button design is
consistent across the
application, creating a
learnable design pattern
5. 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.”
12
135. Error Prevention Example iOS Messages Application, Apple
Check with the user before
proceeding with dangerous,
irreversible actions.
6. Recognition Rather than 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.”
14
156. Recognition Example AirBnB Website, http://airbnb.com
The form autocompletes
cities, making form input
easier on the user.
7. 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.”
16
177. Flexibility Example Google Search
Filtering adds flexibility
and efficiency to image
search from Google.
While not critical for
the app to work, it
makes it more efficient.
8. 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.
18
198. Minimalist Example Google Sign-in Form
The Google Sign in form is
very minimalist. It has a
singular purpose – for a
user to sign in.
9. 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.
20
219. Error Recovery Example AirBnB Website, http://airbnb.com
The error page includes links
that the user may need, rather
than just sending them back to
the homepage.
10. 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.
22
2310. Documentation Example Github, https://help.github.com
The help page includes
guides to the most asked
questions, a search bar and a
list of common issues.
Any Questions?
24
References:
● “10 Usability Heuristics for User Interface Design” – Nielsen Norman Group
https://www.nngroup.com/articles/ten-usability-heuristics
Copyright © 2005 by Jakob Nielsen. ISSN 1548-5552
25

More Related Content

What's hot

Human Computer Interaction: The Design of Everyday Things (User Centered Des...
 Human Computer Interaction: The Design of Everyday Things (User Centered Des... Human Computer Interaction: The Design of Everyday Things (User Centered Des...
Human Computer Interaction: The Design of Everyday Things (User Centered Des...
Shakil Mahmood
 
Approaches to CSS Layout
Approaches to CSS LayoutApproaches to CSS Layout
Approaches to CSS Layout
Nicole Ryan
 
Heuristic ux-evaluation
Heuristic ux-evaluationHeuristic ux-evaluation
Heuristic ux-evaluation
Steffen Kastner
 
The Importance of UX
The Importance of UXThe Importance of UX
The Importance of UX
Bart Van Hecke
 
Introduction To Usability
Introduction To UsabilityIntroduction To Usability
Introduction To Usability
Ovidiu Von M
 
Ux design-fundamentals
Ux design-fundamentalsUx design-fundamentals
Ux design-fundamentals
Muhammad Ishfaq Ch ✔
 
An Introduction to Ben Shneiderman's Eight Golden Rules of Interface Design
An Introduction to Ben Shneiderman's Eight Golden Rules of Interface DesignAn Introduction to Ben Shneiderman's Eight Golden Rules of Interface Design
An Introduction to Ben Shneiderman's Eight Golden Rules of Interface Design
Jochen Wolters
 
The guide to wireframing
The guide to wireframingThe guide to wireframing
The guide to wireframing
Marcelo Graciolli
 
Usability Engineering Presentation Slides
Usability Engineering Presentation SlidesUsability Engineering Presentation Slides
Usability Engineering Presentation Slides
wajahat Gul
 
UX UI - Principles and Best Practices 2014-2015
UX UI - Principles and Best Practices 2014-2015UX UI - Principles and Best Practices 2014-2015
UX UI - Principles and Best Practices 2014-2015
Harsh Wardhan Dave
 
Introduction to User Experience Design
Introduction to User Experience DesignIntroduction to User Experience Design
Introduction to User Experience Design
Kiera McMaster
 
Ux design process
Ux design processUx design process
Ux design process
Junying Chang
 
Introduction to User Experience Design
Introduction to User Experience DesignIntroduction to User Experience Design
Introduction to User Experience Design
Ravi Bhadauria
 
HCI 3e - Ch 14: Communication and collaboration models
HCI 3e - Ch 14:  Communication and collaboration modelsHCI 3e - Ch 14:  Communication and collaboration models
HCI 3e - Ch 14: Communication and collaboration models
Alan Dix
 
Online shopping
Online shoppingOnline shopping
Online shopping
gajapandiyan
 
UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1
Lewis Lin 🦊
 
Prototyping
PrototypingPrototyping
Prototyping
Eman Abed AlWahhab
 
E-commerce (System Analysis and Design)
E-commerce (System Analysis and Design)E-commerce (System Analysis and Design)
E-commerce (System Analysis and Design)
Nazmul Hyder
 
Neison,s Heuristic Examples
Neison,s Heuristic ExamplesNeison,s Heuristic Examples
Neison,s Heuristic Examples
Muhammad Hassaan Mahmood
 
Heuristic evaluation
Heuristic evaluationHeuristic evaluation
Heuristic evaluation
Sem Gebresilassie
 

What's hot (20)

Human Computer Interaction: The Design of Everyday Things (User Centered Des...
 Human Computer Interaction: The Design of Everyday Things (User Centered Des... Human Computer Interaction: The Design of Everyday Things (User Centered Des...
Human Computer Interaction: The Design of Everyday Things (User Centered Des...
 
Approaches to CSS Layout
Approaches to CSS LayoutApproaches to CSS Layout
Approaches to CSS Layout
 
Heuristic ux-evaluation
Heuristic ux-evaluationHeuristic ux-evaluation
Heuristic ux-evaluation
 
The Importance of UX
The Importance of UXThe Importance of UX
The Importance of UX
 
Introduction To Usability
Introduction To UsabilityIntroduction To Usability
Introduction To Usability
 
Ux design-fundamentals
Ux design-fundamentalsUx design-fundamentals
Ux design-fundamentals
 
An Introduction to Ben Shneiderman's Eight Golden Rules of Interface Design
An Introduction to Ben Shneiderman's Eight Golden Rules of Interface DesignAn Introduction to Ben Shneiderman's Eight Golden Rules of Interface Design
An Introduction to Ben Shneiderman's Eight Golden Rules of Interface Design
 
The guide to wireframing
The guide to wireframingThe guide to wireframing
The guide to wireframing
 
Usability Engineering Presentation Slides
Usability Engineering Presentation SlidesUsability Engineering Presentation Slides
Usability Engineering Presentation Slides
 
UX UI - Principles and Best Practices 2014-2015
UX UI - Principles and Best Practices 2014-2015UX UI - Principles and Best Practices 2014-2015
UX UI - Principles and Best Practices 2014-2015
 
Introduction to User Experience Design
Introduction to User Experience DesignIntroduction to User Experience Design
Introduction to User Experience Design
 
Ux design process
Ux design processUx design process
Ux design process
 
Introduction to User Experience Design
Introduction to User Experience DesignIntroduction to User Experience Design
Introduction to User Experience Design
 
HCI 3e - Ch 14: Communication and collaboration models
HCI 3e - Ch 14:  Communication and collaboration modelsHCI 3e - Ch 14:  Communication and collaboration models
HCI 3e - Ch 14: Communication and collaboration models
 
Online shopping
Online shoppingOnline shopping
Online shopping
 
UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1
 
Prototyping
PrototypingPrototyping
Prototyping
 
E-commerce (System Analysis and Design)
E-commerce (System Analysis and Design)E-commerce (System Analysis and Design)
E-commerce (System Analysis and Design)
 
Neison,s Heuristic Examples
Neison,s Heuristic ExamplesNeison,s Heuristic Examples
Neison,s Heuristic Examples
 
Heuristic evaluation
Heuristic evaluationHeuristic evaluation
Heuristic evaluation
 

Similar to 10 Usability Heuristics for User Interface Design

10 Usability Heuristics explained
10 Usability Heuristics explained10 Usability Heuristics explained
10 Usability Heuristics explained
Eranga Thilan Liyanage
 
Eindpresentatie usability engels
Eindpresentatie usability engelsEindpresentatie usability engels
Eindpresentatie usability engels
Hanzehogeschool
 
HCI
HCI HCI
The 10 Usability Commandments
The 10 Usability CommandmentsThe 10 Usability Commandments
The 10 Usability Commandments
sytnik
 
Interaction patterns
Interaction patternsInteraction patterns
Interaction patterns
faisalqau
 
Megan McKeever - design
Megan McKeever - designMegan McKeever - design
Megan McKeever - design
mmm5014
 
Usability, Accessibility, and Design Evaluation
Usability, Accessibility, and Design EvaluationUsability, Accessibility, and Design Evaluation
Usability, Accessibility, and Design Evaluation
Damian T. Gordon
 
9 Web Rules - Pol Vales Rodon
9 Web Rules - Pol Vales Rodon9 Web Rules - Pol Vales Rodon
9 Web Rules - Pol Vales Rodon
Pol Valés Rodon
 
HCI Unit 3.pptx
HCI Unit 3.pptxHCI Unit 3.pptx
HCI Unit 3.pptx
Raja980775
 
Usability Workshop at Lillebaelt Academy
Usability Workshop at Lillebaelt AcademyUsability Workshop at Lillebaelt Academy
Usability Workshop at Lillebaelt Academy
Dániel Góré
 
Hci lec 5,6
Hci lec 5,6Hci lec 5,6
Hci lec 5,6
Anwal Mirza
 
From Usability to User Experience
From Usability to User Experience From Usability to User Experience
From Usability to User Experience
U1 Group
 
Design process design rules
Design process  design rulesDesign process  design rules
Design process design rules
Preeti Mishra
 
Agile user story mapping
Agile user story mappingAgile user story mapping
Agile user story mapping
Tam Nguyen, PMP, CSM
 
Assignment 4 hci
Assignment 4 hciAssignment 4 hci
Assignment 4 hci
Jeddie Bere
 
User Experience Design - Designing for others
User Experience Design - Designing for othersUser Experience Design - Designing for others
User Experience Design - Designing for others
BART RADKA
 
9 Web Rules - Pol Vales Rodon
9 Web Rules - Pol Vales Rodon9 Web Rules - Pol Vales Rodon
9 Web Rules - Pol Vales Rodon
Pol Valés Rodon
 
Usability of UI Design (motivation, heuristics, tools)
Usability of UI Design (motivation, heuristics, tools)Usability of UI Design (motivation, heuristics, tools)
Usability of UI Design (motivation, heuristics, tools)
Oleksii Prohonnyi
 
Chapter five HCI
Chapter five HCIChapter five HCI
Chapter five HCI
yihunie ayalew
 
User Interface Design - Module 1 Introduction
User Interface Design - Module 1 IntroductionUser Interface Design - Module 1 Introduction
User Interface Design - Module 1 Introduction
brindaN
 

Similar to 10 Usability Heuristics for User Interface Design (20)

10 Usability Heuristics explained
10 Usability Heuristics explained10 Usability Heuristics explained
10 Usability Heuristics explained
 
Eindpresentatie usability engels
Eindpresentatie usability engelsEindpresentatie usability engels
Eindpresentatie usability engels
 
HCI
HCI HCI
HCI
 
The 10 Usability Commandments
The 10 Usability CommandmentsThe 10 Usability Commandments
The 10 Usability Commandments
 
Interaction patterns
Interaction patternsInteraction patterns
Interaction patterns
 
Megan McKeever - design
Megan McKeever - designMegan McKeever - design
Megan McKeever - design
 
Usability, Accessibility, and Design Evaluation
Usability, Accessibility, and Design EvaluationUsability, Accessibility, and Design Evaluation
Usability, Accessibility, and Design Evaluation
 
9 Web Rules - Pol Vales Rodon
9 Web Rules - Pol Vales Rodon9 Web Rules - Pol Vales Rodon
9 Web Rules - Pol Vales Rodon
 
HCI Unit 3.pptx
HCI Unit 3.pptxHCI Unit 3.pptx
HCI Unit 3.pptx
 
Usability Workshop at Lillebaelt Academy
Usability Workshop at Lillebaelt AcademyUsability Workshop at Lillebaelt Academy
Usability Workshop at Lillebaelt Academy
 
Hci lec 5,6
Hci lec 5,6Hci lec 5,6
Hci lec 5,6
 
From Usability to User Experience
From Usability to User Experience From Usability to User Experience
From Usability to User Experience
 
Design process design rules
Design process  design rulesDesign process  design rules
Design process design rules
 
Agile user story mapping
Agile user story mappingAgile user story mapping
Agile user story mapping
 
Assignment 4 hci
Assignment 4 hciAssignment 4 hci
Assignment 4 hci
 
User Experience Design - Designing for others
User Experience Design - Designing for othersUser Experience Design - Designing for others
User Experience Design - Designing for others
 
9 Web Rules - Pol Vales Rodon
9 Web Rules - Pol Vales Rodon9 Web Rules - Pol Vales Rodon
9 Web Rules - Pol Vales Rodon
 
Usability of UI Design (motivation, heuristics, tools)
Usability of UI Design (motivation, heuristics, tools)Usability of UI Design (motivation, heuristics, tools)
Usability of UI Design (motivation, heuristics, tools)
 
Chapter five HCI
Chapter five HCIChapter five HCI
Chapter five HCI
 
User Interface Design - Module 1 Introduction
User Interface Design - Module 1 IntroductionUser Interface Design - Module 1 Introduction
User Interface Design - Module 1 Introduction
 

Recently uploaded

Connect Conference 2022: Passive House - Economic and Environmental Solution...
Connect Conference 2022: Passive House -  Economic and Environmental Solution...Connect Conference 2022: Passive House -  Economic and Environmental Solution...
Connect Conference 2022: Passive House - Economic and Environmental Solution...
TE Studio
 
PDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in NoidaPDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in Noida
PoojaSaini954651
 
Top Interior Designers in Bangalore.pdf1
Top Interior Designers in Bangalore.pdf1Top Interior Designers in Bangalore.pdf1
Top Interior Designers in Bangalore.pdf1
Decomart Studio
 
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptxUNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
GOWSIKRAJA PALANISAMY
 
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHINHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NishantRathi18
 
ZAPATILLAS 2 X 110 ABRIL.pdf compra economico
ZAPATILLAS 2 X 110 ABRIL.pdf compra economicoZAPATILLAS 2 X 110 ABRIL.pdf compra economico
ZAPATILLAS 2 X 110 ABRIL.pdf compra economico
jhonguerrerobarturen
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
Bianca Woods
 
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
kecekev
 
Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.
Techno Merch
 
Divertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8djDivertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8dj
lunaemel03
 
Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
contactproperweb2014
 
Revolutionizing the Digital Landscape: Web Development Companies in India
Revolutionizing the Digital Landscape: Web Development Companies in IndiaRevolutionizing the Digital Landscape: Web Development Companies in India
Revolutionizing the Digital Landscape: Web Development Companies in India
amrsoftec1
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
pmgdscunsri
 
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With DesignsGame Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
184804
 
一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理
peuce
 
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptxUNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
GOWSIKRAJA PALANISAMY
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
Virtual Real Design
 
定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
qo1as76n
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
qo1as76n
 
Branding de la empresa de Bolt- 2024.pdf
Branding de la empresa de Bolt- 2024.pdfBranding de la empresa de Bolt- 2024.pdf
Branding de la empresa de Bolt- 2024.pdf
PabloMartelLpez
 

Recently uploaded (20)

Connect Conference 2022: Passive House - Economic and Environmental Solution...
Connect Conference 2022: Passive House -  Economic and Environmental Solution...Connect Conference 2022: Passive House -  Economic and Environmental Solution...
Connect Conference 2022: Passive House - Economic and Environmental Solution...
 
PDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in NoidaPDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in Noida
 
Top Interior Designers in Bangalore.pdf1
Top Interior Designers in Bangalore.pdf1Top Interior Designers in Bangalore.pdf1
Top Interior Designers in Bangalore.pdf1
 
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptxUNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
 
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHINHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
 
ZAPATILLAS 2 X 110 ABRIL.pdf compra economico
ZAPATILLAS 2 X 110 ABRIL.pdf compra economicoZAPATILLAS 2 X 110 ABRIL.pdf compra economico
ZAPATILLAS 2 X 110 ABRIL.pdf compra economico
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
 
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
 
Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.
 
Divertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8djDivertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8dj
 
Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
 
Revolutionizing the Digital Landscape: Web Development Companies in India
Revolutionizing the Digital Landscape: Web Development Companies in IndiaRevolutionizing the Digital Landscape: Web Development Companies in India
Revolutionizing the Digital Landscape: Web Development Companies in India
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
 
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With DesignsGame Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
 
一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理
 
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptxUNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
 
定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
 
Branding de la empresa de Bolt- 2024.pdf
Branding de la empresa de Bolt- 2024.pdfBranding de la empresa de Bolt- 2024.pdf
Branding de la empresa de Bolt- 2024.pdf
 

10 Usability Heuristics for User Interface Design

  • 1. 10 Usability Heuristics for User Interface Design As outlined by Jakob Nielsen
  • 2. Disclaimer: 2 They are called “heuristics” because they are broad rules of thumb and not specific usability guidelines. But they still matter.
  • 3. About the Author: Jakob Nielsen These guidelines were created over 22 years ago by Jakob Nielson of the Nielsen Norman Group. These ten broad rules were refined from 249 different usability problems. 3
  • 4. 1. Visibility of System Status “The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.” 4
  • 5. 51. System Status Example Oleg Frolov, Dribbble.com The progress bar shows what the system is doing and provides feedback while it working.
  • 6. 2. Match between System and the 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 conventions, making information appear in a natural and logical order.” 6
  • 7. 72. Match the World Example iOS Facebook Application Iconography matches real world objects, adding additional context.
  • 8. 3. 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.” 8
  • 9. 93. User Control Example Gmail Web Application The “Undo” and “View Message” buttons grant the user control over previous actions within the system.
  • 10. 4. Consistency and Standards “Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.” 10
  • 11. 114. Consistency Example Google Material Design, https://material.io The button design is consistent across the application, creating a learnable design pattern
  • 12. 5. 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.” 12
  • 13. 135. Error Prevention Example iOS Messages Application, Apple Check with the user before proceeding with dangerous, irreversible actions.
  • 14. 6. Recognition Rather than 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.” 14
  • 15. 156. Recognition Example AirBnB Website, http://airbnb.com The form autocompletes cities, making form input easier on the user.
  • 16. 7. 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.” 16
  • 17. 177. Flexibility Example Google Search Filtering adds flexibility and efficiency to image search from Google. While not critical for the app to work, it makes it more efficient.
  • 18. 8. 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. 18
  • 19. 198. Minimalist Example Google Sign-in Form The Google Sign in form is very minimalist. It has a singular purpose – for a user to sign in.
  • 20. 9. 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. 20
  • 21. 219. Error Recovery Example AirBnB Website, http://airbnb.com The error page includes links that the user may need, rather than just sending them back to the homepage.
  • 22. 10. 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. 22
  • 23. 2310. Documentation Example Github, https://help.github.com The help page includes guides to the most asked questions, a search bar and a list of common issues.
  • 25. References: ● “10 Usability Heuristics for User Interface Design” – Nielsen Norman Group https://www.nngroup.com/articles/ten-usability-heuristics Copyright © 2005 by Jakob Nielsen. ISSN 1548-5552 25

Editor's Notes

  1. Note that at the end of the presentation, there will be a brief Q&A! As outlined by Jakob Nielsen –  Slide: 10 Usability Heuristics for User Interface Design
  2. Slide: DISCLAIMER They are called “heuristics” because they are broad rules of thumb and not specific usability guidelines. TRANSITION BUT THEY STILL MATTER Transition NOW They may seem basic, but they are vital. Picture in your mind, the best UX designed application you use. Chances are that application obeys most, if not all, of these guidelines. It’s like background music in a movie – you only notice them when it ISN’T there.
  3. Nielsen Norman Group – Founded in 1998, Nielsen Norman Group has been a leading voice in the user experience field: conducting groundbreaking research, evaluating interfaces of all shapes and sizes, and guiding critical design decisions to improve the bottom line. Clients include Mozilla, Adobe, Cisco, Amex, Ford, Disney and the NYT. Jakob originally developed the heuristics for heuristic evaluation in collaboration with Rolf Molich in 1990 [Molich and Nielsen 1990; Nielsen and Molich 1990]. He since refined the heuristics based on a factor analysis of 249 usability problems [Nielsen 1994a] to derive a set of heuristics with maximum explanatory power, resulting in this revised set of heuristics [Nielsen 1994b]. While some people SLIDE: About the Author, Jakob Nielsen These guidelines were created over 22 years ago by Jakob Nielson of the Nielsen Norman Group. These ten broad rules were refined from 249 different usability problems.
  4. Notes: This principle states that the user should know what’s going on inside the system. We need to give a feedback of his/her action quickly – dont make them wait. This feedback is normally associated with points of action and can be provided using a color change, loader, time-left graphics, etc. Feedback is critical for users attentions. SLIDE: 1. Visibility of System Status “The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.”
  5. SLIDE: System Status Example – Progress Bar GIF The progress bar shows what the system is doing and provides feedback while it work. The progress bar shows what the system is doing and provides feedback while it work. Secondary example is twitter making a swoosh sound when a tweet is being posted. Bad examples include completing a form with no submission feedback.You can’t tell if you did anything.
  6. Again, the less the users have to guess the better. The system should speak the users’ language (use words, phrases and concepts familiar to the user), rather than special system terms. Is there something on your application that a user may not understand? This is very common to miss since we get associated with the product for over a period of time. It’s also important for the application to speak the language of the target user base. SLIDE: 2. Match between System and the 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 conventions, making information appear in a natural and logical order.”
  7. SLIDE: Match the World Example – iOS Facebook Post Iconography matches real world objects, adding additional context. Bad example includes using system languages like “FAQs”, instead of “How can we help?”
  8. This principle talks about giving the user the freedom to navigate and perform actions. The freedom to undo any accidental actions. SLIDE: 3. 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.”
  9. SLIDE: 3. User Control Example – Gmail Undo The “Undo” and “View Message” buttons grant the user control over previous actions within the system. This principle can be best illustrated by the Gmail’s flash message with undo action when we accidentally delete an email. BAD EXAMPLE: Designing dead-ends to certain user actions, like when checking out, not giving the user a chance to modify their shipping information. You sometimes see this with bigger corportations who have a confusion help center.
  10. Consistency is the key. A Submit button in one page should look the same across the site on any page. If we show the data in a particular table format on one page, it should look the same the next time data is being shown in tabular format. If the header is displayed in a certain way on the public pages, it should be the same when he/she logs in. Consistency is important because after a user gets comfortable with a system or a pattern, doing the unexpected can have negative effects – user drop off, etc. Design standards are a great way around this. Having pre-defined components, colors and designs can also reduce designs choices, ending in a cleaning, more concise product. SLIDE: 4. Consistency and Standards “Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.”
  11. SLIDE: Consistency – Material Design standards The button design is consistent across the application, creating a learnable design pattern Bad examples of this can be as simple as putting the close button for different interactions (modal form, submission messages, photo gallery) in different locations, (top/right/left of screen), requiring the user to scan or hunt. “If we have to ask them, we have failed them” --- Show of hands, how many of you are the only UX person in your department/team? It is important to always think from the users perspective, becasue not many other people on the project will be.
  12. How many times did your Gmail remind you that there is no attachment in the email while you mentioned that something is attached? Sometimes error prevention is a reactive measure, so you must be track errors, and see how to correct them. This can be error / bug tracking analytics from a web application or user testing a protoype. This iterative, build – test – modify loop is critical to improving your product. SLIDE: 5. 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.”
  13. SLIDE: Error Prevention - iOS Delete Confirmation Check with the user before proceeding with dangerous, irreversible actions. Bad example of error prevention – lack of notification for when actions happen. Feedback (or lack there of) can create more errors.
  14. It’s always better to suggest the user a set of options than to let him remember and type the whole thing. The goal is to minimize the application of user memory. Again. Think about the user first. Put yourself in their shoes, and try to present their primary goals (or the path to acheive those goals) as the main focus. SLIDE: 6. Recognition Rather than 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.”
  15. SLIDE: AirBnB autocomplete The form autocompletes cities, making form input easier on the user. Autocomplete Example – Who wrote F451 vs Did Ray Bradbury right F451? Recognition is easier than recall because it involves more cues: all those cues spread activation to related information in memory, raise the answer’s activation, and make you more likely to pick it. It’s the reason for which multiple-choice questions are easier than open questions, where the respondent has to come up with an answer. Caveat about recall v recognition – dropdown for dates, or some numerical information. This bleeds into User interface design UI: the means by which the user and a computer system interact, in particular the use of input devices and software.
  16. The interface should be flexible for a power user and a normal user. One frequents this option while installing a new software that asks if the user wants to go ahead with default installation or custom installation. An advanced user chooses a custom installation to cut out the unnecessary services. The important point is that the efficiency isn’t necessary to complete a task, it just makes it easier. SLIDE: 7. 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.”
  17. SLIDE: Google Image Search Filtering adds flexibility and efficiency to image search from Google. While not critical for the app to work, it makes it more efficient. Advanced settings, google image search (filtering)
  18. Prioritization comes to play when this aspect is being considered. For the designer or the developer, all the information that’s being presented on the page is relevant. The product manager needs to ask the end user if it is so. Is every information displayed on interface necessary and useful? SLIDE: 8. 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.
  19. SPEAK SLOWER SLIDE: Google Sign-in Form The Google Sign in form is very minimalist. It has a singular purpose – for a user to sign in. Bad example: Most common example out of all of these – people want sites to do everything at once, and compete for attention with loud and loud colors/sizes/ etc. News breaking news alert
  20. Errors are inadvertent in the user journey. A check needs to be made if those errors are being explained to the user in understandable language. Again – the feedback is critical for a user to know what’s going on. Dont be afraid to tell them that they made a mistake, but be sure to include steps on how they can correct it. SLIDE: 9. 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.
  21. Slide: AirBnB error page The error page includes links that the user may need, rather than just sending them back to the homepage. 404 Page w/ Extra Links This response shows aniticaption from AirBnb on what the user will think/be lookign for when landing on a missing page. The user doesn’t intentional go to a broken page ever – its important to remember that.
  22. If a user has reached this step, something's not right with the interface. A great user interface lets the user navigate through it’s features without any documentation or training. But if there is any user who could not make it out, adequate help should be provided within the product. SLIDE: 10. 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.
  23. The page is broken up into three audiences: Beginning (All getting started guides) Search Bar (efficiency / flexibility feature) Common issue list (predicting why users are there) Each feature responds to their proper audience. Knowing the context for why a user at a specific step in your process is critical for you to make adjustments or target the experience effectively. SLIDE: The help page includes guides to the most asked questions, a search bar and a list of common issues.
  24. Include that you’ll share a link to your deck after the meeting