The concept of mental models in website design is usually tackled from just the users’ point of view. Design and UX/UI 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.

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.

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:

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.

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.

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 heat maps

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 heat maps as well. This way, you can see mental models exposed as behavioral patterns. Have a look at the heat map below to see how it works:

This heatmap comes from a 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.

As you can see, the heatmap demonstrates the main navigation points on Facebook pages and reflects strong behavioral patterns of the platform’s users – or, in other words, their mental models.

Information architecture and card sorting

Session recordings and heatmaps can be used when your website is already functioning. When you’re at a very early stage of your design process, it’s a good idea to start from card sorting exercises.

Before you start designing your card sorting exercise, you need to create a directory of content for your website. For example, the list can include the contact page, the FAQ page, account settings, and so on.

Once you have all of your content listed, ask participants to divide these elements into categories. In the case of closed card sorting, suggest the categories yourself and ask the users to assign each element to one of the categories. You may also want to try open card sorting, where users need to create the categories themselves, or the hybrid method, which is a combination of both approaches.

This approach reveals where users would look for certain elements on your website. Thanks to this simple exercise, you’ll be able to design more intuitive websites. The users will have less trouble finding what they need, as the information architecture will reflect their mental models.

When conducting a card sorting exercise face-to-face with a user is not an option, consider using online card sorting tools, such as OptimalSort.

Usability testing

Another popular method is the think-aloud protocol. All you need is a website or an interactive prototype, even a simple one, and real-time communication with the user. The users are describing their actions out loud as they’re using the product. This kind of interview can also be conducted remotely, with the help of tools like Lookback.

Of course, there are some challenges that come with this method. The situation may feel unnatural for the user. Think about it: how often are you actually thinking out loud and verbally analyzing every step you take on a website?

When people describe their experiences in real-time, they also filter their statements. Again, here’s where the social desirability bias comes in. The user may want to appear smarter, and your role as a researcher is to encourage them to speak their mind. When they start feeling more comfortable, they’ll be more likely to share some of their challenges, too. (Related: neurodiversity in web design.)

How to use mental models in web design

While your own mental models can make your life easier, they can also be a limitation while you research the mental models of other people.

With a mix of curiosity and empathy, be intentional in your attempts to listen, observe, note and analyze. You might end up being surprised by your findings, while these surprises can ultimately help you become a better web designer.