Cognitive load, UX, and why you should care

Cognitive load is the amount of mental effort required to complete a task. It's something you experience everywhere - in every app you use, every website you visit, and even making your morning coffee. In product design, is something that is often felt but not well-understood, and has a huge impact on both UX and the lived experience of building your product.

In the best case, cognitive load is something that is invisible to the user. When I used to work as a UX designer at Microsoft, I would often say that if I was doing my job right, nobody would realize I did anything at all.

In the worst case, it can be a source of frustration and confusion. In this article, we'll explore what cognitive load is, how it affects UX, and how you can use it to improve your product.

Cognitive load boils down to three categories: intrinsic, extraneous, and germane.

Intrinsic cognitive load is the basic difficulty of a given task. In other words, the amount of perceived mental effort required to complete a task. Does using your product feel like a breeze, or does it feel like a chore? If the person looking at the product you've designed feels like they're doing their taxes from scratch every time they call up your app, you've got a problem.

Perceived intrinsic load can be reduced by splitting tasks into smaller chunks, or by providing more guidance (or, in 2023, by stapling GPT-4 to your product and calling it a "copilot for XYZ", har har). As a designer, this is your opportunity to shine: how can you make your product feel like a breeze? If you're helping people do something that typically requires domain expertise, make them feel comfortable and confident by communicating in their language. Provide guidance and feedback when they need it, and get out of the way when they don't.

Extraneous cognitive load is the amount of mental effort required to complete a task that is not related to the task itself. Most often, this is a factor of design decisions: is the user interface intuitive? Are your fonts tiny? Did you put yellow text on a white background? If you've ever used a product that made you feel like you were fighting against it, you've experienced extraneous cognitive load.

This type of cognitive load can be mitigated by observing peoples' behavior when they use your thing, and iterating on your design. Can you provide a clearer hierarchy or structure for the interfaces that your product presents? Often times this is a matter of making your designs simpler - finding an elegant balance between simplicity and functionality is one of the most challenging aspects of design.

Germane load is the most challenging to describe, and may also be the most important. Wikipedia's definition is deceptively simple:

Germane cognitive load is the processing, construction and automation of schemas.

In other words, germane cognitive load is the amount of effort that your users spend on building a mental model of the thing you're helping them do. Often times, this means relating your thing to something that's already familiar to them. Here, schema is a fancy word for "the shape of the problem you're trying to solve".

At Craftwork, this is something we've been spending a good deal of time on. We found pretty quickly that most people don't have any mental model for what it should cost to repaint a room. Ask two friends what it costs to paint the same room, and you're likely to get two wildly different answers. This is a problem we're trying to solve for by offering transparent pricing for painting services, and by providing a simple interface for people to get an instant quote for their project. You might be surprised to hear that this is a pretty novel concept in the home improvement space.

The sum of theses three types of cognitive load is representative of how much of a pain in the ass it is to use some thing to complete a task. You've experienced all three of these when you use any app or service. As you build your own product, reflect on your own interface designs, and look for areas to improve on cognitive load.

It's tempting to complete a feature, toss it over the fence to be released, and move on to the next thing -- but if you leave it at that, you're leaving a ton of potential value on the table. Spend some time observing peoples' behavior when they use your product, and make it better. There's always room to improve.

Are you ready to dive in? These are some resources that might help you reduce cognitive load for your product:

• 🐗 We recently started using Posthog at Craftwork. Self-described as "The Product OS", Posthog has a myriad of features that make it easier to see if your product is working, how well it is working, and what paths people are taking through as they navigate your features. It was a breeze to integrate, and has already helped us make some improvements to our product.

• 🫖 Don Norman's The Design of Everyday Things is a classic tome on designing things that people will enjoy using. He does a great job of explaining design success and failure using basic objects like teapots and lemon squeezers, which makes it easy to understand how to apply his principles to your own designs.

• 🧑‍🎨 r/designdesign is a subreddit full of bad design - particularly, design that is over-the-top, just for the sake of design. It's a great place to go if you're looking for examples of extraneous cognitive load.

• 🎙️ I had a chat with Or Weis from Permit.io about the team his product is building. Often times, permissions, authentication, authorization, and the challenges facing developers building out products for real people.

Alright fam, that's all for now - if you've got examples of places where you've noticed cognitive load in your life, I'd love to hear about them -- especially if you've seen interesting ways to improve. Hit reply and let me know!