Mental Models and User Experience Design - NN/G

Introducing NN/G Membership | Access all self-paced courses for $249 per year | Join by Jan. 26, 2027 |
Find the training option that fits your learning style.
January 26, 2024 · Last reviewed Sep. 1, 2026 2026-09-01
This is an updated version of an article written by Jakob Nielsen in 2010. Mental models are one of the most important concepts in human-computer interaction (HCI). This article reports a few examples of mental models in user-interface design. Not coincidentally, using concrete examples often helps people understand abstract concepts, such as mental models.
A mental model is what the user believes about the system (web, application, or other kind of product) at hand. Mental models help the user predict how a system will work and, therefore, influence how they interact with an interface.
A mental model is a model of what users know (or think they know) about a system such as your website. Users form their predictions about the system based on their mental models and plan their future actions accordingly. A prime goal for designers is to ensure that the user interface clearly communicates the nature of the system so that users form accurate (and thus useful) mental models.
How do users create mental models? Often, they just use the knowledge they have about the world to create them. Remember Jakob's law of the internet user experience: Users spend most of their time on websites other than yours. Thus, a big part of customers' mental models of your site will be influenced by information gleaned from other sites. People expect websites to act alike.
A mental model is based on each user’s individual background knowledge and past experiences, so different users might construct different mental models of the same system. One of the biggest dilemmas in usability is the gap between designers' and users' mental models. Designers form wonderfully detailed mental models of their own creations, leading them to believe that each feature is easy to understand. On the other hand, most users’ mental models of the system are usually less developed; as a result, they are more likely to make mistakes and find the design harder to use.
Mental models can change over time — due to additional experience with your system or with other systems.
As users navigate the web, they construct mental models based on the patterns they encounter. This section discusses a few mental models common in web design. These mental models serve as the foundation for design standards, enabling designers to create interfaces that align with users’ expectations.
Learn how the way our minds work impacts UX design in the live online course, The Human Mind and Usability.
When shopping online, users browse through products, add items to their shopping carts, and then check out. This experience is like shopping in a brick-and-mortar store, and people’s expectations are influenced by their experience with physical shopping.
Online shopping experiences that depart from the physical shopping model create confusion. In real life, the shopper controls what goes into the shopping cart, so this expectation is carried to online shopping. When an ecommerce website violates this expectation, problems arise.
For example, Nomad Lane automatically adds shipping insurance to the total cost when users check out. Users must, first, notice this additional cost and second, actively opt out of shipping insurance. Automatic shipping insurance is not part of users’ shopping cart mental model, so this leads to frustration for anyone who accidentally pays for insurance. Adding unexpected items to a shopping cart is a deceptive pattern in UX design known as sneaking or preselection.
The Back button is a long-standing essential in browser navigation. Over time, users have built a strong mental model for it: namely, Back is supposed to lead back to the previous screen, essentially acting as an undo.
When mobile smartphones became popular, users found themselves presented with another use of the Back button in mobile apps. Unlike on the web, where Back was used to take users to the previous screen, in some mobile apps, Back took users up in the hierarchy of the site. For example, if, while the user was reading a news story A, they tapped on a link to another news story B, the Back button would take them to the list of all news articles instead of taking them back to the news story A.
This behavior violated users’ expectations. Over the years, designers have luckily understood that, and now it is rare to find that implementation for Back in mobile apps. Some remnants, however, are still in place. For example, in Android, if you happen to be on the homepage of any app, doing the Back gesture (or tapping the Back button) will take you “up” — that is, outside of the app, regardless of whether you arrived to the homepage from another page inside the app or you just tapped on the app icon.
Using the Back button with an open overlay can also lead to confusion. When a user opens an overlay, it feels like they are opening a new page entirely, especially when the overlay takes up the whole screen. So, when the user clicks the Back button, they expect to exit the overlay. However, in many cases, the user is instead taken two steps back to the page they were on before visiting the page that triggered the overlay.
Users expect to be able to input keywords and phrases into a search bar to find any information on a website. A single, well-placed search bar aligns with their expectations, offering a clear point for queries.
When a website has several search features on the same page, users often get confused. They’ll enter their query in the wrong box and assume that the site doesn’t have the answer if nothing comes back. (In reality, they might have used a specialized search that doesn’t cover everything.)
In the example below, the University of Michigan Library has two search boxes on the same page, each attached to its own database. The search box on the t