UX Crash Course: Mental Models and Cognitive Load

Last updated: Oct 23 2024

As much as we might love for our websites or applications to be special, unique, and one-of-a-kind, the truth is that – for our users – they exist in the context of all the other apps and websites they’ve used before. They may use 20 different applications over the course of their entire day, of which ours is just a blip. What does that mean for us, in terms of user interface and experience design? In order to fully understand, let’s break down two common UX terms: mental model and cognitive load.

Mental Model

A user’s mental model is the understanding they build and the assumptions they make about their current experience, based on the similar experiences they’ve had up until now. For example, most websites have a logo in the top left corner that will take the user back to the home page when clicked. Linked text in a webpage is underlined. Right-clicking will open a contextual action menu. When these things don’t happen – or worse, when something else unexpected happens – it throws us off. Our mental models no longer line up!

By meeting the wider standards of web and application design, we allow our user to carry over everything they’ve learned. Things “just work”, because we’re not forcing them to go against the grain and learn something new in order to use our product.

Mental models originally came from the analog equivalent or similar real-world experience of what we were doing digitally (for example, the checkout and shopping cart experience of an online retailer). These days, pretty much everyone has extensive experience working digitally – which means that now, mental models are informed by both real-world experiences and digital experiences. As people use technology, over the course of their lives, they pick these things up and integrate them into their high-level understanding of How Things Work.

Mental models also can be (and are) constructed on a product-by-product basis. Maybe we use a specific color system to designate different types of information, or maybe our menus are organized in a certain way. We can build mental models within our own platforms by repeating behaviors and teaching new users. However, this is not recommended if those behaviors will contrast with broader models – like setting a custom keyboard shortcut in our app to use “Ctrl+S”, which conflicts with the wider standard where that shortcut is used for the save action.

We also need to be careful not to create new mental models that differ between applications in a shared product suite. If we want to create a new standard for App A, we should make that also true in App B and C, if they’re intended to be used together. When that’s not the case, we disrupt our users’ product-level mental models – and make life significantly harder for the users that have to switch back and forth between those linked systems regularly.

Cognitive Load

More than once now, we’ve mentioned that things will get more challenging when the mental model doesn’t line up – but why does that happen? In this and other situations where the user has to make sense of something new, we’re dealing with a concept called cognitive load.

Cognitive load is the amount of effort and energy that it takes for a user to complete a task. Every new page or interaction pattern will increase cognitive cost for users. They have to pause and take time to figure out a new layout, new contents, what they should be doing, where they can click, etc. If this gets too high, users will (most often) simply give up or stop – leave the website or close the application. In situations where that’s not a viable option for them (such as a work-related task, or filing important personal paperwork), they’ll slow down significantly, get frustrated, and generally leave the experience with a bad opinion of the brand. Obviously, this isn’t what we want for our users.

The good news is that there are things we can do to reduce the cognitive load on our users. Here are a few good examples:

• Reduce subcategories. Try to surface as much relevant information as possible. What’s going to be most “relevant” for your user? That will change based on If you’re not sure, you may need to do some user interviews and research!
• Highlight frequently accessed items. Think about how convenient it is to see your recently opened files in Google Drive – that’s a great example of the ways their designers have reduced the cognitive cost of the experience by helping you quickly and easily access files they know you’re already working in. That saves the time and hassle of navigating through nested folders, thinking of the right search terms, etc.
• Bring related steps together. Anytime you have to interrupt your “flow state” to contend with logistics, you’re adding cognitive cost. Try to reduce the time your users need to swap tabs, toggle between apps, or similar in order to complete their work. If we can get that down to a single page with no need to hop around, that’s the ideal!
• Repeat common patterns. Of course, after we just talked about mental models, we couldn’t leave this out! By leveraging existing patterns or repeating new ones, your users can make better, more educated guesses about what’s going to happen – reducing their cognitive load and increasing the intuitiveness of your design.