November 2, 2019

Cognitive overload

The human brain is an amazingly complex system. It has the capacity to store tons of data. Some neuroscientists estimate that it can store somewhere between 10 to 100 terabytes and others as high as 2.5 petabytes. One terabyte holds roughly 1000 gigabytes and one petabyte 1000 terabytes. To put this in perspective, 2.5 petabytes can hold up to three million hours of video, enough to watch for 300 plus years, non-stop.  While these are estimates, they give us a perspective of how much information the brain can store.

Despite the brain’s capacity to store information, it is limited to how much it can hold in Short Term Memory (STM). Research suggests that it can store 4 (plus/minus 1) units of information in STM. Maxing out this capacity is known as cognitive overload. It happens when a person is given too much information and they are unable to process it, causing a feeling of distress. For users, this means abandoning a page or making the completion of a task a frustrating one.

Cognitive overload is one of the many pitfalls designers look to avoid. It is a common mistake to try and show everything in an attempt to cover the many scenarios and workflows in a complex product. Given too much data, humans become frustrated and abandon a website. This event is known as dropping off and it is measured in analytic tools as the drop off rate of a page. It is an important metric because it is closely related to e-commerce sales.

In web applications, users may not drop off because they need to complete a task despite the frustrating experience. Eventually, when a better alternative comes around, users will jump ship as quickly as they can.  In today’s market when there are usually several alternatives to every product or service, good user experience is a must. It is the one thing that companies cannot afford to neglect to stay competitive in the long run.

Preventing cognitive overload

Cognitive overload can be prevented by following a few design principles and best practices. This is true even for complex products.

The primary goal

Every feature in a product should have an intended primary purpose. The first step of an effective design process is to identify the primary problem it’s solving. That is not to say that design can’t accomplish several tasks, but understanding the user’s primary needs when using a product will help prioritize the design and give it focus. A feature may be compromised of several views that make up a workflow in a multi-step process. When that is the case, think about why each of those views exists. What is the primary purpose of each view?

To prevent cognitive overload, spend time identifying what data and actions should be available and get rid of unnecessary ones. A danger many designs run into is trying to be everything for everyone. It would be nice if a design allowed you to do everything, but it’s not practical. Protect the user from themselves. They may think they want to see everything, but the way our brains work disagrees. The next step is to organize information in a meaningful way.

Information hierarchy

All information is important but not all information is of equal importance. The levels of importance are described as information hierarchy (IH). IH helps direct users to what they should pay attention to first. The same is true for elements and actions. There are commonly three levels in a hierarchy: primary, secondary and tertiary. To establish a visual hierarchy, designers combine the use of size, scale, contrast, color, space, proximity, and alignment.

Classify data with the level of importance for the primary purpose of the page. When there is data or an action that can be helpful in some cases, a useful technique to use is to make the data available on-demand or just-in-time.  This type of data can be displayed on demand at the time it is needed by using a mechanism such as a mouse hover over or a toggle to show/hide other information.

Hierarchy case study

The following example uses font size, color, contrast, and proximity to bring attention to the subject ID, variable and verbatim term name. Larger font with high contrast between the white background and black text is used to make them stand out more than lighter text. They are grouped with other information to make the group visually weighs more than the rest of the data. This is known as information chunking. Which is easier to remember, FBINSACIA or FBI NSA CIA? Within the group, there are three levels of hierarchy but the proximity to each other implies a close relationship. Through color, we identify the clickable text as well as the status of a term. Tertiary data, while still important, is smaller or lighter, or both.

Repeating schemas

An effective way to help reduce cognitive overload is to use known schemas or patterns. Repetition helps the brain recognize previously encountered metaphors that it has gathered over years of experience. Once recognized, the brain ignores what it already knows and moves on to process other pieces of information. Common examples include buttons or color for hyperlinked text. Our brains recognize the schemas and know how to interact with them because it has encountered them before.

Use commonly known schemas as much as possible. If you need to create your own for a specific need, use a reusable component library to help establish these patterns across a product.

Conclusion

The understanding of cognitive load will help minimize the amount of effort it takes to use a product.  I would encourage you to dig deeper into this subject. If you have ever encountered a design that frustrated you with too many distractions and didn’t know why it is most likely due to your brain being overloaded by information.

In the words of the great philosopher Notorious BIG, “And if you don’t know, now you know…”