14 ways to reduce cognitive load to make your users happier
Every time I use my business banking website, I need to work out how to find the payment section (I know I should swap to a challenger bank). Searching for it, increases the mental effort I need to put in order to make a simple payment. Simply put, cognitive load is the mental energy we need to put in order to use a website, app or physical product. It’s always a good idea to avoid overloading your user’s brain and create intuitive user experiences for them.
Below are a few pointers that will help you:
Familiarity. We have mental models (expectations) about how we believe things work. We have learned these from past experiences.
Example: Magnifying glass means search. If a common concept is not kept constant in regards to its function or location then we need to use more effort trying to figure these out, which can affect the learnability of our product.
Understanding your users lets you choose how much cognitive load you can allow for. Tech-savvy students would probably need less guidance on how to complete a task on a website, compared to an older person with much less familiarity with technology.
Example: Professional products (i.e. Pro Cameras) can allow for more cognitive load because they are usually designed for long term memory as their advanced features need practice to learn and are used more frequently.
Reduce the amount of information users need to remember.
Example: Think of the visited links colour in google. If this wasn't the case then you would need to spend time figuring out which links you have clicked on and which you haven’t.
Make instructions short and simple, if people need to remember more than the capacity of what short term memory allows, it’ll be frustrating. Better even, optimise the experience to be instruction-free (not always possible).
Take away: Instructions should be displayed alongside the steps, rather than all at the beginning.
Progressive disclosure can be helpful in managing complexity and a plethora of features.
Example: The advanced search feature is usually hidden on many sites and applications unless the user actively chooses to disclose it.
Consider using Modes when designing an interface.
Example: In design software, the cursor often changes based on the tool you are actively on. This helps users know whether they are about to draw a rectangle or move an image. We shouldn't assume that users would automatically know or remember which mode they are on.
If the system you are designing has a complex information architecture, it’s good practice to give feedback on where the user is and the path they took to get there.
Example: breadcrumbs on websites, home > messages > edit message. However, this isn’t common practice on mobile UI.
Consider Gestalts Law of Proximity - items nearby tend to look like a group.
Example: When designing forms and password fields, any error message should be displayed next to the respected field, and not at the bottom or top of a long form.
Put effort in a consistent design system.
Example: if the send button is blue, then all send buttons throughout the system should be blue as this eases the cognitive burden.
We can better recall things if they trigger an emotion.
Example: In product design, emotions can be triggered in a number of ways, including illustrations, colours, sounds, gratification for executing tasks etc.
Having too many options for comparison requires a lot of mental effort, consider when you are online shopping for a mobile plan or internet provider.
Example: A good way to design for comparisons is to have tables that clearly display the options and shows the differences, pros and cons on the same page. See how apple compares products.
Keep the layout simple and economise on styles and typography. A cluttered interface with lots of different colours, font weights, animations and text makes it confusing and hard to focus on.
Example: Follow good typographic principles to assist readability. This is where good graphic design helps.
Make it easy to scan. Remember we read from left to right (or right to left in some languages like Arabic) and research shows people scan websites in an F shape (or the opposite in Arabic, Farsi..), so make sure important information is placed with that in mind.
Example: Use distinctive headings and layout hierarchy.
Ensure the users won’t lose their track when zooming in or scaling fonts.
Example: make sure your website zooms into where the users cursor/eyes are.
Having a good understanding of the users desired outcome from your product and what their capabilities are will help you make better design decisions.