Illustration by Lidia Lukianova
For years, designers have been trying to be more efficient in their products by reducing friction and generating more value for their users. Many products must convey a multitude of processes and a diversity of functions, but a designer’s role continues to be simplifying the paths that will lead users to their goals.
Designers seek the perfect balance between form and content with each new user interface. In the eyes of the user, everything needs to be simple. How can designers reduce the complexity while avoiding cognitive load?
Using the concept of cognitive ergonomics as a starting point, we can imagine that cognitive design would be the one where interface decisions exist to facilitate the viewer’s understanding, reducing the load on short-term memory and accelerating the understanding of the content presented, preventing cognitive load.
What is cognitive load?
To put it more plainly, whenever our cognitive load is greater than what our working memory can process, our minds are at risk for cognitive load due to our limited processing capacity.
To better understand cognitive load, it helps to look at the work of its originator John Sweller and his cognitive load theory. Sweller explored the mental paths that aid in the understanding of messages. According to Sweller, understanding is heavily influenced by the way content is presented to the viewer. For example, it is simpler to show an image of a square than to describe it with words.
In another study titled “Nine Ways to Reduce Cognitive Load in Multimedia Learning,” researchers at UCSB explored several potential instances of cognitive load and came up with some proposals on how to reduce or prevent it. Many of these proposals can be adapted to web design practices.
Why it is important to reduce cognitive load
Digital experiences typically begin with an intent: we view photos on Instagram, send an email via Gmail, or read a message on LinkedIn.
The harder it is to reach your goal, the worse the experience and the greater the cognitive load. According to the 1993 study that generated the Peak-End Rule, we all tend to judge an experience based on both its most critical and final moments.
A feeling of confusion generates anxiety and frustration, and these negative feelings are likely to be linked to your brand. When thinking about the user experience, we must consider using an effective cognitive design.
Understand the problem before trying to solve it
Before returning to your UI software to solve a design problem, it is important to consider the big picture. People have different goals and backgrounds, so they may interpret the same challenge differently. Something might seem complex to you, but the same may not be true for all of your users.
Take the time to research how your users interact with your interfaces. Observe and talk to your users to identify a possible cognitive load scenario before making changes to your user flows.
Key points for a good UI
To reduce cognitive load, we need to be strategic about how and when to present the content in the following ways:
Clear the path
Even though it is tempting to try to present a variety of content options so users have quick access to what interests them, we should try to simplify the user’s path to the goal as much as possible. Too much information concentrated in the same place is not the ideal way to present it.
Be a guide
Designing an interface is like telling a story, and one of the main causes of high cognitive load in UX is a story told poorly. Do your best to guide your users by maintaining a consistent narrative structure with a clear beginning, middle, and end.
Adopt clear standards
Reduce the cognitive load by using patterns. Explore good practices like adhering to 10 usability heuristics for UI design and the use of a design system to design a successful UI.
How to stop cognitive load from affecting UX
Cognitive load does not happen by chance, and many factors can contribute to this. Keep in mind some of the main ones:
Overstimulation is your enemy
Remember: It’s 2020, not 1999. Flashing animations and GIFs aren’t typically good design choices anymore. It’s still important to remember that animations and micro-interactions should exist with a clear purpose. Visual stimuli of any kind should lead, not misguide, the experience.
Miller’s Law states that, in general, we are able to hold seven pieces of information in our short-term memory. This does not mean that an interface can only have seven elements, but it’s worth keeping our cognitive limitations in mind to avoid cognitive load.
The main links on the page appear in the middle of an accelerated animation, floating from side to side, making reading and interaction difficult. Image credit UAT.How to solve this:
In this personal project, Joseph Berry uses animation to guide the audience through a wonderfully immersive experience. Image credit Joseph Berry.Review the meaning behind each stimulus and align it with the main purpose of the interface. Each color, animation, illustration, and micro-interaction must serve a clear purpose.
Fewer options lead to more conversions
Less is more when deciding what to display concurrently. Excess content takes the focus off the main action and weakens your conversion rate. The Hick-Hyman Law tells us that it takes longer to make a decision when there are too many options.
Many options and the absence of a standardized grid hinder the correct perception of the hierarchy of visual elements. Image credit Arngren.How to solve this:
Fiverr groups content by categories using clear text and images in addition to using visual cues as icons for bullet points guiding navigation. Image credit Fiverr.Implement some basic information architecture principles to separate your content into logical groups according to the context. You can explore options with taxonomy studies, dynamic card sorting, and by separating content into tabs, sections, screens, or different visual groups.
Consistency from start to finish
Keep your visual design, interaction, and navigation familiar to your users. If the search bar is at the top right with a blue icon on the home page, no one expects it to skip to the footer on the next page. If the confirmation button in your sales funnel is always green, make sure it stays green, even at the end of that forgotten contact form.
Inconsistent navigation increases cognitive load. Image credit Cambridge.How to solve this:
The main CTA of the floating card moves to the header when it is hidden due to the scrolling of the screen, maintaining a consistent navigation. Image credit Airbnb.Now is the time to make your design system shine. It is possible to maintain consistency from the smallest to the largest component through an atomic system and to expand its standards for any action in your interface, including navigation structure and animations.
Minimize the necessary actions
Have you ever found yourself filling out information on a registration form without knowing why a particular item was necessary? Eliminate anything that is not vital to the completion of the primary task. The fewer extra fields, redundant information, validations, and clicks, the better.
Right away, Best Buy forces users to make a decision. Image credit Best Buy.How to solve this:
Intervene only when necessary. Many brewery websites are required by law to confirm the age of everyone who accesses them. Image credit Stella Artois.Analyze your content for redundancies and unnecessary steps. Improve your default options, reducing the need for interactions for the users.
Use familiar patterns
As designers, we don’t have to reinvent the wheel all the time. After years of interacting with different interfaces, users expect familiar patterns. When this doesn’t happen, a greater load on the working memory can happen to process the information.
Even today, MySpace uses an unusual horizontal navigation. Image credit myspace.How to solve this:
You don’t have to start from scratch when designing solutions that are already known to everyone. Mercado Livre follows good practices for modern ecommerce. Image credit Mercado Livre.Refer to industry standards related to usability like the idea that instead of reading every word on a webpage, people typically scan the content in an F-pattern.
Recurring elements like search bars, login screens, and navigation menus have well-established standards. Reuse instead of reinventing.
Keep it simple
To simplify what psychologist Paul Fitts suggested in his 1954 study, a button needs to be large and accessible. It is a designer’s responsibility to make it easier for users to make decisions.
It’s worth mentioning Occam’s Razor here. Simply put, when given several options that generate the same result, the simplest one is typically best.
Simplicity must go hand in hand with accessibility. Lack of contrast is the enemy of cognitive design. Image credit Typeset Design.How to solve this:
Mural uses negative space and high contrast to signal clearly the most important content on the page. Image credit Mural.Simplify the presentation of information using features like negative space to emphasize key content. Revisit and apply Gestalt principles such as proximity, similarity, and continuity to optimize the user experience without creating confusion.
Avoid ambiguities while maintaining clear and objective text, keep components in accordance with the principles of accessibility, and provide the necessary amount of help as central elements of a simple experience.
Keep it simple
Through all the theory and discussion of cognitive load, it is often easy to see whether a UI mockup is performing well or poorly through product and business metrics. Don’t radically change something that is already established as a standard without having a great reason for doing so. Above all, observe, listen, and give a voice to the people who interact with your interfaces. Only then we will be able to design useful products that truly solve our users’ problems.