Usability Heuristic

Below are the 18 usability principles to evaluate systems, applications, and interfaces

And if that's not enough, here are NN/G's 10 Usability Heuristics.

 

The interface will allow the user to perceive that they are in control and will allow appropriate control.

Examples

  • Let the user choose when to advance to the next page, instead of automatically redirecting them.
  • When a user clicks on a link by mistake, give them the option to return to the previous page where they came from without breaking the convention.
  • Let user control when they would like to start playing the video and volume, not autoplay

Reduce short-term memory load by assisting the user and providing needed information through the interface.

Examples

  • If asking a user for their account number, provide it for them if possible.
  • If the user is filling out a multi-page form, show the information they have already submitted when asking for confirmation.

The interface/system should match mental models that the user holds in the real world.

Example

  • If a person was looking for rooms in multiple buildings, show rooms grouped by building, not in an alphabetical list.

The interface will communicate as efficiently as possible.

Example

  • Instead of a button saying "Click here to submit your form," just use "Submit".

The interface will have an attractive and appropriate design.

Example

  • Interface styles support the user focusing on the actions they are completing, not distracting them.

The interface will present elements simply.

Example

  • Instead of adding extra styles, graphics, words, and lots of functionality, reduce the complexity of the page and simplify down to the essential information/elements.

The interface will behave in a manner such that users can accurately predict what will happen next.

Examples

  • Instead of having a button that says "Go!" provide a "Submit form" button with text telling the user what will happen next.
  • An action button on a multi-step form could say "Complete order and proceed to confirmation".

The interface will make reasonable guesses about what the user is trying to do.

Example

  • Chrome autofill will fill out a form based on a user's contact information that it knows.

The interface will be free from errors.

Example

  • The form will not allow characters that will break the form.

The system will prevent errors as much as possible, and provide simple error handling in meaningful terms.

Example:

  • Validation on form fields to prevent user error.
  • Helpful instructions in the context of the interface to assist the user.
  • Plain language in the user's terms to explain errors.

 

Allow users to customize the UI as appropriate.

Examples

  • ServiceNow dashboards let you customize what you see.
  • Options for users to choose settings between list view and grid view of items.

Enable frequent users to use shortcuts for common tasks.

Examples

  • Showing "recently viewed" items to the user.
  • "Frequently visited" menu to frequent actions.

Strive for consistency across the interface and system.

Examples

  • The interface uses the same names for menu items as their corresponding page titles.
  • A logo lockup is always in the top left, and search is always in the top right and does not change on different pages of the interface.
  • Breadcrumbs across all pages offer users a way to trace the path back to their original landing point. 

The interface will provide additional assistance as needed or requested.

Examples

  • Contextual help provided through information links to explain form fields and why they are needed.
  • Permanent link to customer support in the interface.

The interface will allow the user to perform a task exactly.

Example

  • Ensure users can complete tasks efficiently, and not have to rely on workarounds or repetitive processes.

The system will permit an easy reversal of actions.

Examples

  • If the user mistypes their email address and misses the "@," the form should validate the field and alert the user to the error so they can fix it.
  • If the user submits the form, let the user edit the form without having to start over from scratch.
  • Provide an "undo" button when editing.
  • Revision history

The interface will offer informative feedback to the user.

Examples

  • If the user went idle for a while, let them know that there will be a timeout.
  • Confirmation message upon action completed, confirming to the user that it was a success.
  • If the user has not filled out a required field, highlight the field in red and have text saying "This field is required."

 

The interface will meet AA WCAG level 24 accessibility compliance.

Examples

  • All links should have an accessible active/focus/hover state.
  • All interfaces should be navigable by tabbing (keyboard only).
  • All images have alt-text
  • Labels Headings for data tables
  • Caption and/or provide transcripts for media
  • Accessibility for non-HTML content, including PDF files, Microsoft Word documents, PowerPoints
  • Allow users to skip repetitive elements on the page
  • Do not rely on color alone to convey meaning