Download a free poster of Jakob’s Usability Heuristic #4 at the bottom of this article.

The fourth of Jakob Nielsen’s ten heuristics — consistency and standards — is key to creating applications that make sense for users. Think about the websites and applications you use: they all rely on well-established conventions. Blue underlined text is clickable, the shopping-cart icon shows the items you plan to purchase, the site logo is in the top left corner, a magnifier-glass icon stands for search — these are all examples of conventions that are used all the time in digital products and that make users’ lives easier.

Advocating for consistency and standards may seem like we’re pushing for all applications to look and act the same, but that’s not the case. Rather, when websites and applications adhere to standards, users know what to expect, learnability is increased, and confusion is reduced.

A Continuum of Consistency

To be easy to learn and use, systems should adhere to both internal and external consistency — they should use the same patterns everywhere inside the system and should also follow web-, platform-, and domain-specific conventions.

Internal Consistency

Internal consistency relates to consistency within a product or a family of products, either within a single application or across a family or suite of applications.

A family of products refers to several products, sold individually or as a group, produced by the same company under the same brand. Most application suites will list menu components in the same order (File, Edit, View, and so on) or will use consistent icons for the same functions across applications and familiar layouts for dialog boxes and modals.

Microsoft Office ribbon of tools for Word, Excel, and PowerPoint, displaying text controls
The many layers of consistency within Microsoft Office: In addition to consistency within the application icons, home windows, and main menus, Microsoft Office utilizes a ribbon across its products that is used for accomplishing tasks within each tool. Though the ribbon is contextual based on which product is currently in use, a task can be completed in the same way across products. For example, a user will customize text in the same way across Word (top), Excel (middle), and PowerPoint (bottom).
Microsoft Office ribbon of tools for Word, Excel, and PowerPoint, displaying text controls
The many layers of consistency within Microsoft Office: In addition to consistency within the application icons, home windows, and main menus, Microsoft Office utilizes a ribbon across its products that is used for accomplishing tasks within each tool. Though the ribbon is contextual based on which product is currently in use, a task can be completed in the same way across products. For example, a user will customize text in the same way across Word (top), Excel (middle), and PowerPoint (bottom).

Internal consistency within a single product or application can often be seen in colors and page layouts used. For example, an application may use orange as its primary color, which is then applied to all text links and primary buttons. It may also utilize modals that are designed with the primary button on the right and the secondary buttons on the left.

Two Adobe Acrobat action menus: Edit PDF and Fill & Sign
Adobe Acrobat: Acrobat utilizes contextual menus to support different tasks, but each menu follows the same layout and design.

Creating a design system for your application or family of applications can help teams maintain consistency across products and services. Not only will users find the systems familiar and easy to learn, but the teams building the software will also benefit from reduced redundancy in their work and a single source of truth for how and when to use components.

Atlassian design system showing the Button page and guidelines for how to use buttons within the Atlassian site
Atlassian Design System: Each component of Atlassian’s family of products is listed in the left-hand navigation, along with examples, code snippets, and usage guidelines. These guidelines ensure that new features will work in a similar way to existing features.
Google's application icons, before and after
Too much of a good thing? Google’s previous version of the Mail, Calendar, and Drive icons (top) had a consistent visual style, but have recently been updated (bottom) to use the same colors across several applications. When viewed at a small size, as is typical on mobile devices, the similarities between these icons will make them hard to differentiate. Follow good icon usability practices to test your application icons before launching.

External Consistency

External consistency refers to established conventions in an industry or on the web at large, beyond one application or family of applications.

Jakob’s Law states that people spend most of their time on sites other than yours, which means that they bring their expectations from other sites when they visit your site. Contexts and user types will vary on each site, so there is still room for tailoring and adjustment, but the majority of interactions should be consistent with what people expect. When designing your application, focus on helping users reach their goals as efficiently as possible rather than on creating a nonconventional interface that people will need to figure out.

For example, a standard in navigation design is the homepage link. It provides an easy way back to your site’s homepage, regardless of where a user is currently within your site. You can probably picture where this link typically resides on a site just by my mentioning it.

Several examples of external consistency can be seen across ecommerce websites when purchasing products. There are guidelines for viewing a product, saving an item for later, and adding an item to the shopping cart, to name a few. These guidelines transcend user types, providing standards that can be applied to any ecommerce site.

Toolbars of four websites highlighting search, account information, and shopping cart access: IKEA, Target, Etsy, Grainger
Ecommerce utility navigation: Despite the different industries represented in the screenshots above (IKEA, Target, Etsy, and Grainger), these ecommerce websites adhere to the same standards for utility navigation. A prominent search bar, easy account access, and a clear shopping cart are all displayed in a similar way.

Layers of Consistency

There are several layers of consistency to consider when designing your application. As you’re designing or evaluating your site, aim to maintain consistency in each of the following categories.

Visual

The symbols, iconography, and imagery used should be consistent across the site. If you’re using images, make sure they’re all given a similar visual treatment. For example, the border color and weight should be consistent across all images on the product page.

When choosing symbols or icons to represent actions, select icons that closely align with how other sites represent the same concept. For example, stick to the standard magnifying glass for search, so that users will easily recognize it.

