Usability Principles

1

User Control and Freedom 

The interface will allow the user to perceive that they are in control and will allow appropriate control. Users should understand where they are on a website or stepped process at all times. 

• Let the user choose when to advance to the next page, instead of automatically redirecting them.
• Ensure users can complete tasks efficiently without relying on workarounds or repetitive processes.
• Dashboards let you customize what you see.
• Options for user to choose settings between list view and grid view of items.
• Showing "recently viewed" items to the user.
• "Quick links" menu to frequent actions.

2

Recognition vs. Recall

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

• If asking a user for their account number, provide it for them if possible.

• If a user is filling out a multi-page form, show the information they have already submitted when asking for confirmation.

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

3

Mental Model

The system should match the mental models that the user holds of the real world. The design should speak the users' language. 

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

4

Clarity

The interface will communicate as clearly and efficiently as possible. 

• Text, links, labels, and menu items should be clear and concise to avoid confusing users

• Navigation menus, text, and images combined should make it clear what a website or web page is about.

• Icons, images, and highlights should be self-explanatory.

• The difference between similar elements should be clearly described so that users can easily compare and choose between elements

5

Simplicity & Aesthetic Integrity

The interface will present elements simply and have an attractive and appropriate design.

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

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

6

Accuracy

The interface will be free from errors.

• Titles, labels, messages, content do not contain typos or erroneous/misleading information

• Calculations done in the background are accurate
   

7

Error Handling & Prevention

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

• Assume people will make mistakes. Anticipate what they will be and try to prevent them.

• Validation of 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.
   

8

Consistency & Predictability

Consistency is key! Strive for consistency across the interface and system.

• The interface uses the same names for menu items as their corresponding page titles.
• The logo is always in the top left, and the search is always in the top right and does not change on different pages of the interface.
• Instead of having a button that says "Go!" provide a "Submit form" button with text telling the user what will happen next.
• The action button on the multi-step form could say "Complete order and proceed to shipping details"

9

User Support

The interface will provide additional assistance as needed or requested.

• Contextual help is provided through information links to explain form fields and why they are needed.
• A permanent link to customer support in the interface.
• Live help within a website/application

10

Forgiveness

Users often perform actions by mistake. They need a clearly marked "emergency exit" to leave the unwanted action without having to go through an extended process and to easily reverse an action.

• If the user submits the form, let the user edit the form.

• Provide an "undo" and “redo” button when editing.

• Revision history

11

Feedback

The interface should always keep users informed about what is going on, through appropriate feedback within a reasonable time.

• Confirmation message upon action completed, confirming to the user that it was a success.

• If a user has not filled out a required field, highlight the field in red and have text saying "This field is required."

12

Accessibility Compliant

The interface is designed so that people with disabilities can use them and meets AA WCAG level 2 accessibility compliance.

• All links should have accessible active/focus/hover states.

• All interfaces should be navigable by tabbing (keyboard only).

• All images have alt-text labels