Lessons

Lesson Info

The Art and Science Behind Designing High-Converting Calls To Action (CTA's)

how do you design fans? And welcome back we spent some time in previous lectures speaking about the different types of facilitators, the behavioral triggers that you want to include in your calls to action. We spoke about how a call to action might not necessarily be a button, it might be a text, it might be a line of text, how every single page has to have a call to action to move the visitor to the next intuitive step that you want them to take in this lecture. I want to talk about a bunch of different practical approaches to help make your CTS more effective to help design your page around focusing having your users focus on the C. T. A. And I think by the end you'll have a number of some practical takeaways that you could use immediately to make your pages convert better by designing your C. T. A. S. In a more appealing and visually prominent way. So let's just jump into the slides. So obviously as you can see from the slide, the first rule of Cts is have a freaking C. T. A. Right?

I'm actually gonna I'm gonna show you an example in a few slides of a website that literally forgot to put a C. T. A. Um So you need to make sure that every one of your pages has some sort of call to action. Something that you want your users to do on that page. It might be adding something to the cart might be viewing the next page, whatever it is. Some rallying cry, you have to make it clear to the user. Simple, clear without the user having to think about what the point and the purpose of that pages from an actionable perspective, not just the information you're giving them, but what you actually want them to do. Do you want them to fill out a form? Do you want them to give you a phone call? Do you want them to add something to their cart? Whatever the purpose and the goal of that page, the call to actually needs to be there. Let's go through a couple different important aspects of the call to action and the art and science behind it. The visitor has to be able to answer very clearly. What am I supposed to be doing on this page? Right. The call to action is going to really essentially answer that visitors question the call to action should be clear. It should be above the fold, ideally the user should not have to hunt for it or look for it. There should be no question marks in the user's brain as to where that call to action is or what it's really trying to get me to do. Every page should ideally have one primary call to action. There might be secondary calls to action, especially if you're in e commerce or even if you're in legion and you have the option for a form. We have an option for an e book. Right? So the primary call to action should have much more visual prominence and the secondary call to action should be clearly a secondary call to action when writing the text for your calls to action. Don't use the word submit for a form submission. Whether it's a whether it's a button by a form submission or it's a text link. Try to finish the sentence. I want to blink. I want to dot dot dot, I want to read this white paper now. I want you to email me more information. I want to speak to a specialist. I want to start my demo. I want to launch my free trial. I want to explore this product. Right? So finish that sentence. Statistically research has shown over and over again that personalized call to action text is much much more effective than the generic submit or launch or you know, whatever it may be. That's that's it usually comes preloaded in some sort of template. They might be using free landing pages. So so avoid submit. Uh and the generic text for C. T. As much as possible, the more you could be relevant and personalized and kind of express what that person. Right? We spoke a lot about setting users expectations, the more you can do that, the better your calls to action are gonna perform. Like I said above the fold one possible and also set the expectations in the user, we just mentioned this. What's gonna happen next? It's always you always get bonus points with conversion rate when you, when a user has a very clear understanding what's gonna happen after I click this button, will I get this email to me or will I be redirected to the e book hosted on Dropbox? Is a support specialist gonna call me back within 30 minutes or are they gonna call me back within a day or two if I'm signing up for a free trial, is credit card required? Or do I not have to input my credit card for the free trial? If I'm signing up for a free trial or a demo, do I have to give you my credit card information or is there no credit card or is there no credit card required. Those are the types of things that really make um your calls to action much more effective. And I want to show you a really great example of a landing page that has a very clear, simple call to action. And let's just go through the different things that are really great about this. This landing page liquid planner. They offer software for team collaboration and project management. Right. So there's a nice big green call to action. But let's take a look at the different elements that make this a good landing page. So you have a supporting headline. Right, so the information on the page, the clear information supports the call to action whenever there's a call to action. Somewhere on the page, it should be close in proximity, actual physical proximity to supporting information that clearly tells me what I'm getting into with my C. T. A. There's one clear call to action. There's that green button. I don't think the contrast is as good as it can be and I don't think the button design is as good as it can be. We're going to speak about it, we're gonna do a word on button design in a few slides but it's clear and there's one and look at the attention ratio, right? Look at this page. There's very little else competing for my attention. The call to action text completes the sentence I want to and if you look at the button says I want to start my free trial um it's clearly a button. Right? So that's a big one. This might seem like it's super simple but you'd be surprised how many landing pages are designed with calls to action that are not clearly clickable buttons. This is pretty clearly a button, right? Supporting graphic the same way that the supporting headline and sub headline should be in close proximity to a call to action. Research has shown again that having the supporting graphic that does not compete unnecessarily for attention with the actual call to action but it supports what's going to happen. It's a software, it's clearly telling me that this this is some sort of internet related software like product that helps increase conversion rate by having that close and supportive of the call to action itself? Post click expectations are set right? This landing page clearly tells me 14 day trial, no credit card required. You're setting my expectations with what's going to happen after I click. That's a very important aspect. Like we said about about cost action. Now take a look at this page. This is a real page on the internet, soaring hearts, natural bedding and let's just pick apart a few of the different things that I find problematic about this page and I'm gonna show you a pretty cool test. It's gonna be the first time we've seen an attention heatmap test in this course. But it's gonna be quite quite incredible when we take a look at some easy improvements in this page. First of all, the social links in the top right hand corner, the only things with color. Right? So my eye is going to be drawn to these dark blue, colorful actions like tweet and and like my betting on facebook. First of all, no one's gonna do that right. No one's gonna be tweeting about seeing your sheets on on an e commerce page. Right? So, so besides the fact that they're competing for attention because they're the only things with color. Get rid of him right? Get rid of them. Another big problem is to equally prominent cts we have. If you look over there, you have the data card button and then you have the the add to registry button that's confusing users. What do you want the user to do? Do you want them to add the item to the cart and buy it or do you want to have them added to the registry? I get that. You want to have two different options. But like we said one primary call to action and then a secondary call to action. Right? So you don't want to have two equally visually prominent calls to action. There's no clearly defined action block. The action block is a term used by Tim Ash and his book landing page optimization that contains the call to action information. The action block in most cases, especially for e commerce should be clear. It should typically have a light background color that's different from the background color for the rest of the page it should have a supporting headline and sub headline. It should have the actual button or call to action text inside the action block and that's where you should set your expectations. So the call to action over here, which is add the item to the cart. It's kind of very much bunched together with the product images. There's these other calls to action beneath it. I can look at different types of products where the it gets washed out, right? The primary purpose of this page becomes washed out and it becomes less cognitively apparent what it is you want the user to do. On the same note, you have these competing distractions to save 15% off when you buy the whole package that's competing with the primary called the action of adding this product to the cart and there's no supporting headline or subhead line, right? There's no page title, which is a big no, no, we're gonna speak in a few in a couple of lectures about about the importance of having a page title on every page. There's no sub headline, it just does not feel clear, intuitive to a user how this page should work. And now if we run this exact page through an intention heatmap, here's what we have, right? So you see quite incredibly the primary focus is going to those social share links. You have a lot of focus going to the logo, you have very little focus going to the product. Images is a problem. You have very little focus going to the main Call to Action which is add the item to the cart and you have some more focus where I would be drawn going to um, the other product Images in the bottom. Right now, I went ahead and I did a quick uh modification to this page in real time and what I did was just a few simple things. Right? We made, we made one clear call to action add to cart, we made the background color green, we created a light background color, light gray, background color behind the entire action block. We patted it so it doesn't go right up to the edges with the other computing elements. This already is a huge improvement and it just took a couple of minutes now let's take a look at what happens once we run this modified version of this landing page through the same attention heatmap wizard as we did before. Incredible. We're now seeing a lot of attention on the call to action. Still a lot of attention to those blue social share links. And what happens if we remove the social share links? Boom. The attic art call to action gets the most attention. The eye is immediately drawn there. There's more attention on the product image. There's still quite a bit of attention being drawn to the location options next to my account and the utility bar at the top of the page. But that's okay because that's known it's completely irrelevant to the actual shopping pattern. And without too much work we've drastically, we've drastically increased the potential conversion on this page. Here's another website that I've come across while browsing a company called VPs that offers different security systems. So here's their product page, right? Not a fantastic design but clear calls to action. Different product categories. Now here's what happened when I click on one of the product categories. This is their entire page. Electronic security, wireless monitoring systems. If you notice there's no call to action, they literally forgot to prompt the user in any way to contact us to add an item to the cart to request more information to download a brochure. There is nothing if I want to get in touch. And this is this is a real company. They actually sell the stuff. They have a website for a reason. They want people to request more information. They want people to get a quote. They want people to request to learn more about what they sell. But there's literally not a single call to action on any of these product pages. So it does happen. There are companies that do forget to put a call to action, make sure you're not one of them. Here's another interesting example. Here's a company called compost that offers a lot of different types of business intelligence software. And this is a landing page for an e book, The B2B Customer Experience Benchmark Report of 2016. Let's take a look at a couple different things that are drastically wrong with this landing page and I'm gonna show you a cool test that I did and we did an actual usability test here. First of all, I want this like I know you're trying to complete the sentence. I want to but like I want this. That's a weird strange call to action. Doesn't make a person feel safe. Do you need to collect all that information right there asking the business type what type of marketing automation tool you're currently using, your job title, your company name, your phone number. Right. So that's already way too much information. That is absolutely necessary For this book. What they want to do is get people on their email list. So they could launch an email marketing campaign or put you into a drip campaign. They don't need your phone number. They don't need your company name. They don't really need your job title. Right. So what's important with forms? And I'm not saying this definitively for this company because I don't know exactly. I'm not 100% sure exactly what it is they're trying to do. But I suspect greatly I strongly suspect that they're asking for too much information that's not necessary. One of the most important things with calls to action and forms is don't ask for more information. That is absolutely necessary. Second of all, you have a checkbox. Do you want to be subscribed to our newsletter? No, no one wants to be subscribed to your newsletter. They're coming to your landing page. They're downloading books. These are not people who are highly committed to your company, highly committed to your product and services. They're already anxious whether or not this is legitimate, they're already anxious whether or not they should put in their email and phone number, asking them if I should subscribe to my, my monthly newsletter or whatever it is, it's just completely completely unnecessary. And I think it's ridiculous. Look at the color scheme, it's a very non distinctive action block. You have this dark blue background with these almost the same hue of blue for the field boxes. This kind of competing new york, Mets style orange on the blue. Very strange. What are the expectations? How do I get my e book? There's nothing about where we will email this book to you. You're gonna get sent the e book or you'll be redirected to a page that has the book. Most importantly, I actually don't even have this here on the side. There's no description or headline or subhead line that tells you that you could download the e book. There's nothing that says download the e book. It just has original research on the marketing driven customer experience and there's a form. Why not make it simple? Why not make it easy to tell the users you're going to get an e book, you can download this for free. You can read this today right now. Here's a quick redesign that I did. Just took a couple of minutes and personally I would, if I had more time before I was designing this patron scratch, I would make it totally different. Right? I don't really like this color scheme that much but I just made a few simple modifications. I changed the headline original research on the marketing drive customer experience, made that a little bit bigger. Now there's a clearly defined action block with a dark blue background, There's a headline that says read the book for free. There's much, much fewer labels. There's a better call to action that says email me my book and then there's an that we set their expectations. But beneath that you'll receive your e book via email within the next few minutes. Right? This just seems like a much more intuitive page and the call to action just seems to make more sense. And we ran the usability tests, right? We asked people um, across America, the UK Canada and Australia, Which landing page, which design will be more likely to convince you to download the e book. And I showed them a picture of this one in the picture of the last line of the original page and check this out. Right. This is incredible. 100% of the respondents preferred our design. 0% of the respondents prefer the original design. How many maybe maybe are we converting here guys? This is a lift. This is an infinite lift. Right? This is from 0% to 100%. How much of an effect on actual conversion rate is this gonna have there's no way to know for sure because you're always gonna have your nose and you're always gonna have your absolute yes is but there's a lot of maybes maybes here that we would have changed with five minutes of work employing some of best practices and writing calls to action. Just take a look at some of these responses. Number two, this one is more clear to me visually. It makes me more it makes it appears more aligned. Number five more upbeat. Upbeat clear into the point. This design is more appealing to me six, easier to read. Number nine looks more pro 10 m sign 11. It clearly states free 14. The other looked like it was going to lead me to malware. Right, incredible. Number 16 less info to type in. So I'm not making this stuff up. These are real people with real responses. When we asked them, why did you choose the design you chose? Right. So this stuff makes a difference to identical pages with five minutes of work with best practices with calls to action makes a difference, right? It really does. Just a quick word about button design. Once we're here talking about calls to action, it's always important to make clear what's clickable. You'll see this through lots of different pages. Designers always tend to want to do something flashy or super minimalist. But a lot of times designers don't take into account that people are used to certain conventions and we're gonna talk about conventions soon. So on the left hand, we have things or is it clickable. So you just have to read more Right? Sometimes you'll have you'll I've literally seen this many times where a link or a call to action is just text. And even if you hover over it, it might go to a darker color, but that's not good enough. That creates that question mark in the user's brain isn't clickable. So you could bold the text and that seems to be, you know, oh okay, it looks clickable, but I'm not really sure. Then you have these sort of ghost buttons with, with it's just a thin border around them. That's a very, very trendy sort of thing. That's more clickable. Then you have these flat buttons with no shadows, but it has a solid background color. That's another common. That is closer to being more intuitively clickable. And then, gosh, that's a button, right? You could have a gradient, you could have a flat design with just a hard shadow beneath it. Like the green one, you could have a soft shadow that kind of pops the button off the page. Gosh, that's a button right away. Clear key call to action takeaways have a call to action. Support the call to action with your page headline. Be cognizant of your attention ratio don't make users hunt for it. Put the call to action above the fold whenever possible. Set expectations. What's going to happen after the call to action? The text of your call to action should finish the sentence in the user's mind from the user's perspective, I want to dot dot dot and respect the action block. Have that action block. Make your call to action in a clear section above the fold, possibly a different background color, not too crazy. Just very, very soft. And a quick exercise. Start on your homepage and go five pages in. Ask yourself this does every single page have a call to action based on the concepts in this lecture, based on the key call to action takeaways that we've just discussed. Find two things you can do to improve at least one call to action on your site or landing page. I think using these concepts, you'll find some interesting things that you can do to improve your calls to action. And I guarantee you if you implement those today, you will see a lift in your conversion rates. So I hope this was an exciting lecture. We definitely covered. A very important concept have covered a lot of ground. And I look very much forward to seeing you all very soon. The very next lecture.