Skip to main content


Lesson 18 from: Conversion Rate Optimization: Convert Visitors Into Buyers

Rita Cidre

buy this class


Sale Ends Soon!

starting under


Unlock this classplus 2000+ more >

Lesson Info

18. Encapsulation

Lesson Info


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

CRO Tactics Cheat Sheet.pdf
CRO Formulas and Definitions.pdf
Fiverr Conversion Rate Optimization Worksheet - Rita Cidre.pdf