Create Compelling Calls to Action

[00:00:01]
>> So as well as worrying about where people are looking on the page, we need to think about our calls to action in particular. These are obviously the most critical element when it comes to the design of any website and it's absolutely essential we get them right. The most essential part of them is that people spot them.

[00:00:23]
We've already talked about the copy and how we want to make them clear and compelling and that kind of thing, but if people don't see them all the great copy in the world is useless. Now, we can partly do that by drawing people's attention using the techniques we've already covered, but there is more that we can do when it comes to calls to action.

[00:00:46]
For a start, we can simplify the number of calls to action we've had. I touched on this in the last section, but it is worth repeating. So often on web sites, we have so many different calls to action, so many things that we want people to use, and that can be really problematic.

[00:01:05]
Here is an agency website I just happen to grab at random, and they've got a ridiculous number of calls to action going on there. You've got sign up for our newsletter, they've got send us a message, get in touch, phone us, email us, follow us on social media, chat with us.

[00:01:22]
All these different things vying for attention. The site is begging people to contact them, isn't it? But it's too much. It's too much repetition, so it creates noise on the page, and it can lead to paralysis about when or what do you want me to do sign up for the newsletter or get in contact?

[00:01:43]
What do you want me to do here? Be very clear. So my rule of thumb, generally speaking, is to have a primary action and a secondary action, right? So your primary action is the main thing you wanna do, so on an agency website like this it would be get in touch, right, ciz that's the primary thing we want to do, get in touch and hire us.

[00:02:04]
But not everybody is going to be ready for that, right, so you also have a second reaction. And your second reaction might be sign up for a newsletter, okay? So for those people that aren't ready yet to commit, we want to be able to keep in contact with them until they are ready to commit, okay, and that's where something like a newsletter comes in.

[00:02:24]
So let's take, for example, Frontend Masters that we were looking at earlier. You have multiple calls to action that were very similar and may be conflicting a little bit. There was browse our courses, there was view our, I can't remember they were called, paths or learning paths. And then there was also join now, right?

[00:02:45]
And all of those really are kind of almost primary calls to action. So really perhaps your action there, your primary action on your homepage would be browse our courses. Then when people are viewing the courses, that's when you come in and say now join. But on the homepage we might want to introduce a secondary call to action for somebody who's not ready to join yet, but liked what they saw, which would be something like, sign up to tips and advice on front end development.

[00:03:14]
And they get an email once every month or something, just reminding them that the site exists and providing them with a little bit value as well, to the point where people are ready to actually subscribe and join. So having that kind of two-tier call to action works extremely well.

[00:03:36]
The other thing I touched on, and I touched on this with the Frontend Masters course and also touched on it when we were talking about Apple is the need to have distinct calls to action. That you know very clearly how these two courses of action work. So I was saying that browse courses and browse learning paths are quite similar.

[00:03:58]
It's not going to be obvious, the difference. Here's the probably the most comical example I've ever found of that, having two calls to action buttons that were extremely similar. This was on Amazon's iOS app for a long long time if you tried to buy an product that wasn't yet released, you were given two options, preorder this item today and preorder it now.

[00:04:22]
Now, you tell me, do you know what the difference between those two are? Absolutely not. Now, turns out, one of them added it to your basket and then you could check out, and the other one immediately took you to check out. Basically, what had happened there is some developer had realized, normally, they would have a button that says add to basket, and one that says check out, which is a more logical thing to do.

[00:04:46]
But when it got changed, the developer just switched the text, because it's a preorder, and you end up with two buttons that are very similar to one another. Notice I'm blaming a developer. It might not be a developer's fault, and I apologize to developers everywhere, but it tends to be that kind of scenario where mistakes are made because the designer hasn't thought it through properly.

[00:05:06]
So the developer has to come up with something. So that's a great example of where things can go a little bit wrong. And you can end up with two calls to action that are not clearly distinct from one another. You can't talk about calls to action without talking about this idea of the fold.

[00:05:25]
Now, this is a really interesting one. Because there's a lot of argument about the fold within the design world, and a lot of people say, well, the fold doesn't exist. The idea of a fold comes from the days of newspapers where they fold them in half and put them on the stand.

[00:05:42]
And so you'd always wanna have your really compelling story on the top half, which would be seen when it was on the stand. Now, people argue that on the web there is no fold because everybody has a different resolution or the browser open at a different size, etc.

[00:05:59]
And that is true, there is no specific point where the fold appears. However, on everybody's browser, whatever device you're using, there is a point where you have to start scrolling. And so there is a general kind of view that your call to action should be high on the page as a result, so it can't be missed if people don't scroll.

[00:06:25]
In truth, it's a lot more complicated than that. So unfortunately, I can't show you the actual AB test I ran because of NDAs but I've kind of mocked it up vaguely to give you a sense of what we did. So originally, in the original version, they had a call to action that was high on the page, but it was on the right hand side.

