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