Leading the User's Attention

[00:00:00]
>> Okay, so in the third session that we're gonna do in this course, we're gonna look at the subject of design. And how to go about creating great design that encourages people to take action. Now the chances are that if you're watching this course, because of the nature of the courses that Frontend Masters create, you're probably more development focused than you are design.

[00:00:25]
Yet, almost always, developers end up having to do some design at some point. Sometimes they're doing the entire design. Sometimes they're just doing parts of it. And it can be a very frustrating experience producing a design. It's frustrating for designers, let alone for a developer having to do it.

[00:00:43]
And part of the problem from a development point of view is when it comes to code, code either works or it doesn't, right? All design is subjective, isn't it? Everybody's got an opinion on it. And you can end up caught in these endless loops of iteration, moving pixels around the page, changing colors just to keep stakeholders and clients happy.

[00:01:05]
But actually, it doesn't need to be that way. They're all fundamental rules that underpin a design process and enable you to say with confidence whether a design is going to work or not. And so that's what we're gonna explore in this section. We're gonna look at how design can play a pivotal role in encouraging people to convert and to take action on your website.

[00:01:28]
And how we can ensure that our design is appropriate for our audience that we're trying to reach. And hopefully in the process, avoid all those endless iterations. So with that, let's have a look at what we're gonna cover in this segment. We are gonna look at three fundamental parts of creating any compelling design.

[00:01:50]
One is the ability to lead people's attention around the page that they look at what we want them to look at when we want them to look at it. Because we want to tell a story, we wanna unpack what our offering is, and that means that we need people to look in particular places at particular times.

[00:02:08]
Second, we're gonna look at creating compelling calls to action, the actual physical action that we want people to take. Whether it be sign up for a newsletter, make purchase a product, whatever it is, how do we make sure that users, a, see them, and b, click on them?

[00:02:25]
And then the third is how do we ensure that our design, the aesthetics of a website keeps users engaged, right? How do we ensure that it resonates with them, creates the best reaction possible with them? And that is obviously where things can get very subjective, and we're gonna get into that as we come to it.

[00:02:49]
So let's start with the first of those three, which is leading the user's attention. And actually, it's not as difficult as you think. It's actually just a relatively straightforward process that anybody can do even if you're not particularly creative. Because I'm not claiming the designs that you're gonna produce following watching this are gonna be beautiful or gonna be wonderful.

[00:03:12]
But they will convert, they will encourage people to complete action. And the ability to lead someone's attention around the page is really just a matter of following a few simple rules. Rule number one is to simplify, okay? So before you do your final design, you need to identify all the content blocks you create.

[00:03:35]
And you might wanna create a bit of a wire frame, where you lay them all out on the page and kinda get everything roughly in place, right? Doesn't need to be pretty at this stage. Now once you've done that, you're now gonna wanna go back through that page.

[00:03:50]
And with each of the elements that you've added, you're gonna wanna simplify them. You're gonna wanna reduce the complexity of the page so people's cognitive load is lower, and they're not overwhelmed and their eyes are skipping all over the page. And the way you do that is for each element that you've added to the page, ask three questions, and ask these questions in order, right?

[00:04:14]
Question number one is can I remove this element, right? So that might be some social media icons or it might be your primary call to action or your logo or search box or navigation bar. Whatever the item is, could you remove it? If you removed it, would it undermine or reduce your conversion rate in any way?

[00:04:37]
If the answer to that is no, it wouldn't affect the conversion rate, then you need to remove it. Because items only have value if they're actually moving someone towards taking action on your website. If anything else is just noise, it's just clutter that is going to increase people's cognitive load, put them in a bad mood, reduce the chance of their conversion.

[00:05:02]
Put another way, we've all heard of the phrase finding a needle in a haystack, right? Every element you add to a page is another piece of hay, right? That makes it harder to find that needle, key call to action, that key piece of content. Effectively, users have limited attention and we need to spend it wisely.

[00:05:24]
But that said, you can't remove everything, right? Obviously, some content is very critical, and so you wouldn't wanna remove that from your site. Other content might not be critical for your primary audience, but might be critical for a secondary audience. So they can be things that you can't remove, but maybe you can hide it.

[00:05:48]
You can deemphasize it in some ways. So let's say, for example, on an e-commerce site, the information about account management and that kind of thing is not critical for somebody buying the item. But it's still very important for existing customers. So you don't wanna remove it entirely from the website, but you might wanna hide it.

