Our brains can only process a certain amount of information at a time(information overload), but the technical term is called cognitive load. Cognitive load is the amount of mental energy needed to process something,e.g. your website. By minimising cognitive load (avoiding overload), you can keep users’ attention, allowing them to browse your site longer and hopefully make a purchase before overwhelm kicks in and they abandon ship.
Cognitive Load
In 1988, cognitive load theory was first outlined by John Sweller, an educational psychologist at the University of NSW in Australia.
Sweller believed that the way in which something is taught can influence cognitive load in learners. So as a result of higher cognitive load, a stimulus is more difficult to pay attention to, rehearse and remember, making learning less effective (Sweller, 1988).
He broke cognitive load down into three categories: intrinsic, extraneous, and germane.
Intrinsic
The inherent difficulty of the concept, for example, building a supercar is harder than building a desk. So the nature of what you’re trying to do will always be more difficult than a simple task. But there are ways to reduce cognitive load by breaking difficult complex tasks into simple smaller steps e.g. IKEA does this with their flat-pack instructions.
Extraneous
This type of cognitive load is increased by ineffective teaching methods, such as introducing conflicting instructions e.g. look at a diagram and go to another page to view legend(key) distracting the learner, when you need them to stay focused on their mission.
“When the load exceeds our mind’s ability to process and store it, we’re unable to retain the information or to draw connections with other memories. We can’t translate the new material into conceptual knowledge. Our ability to learn suffers, and our understanding remains weak.” – Nicholas Carr, Author
So the visual presentation of concepts can aid comprehension e.g. the use of a diagram to show the difference between price plans can be grasped in a glance rather than time-consuming comparing one to the other on different sections of the page.
Germane
This third cognitive load represents the construction of patterns, models and associations. It’s desirable because it assists in learning new skills and other information. A schema is a mental framework, which is developed over time following interaction with and experience of our environment. So a schema tells us what to expect in the future when we encounter it again, thus saving extra brain processing power.
How distracting are banner ads
Are advertisements considered clutter on a website and do they negatively affect the perception of the website in the process. CXL conducted a study to try and answer those questions. They tested the effect of 1, 2 or 3 ads on the Colonial Candle website.
Users were given 5 seconds to look at the site and then answer “what is this website selling? For each version 1, 2 or 3 ads displayed on-page. Showing perception of what the site sold dipped after 1 ad but the results did show that ads on a website are clutter and interfere with a first-time visitors’ first understanding of the site’s purpose.
But there is a caveat to the results from this study as you can the 2nd Mercedes ad was double the size to the first ad and more eye-catching. So they indicated they would replicate the study using lots of different types of ads in different places.
Visual Cue Case Study: Lead Generation Form
With strategically placed visual cues you can help direct users attention to key areas of your website. But it can get tricky because there are so many visual cues to choose from you could end up with too many making the site look cluttered its a thin line to keep a site looking visually appealing while subtly directing the eye to key areas with the call to actions(CTAs) e.g. Buy Now, Sign-up.
So CXL undertook another study to see which type of visual cue worked the best to direct a users eye towards the “contact us” form. The visual cues tested included: a person looking at the user, a person looking at text, arrow, triangular, line, prominent box and finally the control.
These were the results:
You can see the arrow was the most successful while the human-looking away was the worst. There are many other cues that they could have used but the biggest insight was the eye-tracking map to give an insight into where exactly they are looking while on-page.
Eye Gaze patterns
As per above the worse performing cue was the person looking away from the form directly at the user. We are hardwired to follow the gaze of a person, this goes back to the fight or flight response if someone is looking at something that could be a threat we also need to look to see if it is, in fact, a threat.
So visual cues matter if you want the user to take the desired action. So you can use eye gaze patterns to identify user tasks. So using a heat map like the ones above you can see where people focus their attention on-site and if it’s not where you would like you can introduce cues move key aspects into the red zone(most focussed on area)
Summary
That’s a wrap for this week and the key take away I’ve gleaned is that if we have a lot of information we want to get across on our website either break it into sections, use a visual graphic like an infographic or GIF or use heat maps to find out where your users are looking and using visual cues to direct them.
Remember you want to to make it as easy as possible to browse your website minimising cognitive load (and avoiding overload) inthe process, keeping them on-site longer and hopefully purchase. CXL is clearly the conversion experts and industry leaders in the field. Learning all of this has allowed me to take a step back from working in my business to working on my business making sure it is presented inthe most customer-friendly way.
Photo by Luis Villasmil on Unsplash