[00:06:46]
And as I've already said, the right hand side is not a great position for calls to action because we tend not to view that side as much and we also associate it lot with advertising. Advertising often is in the right hand side. So we decided to move it to the main column and lower down on the page, in the left hand column.

[00:07:09]
And we saw a 304% increase in conversion, right? So even though it was lower on the page, it tended to perform a lot better. And this isn't just about a positioning issue. It's not just about that the left hand side is better than the right. It's also about picking your moment.

[00:07:26]
I think I might cover this again later. But it's that there is a fundamental problem that sometimes we go in for the ask too quickly, right? It's like when you go to those websites, when you arrive on the website and it instantly pops up with, get 10% off your first order.

[00:07:46]
Right, and you go, well, I haven't even seen any products yet, I don't know if there's anything I like. So you close the overlay immediately, right. Then you navigate around the site, you find something you want, and where's my 10% off. And it's gone because the overlay's gone, they picked the wrong moment to ask you to sign up.

[00:08:06]
And we do this all the time in calls to action. So you've got to think about an appropriate place on the page to put the calls to action. So although I do tend to have calls to action high on the page for returning users that have all ready made up their mind.

[00:08:20]
Most of the time I will have a call to action at least partway, if not all the way down the content of a page where people have had a chance to see everything that I've got to offer in that particular case. So don't fixate on the fold overly, but pick the right moment where you think people have seen enough of the content in order to make an educated decision.

[00:08:45]
And then it becomes a matter of ensuring that people see that call to action at that lower point on the page. One of the methods you can use that to do that is white space, it's an incredibly powerful tool. But unfortunately, all the time, clients and stakeholders like to fill up empty space.

[00:09:03]
But empty space is a very powerful tool for drawing your attention to something. So I'm sure you've experienced it before, right? You can be using your laptop quite happily, right? And everything's, fine screen looks great, and then you come up with a white or a black, empty page, right.

[00:09:26]
So your whole screen is white, and you can see every little speck of dirt suddenly on it because there's nothing else to distract you from it, right? It's all this white and then a speck of just dirt. And the reason I use that example right now is because that's what I'm looking at on my screen.

[00:09:42]
Excuse me, there we go. So you will spot that speck of dirt. That's the power of negative space, if you leave a lot of space around something, there's nothing else to hold the eye, so the eye settles on whatever is in the middle of that empty space, such as a call to action.

[00:10:00]
So if you leave a lot of empty space around a call to action, people are much more likely to notice it. There are other techniques available to you as well, to ensure people notice calls to action. Color is an obvious one, so color is a really powerful tool.

[00:10:17]
If you use a contrasting color to the rest of the palette, then it's going to jump out. And if you think you're a bit rubbish on color that'ss absolutely fine. If you go to somewhere like color.adobe.com and you enter in the kind of default color that your website is, probably the corporate color you are given, it will suggest contrasting colors that you can use In order to pop out your call to action.

[00:10:45]
Now, the only word of warning, and I'm sure somebody very smug is typing this into the chat as we speak, is that something like 1 in 20 men and 1 in 200 women are colorblind. Which means that we don't all perceive color in the same way. Even if you're not colorblind, we see color slightly differently.

[00:11:05]
So as a result, you can't rely exclusively on color in order to draw attention, but it can be a useful secondary tool. So as you can see here, there's quite a lot of white space around that Shop Now button as well as it being a strong contrasting color.

[00:11:21]
So alongside color, another technique that you can use, because you can't rely solely on color, is size, really. And when it comes to calls to action, bigger is better. It's better because you're more likely to spot it, which is good, but it's got a secondary bonus, too, which is it allows more room to have a compelling call to action.

[00:11:46]
So if you notice on my previous examples, it's things like Shop Now, because I don't have a lot of space to write anything. And that's fine, but you've got to remember that people are scanning the page and reading things out of context. So calls to action and things like links, they are often read without reading the surrounding copy.

[00:12:05]
And so a term like Shop Now, well, it tells me that I should buy something, but it doesn't really help me to understand what I'm buying or what's going on or what benefit that's gonna provide. It's like links where it says Read More or Click Here, it provides no real information in its own right.

[00:12:25]
But if you make your call to action bigger, you can add more to it, you can say, for example, buy The Rift today and become a better gamer, right? That's a much more compelling call to action. Because a, it says what you're buying, right, what you're gonna get, and it's communicating the benefit you get from that.

[00:12:44]
So bigger and bolder not only makes it more visible, it gives you more room to create some compelling calls to action. One quite popular way of drawing attention to calls to action is animation. So you can see on this example that notice the Add to Bag button tethers to the bottom as as the user scrolls, so it is effectively animating.