[00:06:15]
And by that, I mean, move it deeper in the information architecture. Move it onto a subpage somewhere. Or alternatively, put it under a tab or a toggle or something like that. So it's not immediately in people's way and it's not cluttering up the visual interface. So by moving things either deeper in the information architecture, hiding them under a tab, or even putting them lower on the page in a footer or something like that.

[00:06:43]
You can help to deemphasize them and clear the way for other content. And then the third question you need to ask, if you can't remove it or you can't hide it. So typical examples of this would be something like compliance information that you say you're selling insurance or some financial service.

[00:07:03]
There's certain text that you have to have visible for compliance reasons. Well, then your third option is, can I shrink this? Can I visually deemphasize it, make it smaller font or a lighter color or whatever else to just visually deemphasize it so that people's attention stays in the right place?

[00:07:24]
And there is actually an exercise that I sometimes do with stakeholders called a user attention point exercise. And in this exercise, I get all of my stakeholders together, and together we brainstorm every conceivable item that might need to go onto a landing page or homepage. And then when we finish doing that, we can often end up with 50 or more different items that can potentially go on from individual navigation items to e-commerce categories, etc.

[00:07:51]
After we've done that, the next thing I say is I explain that users have got limited attention. That people normally make a decision about a website and whether to stay on it in approximately eight seconds. And they can only process so much information in those eight seconds. So I represent those eight seconds in terms of points, user attention points.

[00:08:16]
So for example, we could say they could process two or three items in a second. So then we end up with 21 points of user attention or something along those lines. And they have to spend those user attention points on the different elements. The elements they want people to pay more attention to, they have to add more points to.

[00:08:38]
So a call to action may want four or five or even more attention points associated with it. And it's a way of getting people to think through the amount of noise that they're introducing, the amount of distractions they're introducing onto the homepage. So simplify, simplify, simplify. Don't get seduced by adding aesthetic elements for the sake of it, right, pretty images and things like that.

[00:09:07]
If it doesn't add value, if it's not gonna move people towards that point of conversion, you don't want it. Less is more when it comes to design. So we simplify it as much as possible. Now we need to consider the page flow. And to be honest, almost all landing pages have a pretty consistent and similar layout to them.

[00:09:30]
And that is basically what I've been touching on and off through the whole of the content section. So we begin with our summary, which is our value proposition effectively. Then we go into our benefits, and then our features. But intermixed with that is calls to action and social proof.

[00:09:52]
So normally, wherever I have a call to action, I normally associate a social proof alongside it just to reassure people and to say, yes, you're doing the right thing. Look, these other people have been doing it, too. And I tend to include that pretty near the top, the call to action pretty near the top for returning users so that they don't have to scroll away down the page.

[00:10:12]
If it's a long page, I'll include a call to action in the middle as well. And then at the end of the page, I normally end with a call to action and associated social proof as well. And that way, you're taking people on a journey. So you're answering the key questions that come into their minds as they come in.

[00:10:27]
So the first question when they land on a site is what does this site do and what does it offer me, right? And that's what your value proposition does, right? So I'm on the right site is the first question. Does it offer the kind of thing I wanna do?

[00:10:42]
Value proposition, how does it help me? That's where your benefits come in, where you talk about benefits. And then it's how do they deliver on those benefits? And that's where your features come in. And then obviously, your social proof is just reassurance that goes alongside that. So the layout and the flow of your pages is gonna be pretty consistently the same for any kind of product page, landing page, homepage, that kind of thing.

[00:11:09]
Then you can go with this formula and be fairly confident you're gonna see a reasonable conversion rate from it. It's not some artistic kind of black box that just spews out websites. There is process here that you can follow through. The other thing that you need to consider as you create the flow of the page is the way that people read as well.

[00:11:34]
You need to be acutely aware that in Western countries, which use a Latin character set, we read from left to right and from top to bottom. And presuming that's you, that has quite a fundamental impact on how you design pages. So for example, we tend to read in what's called an F shape.

[00:11:55]
So we scan across a line, and then scan down the left-hand side a bit. And then scan across when something else grabs our attention, and then down a bit and scan across again. And it's a very particular way of reading, but what it means is that there are certain dead spots on the page which don't tend to perform very well.

[00:12:16]
So the right-hand side, for example, tends to not get a lot of attention to it. Now, there are other factors that influence this, but generally speaking, the right-hand side of a page won't get as much attention as the left. So you don't wanna put critical calls to action on the right-hand side of the page.

