Cognitive Load: Insights for Successful UI Projects

You know when you go to a crowded shopping center on a sale day? It gives that uncomfortable feeling, right? In those days, it's much harder to buy anything, and it's not because of a lack of products. It's due to the excess of information: people, movement, prices, discounts, colors, signs, etc.

Many times, we end up abandoning the mission and going home empty-handed, eager to clear our minds as well.

The term 'cognitive load' was coined to describe the mental effort required to learn and manage information. It was first researched by Sweller (Sweller, 1998) in the late 1980s, based on the idea that our working memory – the part of our mind that processes what we are currently doing – can only handle a limited amount of information at a time.

In other words, the human brain has a limited processing power. When the amount of information received exceeds our capacity to deal with it, we struggle, and our performance is impaired. We may take longer to understand the information, miss important details, or even become overwhelmed and abandon the task.

When we understand the importance of this in the user experience, we also understand that not only the visual part – with balanced interfaces – is important. But also all the content, decisions that need to be made, the level of information that will be presented... all of this adds up to cognitive load.

For example, when buying a gift, users' cognitive load includes knowledge related to the store interface, available products, how much they know about the preferences of the gift recipient, the pressure and desire to please and choose the right gift, delivery, whether it can be returned or exchanged... quite a processing task!

The fact is that, even with the best intentions, as designers, we won't have control over some elements of this sum: those involved in intrinsic cognitive load. But we can and should control and minimize extraneous cognitive load, using resources from the so-called Germane cognitive load.

The basic differences between these types of cognitive load are that while the first refers to the inherent difficulty level of a learning event and is indispensable for the user to understand the information, the second involves unnecessary efforts that won't help the user achieve their goals, which are not critical or are only superfluous. The third involves mental resources dedicated to the acquisition and automation of schemes in long-term memory, that is, working memory resources available such as the use of mnemonic devices, activation of prior knowledge, etc.

In UX Design, knowledge of these three types of cognitive load is essential to understand where to act because if we cannot change the complexity of a task (intrinsic), we can use what the user already has in their repertoire (Germane) and avoid any information that may hinder or bring confusion (extraneous).

RESOURCE	DO	DON'TS
Text	Help the user understand the product, stage of the journey, or complete the task	Long-winded texts or information that is not intended to help the user
Colour	Create contrast, hierarchy and meaning	Use many cores or cores that conflict or generate visual noise
Sound	Provide feedback, alerts, or rewards	Loud, annoying or irrelevant sounds
Typography	Differentiate titles, group information, cohesion	Different fonts without purpose, which generate visual pollution
Animations	Create transitions, interactions, convey emotions or positive emotional response	Slow, complex or unnecessary

In summary, always question why you are using a particular resource and evaluate how it can impact the overall experience.

How can we reduce cognitive load and improve the user experience:

1. Understand your users, your product, and the objectives clearly The first step is to understand the needs, preferences, goals, and emotions of users. But it is also essential to know the advantages of your product or service because understanding which information is important and which is secondary is a key point in defining the content and approach that will be used. And of course, knowing the ultimate goal of the user and your business and the intersection point between them is essential to create a seamless and frustration-free path.
   

2. Use emotional affordances strategically The second step is to use emotional affordances strategically, not randomly or excessively. Using these resources correctly will reinforce the identity of your brand, convey your message, and make users understand what to expect. Emotional affordances should be used to support user tasks and should be balanced to avoid confusion or distractions.
   

3. When in doubt, simplify To minimize cognitive load as much as possible, especially when your users need to perform complex or critical tasks, the simpler, the better. Clear interface, with simple features to avoid visual confusion. Eliminate redundant links, irrelevant images, and meaningless typographic flourishes that slow down users. The simplicity of the interface can be decisive in making it easier for your users to process information and make decisions. This does not mean immense white screens or the absence of features or information, but strategic thinking that uses only what is necessary, pleasant, and comfortable. Examples: Grouping and hierarchy to organize content; Icons, symbols, and metaphors to convey meaning and functionality; Feedback, tips, and instructions to guide users and avoid errors.

1. Save your creativity for what is necessary Take advantage of design patterns and user repertoire to create solutions that make sense, based on existing mental models. There is no need to reinvent the wheel, basically for two reasons: it works and will be practically impossible to surpass it. We already have mental models of how things work, based on repertoire acquired in previous experiences. When we use patterns that are already common sense, the user finds familiarity with features and layouts, reducing the amount of learning they need to use your site.
   

2. Reduction and clarity in tasks Identify tasks that can be helped, whether by defaults, images or relevant information. Whenever there is a decision to be made by the user, make sure they have the resources they need without needing multiple clicks or excessive scrolling. The more intuitive and clear this decision is, the lower the cognitive load imposed and the more confident the user will be in making it.
   

3. Test, iterate, test, iterate No, there is no magic formula or ready answer. Users behave differently, have various backgrounds, and expectations related to specific products. It will be necessary to measure and evaluate the usability, performance, and cognitive impact of your interface. Here, depending on what you have available and the goals of your project, you can use: Questionnaires, scales, and interviews with users; Analyses, metrics, and conversions to track engagement, retention, and loyalty; Tools and resources such as eye tracking, heatmaps, and click maps to analyze attention and understand behavior in the face of the stimuli that the interface offers.

1. Inspirations Use, test, evaluate, and seek to understand successful interfaces, those that "everyone likes" for some reason. Any design is based on observation and inspiration from things that already exist; after all, this is the only way we can improve them. Interact with websites, apps, games, and other products that offer best practices and meet expectations by delivering efficient and satisfying experiences. Learning from the mistakes of others is also a way to avoid making them, so we must also keep a close eye on the obstacles in the way.

In conclusion, understanding the basics of cognitive load is an indispensable aspect of crafting user-centric design. As designers, our ability to comprehend and mitigate cognitive load shapes the very essence of user experiences. By embracing simplicity, strategic emotional affordances, and leveraging existing user mental models, we can forge interfaces that resonate seamlessly with our audience. Testing, iteration, and drawing inspiration from successful designs become our guiding principles in this pursuit. The journey to reduce cognitive load is not just about aesthetically refining interfaces; it's a commitment to facilitating user interactions, fostering clarity and meeting business goals.

References

De Jong T (2010) Cognitive Load Theory, educational research, and instructional design: Some food for thought. Instructional Science 38(2): 105–134.

Sweller, J. (2010). Element interactivity and intrinsic, extraneous, and germane cognitive load. Educational psychology review, 22, 123–138. https://doi.org/10.1007/s10648-010-9128-5

Sweller J (1998) Cognitive load during problem solving: Effects on learning. Cognitive Science (12): 257–285.

Van Merriënboer J, Kirschner P and Kester L (2003) Taking the load off a learner’s mind: Instructional design for complex learning. Educational Psychologist 38(1): 5–13.