Check out a free preview of the full Web UX Design for High Converting Websites course

The "Reducing Cognitive Load" Lesson is part of the full, Web UX Design for High Converting Websites course featured in this preview video. Here's what you'd learn in this lesson:

Paul shares examples on how cognitive load can affect a user experience. Confusing navigation or inconsistent interactions will cause users to make mistakes and leave them with a poor overall feeling with the website. Removing unnecessary items and designing for maximum visibility reduces cognitive load and leads to better outcomes.

Preview
Close

Transcript from the "Reducing Cognitive Load" Lesson

[00:00:00]
>> The second thing, the second psychological pillar to really creating high-converting websites is defeating cognitive load. And I would go as far as saying this is probably the best thing you can do, right? And this is where design becomes so, so important. Now, if you haven't come across cognitive load before, it's basically because of the way system two works, our conscious brain.

[00:00:30]
Because our conscious brain is a finite resource, if you're doing too many things at the same time, your cognitive load goes up and you get overwhelmed and can't cope, right? And that causes some really interesting scenarios. So first of all, let's talk about what causes high cognitive load.

[00:00:52]
Have you ever had those mornings where you wake up and you're just in a bad mood, right? Doesn't matter, maybe you had a bad dream or something like that. And notice what happens on those days, everything goes wrong, all right? If you wake up in a bad mood, the day just gets worse, okay?

[00:01:07]
It's like everybody annoys you. Everything's more difficult than normal. And that's because your bad mood increases your cognitive load, makes it higher. So that's one way that cognitive load can be a problem. So if you're using dark patterns on your site and irritating people, they're gonna be in a bad mood, which means they're gonna find the website harder to use, all right?

[00:01:32]
The second thing is inconsistencies. So for example, if the navigation moves around or the design is inconsistent through the website, it confuses people, their cognitive load goes up. And as you'll see in a minute, that causes bad consequences. Then there's just a confusing display with too much going on, too much trying to grab your attention.

[00:01:58]
That increases cognitive load as well. And the final one is we're poorly primed. In other words, when we hit a website or a webpage, it doesn't perform as we expected it to perform. So a really classic example of that is search, right? If you go to a website, where do you look to search?

[00:02:19]
The chances are your eye immediately goes to the right-hand corner, doesn't it, right? That's often where a search box is. And you're looking, your eye is looking for an input field, probably with a button beside it. And then everything that you've learned previously tells you to type into that input field your search term and press search, right?

[00:02:39]
That's called procedure knowledge, where we learn that a certain series of steps leads to a result. But if your website is different for whatever reason, then you're gonna increase people's cognitive load. And I could give you a real-world example of this on my own website. This was quite a while ago.

[00:02:58]
I've learnt my lesson here. But I designed a website wherein the top right-hand corner was a call to action for people to sign up to my newsletter. And it had a box for email address and a signup button next to it. And it was so ingrained in people to look there for search that I would regularly get emails from people saying your search isn't working.

[00:03:20]
Cuz they typed in a search term, hit submit, and, of course, it wasn't an email address, so it invalidated it. It wouldn't come up cuz it was a newsletter signup. But people were so confused that I overwhelmed them. Their cognitive load went up so high that they made mistakes.

[00:03:38]
And a high cognitive load is devastating to your conversion on your website, absolutely devastating. For a start, your website is gonna feel difficult. It's gonna feel like hard work, right? But that's fairly obvious. But then you start to get some really bizarre behavior that comes out of high cognitive load.

[00:04:01]
So we end up feeling like something's unfair, right? So you might have a really good deal on your website, a really good offering, right, for a fair reasonable price. But if your website is hard to use and people's cognitive load is high, that deal won't look as good to them, right?

[00:04:22]
Just a weird fluke of human psychology. Also, they're more likely to think you're lying on the website. They're not gonna trust your testimonials as much. They're not gonna trust your reviews as much, just because your website's hard to use. And they're just gonna feel bad about the whole experience.

[00:04:41]
So cognitive load is so, so important. But I recognize it's quite a difficult concept to wrap your head around. So what I'm gonna do is I'm gonna play a little video, right?. The instructions are gonna be written on the screen, okay, and they come up. And I want you to try and follow the instructions, and we'll come back afterwards and we'll see what you say, all right?

[00:05:07]
Are you ready? Okay, you need to pay attention to this. Yeah. How many passes did the team in white make? Did you get it right? Did you get 13? But did you see the moonwalking bear? You see it? Now that, if you did the exercise and if you didn't see the moonwalking bear, that was because your cognitive load was overwhelmed.

[00:06:10]
Now, some people will see the moonwalking bear. It might not work with you. You might have spotted it, and that could happen for a number of reasons. One reason is you might just be very relaxed anyway, right? That there were outside factors going on where you were in a really good environment, and so you saw the moonwalking bear.

[00:06:27]
Others of you who didn't see it might have been in a really busy, stressful work environment or not giving this presentation your full attention or whatever else, so you missed it. But the point is because you were concentrating on counting, your cognitive load shot up and you missed the moonwalking bear.

[00:06:48]
So that is a great example of where cognitive load can be enormously damaging. Because if you can miss a moonwalking bear, it means you can miss a call to action, a critical piece of content, or anything else on your website. So we need to reduce people's cognitive load.

[00:07:08]
So how do we do that? Well, the most simple way is to simplify your user interface, right, to have less balls being passed and less players on the field so the moonwalking bear stands out more. And we're gonna talk about that more later when we get into design and how design works and how design can be used to reduce people's cognitive load.

[00:07:32]
There's some very simple techniques that you can use around that. Other things you could do is design for maximum visibility so that the user's eye is drawn to the moonwalking bear, right? If that moonwalking bear was wearing lime green, for example, would have stood out a lot more.

[00:07:51]
If the moonwalking bear had been a lot taller than the other players, he would have stood out a lot more and you would have been more likely to see him. So we're gonna get into that as well as we talk about design later on. But we can also do it through techniques like chunking.

[00:08:07]
I don't know whether you're aware of the idea of chunking, but basically, if you've got a lot of options, if you've got a lot of players, for example, on a basketball court. Then you can group them together, and so your moonwalking bear would have stood out more because he would be in a group of his own.

[00:08:28]
That's a bit of a overstretched analogy. So let me give you an easier one, right? Your credit card, if you look at your credit card, it's got 16-digit number, right? There's no way our system two brain or system one for that matter is capable of holding 16 digits in your head.

[00:08:46]
You just can't do it. It's not possible. So what the credit cards do, they split it into four groups of four cuz it makes it easier for us to remember and read back that number. And we can use exactly the same techniques with things like the navigation on a website, okay?

[00:09:05]
Instead of having eight options, right, have two groups of four options, makes it a lot easier for people to process that information, right, and keeps their cognitive load low. Another example would be email, sorry, e-commerce categories, okay? If we have lots of e-commerce categories, then group them together to make them easier for people to process.

[00:09:29]
So again, we can get into all of this kind of thing more.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now