What is cognitive load and why does it matter in web and interface design?

Successful design manages cognitive load. Cognitive load is a technical term for “mental effort,” more specifically it’s the total amount of mental effort required for a given task.

Completing any task requires some level of mental effort. This includes learning new information, analyzing stimuli, and working with short and long-term memory. Mental energy which has a finite supply, the more energy used, the more difficult a task becomes. For any task there is a “breaking point” when the perceived difficulty to complete said task exceeds the perceived benefit. When this occurs, people abandon the process rather than continue.

Physical world example

Let’s start with a non-technical example. Let’s say you walked outside and noticed some trash sitting on the ground outside a trash-bin. Would you be inclined to pick up the trash and throw it away? Most people would say yes.

Now imagine you’ve just finished a marathon and came across the same scenario. Would you still throw the trash away? Maybe, but more likely you’d be too exhausted and would simply ignore the trash.

How this applies to interface design

Mental energy is just as influential as physical energy. As your available mental energy decrease your desire to conserve energy increases. This trait evolved from a time where low energy could mean the difference between escaping a threat and surviving.

We define the success of a digital interface as facilitating the successful completion of user goals, e.g. a user successfully accomplish the task they set out to accomplish. As cognitive load increases, the user get’s closer to their “breaking point.” Eventually, the user will abandon the process and the design will fail.

As cognitive load increases, likelihood of success decreases, therefor it’s imperative the design minimizes the amount of mental effort required.

What causes cognitive load?

Simply put, thinking causes cognitive load.

Cognitive load theory splits cognitive load into two categories: intrinsic and extrinsic.

Intrinsic load describes the mental effort required to learn something new. It’s influenced by the volume of information, relative complexity, and relationships between pieces of information.

Extrinsic load refers mental effort related to the manner in which information is presented. If you reflect through times you’ve had to learn something new and complicated, you’ll likely identify times where complex concepts were easy to learn and simple concepts hard. This is likely due to how information was presented, and total extrinsic load experienced.

When interacting with a website or interface users will experience both intrinsic and extrinsic load.

Intrinsic cognitive load

Because the interface will be different than other interfaces they’ve experienced, they’ll need to learn how it works. One tactic towards reducing intrinsic load is incorporating design conventions. Users familiar with conventions will already understand them, reducing the overall volume learning required.

Underlined text links, for example, are generally understood. Using a different approach to identify text links would require the user learn a new, localized convention, thus increasing intrinsic load.

Extrinsic cognitive load

How information is presented will impact the level of extrinsic load. For example, breaking large amount of information into single elements reduces the amount of working memory required and reducing total extrinsic load.

Progressive disclosure is another design principle that reduces extrinsic load. Progressive disclosure is the practice of breaking complex information into small bites, presenting a high level overview first with the option of progressively exposing more detail as desired.

Overall cognitive load

Every bit of analysis, consideration, and decision required will cause some level of cognitive load, including:

• Identifying you’re current location within the application
• Scanning the interface to identify content or actions related to your task
• Deciding which action to take next
• Consuming any content (visuals, audio, written content, etc…)
• Remembering what you’ve learned or completed previously

Typically it’s a death of a thousand paper cuts. Each cut reduces the drive to continue.

Bigger and more important decisions required more energy. When confronted with a question like “should I fill out this form?” a user with high cognitive load is less likely move forward.

How to incorporate these theories into design

The first step is understanding and respecting the need to manage cognitive load. Ultimately what you’re trying to do is reduce the amount of thinking and learning required to successfully navigate with the interface.

You can start by asking yourself (and others) “Is this obvious?” at each stage of the users journey. Anytime the answer isn’t a resounding “absolutely” there is likely improvement to be made.