Table of Contents
Designing and building landing pages that converts is tough. Visitors will give you only one chance and their attention is quite limited. This is why I decided to spend last couple of months designing and building landing pages. During this time, I also worked with four different startups to test my hypothesis. The result is a couple of lessons I will share with you in this two-part series. My goal is to help you design and build perfect landing page. Let’s begin.
The rest of tips are in part 2.
Lesson no.1: Fold is relative
Let’s start with probably the most controversial statement you will find in this article. Fold may not be that important. Jacob Nielsen, from Nielsen Norman Group, did research to explore the topic of fold. The result of this research was quite clear. Somewhere about 80% of visitors pay attention to information above the fold. The remaining 20% are willing to go beyond this level. This is why the vast majority of landing pages are constantly pushing the CTAs into this area. This is quite reasonable. You want to show the CTA to those 80% of visitors because more views equals higher potential, right?
We don’t even have to limit ourselves to the age of Internet. Let’s go back to the previous century. Do you remember when people were getting the most of their information from newspapers? Back then, The Father of Advertising, David Ogilvy did similar research. In this research Ogilvy focused on how people read advertisements. The result of this research was that, again, about 80% of readers read only headings. Only 20% continue in reading after they read the headline. In other words, if you would remove the body text from all ads, it would impact only 20% of readers.
Yet, this is not all what emerged from the Ogilvy’s research. Ogilvy also found that the biggest decline in the number of readers occurs in the first 50 words of the text. When you exceed this level, the decline starts to slow down. You are relatively safe until you reach another level somewhere around 500 words. If you keep the number of characters per sentence to 75, it gives us about six lines of text. That’s one longer paragraph. In most cases, you can squeeze this into the area above the fold on average resolution for desktop.
Going beyond the fold
All this sounds great. Yet, there is just one problem with these studies. Both of them ignored one important factor we have to take into account. This one factor is visitors’ motivation. This was one of the most important findings I got from work on 50 landing pages and four startups. It doesn’t matter if you have CTA above the fold or not. If visitors are not motivated to click on it the will not do it. It is as simple as that. How can you motivate visitors to take action and click on the button?
One way is going beyond the fold and give visitors what they want. What do I mean? The majority of people on the web are looking for the same thing. They are looking for information. This desire can be strong. According to psychology, we can even become addicted to searching for information. How can you fulfill this desire? Give visitors enough information about what your landing pages sell. This is where good copy comes into play. The more difficult group of visitors you work with, the better the copy has to be. Most visitors want to see clear benefits and the value will they get.
This means that you have to support your landing pages with reasonable amount of copy. And not only that. Your copy has to be well-written. Otherwise, you will not be able to keep visitors’ attention and interest from the main heading above the fold through the page to the final CTA. I can’t tell you precise number of words you should aim for. It depends on the complexity of your product and how informed are visitors. Some landing pages will need only few hundred words. Other landing pages will not survive without copy of a thousand words.
Lesson no.2: People actually scroll
Another quite popular myth in web design is that people don’t scroll. Clicktale did a study on about 100.000 pages. The result was quite interesting. About 76% of the pages visitors scrolled to some extend. 22% percent of these pages visitors scrolled from the top to bottom of the page. The conclusion? Today, it’s natural for people to scroll. This is another reason why you ditch the idea of fold. Don’t try to squeeze as much content as you can above the fold. Instead, use whitespace as your advantage and distribute it thorough your landing pages.
There is another good reason for using continuous and lengthy content. It can improve usability of your landing pages. Let’s say that your landing pages contain some longer form of content such as article or a tutorial. In that case, I think that scrolling work much better than splitting the content to several separate screens or pages. If you are still not sure about whether longer landing pages are useful, I will give you another proof. 37signals done an interesting A/B test to test single-page conversions. The result was 37.5% increase in net signups. So, will you give it a shot?
This third lesson will probably be another thing in this article some people will not be able to swallow. In some situations, it might be better to remove the navigation of your landing pages. No, this is not a joke. And, no. I’m not talking about hiding navigation behind the hamburger icon or something like that. I suggest that you remove the navigation completely. The reason is that once a visitor arrives on your landing page, your goal and main job is to keep them there. This is much harder to do if your website has navigation filled with links.
Another reason for removing the navigation is to lower the amount of distractions. You want to create seamless experience and allow visitors to focus. Again, this will be hard if there are navigation links that enable visitors to move about your website. Your goal is to motivate visitors to stay on the page and go through the content. Otherwise, you will not be able to communicate what benefits and values will they get. Every link in navigation is a reason to abandon the page before doing any action or conversion. This is something you probably don’t want.
Do you want to reduce this probability? Do you want to increase the conversion rates of your landing pages? Then, give this idea a shot. Remove the main navigation from your landing pages for a period of time and see the consequences. If you are afraid of doing that, remember that you can always put the navigation back.
Lesson no.4: Less is really more … sometimes
Nowadays, there is one interesting trend in web design. Almost every website uses some kind of slider or cool animated graphs. We also shouldn’t forget hi-res stock images of happy people, usually using some device. If you want to take this game to another level, full-screen videos are also a good choice. However, being trendy may not necessarily mean being useful. In a fact, blindly following web design trends can sometime cause harm.
German architect Ludwig Mies van der Rohe adopted and followed the motto “Less is more”. I think that we should do the same. Please, don’t get me wrong. I understand that jQuery sliders and stack of graphs can be very alluring. I also understand that you think that stock photos will make your landing pages look more cool or modern. The problem is that all these decorations are often not improving visitors’ experience. What’s worse, these decorations can start to backfire if you overdo it. Meaning, they can significantly decrease the performance of your website.
There is also another hidden price. Every element on your landing pages has will attract attention, at least to some degree. Are you sure you want to distract the visitors from taking the action? If not, you should think about everything on your website. No detail is too small. When you design your landing pages you should favor function before everything else. Every element should have specific purpose and serve some concrete goal. Else, it is possible distraction you should remove.
Does this mean that you should strip the design of your landing pages to bare minimum? Not necessarily. You can still build beautiful eye-catching website that will work like a conversion magnet. Just make sure to not overdo it with decorative elements. Also, keep in mind another important factor, which is speed. Let’s face it, speed matters. A landing page that loads quickly will create much better experience and response. Hence, set a performance budget and stick to it.
The upside is that optimizing your landing pages is not hard or time-consuming. You don’t need to be an expert to do it right. Let me tell you some of the easiest steps you can take to improve the speed of your website. First, make sure to compress the image assets you want to use. There is a plethora of tools you can use to get this done. For PNG files, there is pngquant. In case of SVG, you can use svgo. For JPEG files, JPEGmini is my favorite tool. The second step is to minify your CSS and JavaScript files. Third step is to use lazy loading technique for images. This is bare minimum.
Use just one type of CTA
Let me ask you one question. How many types of CTAs do you use on your landing pages? Take a look at your website and count all the “Learn more”, “Sign up”, “Try it for free” and “Get started” buttons. Think about each of these buttons as one type. So, how many types of CTAs do you have on your landing pages? Chances are that your website will feature at least two types of CTAs. I think that this is a bad practice. I like to think about every CTA as one direction you can choose.
From this point of view, when you have two types of CTAs, you can choose only one. You can either go left or go right, but not both. In other words, if one CTA gets your attention you can’t give your attention to other CTA. When you click on one CTA you can’t click on another. Also, when you use more than one type of CTA, you basically ask your visitors to do two different actions. What do you want visitors to do? Do you want them to “learn more” about the product? Or, do you want them to “try it for free”?
You are right. You do have to tell visitors enough of information about your product or service. Otherwise, they will hesitate to take any action. However, you can do it in a different way. You can do that by writing all these in the copy followed by one clear CTA. Also, avoid using “Learn more” CTA along with lengthy copy. The whole function of this button is often only to scroll the page for a few pixels. Visitors will scroll on their own if they will want to. What’s more, another CTA will only deflect attention from your primary CTA.
Embrace the whitespace
Another way how you can focus on less is by embracing the whitespace. Whitespace is one of the most important elements of layout composition. When you use it in sufficient amount, it can help you create better user experience. In design, whitespace is every area that’s left blank. It is the space between individual objects and text in the layout of your landing pages. What is one of the most important benefits of whitespace? It will help visitors focus on what’s important. They will be less prone to being overwhelmed.
Improving balance and visitors’ ability to focus is important. Yet, it’s not the only benefit you will get. There are many reasons for embracing whitespace. First, whitespace allows for easier readability and scanability of the content. Second, it helps you establish hierarchy between elements in the layout. Third, it guides users on a page. Lastly, designs that embrace whitespace evoke feeling of elegance and sophistication. In summary, whitespace will increase legibility and comprehension of the content. What is the easiest way to improve the whitespace?
A good idea is to use rule of thirds. Let’s assume that the main content is taking up 2/3rds of the whole space. Then, you should use the remaining 1/3rd as a whitespace on top and bottom. If you are in doubt, add more whitespace rather than less. Also, think about the principle of proximity. This principle states that when we see elements close to each other we assume that they are related to each other. If you have some information that are connected, group them by using whitespace. On the other hand, use whitespace to divide unrelated content.
Keep the talking relatively short
The last thing I learned from working on dozens of landing pages is a bit relative. However, stay with me. In some situations, I found that keeping the copy brief was beneficial. In other situations, the opposite was true. At first, I thought that this must be some nonsense. You can’t be brief while also voluble. Can you? Well, yes you can. Although this may seem contradictory, it is doable. You just have to make sure everything you place on the page is relevant and has some purpose.
Let’s say that you want to use landing pages to promote yourself as a designer. You want to briefly describe what can you do for potential clients and how can you help them. Then, one or two paragraphs will be enough to arouse interest of potential clients. You can make it even shorter. Many designers are able to get attention with catchy USP shorter than two sentences. On the other hand, there are businesses and products that need two-page description.
Focus on minimum effective dose of information
In both cases you are still focusing on the minimum effective dose of information. This is what I meant by saying that you can be brief while also voluble. The idea is that it doesn’t matter whether you use 300 words or 3,000. What does matter is whether all these words serve some purpose. Take a look at the copy on your landing pages and read it from the beginning to the end. Then, ask following questions. Are all the words you used necessary? Can you make it shorter? Is it possible that the copy isn’t descriptive enough? Should you make it longer?
Take a look at your landing pages from the view of first-time visitor. Is the content easy to understand? Could you take an action on the basis of it? It can be difficult to read the copy while being objective. You are too familiar with the subject and you might also be too attached to it. For this reason, I have another suggestion for you. Show the copy to someone who knows nothing about the subject. First, let that person read it. After that, let her briefly summarize the benefits. When she can summarize it, she really understood it.
You can, and should, also ask for suggestions that could help you improve the copy. A word of caution, never rely on opinion of just one person. In UX design, we should always test our assumption with a group of at least five people. When number of people exceed this number, you’ll start to get repetitive feedback. If you want to test your copy, I suggest that you do the same. Let five people not familiar with subject read your copy and summarize it. Remember, don’t ask them if they understood it. Ask them to summarize it.
Polish your value proposition
There is one last thing that’s relatively related to this “less is more” approach. It is using the right type value proposition. The best description on landing pages offer more than just a list full of features. It also clearly highlights the value of the offer. This type of description gives visitors reasons that are strong and compelling. As a result, visitors will be more likely to take your desired action. Isn’t this what you want to achieve? Remember, always emphasize how your offer addresses a specific problem, need, or interest your target audience has.
Lesson no.5: Don’t be afraid to use highlights
In the beginning, I was often afraid to highlight or emphasize the key benefits. I was afraid that doing so would make the copy too pushy. I was wrong. The majority of people who will visit your landing pages will scan them first. This is a fact. When you visit some website, you scan and skim the content first. After, you do that you decide whether the content is worth reading or not. When you skim the content, you focus on specific visual cues such as headings and bold text.
How can you make the benefits more visible for people who scan and skim the content? You have to highlight them. What’s the best way to highlight these important parts of content? You can use heading and subheadings with a brief paragraph. You can also use a list with a few bullet points. Or, you can make certain parts of text bolder. You could also use italics. The problem is that people could overlook italicized text because it is not so prominent. Therefore, favor the bold.
Use highlights, but don’t overdo it
When you decide to use highlights, just make sure you will not overdo it. Otherwise, you will neutralize the effect highlights could have. It is just like setting goals. When you decide that all your goals are important, the importance loses its meaning. This is why you should always have only one goal of the top priority. Sure, you can have some additional goals you have to get done, but these are secondary, tertiary, quaternary and so on. Use the same approach to highlights.
Let’s say that you have three paragraphs of text with five lines of text. Every line contains between 60 to 75 characters. This will give us 375 characters per paragraph. A good rule of thumb is to never highlight more than 10%. 10% of 375 character gives us somewhere around 37 characters. This is, I think, enough to highlight the most important information in the paragraph. If you need more than that, I would think about the copy. There is a chance that you can improve your copy without going over this limit of characters, instead of trying to highlight half of it.
Use visual cues to draw the eye
We can also use highlights as a visual cues to guide the attention of visitors. We talked about this earlier. The first time people arrive on your website they will scan and skim the content. The reason is that they want to know whether the content is worth their time. If it is, they will read it. If it’s not they will leave the website. This is also why you should regularly check bounce rate. We will talk about this in part two. For now, think about how you can use highlights (bold or colored text) to draw people’s attention while they scan the page. Think about where do you want to lead them.
Lesson no.6: Explain how your product works
When you take a look at the majority of the startups landing pages, you will often see one thing. All these startups list the features of their products or services. Some of them also have sections or pages dedicated to describing the benefits of using their product. When you build your landing pages, you have to keep in mind one thing. Unless your product is already popular, the majority of visitors will have little or no knowledge about how it works. This means that you will need to have a section on your homepage that explains what your product does and how to use it.
A picture is worth a thousand words
The question is, what is the best way to explain and demonstrate how your product works? There are many different ways you can help visitors understand your product. Probably the most common way is to use screenshots or videos. Another interesting alternative is embedded slideshow. More advanced alternative, and also a good way to nudge people to start using your product, are interactive tutorials.
The less interesting option is to use a simple list or short text which explains how each section of your product works. This is also the option that will probably lead to poorest results. One of the landing pages I worked on also listed a testimonial under each feature. This was a good way to describe the benefits of each feature through the words of your customers. The easiest and most affordable way to describe the benefits of your product will probably be using screenshots. I think that anyone can do this. If you have the budget, you can create a short video demonstration.
Use a healthy dose of testimonials
When you decide for some way to describe and demonstrate the benefits, you should work on testimonials. My suggestion is to get and use at least one testimonial for each feature of your product. Explaining the benefits in your customers’ words is the best thing what you can do. This will make your product more interesting and description more convincing. It will also suggest that someone is already using your product. This effect is called social proof and we will discuss in also in part two. Lastly, make the features benefit-oriented. How is this feature helping your customers?
Use bullet points to break down the benefits
Let me give you one last tip for explaining the benefits of your product. If you want to describe the benefits in most comprehensible way, you should break them down. This was tested over and over again and the results are still the same. Lists are one of the best ways to explain concepts in a way that’s easy to understand and remember. Lists will also help you present the information in a way that’s not overwhelming for visitors.
Another benefit of using lists is that they will also force you to think about what do you want to communicate. It is quite easy to fill up the page with lengthy text. Don’t get me wrong. There is nothing bad about having lengthy copy on your landing pages. Based on my own experience, lengthy copy will sometimes work better than shorter copy. The problem will arise when your copy is starting to be lengthier than is necessary. When you use lists, this is much harder to “achieve”. Lists force you to keep the talking short and to the point.
If you want, you can structure the benefits in following way that’s common in landing page design. Start with descriptive icon and short heading. This will be followed with one short paragraph with three to four lines of text. After that, include short list of the main benefits of your products. If you stick to this simple template, you can’t go wrong.
Closing thoughts on creating great landing pages
This is all I have for you today in this first part. I hope that these six lessons will help you design and build better landing pages. Let’s quickly recap what we discussed today. First lesson is that fold is relative. If visitors are interested in the product or the content of your website, fold doesn’t matter. Second lesson is that people scroll. In a fact, about 76% of the visitors will probably scroll to some degree. The third lesson is that in some situations navigation can be your enemy.
If you want to keep the visitors on your website, removing navigation links may be beneficial. If you have landing pages with all content on homepage, navigation is not necessary. Fourth lesson is that sometimes less is really more. There is a danger of lower performance if you use overdo it with hi-res images and videos. Using more CTAs can also distract the visitors. It can even prevent them from taking your desired action.
Another thing to keep in mind is to embrace the whitespace and keep the talking relatively short. You should focus on providing the minimum effective dose of information and nothing more. Don’t clutter your landing pages with flood of content. Instead, focus on less. Trim and polish your value proposition. Fifth lesson is that you should use highlights to point out important information. Just don’t overdo it. Otherwise, highlighting will lose its meaning. Highlights are also a good way to guide visitors’ eye while they scan and skim the content.
The last lesson for today is to make sure you explain how your product works. Don’t think that people will figure everything out on their own. The best approach is to use visuals such as images and videos. Remember that picture is worth a thousand words. When you explain how your product works, use testimonials to for each feature to improve the description. If you decide to use words to describe the features, favor bullet points before plain text.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
