Insight-11 - Studio Fred Gall

Experience Design

Meeting expectations through mental models:
What users believe about a system

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.

Mental models are 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.

Mental Models in Web UX
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.

Online Shopping Carts
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.

Long-standing navigation essentials

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.) The University of Michigan Library has two search boxes on the same page, each attached to its own database.

The search box on the top right of the page is dedicated to logistical library information, while the search bar in the middle of the page is for academic research. The help text and placeholder text associated with each search bar allude to the purpose of each; however, users often perceive search bars as universal. The presence of multiple search bars introduces complexity and a potential for confusion.

Mental-Model Inertia

There's great inertia in users' mental models: stuff that people know well tends to stick, even when it's not helpful. This alone is an argument for being conservative and not coming up with new interaction styles. Sometimes, you do need to innovate, but it's best to do so only when the new approach is clearly superior to the old, well-known ways.

When you come up with a new design pattern, you face an immense challenge: How do you explain the new concept so users will construct a valid mental model of your system?

It's amazing how one misconception can thwart users throughout an entire session and cause them to systematically misinterpret everything that happens. Through failure after failure, they never question their basic assumptions. This is yet another argument for complying with preexisting user expectations whenever possible. If you don't, then make certain that you're clearly explaining what you're doing — while also realizing that you face the added challenge of users' reluctance to read instructions and help messages.

Designers are better off leveraging this mental-model inertia instead of fighting it. One example is skeuomorphism, a design trend that involves incorporating elements from the physical world into digital interfaces to guide users in acclimating to new interaction styles. Drawing on familiar, real-world mental models makes new, unfamiliar designs easier to understand.

In the realm of children's apps, skeuomorphism plays a particularly beneficial role. Since young users may not yet have well-established mental models for digital navigation, apps designed for kids often use physical-space metaphors, such as maps or doors, as seen in Duo ABC, an app that teaches children reading fundamentals. This approach mimics the tangible experiences that children encounter in physical spaces, like exploring a map or opening doors to discover new areas.

Mental models are an essential concept in UX design and significantly influence the decisions users make while navigating an interface. Understanding users' mental models helps designers create interfaces that resonate with users’ expectations.

Brand &
Identity

Brand Discovery 
Brand Architecture 
Visual Identities
Brand Design Systems
 Digital Styleguides
 Brand Platforms
 Brand Experience
 User Experience
 Interface Design

Experience
Design

Aviation
Automotive
SMBs
Fast moving goods
Information technology
Start-ups
Scale-Ups
Workshops
Mentoring

Brand
Management

Brand Architecture 
Markets
Design Systems
User Experience
 Behaviour 
Accessibility
Digital transformation
 Knowledge transfer  
Creativity

Contact
Fred Gall

hey@fredgall.com ↗
 +49 176 58963455  ↗
LinkedIn ↗
 Malt  ↗
Freelancermap ↗