8 Design Tips to Reduce Cognitive Load

We live in a time when many of our daily activities and habits are related to technology. As soon as we wake up, social media, work emails, and funny cat videos start fighting for our attention. In fact, a study by Prof. Dr. Martin Korte showed that digital media makes us more prone to multitasking.^[1] In turn, this affects our attention span, concentration, and the capacity of our working memory.

Every time we open a website or an application, our brain has to process tons of information to help us complete a task. But the more information we receive, the harder it gets for our brain to process it. If the cognitive load gets too high, the brain slows down its activity and forces us to abandon the task.

What can cause a high cognitive load in design?

• Too many options
• Tasks that require too much thought
• Lack of clarity
• Visual clutter

Our brains naturally seek easier ways to process information and store it in our memories. This limited capacity of human memory is rooted in science.

Miller's law originated in 1956 when cognitive psychologist George A. Miller published a paper in the Psychological Review journal titled The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information.^[2] In this study, Miller proved that chunking makes the content easier to scan, comprehend, and identify. Eventually, it helps users achieve their goals much faster and more effectively. Many designers understood Miller's theory too literally, assuming that humans could only keep up to 7±2 pieces of information in their minds when performing a task.

Miller indeed mentioned the magical number 7 but only rhetorically. In reality, the number of items in a chunk can vary depending on the context, users' familiarity with the content, and their individual capacity. Nevertheless, smaller chunks do help users scan, understand, and memorize information more effectively.^[3]

When designing a product, it's important to remember that functionality always comes first. Less is more, and if an element doesn't help users achieve their goals — get rid of it. For example, avoid intense colors, imagery, or ornamental details that don't add value to the product's functionality.

Designing in a minimalist fashion reduces cognitive load and is generally more pleasing to the eye. More importantly, the less-is-more mentality promotes user engagement. When a page contains fewer distractions, users tend to focus more on completing their primary task. All microinteractions in your design should exist to help users and not repel them or cause sensory and cognitive overload.

The best designs are like all-inclusive luxury hotels — they foresee your needs and don't inquire more than necessary. Try to eliminate energy-draining tasks that lead users astray from their primary goal.

• Use autofill: No one likes typing in their card number. Instead, provide a credit card scanner, apply saved card details, or integrate with Apple Pay or Google Pay.
• Apply defaults: Defaults take responsibilities off of users and do the thinking for them. For example, you may preselect the country or currency based on users' geolocation data. According to research, fewer than 5% of people change their default settings. So, consider your defaults carefully.^[4]
• Allow signing in from third-party services: When users have just started using your product, don't scare them off with a lengthy sign-up process. Instead, provide a quick registration with third-party services like Google or Facebook.

Designers always aim to create unique and innovative products. Users, on the other hand, come to a website or an app with a predefined idea about how the product should work. People plan their actions based on their mental models. But what happens if a task requires another approach? In this case, users experience a significant cognitive load, resulting in frustration.

Think about it. When taking a shower at home, you know exactly how your shower tap works and what to expect. However, when staying in a hotel, taking a shower may require some guesswork. In the same way, when users open a website, they expect to see a logo and a search icon in the header. If users can't find these elements in a familiar place, they start feeling disheartened.

When designing a product or adding new functionality, avoid reinventing the wheel. Instead, explore products and common design patterns that have stood the test of time. Or even better — conduct user research to understand your target audience's actual expectations and pain points.

Remember the last time you went shopping for something as simple as socks? Many stores have big displays with dozens of different socks: single-colored, multicolored, dotted, striped, short socks, crew socks, fuzzy socks, and socks with any print imaginable! How can a person make a quick decision when there are so many options?

The irony of having too many options is that it makes it harder to choose. People mistakenly presume that having many options gives them control. But what actually happens is that our brain feels overwhelmed. In fact, we might abandon the idea of making that choice altogether and leave.

Hick's law states that the bigger the number of options, the longer it takes for users to decide. And the longer the decision time gets, the worse the user experience is.

Instead of throwing a long list of options at users, consider alternatives. For example, you can either reduce the number of items in the list or show only the most relevant or popular options, hiding the others under the See All or Read More buttons.

Progressive disclosure is a design principle that allows designers to kill two birds with one stone. First, the method implies a step-by-step reveal of information to users, usually across several screens. This way, users don't get overwhelmed and don't get lost in a tangle of links, forms, and text blocks. Second, progressive disclosure allows content to be separated into several screens and avoids clutter.

How can you put this principle in place and reduce cognitive load for users?

• Divide information into several screens. This is even more relevant for mobile, where the space is as valuable as gold. Use it for sign-ups, onboarding, or long forms with more than 2 steps.
• Use popups, overlays, menus, and accordions. These components allow users to stay on the same page and access a piece of extra information on demand.

The Nielsen Norman Group defines chunking as dividing content into smaller pieces of information.^[5] Chunking is a lifesaver in the battle for visually appealing and digestible content. In text, chunking enhances readability and helps users complete their tasks faster.

Some of the most common methods of chunking text include:

• Splitting long paragraphs into short, bite-sized ones with white space to separate them.
• Using short text lines of around 45–75 characters.^[6] This helps users understand the message faster and prevent them from losing track.
• Using simple formatting for long strings of numbers. Separate groups of digits with spaces, dashes, and slashes when writing phone numbers, license keys, dates, etc.

A clear visual hierarchy is another factor that helps decrease the cognitive load. Things like the absence of size, color, and shape hierarchy or weird placement can confuse users. What can designers do to smooth their journey?

• Rank business and UX objectives. Learn why users come to your product and organize content by priority accordingly. For example, the CTA button should stand out against other content and engage users to click it.
• Leverage scanning patterns. Prioritize important content and place it in the focal zones. The most common scanning patterns that users use to scan content include the F pattern, the Z pattern, and the layer-cake pattern, among others.^[7]
• Use headings and subheadings. Use headings and subheadings to capture users' attention and guide them to what's important.

By definition, an icon is a graphical representation of an action, idea, or object. Its main goal is to deliver a message. When chosen on a whim, icons can confuse users and prevent them from accomplishing a task.

How can you use icons without the potential risk of causing unnecessary cognitive load?

• Stick to universal icons. Universal icons, such as a floppy disk for saving or a house for returning to the home page, are a safe bet. They're universally recognized and don't require mental processing.
• Accompany icons with labels. Universal icons are the best, but they don't cover all possible actions. Using unique icons together with labels eliminates ambiguity and clearly communicates their meaning.

If it takes longer than 5 seconds to think of an icon for action, the icon won't pass the recognizability test. Even worse, it may lead to confusion and increase the cognitive load.