Profile picture of Kalina Tyrkiel

7 min read

How mental models affect both users and designers

Users and designers have different expectations of web design. Acknowledging these mental models can lead to better experiences.

An illustration of an eye with a beam shooting out of it, revealing web design elements and icons

Illustrations by {name}

Stay informed on all things design.

Thanks for submitting!

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X. 

The concept of mental models in website design is usually tackled from just the users’ point of view. Design professionals discuss how visitors come to our websites with different assumptions in mind. While it’s all true and valuable, there are two sides to every story.

Being a web designer doesn’t make you immune to mental models. We’re all shaped by our previous experiences, no matter if we’re the ones using the design or creating it. When describing mental models for the NNGroup, Jakob Nielsen has stated that the “gap between designers’ and users’ mental models [is] one of usability’s big dilemmas”.

In this article, we’ll discuss the subject of mental models from two different perspectives. We’ll go through some notable (and not so obvious) examples of mental models in web design, and look at how different mental models affect you as a web designer.

What is a mental model in web design?

Rooted in psychology, a mental model is one of the most popular terms for analyzing human-computer interaction. It describes what users believe to be true about a system, such as a website.

A mental model refers to how a person thinks something works. For example, when you’ve used an iPhone for most of your life, you’re going to need some more time to adjust to an Android phone. If you’re used to a QWERTY keyboard, an AZERTY one will feel less intuitive.

It’s crucial to note that mental models are based on beliefs and experiences, not necessarily facts. This means that they don’t always exactly reflect reality. For instance, a user may think that an icon is the same thing as its corresponding application. The icon does, in fact, represent the application, so that most of the time, the user doesn’t need to go into more detail.

Because of the nature of mental models, designers can’t assume that the users understand web pages the same way they do. They often come from different backgrounds and their experiences vary, which leads to significantly different mental models on both sides.

The same rules apply to websites. We’re influenced by our interactions with thousands of other websites, and we tend to expect all of them to work the same way. This rule is also known as Jakob’s Law, which states that we prefer websites similar to those we already know.

Sound familiar? Not without reason:

Mental models and cognitive biases

If you’ve read a thing or two about the psychology of design, you might be wondering: aren’t mental models and cognitive biases the exact same thing?

Although the idea is quite similar, there are some fundamental differences between these two. First of all, mental models are more explicit. The user is aware of the existence of mental models, while they don’t always realize when they’re guided by cognitive biases.

When faced with their cognitive bias, people tend to reject it. We’re not too keen to admit that our behavior is affected by distorted thinking of some sort. Mental models, however, are usually less emotionally charged. We’re therefore more likely to acknowledge and accept them.

Now, let’s move back to design and see how mental models manifest themselves on the web:

Mental models in web design

Most websites accommodate their design to fit the mental models of their audiences. To see how this might work, let’s compare two websites from the wide B2B niche.

Work in Progress by Dropbox is a blog that highlights modern work and organizations. With a bold and expressive visual language, navigation can be accessed through the top header menu and a search bar, and all posts can be easily filtered with dedicated tags. The visitor can rely on their mental models of a blog in order to find their way around the page.

A screenshot of the Work in Progress blog by Dropbox

Now, let’s have a look at the official blog of the programming language Go (Golang). The difference is clearly visible at first sight. This blog is just plain text and hyperlinks, while the navigation follows a logic similar to that of software development. If you’re not a technical person, you won’t find it intuitive. Instead of social media icons and categories, you get a text-only article index in list form.

A screenshot of the Go blog by Golang

This seems confusing for an outsider and perfectly logical for a Go developer. If you’re not into coding, this kind of architecture may seem cluttered and hard to browse, while for a software professional, it makes things much easier.

As you can see, mental models prove that there is no one-size-fits-all in web design. While some best practices work well for the lay audience, highly specialized groups may prefer something entirely different.

Of course, this works both ways – and this is where another interesting phenomenon comes in:

The curse of knowledge

The idea of the curse of knowledge was popularized by the Heath brothers in their book Made to Stick: Why Some Ideas Survive and Others Die. In simple terms, they claim that once we know something, it’s hard for us to imagine what it’s like to not know it.

Because of this, we tend to assume that other people have mental models similar to ours, which is not always the case. As a web design professional, you’re probably familiar with more design-related models than your average user. What may seem perfectly obvious and simple to you may be confusing to your visitors.

This rule is visible not only in visual design but also in writing. Error messages make a great example here:

An error message design with very technical copy

From a technical point of view, this error message contains all the necessary information.

From the user’s point of view, it’s completely pointless. When you’re not familiar with industry jargon, it’s just a bunch of words that don’t really explain much. Where are they supposed to look up Error Number 2? So many questions.

Here’s what you can do instead:

A screenshot of the Editor X 404 page

In this case, the focus is shifted from the software developer to the user. Most people don’t need to know all the technical details behind the error. It’s enough to say ‘Error 404’ and step in their shoes from there. In this example, users are presented with the suggested next steps: go to the main page and try Editor X.

Research methods for exploring mental models

First and foremost, mental model research is primarily qualitative, rather than quantitative. When exploring mental models, you’re supposed to focus on the “why” and the “how” rather than the “what”.

Before you start, it’s important that you face your own mental models and other limitations. In his book Designing for Interaction, Dan Saffer interviews Brenda Laurel, a video game designer and researcher. She advises other researchers to “hang biases and beliefs at the door”. In her opinion, it’s the first step towards effective research.

Laurel defines effective research as one that brings actionable results. These can be achieved through reframing questions so as to make them as unbiased as possible. Rather than asking “why elders have trouble using mobile banking apps”, it’s better to investigate “how a user’s age affects their usage of mobile banking apps”. See the difference?

Here are some methods that can help you achieve actionable results:

Session recordings and heatmaps

One of the most accessible ways for researching mental models is through session recordings. It’s a great choice to start with, especially if your resources are rather limited.

Session replay tracking takes place in the background of all other website processes. It records all user activity, including mouse movements, scrolls, and clicks. This data helps you see where users tend to look for certain features.

There is one significant advantage to this approach. Most of the time, the users don’t realize they’re being recorded. It’s a unique opportunity to watch their natural behavior, as they don’t feel pressured to meet the researcher’s expectations.

In other words, it’s a way to escape social desirability bias. When the user is being watched by a researcher, they try, consciously or not, to meet the researcher’s expectations. This is partially because they want to appear more knowledgeable and avoid negative evaluation.

Session recording tools often come with heatmaps as well. This way, you can see mental models exposed as behavioral patterns. Have a look at the heatmap below to see how it works:

A website heatmap of the Editor X Facebook page

This heatmap comes from the Editor X Facebook page. The F-shaped reading pattern is clearly visible at first sight, yet there are more interesting findings to be found here.

For instance, the hottest point on the website is the name of the site, together with its profile picture. Other commonly used points include the search bar in the top left-hand corner.