About Oli Gardner
Unbounce Co-Founder Oli Gardner has seen more landing pages than anyone on the planet. His disdain for marketers who send campaign traffic to their homepage is legendary. A prolific webinar guest and writer, he speaks internationally about Conversion-Centered Design and Campaign Experience Optimization (CXO). Oli is on a mission to help marketers combine data and design to create high-converting and delightful marketing experiences.
In his Learn Inbound talk, Oli shares a series of conversion data stories. After mining through a million data points to uncover and dissect how conversion actually works, Oli channels lightning bolts and body parts as he sews together the ultimate landing page.
- There is such thing as a clarity equation for your page, and it consists of distraction, expectation, readability, visual identification, immediacy, specificity and hyperbole.
- Spelling out your CTA assist conversion rates – words like “now” and “here” after “click” or “download” can increase conversion up to 48%!
Okay, today, I am going to tell you a love story. It's a story between two things that are really important to me: data and design. There's something very special when they come together. And I'm going to share two different sides to this story.
So, on the design side, I have 23 principles of attention-driven design. I'm not going to share all of them. That would be really, really boring. So, I'll just do a few.
And then on the data side, at Unbounce, we've had maybe a million landing pages published through the platform, and so we've started mining this data to see if we can figure out what actually makes a page convert. What are the little nuances that we can analyze, look to see if any patterns or trends and see what we can do, see how it impacts conversion. And also, lots of conversion research experiments that I've been doing to try and understand the kind of relationship within copy, design, interaction, psychology.
I get asked a lot of questions about… That'll go on all night if I don't stop it. Where should I put this? What color should it be? Or how long should it be? There are lots of questions. So, these are some of the questions that I've been asked. So, I've been working with our data scientist and looking in, see if we can get some answers to these questions. It's some pretty interesting stuff.
It's also a love story between these two. They're not married yet. It's his goal to get his Frankenstein bride, but the problem is, he's a bit of a dipshit. So, you know, he gets easily distracted, he's not very good with his words, and he's really bad at describing what's good about him, what's unique and what might make him attractive to somebody. And if he's not careful, she's just going to run away. She's not going to pay attention to him. So, it's our goal, my goal tonight, to help Frank do a better job, communicate better. And we're going to do that by looking at the anatomy of a landing page. What are these different elements that make up a page? And what can we learn from the data and apply with design to increase conversion rates?
All right, so the first thing we need on a page, we need a logo. So, that's his head and we're going to call him Frank. This is the name of our company. And every logo needs a tagline. The problem is with taglines, people get kind of caught up in the, you know, the hyperbole train. I love this tee shirt. Hyperbole is the single greatest thing in the history of the universe. This is what a lot of companies do when they're coming up with their value proposition or choosing a tagline. You know, they start copying companies like Grey Goose.
Okay, we all know that Grey Goose is the world's greatest vodka. I was on their site yesterday, and they've taken it a little bit further on that, the hype train. Now, they're the finest, unrivaled, extraordinary, unparalleled, highest-possible quality vodka. And people tend to just copy this, and will become the world's best everything. I'm going to start doing some data exploration on that to see how many people are just kind of adding those things into their value prop because just because you say it doesn't make it true.
I found this, as I was thinking about this, someone sent me this page. And I was looking through it, and I thought, "Huh, this is really confusing. I don't really know what these guys do." So, I analyzed the page a little bit just to see what they're saying about how they described what they do. Okay, so what do these guys say they do? Well, they're marketing software. Good. It's really clear. They're the number one marketing platform, trademark. How do you trademark number one marketing platform? Correct me if I'm wrong, but we typically trademark things that we've made up. Right, so they're making that up.
Fuel your brand, trademark. They're really good at trademarking really shitty terms. Go down a little bit, market domination, award-winning marketing software, in case you've forgotten. Then down at the bottom of the page, marketing innovation technology, marketing software.
So, I want to see a show of hands if you are involved in marketing software: either you own a company that does it, work at a company that does it, have a friend or know someone who works in marketing software. So, put your hand up. Lots of you, right? Does anyone know how many marketing software companies there are? There's that many. Specifically, 3,874 as of last month, exclamation mark, trademark. We're in there, but you'd never know, right, unless you're unique. These guys are not unique… Actually, maybe they are. Maybe they're amazing. They're just doing a terrible job of letting us know. They're just jumping on this hype train. They're just talking about using all these weird terms that don't actually help us understand who they are.
So, we're going to talk about, you know, part of the anatomy is your unique value proposition, which is really, it's made up of a couple of things. It's the immediate above-the-fold experience. We'll talk about the fold again in a minute because everybody bleh about the fold. It's your headline, subhead, your hero shot, your CTA, call to action, and maybe a few bullet points. Everything that you can kind of consume in the first few seconds; that is your value proposition. And it's made up of a couple things: relevance, value, clarity, uniqueness, obviously. Clarity for me is the absolute most important part of the equation.
And it got me thinking last week: can I actually make an equation that defines clarity and a value proposition? So, I came up with one. I had this crazy whiteboard session at four in the morning, and I broke it down into distractions. So, what are the things going on that distract us from understanding it? Expectation, is it meeting the expectations that happen prior to the click? And is it setting expectations for what's going to happen when you click the call to action? Readability.
This one's very complicated. It includes the typographic golden ratio, the contrast between the text and the pages, and something called facility; which is like, are you even able to consume the content? And you'll see an example of that in a minute. Visual identification. Can I quickly figure out what this image means? What does that icon mean? Or is it slowing down my interpretation? Immediacy, again, can I do all of these things quickly? Specificity, the details, the details are important. What are the little numerical aspects to your offer that people need to know to get the full benefit? And hyperbole, or lack thereof.
Now, each of these can be unpacked into this much bigger equation that's a little bit like this. Part of the readability thing is the use of acronyms because the more acronyms there are, the harder it is to understand when you see something for the first time. Now, it's kind of ironic that I'm talking about clarity and I have 19 acronyms in the equation here. I wouldn't expect you to remember this or even… I don't know, like ever understand it, but it's pretty good because what it does is it breaks it down into these seven parts. Each one normalizes to a score between zero and one. You add them all together, divide by seven, times by a hundred, and you'll get a percentage. And there are exercises, experiments, and tests you can run to figure out where you are on this, dervish, it spells out. You want to appear one, that's perfect, but it's more like this. And when you plot it, you'll start to see, "Ooh, we have a problem with readability and immediacy, so that's where we're going to start optimizing so that people can understand our value proposition better."
So, a couple of examples, distraction. Like I said, Frank's kind of dumb, but also a not smart behavior is linking your logo, right, on a landing page... Okay, so rewind a little bit. Landing pages are standalone pages used for a marketing campaign. They're dedicated for that campaign. It's not for organic traffic. So, very different than everything else we've been talking about today. We're trained from websites, 20 years that if you click the logo, you go to the homepage. That's great, but you shouldn't do it from a landing page because then you're taking me away and you're not even getting anything smart from people. They're just going, "I'll click the logo because I'm used to clicking the logo." And then they're going to get their own experience.
Here is an example. I was trying to learn how to build an iPhone app recently. I saw this on LinkedIn, this ad. I clicked it, and this is good. This is what I was asking for. But then I clicked on the logo up there, and it took me here. And it's no longer about the e-book. It's now about the software. I don't give a shit about their software. I don't even know who they are. I want the e-book. So, now I'm like, eh, not what I wanted. So, I'm going to leave, okay? It's a very simple concept, yet so many people will link their logo. Also because they've been trained themselves to do it over the years as web developers.
Okay, so that seems obvious, right. One link is best and the average is 4.39. So, if it's that obvious, why is everyone doing this? Right, what this says in that sample size... I mean, all of these people can do better. All of them. But just the average marketers, the people who are doing the average marketing, they could get an increase in conversion of 50% by removing three links. That's 8,000 businesses just in that sample size. So, look at your pages. If you have these other links that someone else asked for or social share links, just delete them. They're not helping anyone. Focus people on what you should be doing.
Distraction is the enemy. This is supposed to be a scary slide deck, so that's the scariest photo of me I could find, about 10 years ago. And yes, I am wearing eye makeup. You want to get your attention ratio as close to one to one as possible. That's the ratio of the number of things you can do to the number of things you should be doing. There's only one thing to be doing when you have a marketing campaign. There's one goal, so try and squeeze it down to one to one.
I just moved. I lived in Vancouver, I moved to Montreal. I just moved back, and I didn't have cable. I probably won't ever have it again. And I want to watch TV, and someone said, "Oh, just get like an antenna thing." I'm like, "What, rabbit ears? The things that get like this fuzzy picture?" They're like, "No, no. You can get like an HD one, and you'll get like 10 free channels in HD." I'm like, "Oh, this sounds pretty cool." So I go to Amazon and I look at this, and I go, "This antenna's massive. I don't want that. Like, my TV's not that big. This seems like, outrageously large." But I researched it further and it's actually about this big.
So, it got me wondering, why does it look so big? That's just standard presentation. So I want to ask people, do some research. I'll talk about usability here quite a few times today, how I have a bunch of really cool little rapid experiments you can do. When you're optimizing, when you're trying to make things better, you need as many inputs as you can get. You need data, like from what I was showing before, the chart, you need to watch people do things. Do experiments like this and they all kind of point into where you can actually form a hypothesis that's meaningful, and then you run a scientific AB test.
So, five-second test is what I usually do with them, but they also have a question test, which is very simple. You show people your page, and you ask a question. But they get to answer the question while they're looking at it. A five-second test is they see it for five seconds, comes down, and then they answer. This one, they can spend as long as they want. So I said, "Let's find out if size actually matters. What size do you think the antenna is in width and height in inches?" So, its five by three, and these are the results. The average is 15 by 5, and they spend 96 seconds figuring this out. And it's not the whole web page. It's just that. It's just that screenshot at the top. So they're trying to figure it out because they can't. There's nothing there. There's no visual cue to figure out what size this thing is.
This is visual identification. If I can look at something and I don't understand it based on what I'm looking at, then from a design perspective, you're failing. I could have been in a hurry as most people are and, go like, "Oh, it's too big. Forget it." I bought it and I don't use it. I probably never will use it. But, so I'm like, "Okay, how can I fix this?" Well, in visual identification, one of the things in the equation is you can use context of use to kind of improve the visual clarity. So, I just did this. I mocked this one up. So, now there's a TV and you go, "Oh, it's this little thing and you stick it up there. That makes sense." So, I ran it again, got a lot closer. They spent 30 seconds less answering the question, and they're twice as accurate. So it's just basically showing things in the context that they will actually be in can really help with clarity.
Readability, okay. I need a volunteer. Someone put their hand up. All right. What's your name? Mary Rose? Okay. So, I'm going to show you a slide, and I need you, as soon as you see it, to tell me what it says inside the triangle. Say it immediately, all right? Okay, I'm going to show it and then just shout it out. Ready? Say it again. Paris in the spring. Okay I'll give you one more go. Try again. What does it say inside the triangle? How about if I highlight one of the words in yellow? Nobody ever gets that. I've been doing that since I was a kid. I put it in this little magazine I made when I was eight. I just found it so I put it in here. You could have got it right first time and I would look like an idiot. I've never done that before. So, sorry that you had to get it wrong. But that's about readability. There are weird things that can happen if we're not careful.
Here's an example I recorded this afternoon. Okay, this might look familiar to you. This is the learnunbound.com event website. I want to just go down and check out some...see if we have any readability issues on this page. Right, here's a testimonial. Let's see. "I had a great time at Learn Inbound conference. I was speaking alongside something... Learn Inbound does a phenomenal job. There's a real grassroots feel to...wait, wait, hang on..."
That's what I meant when I said facility. I mean, we've all seen these things, but that's the thing that's wrong with it. You're not facilitating my ability to even complete this task, right. You're removing that from me. Sliders, carousels of all kinds are bad for conversion. You could have an amazing testimonial there. If someone can't read it, it's just a complete waste.
So immediacy, this is getting stuff in your brain as fast as possible. This is a healthcare line page. Okay, I'll zoom in a bit. Lead the charge in the healthcare industry. Yay, marketing software. Complete your Bachelor of
Science in a Nursing program. So, this is the important part, it's a BSC in nursing. Alright, so I asked in a five-second test, this is when you only get five seconds. I said, here's the five-second test, "What course was offered on this page?" Generic stuff, health care. It's not healthcare. It's a degree in nursing. Only 8% of people got it right. What if that was your business and people were coming to your page and only 8% of them could figure out what you do before they decide to leave? That's terrible, right. You'd be failing if that was the case.
So I took it, and I just reversed the order of the headline and the subhead. It's information hierarchy. It's the order in which we tell our story, it's really important. I did it again. Bachelor of Science in Nursing, right? Thirty-one percent, that's a 300% lift in people understanding in those first few seconds, what the actual purpose of the page was. And this isn't a fluke or weirdness. I've done this a lot of times. I can't remember the name of this company. I blurred it out. You make it easy to grow your business. This must be marketing software. It's easier than you think to create professional emails. That's the juice, right. People put a lot of clarity in the subhead because they think, "Oh, I've got to make it more clear by writing extra." That's the job of a subhead. But it shouldn't be the only thing that's clear. So, with that one… Yeah, you get marketing software, but only 6% got it right. With the flip, 20%. Again, it was a 300% increase.
I did it with HubSpot. Worst of all. Definitely not your everyday product demo. It's marketing software. It's a thing. See how HubSpot can help you grow traffic, leads, and sales. That's what they do. First time, nobody got it right. Not a single person knew what HubSpot... I know HubSpot's expensive and complicated, but come on. I flipped it. Look at that. Gross, sales, leads, and traffic. It's a trend I see, it's probably... I look at marketing software all day, that's probably what's going on. But 60% there from 0. That's a conversion lift of infinity because it's from nothing.
Flip your headlines. Don't flip them and leave them, but try this and see if it seems clearer. Run a five-second test and you know, see if people are getting it more often. It's a really great way of doing this. Unless you're thinking, "Well, I'm not a designer or developer," you know, "how can I do that? I don't have the Photoshop files. I can't go in and swap these out and run this test or change the website." That's okay.
You get the point. It's real easy, so you can do that in a few minutes, and with an idea, you can put this up because a lot of people ask all the time, "How can I convince my boss or my client to let me do optimization or testing?" This is how. You make them look like an idiot. You go like, "Nobody knows what you do. I did this experiment and look what happened." It's a great way to help convince people that they have a problem or that it can be improved. And then they may open up budget for you, or they might just hire you or something like that. It's a really great way of getting these qualitative insights that can make a difference.
I'm going to read out this conversation, happened on a phone between Brian and his friend. Again, this is back on the romance part of the story. "So how was the date last night?" "First date, we went to dinner, and then I walked her home. Then I killed her in the woods outside her house, and left." "Killing her seems a bit harsh. Did she order the lobster and Fillet Mignon at dinner or something?" "Kissed. Kissed her." My point being, what we say, and what other people hear are often two entirely different things.
All right. These are all clarity problems. Clarity makes so many problems in the world. So, I'm going to work on that equation more, make it easier to kind of do. But there's a lot you can be doing to fix clarity. One simple tip, ask your customers to write your headline for you. You'd be shocked by what they put in there. Because while you think you're marketing software, they might say you're the "blah, blah, blah that solved this blah, blah, blah, that nobody else can blah, blah, blah," or something. Something that's actually unique. Okay, let's talk about forms for a second. Anyone who's doing a lead gen. The classic question is how many form fields? Well, none. That's the highest converting, but you wouldn't get any data.
So what is it the data say about the number of form fields you should have? Okay, we'll start at one again. See this happening like last time. Then it goes up again. We'll talk about that in a second. So obviously one's best. But it's not best if you have a sales department, maybe. They want more information, not just an email address. So maybe you need to put more in there. The interesting thing, if you look here, there's virtually no difference between four and seven. So may as well ask for some more, right? Just give me some more information. Now, these are aggregate numbers so they won't work for everyone. But if we all did this in the room, on average we would be ahead. So if you have four fields, just try. Just add some more. Only ask good questions though. Don't just gather it for the sake of it.
But up here, you're probably thinking, "Well, why would we stop at seven when it goes up again at the end?" Well, these are probably like the extreme motivation things. Those forms that you just...there's nothing, really, that's going to stop you filling it in. You know, things like getting a car loan, if you have shitty credit or immigrating to Canada from the U.S. if Donald Trump becomes president. There would be so many people doing that.
Okay, where should you put the form? Now, people have been talking about the fold for decades. "Got to keep everything above the fold." In many ways, yes because of your unique value proposition, that is communicated there primarily. But not everything needs to be above the fold. And I just gave away the surprise.
Let's have a look at this page. This is the unbounce.com home page. It is 6,500 pixels long. This is a heat map from hot jar showing how far up people scroll on the page. Nobody and I mean nobody, the bottom of the blue there is the bottom of everybody. Nobody got past 1000 pixels on this page. No one was scrolling. Why is that? Well, our value proposition is pretty simple: build, publish, and test landing pages without IT. That's part of it. It's easy to understand, but then also, the call to action's right there. They're like, "Oh, I get it. How much does it cost?" Right, that's kind of probably the normal behavior.
This is a PPC landing page we did where this is 10,000 pixels long, and the CTA was at the bottom, right? They scrolled all the way down because there wasn't something obvious for them to do there, and they read the rest of the content, they knew more about us by the time they got there because we're encouraging them to hunt a little bit.
So this is a conversion rate according to how far from the top of the page your form appeared, the top of the form, not the call to action. And these are 250-pixel zones. Right, so we're going to go down here. Seems the sweet spot is in Zone 3 here. Specifically, the best distance from the top of your page to the top of your form is six. And I'm not fucking with you. This is true facts here. My CTO shared this data with me. It's like 665.9. I'm like, "Yes, this is so good. I get to put more shit in my slides that's fun."
So, yeah. It can encourage people to explore and read more of your content. They can become better qualified if they do that because someone who's impulsive and goes, "I get it," click. They might not be a good customer at the end of the day because maybe they missed something that would have de-qualified them. Or maybe they didn't learn enough about the features that went against the product and they can't find it. They think it doesn't exist and they might leave. So having people read that extra content because they're looking for a button is actually a good thing.
Okay, design for ideal. This is something… By that I mean like, well just kind of what I was saying, good segway I didn't intend. Getting your ideal customer, someone who is well-qualified who needs the product, understands it, or service, whatever it is. An example, like when we hire people at Unbounce, if you send us your CV, we just throw it away. We don't want it. We just tear it up if it's physical, or just delete it if it's digital. We want you to open a free account and build a landing page to tell us why we should hire you. And it's great because what that does is it gets rid of all the people who are just throwing their CV to every marketing software company in town, and it makes people think more. They do amazing things to sell us on why we should hire them so we get exceptional people. That for us is designing for ideal, getting our ideal employee.
And I saw an example of something where the field label on a form had profound impact. I'm like, "Huh, that's weird. I want to try an experiment." So for me, this is just a simple free course that I put together. All you need's an email address, and I was thinking, "How can I change behavior based on that label?" And I wanted more pro email addresses. By pro, I mean [email protected] because then I know that A, I can see, "Oh, they just signed up. That's cool." Or I also know when I do email marketing later on, that you're getting my email in your place of business, in your business email account. Not when you're in the bathroom, in your Gmail, Yahoo, whatever it is. It just becomes more targeted.
So I played around to see what would happen. Email addresses, 41% of them were pro. Your best email address, 47. Work email address, 50%. But then just by changing one word from the initial email address, just saying business, business email address, 65%. That's a massive lift in the number of professional identifiable email addresses coming in, which is super great. Then maybe you can be profiling in the software you use that can enhance... I don't know, maybe there's some fancy shit they do that I'm not aware of. But it's good to have those email addresses in that form.
Persuasion, does anybody know what the most persuasive word in the English language is? Because. We are primed as children to believe what comes after the word because. When you're speaking to your parents as a kid, and you're like, "Daddy, why is the sky blue?" "Because..." Or, "Mommy, why is Daddy spending so much time with the babysitter?" "Because he's an asshole. Sorry. You shouldn't hear that word."
So again, what does the data say? This is the conversion rate according to the number of times the word because appears anywhere on the page, so not just in a call to action or anything. So 0, 10.7 on average. Oh, it's going down. Whoa, then there's this big spike at the end. Apparently you need to say because 19 times to be effective. This is a low sample size, for humor.
That's going to be one of those like spammy, long sales letters that's like, just saying because, seeing lots of things multiple times. But it's just for fun. You can try it.
Okay, so someone said free. How persuasive is the word free? So I looked at data again. This is the conversion rate according to the occurrence of the word free. No mention of free on the button, versus a mention of free on the button. No mention of free, 10.8. Then when you see free, it drops down to 9.24. How about get started, versus get started for free, down 6%. Maybe this is because people don't believe things are free anymore. If I'm giving you my email address, I know that's an exchange of social currency. I'm giving you something, and I know that you're going to your marketing software to send me a bunch of emails. So maybe that's what's happening because I've seen it in lots of different examples where free is just not working anymore.
All right. Let's finish off the anatomy part. Here are shots and photos of people looking at things. Now, we've all seen that case study right, which everybody's just done to death where the baby looks at the thing, and so you look at the thing. And because you're looking at the thing, you look at where the thing's looking and you buy more of the thing because of the baby, right? Something like that.
Someone shared this page with me. They want my advice on it. Well, at first I said, "Well, where's the headline?" They're like, "Oh, up here." It's hard to read here, but basically it's an online Master of Communication Management. That's what this is about. It's a course. It's Masters Recourse for Communication Management, ironically. They're managing their communication horribly on this page. But I was more caught up in this, with this photo of the woman there.
So I wanted to run a test again to see if people knew in five seconds two things: what course and what level. Eight percent knew what course it was, and 22 knew it was a master's level. I'm like, "Wait, maybe this has something to do with like the hypnotism or something." Angie Schottmuller has a great example here where when you have an ad, having direct eye contact is great because you're on Facebook or wherever, you've got all these distractions, and someone's looking at you. So you look at them. And you go, "Oh, that's interesting. I'll click on that." When you get to your landing page, if someone's doing this to you, then you're going to do the same thing. You look at them. And if… Like we're very tribal. We trust people that we can relate to. If this isn't someone that you relate to, or maybe it's like really bad stock photography, and you're going like, "This is bullshit." And you go like, "It's just turning me off because it doesn't seem right." You might not even read the headline. You might just subconsciously go, like, "I don't like being here." And you might just leave.
So, I wanted to run a little experiment again. So yes, attention-driven design, these 23 principles. I almost forgot about them. They're great at focusing people's attention on what you want them to do. And the great thing about principles just from a design perspective, nobody's being taught to design for conversion, ever. This has never been a consideration. They design to win awards or this great UX design, but visual design typically has just been making things look good, which can be great sometimes. But it's not been a thoughtful process for getting people to do certain things, so that's what these are for. And the great thing about them is that it establishes a shared vocabulary. So you can talk with your designer or another marketer and say, "Well this needs a bit more of that. I think if we applied some of this, it might help." Instead of like, "I don't like it. I don't like the color. I don't like this," which is how designers worked for 20 years.
Anyway, so direction is the one we're talking about. So, I got this guy. I photo-shopped him in here. So, he's looking at the headline. I thought, "He's like the baby. If he looks up there, everyone's going to take more of these courses." So I did that and I asked the question again. While staring at the headline, it doubled the number of people who knew what the course was, and the level went up as well. I'm like, "How can I make this more ridiculous? I'm going to put a green arrow on here, and just really take them up there, just you know, just for shits and giggles. Who knows, right?" It doubled that again. I got a lot...you get, like people write answers in, and a lot of people are like, "Well, I saw what it was but I'd never take that course because of the stupid green arrow." I'm like, "Good, good, good. I wouldn't want you there." So you see, it's gone up again. But this can also be detrim...So, the lesson there. Have people looking at that. If you're going to have a person, get them to look at something important because it can go wrong.
I got out the elevator in my hotel yesterday. And I saw this. Okay. I get so angry in hotels. They fuck with me all the time. Of course, it's not for me. It's not just me, but I take it personally. I look at this and… There was a woman who got in the elevator before me. I let her out first. So now I'm following her, and I didn't have to put my card in because we're on the same floor. So now she's like, "Is this guy even allowed to be here?" And I'm following her because I went the wrong fucking way because of this sign, and I didn't turn around until she went in her room, and I'd seen enough of the numbers to go, "Oh, this is not working. It's over there. Oh, my God. Fucking pervert. This is..." So I get to my room, I'm like, "I want to run an experiment, damn it."
See, this is the great thing about these types of experiments. You can see something and go, "Oh, I want to experiment with this," and you can figure out really quickly if there's a problem. Like, I've done all of this, you know, yesterday. Thirty-three percent, including me… Right, so I did the experiment. Yeah, I said, "You..." I missed this part because it was in my head, "You just got your car from a hotel and you were told you are in
Room 324." You can tell that this is not very well planned because that's my hotel room. So, I said, "Which direction would you turn to get to Room 324?" And based on this, 33% of them got it wrong. And Michael Argard, our head CRO at Unbounce, I sent it to him; he got it wrong too, just by looking at it.
So, I mocked it up. I wanted to run it like that but I ran it as a graphical exercise here so that I can change it. So this is the exact same thing, using the same kind of highlighting and spacing and everything, exactly the same result, 33% were going the wrong direction. So then I applied a few design principles: whitespace, contrast, grouping and interruption. These are four of the things. So with this one, contrast. So, now I've separated the title, because there's nothing to do with the rest. It's, "This is where we are. This is where we're going." They're semantically different. And then, a bit of white space, so there's more space in between them. And grouping. So this arrow's grouped with this and this arrow's grouped with that. It's easier to comprehend, or I'm hoping anyway. Only 8% of them went the wrong way.
Less perverts in the hotel. That's a good thing.
Then I did this one. I put some interruption in there. So I interrupt device. You know, it can be even one of direction. It changes what you're thinking, it breaks it apart. Everybody went the right way. Design for the win. So, I like shitty hotels. The hotel's fine. It's just good for examples. Yeah, I won't get into that.
I've got video. Lots of people have videos on their landing page, on their websites. They're like, "How do you do it right? You know, how does it impact conversions in different ways?" Well I'm good friends with Wistia, and they shared a bunch of their conversion data with me.
Oh, before that, you use two kinds of video. You can use like an animated one, like an explainer video, or you have live action video with people. Who should you put in your video? Who do you trust most based on who it is? Don't put the government in your video. Try not to put your boss in there.
They're not seen as very trustworthy. Our tribes, people like us, technical experts and academics. They're the kind of people you want to have in your video to be persuasive. How big should it be? Again, it's a common question. This is from Wistia. Apparently, 540 by 400 is the ideal size to increase engagement. Maybe this is, I'm not sure why, maybe it's because if it's tiny, you're like, "I don't want to watch that. It's too small. It's going to be awkward." And if it's really big on the page, maybe it's kind of overwhelming, in the way and you just kind of want to get past it and read some stuff, because maybe you can't watch a video where you are.
Would you watch this video? Maybe. It's not very enticing. How about now? Okay. Unbounce Co-founder passes out critiquing landing pages while drunk. Happens all the time. It's in a familiar thing. It's in a laptop. Well, it's a video, it's got a big shiny button, I look a bit weird, and it's only eight seconds. A lot of persuasive stuff going on there. Because when we arrive on a page... Well, here's a stat. Now, I believe the premise of this stat because when you arrive on a page and you see a video or something that's a big shiny object, you look at it. If you can't play it for whatever reason: don't have your headphones or whatever reason, if there's a compelling caption beneath the video, because that's the first thing you look at. You're like, "Oh, it does that? No way." I'm going to want to play that video. I might put my headphones in or whatever. This 300% stat, I've chased this around the internet. I can't find it. I'm just being truthful. It came from a KissMetrics blog post, but there was a lot of supporting evidence around it, so I believe in the concept, maybe not the number.
Again from Wistia, where, just like the form, where on the page do you put your video for highest engagement? Well, you can see, in this case, above the fold because it cuts in half as soon as the video gets put down below. And that's probably because you know it's an important part of your story.
You know, people kind of need to hear it, but be careful though. In my experience, only like 10% to 15 % of people typically watch videos. So your page has to communicate well without it.
Captions are good for helping that. Turnstiles are what Wistia calls that form that appears in your video, and you've watched a bit and it goes boop.
And it's going to go, "Email to continue." They're kind of annoying, but they work for getting email addresses. So where should you put that? Don't put it at the start, because then people get super annoyed and they leave. Don't put it at the end, because then they're like, "Ha-ha, I've already watched it. You're not getting my email." So where should you put it? Apparently, according to their data, and I think it's from like 80,000 pages they did this from, 14% of the way through. So I guess it's been enough to get their interest. They've watched part of your story, that's a good time to ask for the email.
Social proof. I was critiquing this page for someone. It's a photography course. All right, and these are the testimonials. And I got down, I was reading them… Oh, this gets back to the hyperbole part of the clarity equation. "Megan has been a lifesaver." No she hasn't. It's a photography course. "Reaching out to Meg is one of the best things I've ever done." You must have a shitty life. Again, the more hyperbole you put in your copy, the less opportunity you have to tell the honest truth about why you're special. You're just kind of padding it with nonsense.
You should be really careful what you put inside quotation marks. They just look this way. He's keeping guard. How mean is that? We let you sleep here, but you're not getting any money from me.
Back to free. Would you take...you'd bite your hand off or something. Okay, so back at this, analyzing it further. Why are they not good, other than the hype? Nobody's holding a camera. Ah, photographer, having an off day, are we? Just left it somewhere? For me, they're all women. Can I join? I don't know. All the photographers, so I was like, "Oh, is this a women's only course? Great if it is." But I didn't know, so the clarity wasn't there for me to understand whether it was applicable for me.
And where's the evidence of success. For social proof to be effective, the most important part is that it demonstrates the transformative effect of the user journey. Like using this took me from here to here. That's why those horrible, scummy before and after photos work. Because people believe it when they buy into it. And if it's true, then it's super powerful. This is how I would have done it: holding a camera, specificity, which is a big part of clarity. After Lesson 2 on exposure, my understanding of how light works using ND grad filters, very specific, and how to accurately capture light means I'm no longer freaking out at sunset, trying to balance the sky and foreground. It has benefit and specificity. That's an amazing testimonial and transformation. Right, this speaks to that. So, like I would take this course just based on that testimonial.
Alright, finally, your call to action. What should you write on your button? Like I said, I was in Montreal for a while. It's really cold there in the winter. It's horrible. And I just met a girl fairly recently. I know when it was. It's May 17. We became official girlfriend-boyfriend October 17. So, I was researching like, sunny places to go to get away from the cold. And I came up with this one. And I'm like, "Oh, this looks interesting. I'll click on this." Weirdly, it took me away to the Air Transit home website. I'm like, "Now, that's weird." So I look around, and we're like, "This is actually kind of interesting. I think I might book this. Look, book early and save. Save up to $400 per couple per week." So we're like, "Okay." I know it's a statement, but I wanted to click it because it was what I wanted and there's no button near. I'm like, "How do I book this thing?" And then, after a bit of hunting, I go, "Oh, there's a little tray down here. If I click that, I bet it opens, and I bet there's a button in it." My years of experience tell me that's the case. Yes.
Save up to $400 per couple per week. So it's the same statement, but it's more of a button now. So I click that, closes the fucking tray. I go back and I go, "I'll do the other one. I mean, it's for a single parent. I'm not a parent, but I click it just in case." Closes the tray again. I do this for like a minute and a half. Something must be wrong with me. I'm like, "Where can I click on this damn website?" What's up here? Social share buttons. These are going to be so good. I'm going to totally share this on Google Plus about how great this non-booking experience is. So what have we got here?
Oh, there's email. I'll email myself, like, "Never go back there." I might print it out. Then I saw the QR code. Why is that there? I click it. Sure enough...
I have a QR code reader on my phone. Most people don't, right. Because they're not native. They don't come with them. I'm just morbidly curious. So I pull out my phone, scan this thing, it gives me a URL. I'm like, "Huh. I'm onto something here." Feeling better about myself already. And I click on that. I have seen QR codes on websites, and I have scanned them. Do you know where they take me? Back to the website. Which is exactly what it did, except now, there was a CTA on the page, on my phone. This is not where I’m going to throw down three grand for a sunny holiday. I would have done that on my desktop. I'm not really ready to do it on my phone. I love shitty websites. Bullshit. It's total bullshit, and there's too much bullshit in the world. If you see any, send it my way for my next talk.
First rule of CTAs… Now you're probably thinking, "Well, that's too basic. Everyone has a CTA." Well, we just saw there, but also, I bet I could take anyone here, and look at 20 high-traffic pages in Google Analytics of your website, 10 of them would have old content, and 10 of them wouldn't have a CTA. Will you do it? Will you search what is a landing page on Google?
Yeah, we own that. Number one in Google. And it's just a bunch of information, which was old, and a bunch of links, because you're thinking SEO. See how I quoted SEO like it's not a thing? You know, because we're thinking it's interlinking great, and we've got a side nav. It's like, okay. We're like, "We need a goal for this page. One page, one purpose, period." That's how it should work. We need a goal for it. So we know from our analytics that if people will go to the templates page, the higher likelihood that they will convert.
So, take away the side nav, take away all these internal links, and just put a button saying, "Go look at the templates," 171% increase in people getting there. So now, we've optimized the hell out of that very high-traffic page that was just sitting there without a CTA.
What should you write on your button though? A lot of people have... This has been a debate I've seen raging on blogs for a long time. Well, we have some data now. Should I say my thing or your thing? Okay, so a button that has my in it versus you’re in it. My, 12.76. Your, not so good. Maybe it feels more personal when it's my thing. Maybe that's why.
That's not supposed to be in there. That was a note. Okay. So, let's try some urgency. That's why I put it in there. Urgency, no, no, no. Download versus download now. Now added 8.7% increase just by saying now, a little bit of urgency. Get started, get started now. Same thing, 20% lift this time. All right, we're talking about Frank. I feel like I said Frank's a dipshit.
He doesn't know what he's doing. So, how about... We know buttons are for clicking, right? Everybody know that you click buttons? We all know that, but what if you just ask people to click? So, no mention of click versus a mention of click in your call to action. Bam, 48% lift on average of buttons that include click, speaking to that slow-brained Frankenstein guy. Let's take it further: click versus click here. Like, don't click over there. Click on here, on the button, the clickable button. Click on that. Went up again, right. I don't know why people like to be told what to do. Maybe especially for later in the day when your energy levels depleted, all the cognitive strain throughout the day, you need a little more guidance perhaps. I should break that down by time of day would be interesting.
All right, that's a lot of data and a lot of design. Now, I'm going to build the ultimate franken-page. Okay, we've got Frank, the world's best-looking monster, hype. We're not going to link that to anything. We're going to put a headline and a subhead. We're going to flip the order of them. We'll put our main pro area, we'll do as a slider because CEOs love those and clients love those because other people have them, but I don't like them. So, instead of having the stupid white dots, we're going to put tabs there that describe what each of the slides does. And then we're going to put a heat map on there, and see which one people care about. It's number four. We're going to delete the rest of them, and just have that because that's what important to our business.
We're going to have a video with an expert in it. It's going to be 540 by 400 with a caption and a CTA 14% of the way through. We're going to keep that above the fold because it's part of our storytelling thing. We're going to have a form here with four field labels. For fields, we're going to make it seven. Ugh, but then to crush it in, we have to make it inline. I don't like inline field labels. So, we'll expand it again, because I'm not scared about how far down it goes. So, I'm going to make it 666 pixels down the page. I'll make it business email address, so we get more pro accounts, and let's look at our testimonials. Let's make it more tribal, people I relate to, and will make them transformational and specific. We'll change it into an actual button-looky thing, but then we'll tell people click here to download my thing now. We will take our hero shot guy, and we'll make him look at the call to action. We'll put a stupid arrow in there, and we'll say because 19 times.
This landing page, ladies and gentlemen, will convert like a mother fucker. Guaranteed. If anyone wants to apply for a job at Unbounce and you build that page as your application, you're looking at that, that page, guarantee I will hire you. Okay, so all the slides are here if you want that cool data bitly.com/Frank-Dublin. Thank you very much.