1/9
Looks like no tags are added yet.
Name | Mastery | Learn | Test | Matching | Spaced | Call with Kai |
|---|
No analytics yet
Send a link to your students to track their progress
1. Visibility of system status
Description: The system should always keep users informed about what is going on, through appropriate feedback within a reasonable time.
Examples:
A loading bar showing the progress of a file download.
A "submitting..." message after clicking a form button.
Highlighting a selected item in a menu.
Ask yourself: "Does the user know what's happening and why they're waiting?"
2. Match between system and the real world
Description: The system should speak the user's 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.
Examples:
Using an "envelope" icon for email.
A "shopping cart" or "basket" icon for e-commerce checkouts.
Organizing a contact list alphabetically by last name.
Ask yourself: "Is the language and design intuitive and based on real-world expectations?"
3. User control and freedom
Description: 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.
Examples:
A "back" button on every page.
An "undo" function in a text editor (Ctrl+Z).
A clear "cancel" option in a dialog box.
Ask yourself: "Can the user easily reverse a mistake or change their mind?"
4. Consistency and standards
Description: Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions and established design patterns.
Examples:
Using the same button style and color for all "call to action" buttons.
The "Home" button is always in the same place.
Using standard icons, like a magnifying glass for search.
Ask yourself: "Are similar elements and actions consistent across the entire system?"
5. Error prevention
Description: Even better than good error messages is a careful design that 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.
Examples:
Disabling a "submit" button until all required fields are filled out.
Asking "Are you sure you want to delete this file?" before a permanent deletion.
Providing input masks for phone numbers or credit card fields.
Ask yourself: "Can I design this so the user can't make this mistake to begin with?"
6. Recognition rather than recall
Description: 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.
Examples:
Showing recently viewed items on an e-commerce site.
Using drop-down menus instead of requiring users to type commands.
Displaying form field labels directly next to the input box.
Ask yourself: "Does the user have to remember anything, or is the information right there for them?"
7. Flexibility and efficiency of use
Description: 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.
Examples:
Keyboard shortcuts (e.g., Ctrl+C for copy).
Customizable dashboards or toolbars.
Allowing users to save preferences or default settings.
Ask yourself: "Is the system efficient for experienced users while remaining simple for new users?"
8. Aesthetic and minimalist design
Description: 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.
Examples:
A simple, clean homepage with a clear focus.
Removing unnecessary images or text that don't add value.
Using whitespace to separate and highlight important content.
Ask yourself: "Is every single element on the screen absolutely necessary?"
9. Help users recognize, diagnose, and recover from errors
Description: Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
Examples:
Instead of "Error 404," a message that says "The page you are looking for cannot be found. Please check the URL or return to the homepage."
Highlighting a form field in red and saying "This field is required."
Providing a link to a help center or contact support.
Ask yourself: "When an error occurs, is the user told what went wrong and how to fix it?"
10. Help and documentation
Description: 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.
Examples:
A searchable FAQ or knowledge base.
Contextual tooltips or inline help.
A clear "Help" link in the navigation.
Ask yourself: "Is there a way for users to get assistance if they get stuck?"