Allrecipes.com hamburger menu, both open and closed
AllRecipes.com hides the primary navigation behind a menu icon (which is a design pattern we do not recommend on desktop). However, instead of the menu pulling out from the left when clicked, as is typical with this convention, it is displayed in a modal. On desktop, modals are commonly associated with newsletter signups and special offers; therefore, users might immediately dismiss it without realizing that they must use the modal to navigate to their desired content.

Page and Button Layout

You’ll likely have several different types of pages on a site, but there are components that will remain consistent across pages. Think about the similarities and differences between pages. For example, how does a product page differ from an order-update page? There are styles and elements that you can reuse, such as headings, call-to-action buttons, and navigation. Decide where those elements will live and make them consistent across all pages whenever applicable.

Ensure consistency in the placement of form fields and buttons, especially for multipage forms or wizards. Will you place the call-to-action on the left and the Cancel button on the right, or vice versa? How will you designate fields as required? Regardless of the answers to those questions, make sure that each form on the site is designed in the same way.

Three modals showing the different order of call-to-action buttons
Sutter Health appointment checkin process includes filling out a multipage form, which collects information about payment, allergies, and health issues. The Finish Later button is located to the right of the primary action button in the first and second screenshot, but changes position to the left of the primary action in the third screenshot. This layout inconsistency easily causes users to accidentally hit the Finish Later button instead of submitting the form and be confused to discover they’re not actually checked in for their appointments.

User-Entered Data

When asking users to input information such as dates, phone numbers, or locations, use the industry standards rather than reinventing the wheel. For example, most sites use a calendar date picker when asking users to input dates. If users come to your site and are presented with an open field, they will have to spend extra time thinking about which format they should use when entering the date.

Whenever possible, help users enter data by designing form fields that will eliminate the need to guess how the entry should be formatted; apply these guidelines to all instances of collecting data on your site.

Animated GIF: User enters phone number without adding additional formatting, such as parentheses and dashes
When users enter a number in the Phone Number field, it is automatically formatted to reflect the standard phone-number display conventions. Users do not have to enter separators explicitly.

Content

When users interact with content on your various channels, they should expect a clear and familiar experience. Read through the content that is presented to users on your site and compare it to what users see in marketing materials. Is there a difference in the tone of voice? If your website uses a casual tone of voice and your marketing materials convey a very formal message, users may be confused when interacting with both. Internal teams should collaborate on content strategy to determine which is best for your users.

The home page text shown is formal, while the error message is informal
Four Seasons Lanai: The tone of the homepage content (left) is formal and inviting, while the error message headline (right) is robotic and unhelpful. Inconsistent tone of voice across content confuses users and takes away from the overall experience they have with your product or service.

The Impact of Consistency

The benefits of consistency go beyond having a well-designed user interface for your application.

Meet User Expectations

When users encounter your product or service, they bring their own expectations from previous experiences with them. When these expectations are met, confidence is built, and they will feel mastery over the interface.

An illustration of a hotel checkin counter
Checkin counters are typically located at the front of hotels. The action that customers take when first walking into a hotel is to check in to their room. This consistency of having a checkin counter located close to the front door meets customers’ expectations.

Lower Learning Curves

Users should be able to transfer their knowledge from using other websites and applications, which will lower their learning curve when interacting with a new website. Don’t feel as if you need to reinvent the wheel when it comes to designing common components such as notifications, modals, pulldown menus, and so on.

If your website presents these components in the same way as most other websites, then when people arrive at your site, they will know how to interact with them. When they don’t need to learn new interactions, their focus will be entirely on the content, messaging, and services that you’re offering. Alternatively, when you do something different for the sake of being fancy, people will be confused and might end up leaving and finding something else that will satisfy their needs.

Fighting for Consistency

Consistency doesn’t happen by itself, but requires an active process. Even if you have an official design standard in place and a mandate to follow it, people will forget about rarely applied elements of the standard and they will interpret more ambiguous parts of the standard in different ways. There is also the risk that some design teams will rebel and decide to do things differently because “our corner of the product is surely different than everything else.”

Without a design standard, it’s even more common to have different designers invent different solutions to the same problem as they work on different pages or products.

The main tool to fight these inconsistencies is to conduct regular design reviews, involving representatives from multiple design teams. Each reviewer will be responsible for flagging deviations from the design standard or from how things are done elsewhere.

Bigger organizations can also employ targeted standard reviews or consistency reviews, conducted by specialized senior UX staff with a crossproduct and crossteam knowledge of the company’s design portfolio.

Finally, acknowledge that inconsistency will happen over time, despite your best attempts at rooting it out during initial design stages. From time to time (let’s say, once a year), conduct a special consistency review across all of your designs and identify the worst offenders. Fixing these inconsistencies will reduce UX debt and should be done, though sometimes you may decide to postpone a fix and live with minor inconsistencies until it’s time for the offender to be redesigned anyway.

Is Breaking a Convention Worthwhile?

This article has discussed the importance and benefits of maintaining consistency and adhering to standards, but you may be wondering: is breaking a convention ever worth it? When designing your application, consider the tradeoffs of breaking conventions.

Let’s say you’re evaluating icons to use for the save feature in your application. The standard convention you’ll likely come across is a floppy disk, but your users may have never actually encountered a floppy disk in reality. It may be worth it to revisit the convention and adjust your icon choice based on what your users will recognize.

Remember that designing something against conventions will add to your users’ cognitive load. You’ll want to do this only if it’s absolutely necessary to the task or will improve efficiency. In most cases, maintaining consistency and meeting user expectations will outweigh breaking a convention.