[00:12:33]
Very simple rule that you can remember and implement as you go about designing things. But the biggest thing, and this goes back to the question we had earlier about long form pages, is that you need to really make your pages as scannable as possible however long they are, right?

[00:12:54]
So if they use content blocks, that's quite a nice easy formula to use with a heading, a short description, a link and an image. That's by its nature content blocks are scannable. But if it's a longer form piece, then you're gonna need to kind of build that scannability in.

[00:13:13]
So obviously, I have a blog. My blog has obviously some quite long posts. But if you've noticed the way that I've got this here on the page, there's pull out quotes, there's headings. There's related links, there's highlighted copy, bullet points, imagery, lots of things that essentially enable someone to scan down the page.

[00:13:37]
Also look how I've included a lot of spacing around elements to allow them to breathe, and so that the eye isn't working too hard. The other thing is don't make your line lengths too long, because the longer the line length, the more eye strain. We've got move eyes more back and forth.

[00:13:57]
There's a sweet spot of about 40 to 70 characters on a line which seems to work quite well. So break up content. Don't have big, long paragraph after paragraph of text, cuz that people just won't read it. They won't look at it. So you have to support scannability in the way that you design.

[00:14:18]
So there are a lot of elements to consider here, but you don't need the creative or artistic gene for any of them. The kind of stuff that we're talking about here is just following a set of rules to make something simple and clean and straightforward. Then we got to start talking maybe about some of the more creative elements that you bring into, things like imagery and shapes.

[00:14:46]
You might wanna start introducing imagery alongside the kind of layout that you've got to represent different things. And generally speaking, imagery is a more static decision, but can be used to signal to an audience that this site is for them. It can be used to create the right emotional feel over it, which may be a little bit woolly, and we'll get onto in a minute.

[00:15:13]
But one other thing that imagery does is it draws the eye. It controls where people look. And you can actually use that factor to guide people's eyes around the page. We are kind of programmed to pay particular attention to visual feedback and visual imagery over things like text.

[00:15:33]
And so it can be used to draw attention. So this mock-up that I've produced is a great example. All of the imagery on this page or most of the imagery on this page is designed to draw the user's attention to that call to action button of Shop Now.

[00:15:50]
So everything from the imagery itself, but also the shapes that have been added to the interface. Let me show you what I mean. So as you can see here, we've got this triangle that's been created by the typography at the top. So it's narrowing down towards the button, right?

[00:16:08]
Then on top of that, you've got the background image of this woman behind the button, which is positioned right next to the button and drawing your attention that way. And you've even got the mountains underneath that are pointing upwards back up to the button. But then after that, you've got this guy in the left-hand corner whose eyeline, even though he's wearing a headset, his eyeline is looking up towards the button.

[00:16:32]
And where someone's eyeline is makes an enormous difference. We follow people's eyelines. Add to that, he's actually pointing at the button with his, we'll say his left arm. And then on the back of the woman's head, she's actually got a triangle, which is pointing upwards towards the button.

[00:16:50]
So you can see how just by the positioning of imagery, you can draw attention to anything particular that you want on the page. To really drive that home, let me show you eye tracking study and show you how big a difference this can make. Here's a design using not a very clever design.

[00:17:09]
It's got a little bit of text on the left. It's got some copy written there, and under that is a call to action. And you can notice how all of the attention on that page is drawn to the call to action. Now look what happens if I just take this guy out and replace him with a slightly different image, right?

[00:17:28]
Look how suddenly everything changes. The attention is no longer on that button, but it's instead on her face and cleavage. I won't even get into that conversation. It's a human characteristic. We can't help it. We're all the same. But that doesn't work as an image because she is looking directly at the camera and she's holding our gaze.

[00:17:52]
And also, there's this line that's going down between her arm and the background that's creating a barrier between the two. So what's happening is somebody's eyes are hitting this page, immediately jumping across to her. Because faces are more compelling and hold our attention and never getting back over to the left-hand side.

[00:18:13]
Now when you compare that to the original image, right, our eyes are still jumping directly over to the guy on the right-hand side. But then we're following his eye and his eyeline immediately back over to the left. So we don't miss that copy and the call to action associated with it.

[00:18:31]
So think about when you select an image, are they looking into the page or out of the page? Are they looking towards the call to action? Are there visual indicators that are pointing at critical pieces of content? Things like that will make an enormous difference in terms of whether somebody spots your call to action or just scrolls straight by it and doesn't see it.

[00:18:51]
And the same is true with key content, etc. So that's a little bit about how we can draw people's attention around the page.