10 Usability Heuristics for User Interface Design

No notes for slide

Note that at the end of the presentation, there will be a brief Q&A!

As outlined by Jakob Nielsen –

Slide: 10 Usability Heuristics for User Interface Design

Slide: DISCLAIMER

They are called “heuristics” because they are broad rules of thumb and not specific usability guidelines.

TRANSITION

BUT THEY STILL MATTER

Transition NOW They may seem basic, but they are vital.
Picture in your mind, the best UX designed application you use. Chances are that application obeys most, if not all, of these guidelines.
It’s like background music in a movie – you only notice them when it ISN’T there.

Nielsen Norman Group – Founded in 1998, Nielsen Norman Group has been a leading voice in the user experience field: conducting groundbreaking research, evaluating interfaces of all shapes and sizes, and guiding critical design decisions to improve the bottom line.

Clients include Mozilla, Adobe, Cisco, Amex, Ford, Disney and the NYT.

Jakob originally developed the heuristics for heuristic evaluation in collaboration with Rolf Molich in 1990 [Molich and Nielsen 1990; Nielsen and Molich 1990]. He since refined the heuristics based on a factor analysis of 249 usability problems [Nielsen 1994a] to derive a set of heuristics with maximum explanatory power, resulting in this revised set of heuristics [Nielsen 1994b].

While some people

SLIDE: About the Author, Jakob Nielsen

These guidelines were created over 22 years ago by Jakob Nielson of the Nielsen Norman Group.
These ten broad rules were refined from 249 different usability problems.

Notes:
This principle states that the user should know what’s going on inside the system. We need to give a feedback of his/her action quickly – dont make them wait. This feedback is normally associated with points of action and can be provided using a color change, loader, time-left graphics, etc. Feedback is critical for users attentions.

SLIDE: 1. Visibility of System Status
“The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.”

SLIDE: System Status Example – Progress Bar GIF
The progress bar shows what the system is doing and provides feedback while it work.

The progress bar shows what the system is doing and provides feedback while it work.

Secondary example is twitter making a swoosh sound when a tweet is being posted.
Bad examples include completing a form with no submission feedback.You can’t tell if you did anything.

Again, the less the users have to guess the better. The system should speak the users’ language (use words, phrases and concepts familiar to the user), rather than special system terms.

Is there something on your application that a user may not understand? This is very common to miss since we get associated with the product for over a period of time. It’s also important for the application to speak the language of the target user base.

SLIDE: 2. Match between System and the Real World

“The system should speak the users' 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.”

SLIDE: Match the World Example – iOS Facebook Post

Iconography matches real world objects, adding additional context.

Bad example includes using system languages like “FAQs”, instead of “How can we help?”

This principle talks about giving the user the freedom to navigate and perform actions. The freedom to undo any accidental actions.

SLIDE: 3. User Control and Freedom
“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.”

SLIDE: 3. User Control Example – Gmail Undo

The “Undo” and “View Message” buttons grant the user control over previous actions within the system.

This principle can be best illustrated by the Gmail’s flash message with undo action when we accidentally delete an email.

BAD EXAMPLE: Designing dead-ends to certain user actions, like when checking out, not giving the user a chance to modify their shipping information. You sometimes see this with bigger corportations who have a confusion help center.

Consistency is the key. A Submit button in one page should look the same across the site on any page. If we show the data in a particular table format on one page, it should look the same the next time data is being shown in tabular format. If the header is displayed in a certain way on the public pages, it should be the same when he/she logs in.

Consistency is important because after a user gets comfortable with a system or a pattern, doing the unexpected can have negative effects – user drop off, etc.

Design standards are a great way around this. Having pre-defined components, colors and designs can also reduce designs choices, ending in a cleaning, more concise product.

SLIDE: 4. Consistency and Standards

“Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.”

SLIDE: Consistency – Material Design standards

The button design is consistent across the application, creating a learnable design pattern

Bad examples of this can be as simple as putting the close button for different interactions (modal form, submission messages, photo gallery) in different locations, (top/right/left of screen), requiring the user to scan or hunt.

“If we have to ask them, we have failed them”

