User experience (UX) design takes into account all aspects of a user’s interaction with a company and the services and products it offers. Consider a purchase of an iPhone from Apple, the user experience includes your interaction with the Apple Store or website to place an order, opening the box, setting up and using the phone and perhaps contacting customer support if issues arise.
User interface (UI) design focusses on the aesthetics of how an app or website looks.
Usability measures how easy user interfaces are to use.
Jakob Nielsen is one of the world's leading expert on UI design. His top 10 usability principles are summarised below.
The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.
Knowing what the current system status is can help users learn the outcome of their prior interactions and determine next steps. Predictible interactions create trust in the product as well as the brand.
Communicate clearly to users what the system’s state is — no action with consequences to users should be taken without informing them. Present feedback to the user as quickly as possible. Build trust through open and continuous communication.
The design should speak the users' language. Use words, phrases, and concepts familiar to the user, rather then internal jargon. Follow real-world conventions, making information appear in a natural and logical order.
The language you should use depends very much on your specific users. Ensure users can understand meaning without having to go look up a word’s definition. Never assume your understanding of words or concepts will match those of your users. User research will help you uncover your users' familiar terminology, as well as their mental models around important concepts.
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.
When it's easy for people to back out of a process or undo an action, it fosters a sense of freedom and confidence. Exits allow users to remain in control of the system and avoid getting stuck and feeling frustrated.
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.
People spend most of their time on products other than yours. Failing to maintain consistency may increase the users' cognitive load by forcing them to learn something new.
Improve learnability by maintaining both types of consistency: internal and external. Maintain consistency within a single product or a family of products (internal consistency). Follow established industry conventions (external consistency).
Good error messages are important, but the best designs carefully prevent problems from occuring 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.
There are two types of errors: slips and mistakes. Slips are unconscious errors caused by inattention. Mistakes are conscious errors based on a mismatch between the user’s mental model and the design.
Prioritize your effort by preventing high-cost errors first, then deal with little frustrations. Avoid slips by providing helpful constraints and good defaults. Prevent mistakes by removing memory burdens, supporting undo, and warning your users before a significant action.
Minimize the user's memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design should be visible or easily retrievable when needed.
Humans have limited short-term memories. Interfaces that promote recognition reduce the amount of cognitive effort required from users. So let people recognize information in the interface, rather than having to recall it. Offer help in-context, instead of giving users a long tutorial, give them instructions just when they need them. Reduce the information that users have to remember.
Shortcuts — hidden from novice users — may speed up the interaction for the expert user such that the design can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
Flexible processes can be carried out in different ways, so that people can pick whichever method works for them. Create accelerators like keyboard shortcuts or touch gestures. Allow for customization, so users can make selections about how they want the product to work.
Interfaces should not contain information which is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.
This doesn't mean you have to use a flat design — it's about making sure you're keeping the content and visual design focused on the essentials. Ensure that the visual elements of the UI support the user's primary goals. Keep the content and visual design of UI focus on the essentials. Don't let unnecessary elements distract users from the information they really need. Prioritize the content and features to support primary goals.
Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution.
Error messages should be presented with visual treatments that will help users notice and recognize them. Use traditional error message visuals, like bold, red text. Tell users what went wrong in language they will understand — avoid technical jargon. Offer users a solution, like a shortcut that can solve the error immediately.
It’s best if the design doesn’t need any additional explanation. However, it may be necessary to provide documentation to help users understand how to complete their tasks.
Help and documentation content should be easy to search and focused on the user's task. Keep it concise, and list concrete steps that need to be carried out. Ensure that the help documentation is easy to search. Whenever possible, present the documentation in-context right at the moment that the user requires it. List concrete steps to be carried out.
Can you find examples of these 10 heuristics in real world digital products? What are your favourite sites and services that you use every day? Why not look at these and try to find examples of the 10 heuristics in those services.
You can work in pairs and divide the 10 heuristics between the two of you. Pick some sites and try to compile a complete set of 10 examples, they can be good examples or bad examples. Put your findings into a slide show then be ready to come back and share what you have found with the group.