How mental models affect both users and designers

Profile picture of Kalina Tyrkiel




Illustrations by {name}

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

7 min read

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

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. 

Get our latest stories delivered straight to your inbox →

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.