To create a seamless buying flow, you need to optimize your eCommerce store to make online purchase processes simpler for the customer and reduce their excessive mental load.Â
John Sweller’s Cognitive Load Theory states that one should avoid overloading the working memory i.e. the limited space where information is stored before it’s moved to long-term memory. This can be done by removing all additional information or activities that don’t directly contribute to the subject.Â
Here’s a great example of the Cognitive Load Theory in action. Below are 2 diagrams of the process of information storage and memory creation. Which is easier to understand?
Diagram 1 Diagram 2 Diagram 2 demands a much higher cognitive effort from the working memory than the Diagram 1. It takes longer to process and is more cumbersome to understand even though both pieces of information are the same.
How we design information plays a huge role in impacting a customer’s willingness to engage with it.Â
The lower the cognitive load, the higher the willingness. Cognitive load is inversely correlated to the conversion rate.Â
In this post, we look at 18 easy and simple user experience design hacks that will help reduce the cognitive effort for your customers and boost conversions for your store:Â
1. Reduce short-term memory effort with product comparisons Miller’s law states that our short-term memory can handle approximately 5 to 9 objects at a time. Information more than this runs the risk of cognitive overload.Â
Making it easy for online shoppers to compare products is a surefire way of reducing the mental load on the working memory. Instead of having to memorize the features of each product, they can now see them side by side and compare the features.Â
Here’s an excellent example of a comparison schema by LL Bean . All the features are put side by side so the customer gets a single-window comparison chart that can help them choose faster.
2. Automate discounts and coupon codes to easy-apply on checkout When it comes to coupon codes and applying discounts—the easier they are to use, the better. Unnecessary memorization of coupon codes can cause serious disruption at the crucial checkout stage. Customers have to go back and forth in case they make mistakes or forget. This is a bigger hassle if they are first-time customers or don’t shop online regularly.Â
Auto-application of coupon codes is so intuitive that customers automatically assume the site does so even if it doesn’t. The shopping cart of Famous Footwear had a regular discount banner that customers kept clicking on, thinking it would apply the discount. It didn’t. Â
When it comes to displaying discounts in billing, research has shown that customers face a higher cognitive load when the total charge is listed and later subtracted in a separate line. The cognitive effort is much less if the amount is labeled as free.Â
Here’s a good example of coupon discount ease from JCPenney . They implemented a coupon overlay that would open during checkout. Customers could choose the coupon they wanted to use, and it would be automatically applied to their cart. This is a great way to ensure customers don’t leave the checkout process mid-way.Â
3. Reduce the number of steps to complete an action Every step you ask the customer to take adds to their cognitive load. Every instruction presented to take the next step also adds to the cognitive load. Too many actions or instructions and the working memory just gives up.Â
Cognitive overload kicks in and the customer abandons the entire process altogether.Â
A good workaround to this situation is to only present instructions for the one task the customer is involved in at that moment. Unnecessary information or any other instructions must be removed.Â
Here’s a great example of reducing the number of steps in completing a task. When you go to the ToysRus store, the default delivery option is selected as Ship-to-home. The user doesn’t even have to click unless they want to change the delivery method.Â
4. Recognize > Remember; hence use filters Research in cognitive load theory has shown that humans are better at recognizing things than they are at remembering them.Â
With recognition, the customer also makes fewer mistakes, and there is a smaller probability of error.Â
For customers, filtering is a crucial process in the purchase journey. There’s a hack most stores don’t use when applying filters. If they are returning customers, stores can just display the filters the customers have used before. This leads to less cognitive load than the customer trying to remember their previous settings.Â
Showing previously used filters and giving customers the option to auto-apply them can lead to less cognitive effort.Â
A good example here is Macy’s . Their filtering process takes each filter as a separate browser event. This means customers who use the back button to go back to their previous filter will be able to do so.Â
This is an extraordinary feature that not a lot of stores have. The back button does not affect the filter process for most store sites. This often leads to customer frustration. But Macy’s uses a URL rewrite specifically for each filter stage to reduce cognitive load. Isn’t that amazing?
5. Highlight clickable links to avoid confusion Chances are everyone has probably clicked on something that wasn’t a link.Â
This is a completely pointless source of cognitive load and confusion.Â
Stylistically speaking, stores should identify the clickable links and specify the ones the user has already visited through separate colors.Â
This also demonstrates to the user that you’ve gone through the trouble of creating a personalized user history for them. It helps them recognize where they’ve been and reduces significant cognitive effort.Â
The best example of this is Google which displays search history and links previously visited in blue color.
6. Stick to familiar visual cues to avoid ambiguity A common culprit in causing cognitive overload is confusing interfaces. Visitors should have no trouble guessing what the function of each icon is.Â
They should not waste time or cognitive effort to figure out what to click to complete their tasks.Â
A good way to ensure this is to use prototypes, visual cues, and layouts that users are accustomed to. Company logo in the upper right corner, highlighting the main menu elements on the top center, etc. are the placements the users expect to find on a website.
The same goes for website copy. Buttons with familiar labels like “Contact” and “Submit” are more easily recognizable than “Address” and “Go”. Â
Home Depot uses familiar buttons, icons, and menu placements to make the customer comfortable, but they use their brand’s orange color as a differentiator.Â
7. Reduce the number of options to fight analysis paralysis Buyers share a paradoxical relationship with choice. While they desire more options, evidence shows that presenting many options is actually detrimental to making purchase decisions.Â
There are two reasons that Barry Schwartz presents in his book The Paradox Of Choice: Why More is Less as to why having more options significantly hampers consumer decision making:Â
Having to choose between many options can lead to analysis paralysis. Too many choices can distract the customer from making a purchase. The more choices, the higher risk of buyer’s remorse. Customers are more dissatisfied with their purchase because all they can think about are the other options they didn’t purchase and if those were better. UX designers also noted that more options lead to longer decision times. This is supported by the Cognitive Load Theory.Â
A good online store knows how to optimize choice. The decision for which options to present to customers lies in the difference between giving the customers what they want and what they think they want.Â
If the number of options cannot be reduced, they must be presented well. A good way to do so is to group multiple options in umbrella categories so that the customer doesn’t see all of them at once.Â
Here’s a good example of how to sort a menu system. This is from Estee Lauder . The main categories are at the top and they expand to further show sub-options.Â
8. Balance various content types to reduce monotony UI / UX designers also need to bear in mind that the content on the store site needs to be diverse and balanced.Â
There needs to be a balance between elements such as images, videos, text, infographics, icons, etc., to create harmony and make it easier for the customer to comprehend.Â
Too much content of a single type creates more mental load and requires more cognitive effort to process.Â
A great way of creating this balance is using icons which are small visual cues that are universally known to represent certain functions. Icons can be used instead of using text to give instructions or present options. They take up less space and are quicker to process.Â
Take this example of using various icons to showcase the different social media channels. Instead of using labeled buttons, designers can just use the icons.
9. Avoid decision delays with quicker load times One of the most overlooked limitations of the working memory is the duration for which it can hold information. It can only store data for 15-30 seconds.Â
We see that when people want to remember information, say a phone number, they repeat it until they can write it down. This is called maintenance rehearsal and requires a great deal of cognitive load.Â
This means that if your store page takes too long to load, customers aren’t going to wait for all the information to appear. If all the necessary information to make a purchase decision isn’t presented to them within those crucial 15 to 30 seconds, the working memory will fail to retain it.Â
This is why the site loading speed is so important. Research has shown that 40% of people abandon a site if it takes more than 3 seconds to load.Â
In fact, Ericsson’s research finds out that loading delays cause as much stress to customers as watching a horror movie.Â
The Walgreens site loads in 0.522 seconds. Their bounce rate is one of the lowest in the entire eCommerce space.Â
10. Use images, but in a balanced way Website designers love using images, especially those that provoke through style or contrast. However, using too many images or visual cues can backfire.Â
Most of the customers who shop online are in a hurry—they are looking for clarity and ease. If there are too many images or not organized well, they can end up competing for attention and causing cognitive overload.Â
Each dominating image demands a piece of the customer’s attention. Too many competing demands and there is no attention left to give. The working memory has simply collapsed under the mental load required to process them.Â
It’s much better to use Images in a visual hierarchy and a balanced schematic. They work much better to reduce cognitive load.Â
Here’s a good example of how to balance images with text. This is from Groupon . Notice how they could have used images for those two headlines, but those solid blocks of color help make the images pop.
11. Take user intent into account Most visitors land up at a store with a specific need in mind. This need is referred to as user intent.Â
Understanding and anticipating what this need is can help an eCommerce store create a clear path to solving it.Â
If the user can satisfy their need quickly and with less cognitive effort, they are more likely to return and convert to paying customers.
Usually, there are 3 types of user intent:Â
Visitors that are looking for information about the store and the products/ services offered. Visitors that are looking for educational content. They are looking more for industry-specific response than merely information about products. Visitors that are ready to make a transaction. They know the product they are looking for and are confident enough to buy it from you. The best way to design a store site is to assign a specific intent to each page. This helps minimize cognitive load as it is directed towards solving a particular need.Â
This single-minded focus helps customers reach their goals quicker and with less mental load as there is only one clear path for the customer to follow. There is no problem of choice or competing distractions.Â
Here’s a great example of designing specific pages for singular customer intent. S’well has only 4 options on its navigation bar. The first three are product categories for customers looking to transact. As soon as the customers land on the site, they can make a quick choice based on their intent.Â
12. Include a progress bar to help users complete an action While customers wait for your storefront to load, it’s essential not to leave them in limbo. Reducing uncertainty about how much time the loading will take can help reduce cognitive load.Â
It also makes the waiting easier if customers have something to focus on rather than a blank screen. A progress bar with a catchy animation can help catch the customer’s attention and prevent them from leaving your page.Â
Here’s a great example from Figma . Their loading screen shows a progress bar, a tiny animation, and a page skeleton. This helps create the perception that the site is loading really quickly.Â
13. Highlight checkout errors with relevant messages It’s no secret that error messages can be frustrating for visitors. But what’s worse is that visitors have no idea about where or what the error is most of the time. This is because most error messages are vague, ambiguous, and sometimes wrongly placed.Â
These messages trigger frustration, anxiety, and cognitive overload as visitors now have to look for their mistakes and then make educated guesses on how to fix them.Â
An error message that says “Invalid email” is a lot more frustrating than a message stating, “Please enter an email including @”. This tells the visitor what is missing.Â
A good error message provides the answer to these three questions:Â
What the problem is Why it happened How to solve for it Here’s a great example from a Shopify store’s checkout process. The message is right below the field—it specifies exactly what’s wrong. This works much better than placing error messages at the top or the bottom of the forms.Â
14. Use the chunking text effect Chunking text is a technique that can be used to bypass the limitations of short-term memory without causing cognitive overload. Here, the text is arranged by grouping related items into small, manageable sections or chunks.Â
Chunking similar text together helps improve readability. When text is broken up into short paragraphs, visitors don’t get overwhelmed by it. It’s also much harder to get lost while reading and is easier on the eyes.Â
Each chunk of text by itself needs to be organized well. If you need to explain features or advantages, it’s better to use a bulleted list rather than a paragraph.Â
Other characteristics of chunking text include:Â
Small sentences, short lines of text Short paragraphs with lots of white space Items that are related can be grouped together Distinct groups of long strings of letters such as passwords, phone numbers, credit card numbers are usually bunched in groups of 4 letters or more. Here’s a great example of chunking copy from Firebox . They start with the key features in bullet point format. Three other tabs cover reviews, product information, and key features.Â
15. Image carousels are a no-no; use alternatives A lot of websites use image carousels to prioritize content. But the truth is carousel content is mostly overlooked.Â
Repeated testing has shown that visitors prefer to scroll through the page rather than wait for the carousel image to change.Â
Users can also confuse the carousel with advertisement banners and subconsciously scroll right past them. But even if they do pause to look, carousels are notorious for triggering cognitive overload.Â
Image carousels work on an automatic rotation timer. This rarely matches the visitor’s reading speed. People who read slower might read only half before the image changes. The visitor then manually needs to click back or click to pause the sequence.Â
This manual control of the carousel requires an additional cognitive effort that few visitors are willing to invest. Chances are they will just ignore the carousel content altogether.
Here’s a good alternative to an image carousel from Best Buy . They have a hero image with the promotional text, a strong CTA button that stands out, and other smaller offers next to the main one.Â
16. Don’t make your customers work too hard to locate the CTA button When it comes to getting visitors to perform actions, fewer offerings tend to work better.Â
Instead of having multiple CTAs, a single section of the page should have a single value proposition, clear message, and a single corresponding CTA button.Â
Having a single message and button speeds up cognitive processing, helps drive clarity, and reduces cognitive load.Â
Multiple CTAs around each other will compete for attention and increase decision time. These factors will lead to cognitive overload, as visitors will have to choose one CTA from many before they can proceed.Â
When designing web pages, it is also important to surround the CTA button with lots of negative space. Faster cognitive processing is enabled by aesthetic appeal and ease of interaction. This helps the user’s eye to be drawn to the CTA button itself as there is nothing else in that area. Minimizing distractions around the CTA button and having fewer of those can drastically improve conversion rates.Â
Take this example from Madewell . They have a single CTA right in the bottom middle of their hero image. There is no other element near it that competes for attention. The button is also in a contrasting color that pops up compared to the rest of the text.Â
17. Maintain visual consistency Design flows and prototypes exist for a reason. Visitors today can look at a website and make an intuitive guess about its purpose without even going through it. This is because most ecommerce sites, SaaS sites, and blogs have a uniform look.Â
They are visually consistent with what visitors expect them to look like. The icons and navigation are structured in a familiar way. This predictability leads to reassurance and trust.
This familiarity leads to a lower cognitive load as the visitor already knows how to use the site and where to find what.Â
A departure from these prototypes is not advised as it becomes new territory for the visitor. Multiple unknown visual cues can lead to cognitive overload as the visitor feels their attention is being pulled in too many directions at the same time.Â
Here’s a great example of a clean, minimal layout by OTHR. There are few visuals set in a grid format where none seem to be competing for attention. They seem to be well balanced and are separated by negative space.Â
18. Enable autosuggest and autocomplete For visitors, one of the most frustrating experiences can be trying to remember. While personal data is easy enough to remember—names of products, items, restaurants, etc. can be taxing to recall.Â
This is why using autosuggest and autocomplete can be extremely helpful. They reduce cognitive load by changing the task from remembering to recall.Â
There’s also a direct correlation between the number of questions and cognitive overload. The more the questions, the higher the cognitive effort required. Autosuggest and autocomplete values can help reduce this burden.Â
Here’s a great example of these features from the Apple store. The search bar automatically gives you quick links and suggestions of what it thinks the visitor is searching for.Â
In many ways, the human brain is similar to a computer; higher processing requires more resources. But unlike a computer, human memory has extremely limited resources. Under too much stress, it simply gives up.Â
When the working memory has too much information, decision-making takes longer and exerts more strain.
This is why a higher cognitive load significantly reduces the chances of conversion. The goal for a successful eCommerce store in terms of design can be summed up in the words of Steve Krug, “Don’t make me think.” Designers need to simplify processes for users all the time.
Final Words To sum up, here are some ways UI/UX elements can reduce cognitive overload:
By reducing instructions and avoiding all forms of content clutter. Following structured visual templates and using standard navigation flows. Reducing options and streamlining choice. Optimizing links and CTA buttons to remove any confusion. Using default options, automating coupons, and as many processes as possible. Using easily recognizable icons and terms for labeling. Reducing load/ wait times and avoiding any surprises. Aiming for clarity and focus throughout pages and sections. Use the pointers to audit your eCommerce site right away. Their implementation will ensure a definite and sizable increase in your conversion rates.
When it comes to engaging customers on your store site, user experience design is paramount.
The best user experience is the one that the user doesn’t notice. It feels so natural that it doesn’t appear designed at all. To imagine such an experience is easy; to create one is extremely difficult—but to not have one is to lose potential customers.Â
Where most stores fail is that they overdo the copy and design elements. This has a counterproductive effect on their visitors. There is so much visual stimulus that it causes cognitive overload. This ends up reducing conversions instead of boosting them.Â
.svg)
.svg)
.svg)
.svg)
.svg)