[00:13:12]
Animation does work very well, it does grab your attention, but it has its downside. And its downside is that, as I'm sure you're already experiencing as you're watching this now, it's quite hard to pay attention to what I'm saying with a looping animation going on. The movement draws our our attention very, very strongly, okay.

[00:13:35]
And so when you have a looping animation like is going on at the moment, it shoots up our cognitive load. And so if you are gonna have an animation on something like a call to action to draw attention to it, I suggest that when someone scrolls, you animate it as it comes onto the screen, you animate it then, right, and then stop.

[00:13:59]
So only animates based on a user interaction and a user feedback. Maybe when a user rolls over the button or when it first comes into view or that kind of thing. Be very, very subtle and understated when you use your animation. And this is another reason why I'm gonna hate on the the Frontend Masters website a little bit more as well, because with their call to action they had a great solid value proposition, and a great value proposition at the top of the page.

[00:14:25]
But underneath that, they had a video background. And video backgrounds have become very popular now. But they do increase cognitive load quite a lot because you're trying to read text that's over the top of a moving background, and your eye is flicking backwards and forwards between two and it's quite distracting, it's quite hard.

[00:14:44]
Now, the reason I didn't comment on that when we were looking at the site Is because they had the foresight to stop the video once it played through once. So by the time I came to comment it, it actually had stopped moving. So that's preferable to the endless loops of video animations.

[00:14:59]
But generally speaking, those video backgrounds aren't a great idea. They take a long time to load, and they are a constant distraction, like this animation that's going in the corner of my vision all the time I'm trying to talk to you now. So I will move on to the next page, which has also got an animation on.

[00:15:20]
[LAUGH] But this is to demonstrate a slightly different point, and this is the idea of breaking complex actions down into smaller tasks. Because not all calls to action are as simple as click a Shop Now button. A lot of them are a lot more complicated, again, if we go back to the Frontend Masters example, when we clicked on that Sign Up button, we had to select the price, the particular membership that we wanted.

[00:15:47]
And we then had quite a long form to fill in that had multiple password fields, and it also had credit card information that had to be entered, and those kinds of things. When I'm faced with something that's a little bit longer than like that, I like to break it into a series of smaller steps.

[00:16:04]
It goes back to the chunking that I was talking about earlier, to just allow the user a little bit of time and space to focus on one task at a time, to reduce their cognitive load. You see the same thing done with customizing products, like is happening with this bike here.

[00:16:22]
By making it not a massive form of drop down list but an interactive experience you can work through at your own pace, it keeps cognitive load more manageable. And the other thing I would encourage you to consider when it comes to your calls to action, to think long and hard about that post-click experience, right?

[00:16:46]
So let's take a classic example, like an e-commerce site, right? There is a lot that can still go wrong when someone says, I wanna buy this product, right? So they hit buy now or they hit add to cart, great, wonderful. But if you look at statistics, the number of people that drop out on a shopping basket page or a cart page is really, really high.

[00:17:12]
So we need to think carefully about that, we need to think carefully about the payment and checkout process. Now, that isn't just e-commerce, I'm talking about things like bookings of a hotel or or even submitting a contact us form. Because it doesn't stop it just cart and payment checkout process, then there's the confirmation email you receive.

[00:17:34]
That email where, yes, someone's going to be in touch with you. Or yes, we've got your order. And then there's things like dispatch emails, delivery tracking, delivery text. All of these things are critical parts of the experience. And if you don't get them right, the result is buyer's remorse.

[00:17:53]
The result is an unhappy client, which will increase the number of returns and so you snatch defeat from the jaws of victory. So this is where very much, you remember I gave the airline examples where how informing people and keeping people informed is absolutely critical? Pay as much attention to what happens after someone clicks on that button, and keeping them informed and keeping them happy as you do, getting them signed up in the first place, absolutely critical part of the experience.

[00:18:25]
Because if you get that wrong, not only are you gonna get more returns, you're also gonna get more complaints, more people badmouthing you on social media, things like that, and you can undermine the entire experience. And in my mind, this is one of the critical differences. I know a lot of you guys are developers and maybe you don't consider yourself designers, but, this in my mind is one of the critical difference between a user interface designer and a user experience designer.

[00:18:52]
We use those terms like they're interchangeable, and they're really, really not. There's two very different disciplines, and a user innterface designer is interested in everything we talked about up to this point, right. The design, the layout, all of that kind of stuff. The user experience designer, they care about the emails, the dispatch notifications, the tracking, and all of these other things that together make up the experience that decides whether someone is going to never buy from you again or become a lifelong customer that increases lifetime value.

[00:19:27]
So, yes, so that's all a little bit about calls, so we've talked about calls to action, we've talked about leading users' attention, but I wanna kind of finish this session by talking about engaging users with aesthetics.