.png/webp/500)
Lessons
Chapter 1: Course Introduction
1What to Expect
01:31 2Class Folder
00:37Chapter 2: Calculating your Conversion Rate and Setting a Goal
3Defining Conversion Rate
03:19 4Calculating Your Conversion Rate
10:38 5Understanding Industry Benchmarks
06:48 6Working Back from Your Revenue Target
04:44Conclusion
00:34 8Chapter 2: Quiz
Chapter 3: Removing friction from your funnel
9Introduction
01:21 10The Marketing Funnel
18:34 11Streamlining the Checkout Process
03:03 12Improving Site Speed
05:16 13Making Your Site More Accessible
08:42 14Conclusion
01:08 15Chapter 3: Quiz
Chapter 4: Optimizing your landing pages
16Introduction
01:22 17Homepage v Landing Page
18:23 18Encapsulation
09:50 19Urgency and Scarcity
03:28 20Social Proof
02:56 21Conclusion
01:26 22Chapter 4: Quiz
Chapter 5: Experiments and Optimization
23Introduction
00:49 24Why AB Test
01:22 25Setting up Tests
08:10 26Measuring Results
04:07 27Chapter 5: Quiz
Chapter 6: Conclusion
28Leveraging Fiverr Sellers to Improve your site's Conversion Rate
07:18 29Fiverr Seller Pitch
08:30 30What We Learned
01:52Final Quiz
31Final Quiz
Lesson Info
Encapsulation
take a look at this picture, where does your eye go? The answer is probably the tunnel's exit. This design element is called encapsulation and it is critical to improving your site's conversion rate. Encapsulation is a design technique where you hijack your visitors, I to have them focus on something when you land on a page like this one. For those of you who remember what Yahoo used to look like. There are so many links and so many things that you can click on that you kind of don't know where to go. You might check your email, but you could also check out some news or park your domain, compare it to this site. Our dear friend, google. The clear search box in the middle of the page leaves little room for exploration. The action google wants us to take is so clear type your search query in this box. Google's homepage is a great example of encapsulation. There are three main ways to leverage encapsulation in your landing pages first with a very clear call to action or C. T. A second by ...
leveraging directional cues and finally by using white space in a smart way, let's start with the C. T. A. A call to action or C. T A. Is the key action A marketer wants you to take on a page. The effectiveness of a C T A. On a page is a direct result of encapsulation. I like to summarize what makes for a successful C. T A. With three letters Oh B N V O stands for one, there should be one primary action. You want to drive with your page, I would recommend this action to be a reflection of your business goals, it could be sales, driving leads, demos, etcetera. When you write it down, start with a strong action verb, so just get or claim bonus points. If you use any of these magic words, the word free is especially effective in driving clicks to a C T A. Once you have defined your one action, make that clear with a button. B is for button not a triangle or a circle but a clearly defined button. There is a ton of room for creativity when it comes to designing for conversion but this is one element I suggest you don't get creative with. Trust me buttons work, don't mess with them. Also make sure they're big enough for people to see them. Finally your C T A should be visible. The size and location should be logical and very importantly you should leverage color to create a contrast between the C T A and the background. Now let's take a look at some examples, let's start with this example from email provider G M X. Do they have one C to on this page? No, they actually have several, They even have an ad sitting right on the header, which makes it really hard to understand whether this is their primary C T A or not. Second is there C T A A button? It's hard to answer this question since we don't really know what their primary action is. But looking at the sign up and log in buttons in the top right hand corner. I'd say they succeeded at using buttons. Unfortunately, these buttons are not very visible For all these reasons. I give GM Xa three for poor. Now, let's take a look at a better example. Staying in the realm of email. Marcato here does a much better job with C. T. A. Placement and color contrast. The purple on white really pops so your eyes go straight to the buttons. Great use of encapsulation, but I'd say the button sizes are a bit small. In addition they have several competing actions on this page, making it hard for me to know which one is most important. Do they want me to register for their conference, learn more or request a demo? I'll give them a two for average for this reason. Before we move on to a better example, just one quick note on secondary Cts, take a look at the two buttons at the top right hand corner of this page. View a product tour and sign in. These are two competing C. T A. S. But the design treatment for each of them is very different. One is a button. The other one is a text link. If you feel like you need multiple Cts on your page, which sometimes happens. This is definitely the way to go, make sure your secondary call to action is designed in a way that makes it crystal clear to the user that it is secondary. This is what we call a muted C. T. A. Okay, finally an excellent example. Male chimp. Their call to action is clear. Their buttons are visible and contrast with the background. The buttons are also large and sized and placed logically on the page. You'll also notice that in addition to starting their CT a copy with an action verb, which is an important best practice. They also use the word free. This is again a powerful word that can help you lift conversion rates for your landing pages. We could talk about CTS all day, but let's move on to another aspect of landing pages that can help with the encapsulation effect implementing directional cues. Directional cues are visual indicators that point to the focal point of your landing page which is often the C. T. A. They are important because they help guide your users to the action you want them to take. Let's take a look at some examples. There are two main types of directional cues you can use on your web page is the first is the most obvious one. An arrow second. You can use the subject in your photography or illustrations to draw the eye to where you want it to go. If you're choosing to use photography in your landing pages you should know. Faces carry inherent interest in other words. When people see a face, their eyes are almost immediately drawn to it. This can be challenging as it will compete for interest with your call to action. So in order to make the most of your photography as a way to drive conversion, make sure faces are always pointing to the call to action. This example from Bose is a poor use of directional cues. The human subject is staring at his computer and the C. T. A. Is sitting to its left. The human and the C. T. A are competing for attention here. This would be a much more effective design if this man was looking directly at the C. T. A, compare it with this landing page for kin. They're using photography as a backdrop and they added a dark filter on top so that the text and the C. T. A. Pop color contrast. And as you can see all three people are staring directly at the C. T. A. So it's almost like you have no other choice but to look directly at it now. How about this example from Chipotle? It does a great job with directional cues. That's a really big arrow up there. But anyone who looks at this page can tell that there's just something wrong here. This is the topic of our next and final design element for conversion. The use of whitespace whitespace, you have probably heard about it before, but what is it exactly whitespace is the part of your page that's left unmarked. It doesn't have to be white. It's just the part that doesn't contain any text images, et cetera. In this picture of coffee beans, there's absolutely no white space. So you're I can't really focus on anything at all. It kind of goes all over the place, compare it to this picture. The space between the coffee beans gives each one some room to breathe and shine on its own. This is what you should do with the different elements on a landing page. The landing pages on your website can contain many elements text images, videos, links, ads, gifts you, name it. White space ensures that all the elements have room to breathe. So you're I can actually focus on what you wanted to focus on. This is the Go Daddy Landing page in 2016 you can see it contains many of the elements we just went through but they're just so crowded. It's hard for our eye to focus on anything. This is the Go Daddy landing page today. There's still a lot going on here, but the presence of more white space makes a huge difference. This gets a two for average. Now let's take a look at an excellent example. Can you tell the difference whitespace makes all the elements on this page seem to be in balance and your I can scan them quickly and ultimately focus on the one you're trying to drive attention to the call to action in summary. Creating an encapsulation effect is critical to the effectiveness of your landing pages. In order to do this, you can rely on three tactics, your call to action or C. T. A. Button, directional cues and whitespace. Now let's move on to a key psychological component that drives conversion, urgency and scarcity.
Class Materials
Bonus Materials with Purchase