---

Show of hands, how many of you are the only UX person in your department/team?

It is important to always think from the users perspective, becasue not many other people on the project will be.

How many times did your Gmail remind you that there is no attachment in the email while you mentioned that something is attached?

Sometimes error prevention is a reactive measure, so you must be track errors, and see how to correct them. This can be error / bug tracking analytics from a web application or user testing a protoype.

This iterative, build – test – modify loop is critical to improving your product.

SLIDE: 5. Error Prevention
“Even better than good error messages is a careful design which 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.”

SLIDE: Error Prevention - iOS Delete Confirmation

Check with the user before proceeding with dangerous, irreversible actions.

Bad example of error prevention – lack of notification for when actions happen. Feedback (or lack there of) can create more errors.

It’s always better to suggest the user a set of options than to let him remember and type the whole thing. The goal is to minimize the application of user memory.

Again. Think about the user first. Put yourself in their shoes, and try to present their primary goals (or the path to acheive those goals) as the main focus.

SLIDE: 6. Recognition Rather than Recall

“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.”

SLIDE: AirBnB autocomplete
The form autocompletes cities, making form input easier on the user.

Autocomplete

Example – Who wrote F451 vs Did Ray Bradbury right F451?

Recognition is easier than recall because it involves more cues: all those cues spread activation to related information in memory, raise the answer’s activation, and make you more likely to pick it. It’s the reason for which multiple-choice questions are easier than open questions, where the respondent has to come up with an answer.

Caveat about recall v recognition – dropdown for dates, or some numerical information. This bleeds into User interface design

UI: the means by which the user and a computer system interact, in particular the use of input devices and software.

The interface should be flexible for a power user and a normal user. One frequents this option while installing a new software that asks if the user wants to go ahead with default installation or custom installation. An advanced user chooses a custom installation to cut out the unnecessary services.

The important point is that the efficiency isn’t necessary to complete a task, it just makes it easier.

SLIDE: 7. Flexibility and Efficiency of Use

“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.”

SLIDE: Google Image Search
Filtering adds flexibility and efficiency to image search from Google. While not critical for the app to work, it makes it more efficient.

Advanced settings, google image search (filtering)

Prioritization comes to play when this aspect is being considered. For the designer or the developer, all the information that’s being presented on the page is relevant. The product manager needs to ask the end user if it is so. Is every information displayed on interface necessary and useful?

SLIDE: 8. Aesthetic and Minimalist Design

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.

SPEAK SLOWER

SLIDE: Google Sign-in Form
The Google Sign in form is very minimalist. It has a singular purpose – for a user to sign in.

Bad example: Most common example out of all of these – people want sites to do everything at once, and compete for attention with loud and loud colors/sizes/ etc.

News breaking news alert

Errors are inadvertent in the user journey. A check needs to be made if those errors are being explained to the user in understandable language. Again – the feedback is critical for a user to know what’s going on. Dont be afraid to tell them that they made a mistake, but be sure to include steps on how they can correct it.

SLIDE: 9. Help Users Recognize, Diagnose, and Recover from Errors

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

Slide: AirBnB error page
The error page includes links that the user may need, rather than just sending them back to the homepage.

404 Page w/ Extra Links

This response shows aniticaption from AirBnb on what the user will think/be lookign for when landing on a missing page. The user doesn’t intentional go to a broken page ever – its important to remember that.

If a user has reached this step, something's not right with the interface. A great user interface lets the user navigate through it’s features without any documentation or training. But if there is any user who could not make it out, adequate help should be provided within the product.

SLIDE: 10. Help and Documentation
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.

The page is broken up into three audiences:
Beginning (All getting started guides)
Search Bar (efficiency / flexibility feature)
Common issue list (predicting why users are there)
Each feature responds to their proper audience. Knowing the context for why a user at a specific step in your process is critical for you to make adjustments or target the experience effectively.

SLIDE:
The help page includes guides to the most asked questions, a search bar and a list of common issues.

Include that you’ll share a link to your deck after the meeting

10 Usability Heuristics for User Interface Design

Maxx Crawford

10 Usability Heuristics for User Interface Design