Why overwhelming your users leads to bad UX

Our brains can only handle so much. It’s like trying to rub your stomach, pat your head and jump on one foot all at once — something’s got to give.

Feeding too much information to your brain leads to overwhelm. If your website or app is hard to use or presents people with too much information, you might be overwhelming your users and driving them away. All in all, the user experience (UX) will be poor, users will be frustrated and performance will be low.

The solution for this overwhelm? Simplify your design and make it easier for people to find what they’re looking for and complete actions.

Keep reading to discover exactly how you can reduce overwhelm for your users, without losing site functionality.

The science behind design overwhelm

Think of your brain as a computer. I mean, it literally is a computer.

Now, picture opening 97 tabs while simultaneously running 4 heavy apps, responding to Slack messages and jumping on video calls. You're pushing your brain’s processing power to its absolute limit. All the information being fed into your computer (ahem, your brain) exceeds its capacity to handle that information.

Your brain will be sluggish. It might take longer to process information, struggle to perform certain tasks, or make mistakes — or it might get so overwhelmed, it crashes and abandons the task altogether.

The above scenario causes something known as “cognitive overload”.

Cognitive load refers to the amount of information the working memory can store at one time. The working memory has a limited capacity so it is important that we don’t overload it with too many activities or too much information. Otherwise you’ll end up experiencing cognitive overload.

The UX field has taken the original definition of cognitive load and applied it to user interfaces and design. If the user interface (UI) requires too much mental capacity to operate, it will impact cognitive load. Knowing your users’ cognitive limits can help you build functional sites that achieve their objectives without overwhelming your users.

How cognitive load impacts UI design

When a new user visits your website or app, the learning experience increases their cognitive load. Make them learn too much in one go and they’ll wind up being overloaded. They’ll struggle to use your software and you’ll struggle to keep them as a user.

Visitors will, for example, be overwhelmed (and frustrated) if they can’t find the page they’re looking for or if the page is overcrowded with conflicting information and in-your-face elements. As soon as that overwhelm kicks in, you run the risk of people leaving without taking action, taking their custom elsewhere and having a bad taste in their mouth when it comes to your brand — all of which are the exact reaction you don’t want them to have.

Cognitive psychologists recognise three types of cognitive load; intrinsic load, germane load, and extraneous load.

Improve the UX of your site or app by understanding how these three types of cognitive load appear in UI design — and how to effectively combat them.

Subject matter difficulty (Intrinsic load)

Intrinsic load is centred on the inherent difficulty of the subject matter and is typically seen as a fixed asset that cannot be changed.

While you probably can’t change the subject difficulty, you can make it easier to consume. Present information sequentially and guide users through each of the steps. Alternatively, break the content down into smaller, snackable chunks. Both of these actions can ease the intrinsic load caused by complex subjects.

Information processing (Germane load)

Germane load refers to mental resources devoted to integrating and making sense of new information — similar to your computer’s memory usage when installing new software. The usability of your product can impact germane load, as can an overly complex, decorative UI. Creating a focused design that is easy to use could reduce the germane load needed to understand the site.

Information presentation (Extraneous load)

Extraneous load is the portion of the memory that is taken up by the manner in which information is presented. If energy is spent processing the design of something, that energy is being taken away from understanding the information.

For instance, having pop-ups appear on screen, using inconsistent font styles or flashing on-screen elements could all add to the amount of extraneous load someone experiences when navigating your site. Ease extraneous load by minimising distractions and unnecessary elements in UI design.

Out of these three types of cognitive load, UX designers have far more control over extraneous load which is, essentially, cognitive load caused by bad design.

How to minimise overwhelm and maximise UX

Make it as easy as possible for your users to complete their intended actions. If it’s too hard for users to find what they’re looking for, they’re going to abandon ship. Give them the shortest, most logical path forward — while considering any user intricacies along the user journey.

Embrace blank spaces

Draw users’ attention to the most valuable parts of your page by embracing blank spaces. By increasing white space around elements, you make it easier for users to understand your interface. Straight away, they’ll see the information they’re looking for, without having to hunt for it. In turn, embracing blank spaces will reduce cognitive load by minimising confusion.

Bad example from Adobe
(too much text which is close together, hard to see button, image and text closer together, etc)

Good example from GatherContent
(less text, increased line spacing, space between text and background image, button stands out)

Draw from existing mental models

Everyone has mental models. What I mean by this is everyone has expectations for how things work. These mental models shape the way we think, behave and interact with things.

If your site or app design goes against people’s existing mental models, it significantly increases the amount of cognitive load needed to use it.

For example, most people expect the main navigation bar to appear at the top of the site. Moving this menu bar to the bottom of the screen would be both frustrating and confusing as it conflicts with people’s expectations.

Minimise unnecessary cognitive load by building a design that aligns with people’s mental models.

Reduce visual noise

Overly complex websites are confusing for users. An overstimulation site or app filled with graphics, bright colours, flashing animations and an influx of elements is overwhelming.

The power of minimalist designs isn’t brand new. Even back in a 2009 research report exploring the relationship between cognitive load and the visual complexity of web pages, researchers noted:

“Visual complexity seems to be an implicit key into the perceived cognitive load of the page and the interaction that the users think will be required to use the resource."

Harper et al, 2009

Yet those findings still ring true today. Less is more when creating effective UI design so reduce visual noise to alleviate cognitive load.

Bad example from Yale school of Art
(bright clashing colours, different font sizes, animated backgrounds, etc)

Good example from University of the Arts London
(monochrome colour palette, minimal text, easy to navigate using quick links, etc)

Offload tasks and make things easy

Every task a user has to complete is another strain on their cognitive load. Offload tasks to make it easier for your users to take action. This could be as simple as replacing a wall of text with easier-to-remember bullet points or automatically entering pre-saved information.

While you can’t do everything for your users, you might be surprised at just how much you can offload. Every task offloaded leaves your users with more cognitive load for the decisions and actions that really matter.

Understand how people scan pages

Source: Heatmap from Nielsen Norman Group’s F-Shaped Pattern studyFamiliarise yourself with popular page scanning patterns to understand how to reduce cognitive load. Most people scan pages using an “F-pattern” in which they’ll look horizontally at the headline at the top, move down to scan the next few points, before reading the next subheading and continuing down — creating, you guessed it, an “F” shaped heat map.

Understand how people scan pages and make sure you’re presenting the most important information in the areas where people’s eyes naturally fall. Following scanning patterns creates an aesthetically pleasing yet functional design that minimises cognitive load.

Eliminate unnecessary steps

Stop asking people to jump through hoops to perform simple tasks. Eliminate unnecessary steps to make the user flow as simple as possible.

Reducing the steps in your onboarding sequence, or making it easier for existing users to make repeat purchases by automatically adding their card details, will offer users the quickest path to their desired goal.

Analyse your user flows and cut out anything that isn’t necessary to the journey.

Final thoughts — simplify your design to stop overwhelming users

Good UX design eliminates the need for users to analyse every step they take.

People can only process so much. Putting too much strain on users’ cognitive load can impact UX and, in turn, performance. Alleviate cognitive load for your users by:

• Embracing blank spaces

• Reducing visual noise

• Drawing from existing mental models

• Offloading tasks and making things easier

• Eliminating unnecessary steps

• Understanding how people scan things

Get in touch to see how we can help you create minimal, functional, performative designs that help users get from A to B as easily as possible.