10 UX Tips To Create High-Performing Landing Pages

A landing page could be the homepage of a website or any web page, representing a particular product or event, where the user lands on. The intent behind having a landing page for any website is to present a product, without bragging (using clear and precise content, and images). But the success of this page’s design depends on whether the user decides to take the specified action — such as signing up for updates or making a purchase.

Is your landing page successful in persuading users to take the desired action? If not, then it could be because your landing page is not able to offer the expected user experience, which ultimately results in a lot of failed conversions. This article focuses on the checklist of user experience practices that you should be cross-checking while designing your landing page (which will increase conversions). We have also provided interesting examples of some great landing pages.

1.Plan your layout

“Simplicity is about the obvious and adding the meaningful.”

- Anonymous

Well, when we design the layout of a web page, it is important to always keep in mind that this is the place where your users are expected to take the desired action. So your layout should be clean — why not think of it in terms of minimalism, which actually means that only the essential would be used and the rest is cut off.

People do not have the time to skim through the chaos of clutter (if there are immense amounts of content and images) on your web page. All they want to do is find the CTA, click through it and be done. Why don’t we just go back to the landing page of your design and examine whether there exists an imbalance among the various components or is it perfectly optimized for a user to understand the message and take the desired action.

All the components used on your landing page should logically complement one another while ensuring that the appeal and message are always on the right track. Now, you are automatically making a list of items on your layout that needs to be chucked out, as they serve no good purpose.

One of the best examples of an impressive landing page with the minimal layout is Airbnb’s ‘How to be an Airbnb Host’ landing page. There are minimal components, which is the essence of this landing page and moreover, it is easily able to convey the message. So for anyone who is interested to be their host gets an idea of how much money they can earn in their city if they become Airbnb’s host (which is the main attraction).

It is recommended that you take a look at the choice of colors, the warm photography and the CTA used on Airbnb’s landing page for some inspiration.

2. Choosing colors

We just took you through the awesome landing page designed by Airbnb. What do you think about the colors they have used on their landing page?

Don’t you think the colors they have used on their landing page had an impact on your eyes? Yes, colors do make a difference in the way we perceive things. Many a time, color doesn’t stand a place in our designs when we try to focus hard on other factors — but before it is too late, ensure that the colors used on your website’s landing page are appealing.

According to experts, color and visual appearance are two factors that your consumers seem to notice and consider important, above all other factors, when they are on your landing page, making some important decisions. Neil Patel, in his blog on ‘How do colors affect purchase’, provides insights on color selection based on your business.

When you choose colors for your website’s landing page, it is important to perceive colors from the perspective that your colors carry a statement in themselves. To make it clear, some colors express positive mood, while there are those that exhibit an attitude and there are those that are humble. Make sure that you do not end up mixing up colors that are dark and depressing.

For example, take the color ‘Red’. It can imply a lot of things — such as love, Christmas, stop and danger. But if you take a look at the landing page and even the website of ‘Edible Arrangements’, you will find that they have used red color for not only their logo, but the color red is used across the most prominent areas of their landing page as well.

Their ‘Sign up’ text and ‘submit’ button are also in red. Even ‘McDonald’s’ uses red to attract people’s attention. This is very much in contradiction the red that stands for ‘stop’ at the traffic. So before you choose a color, it is important to think of it in terms of what your business represents and how this color would be able to create an appeal for the message that is being conveyed.

3. Content is the king

This is the most vital component of any web page, including the landing page. When you get a content writer to develop content for your landing page, make sure they have a clear understanding of your audiences. Also, it is important that the content writers have a clear understanding of what your product/event is, while also ensuring that you help these writers develop a clear strategy to imply the close relation between audiences and your product.

If your customer cannot understand what your product/service/event is about, what is the point of dragging them to your landing page? Ultimately, the customer will not take the desired action and your business will risk losing a potential prospect.

There are landing pages that do not need to give away too many details on what they are selling. A mere headline and sub-headline might, in some cases, convey what is intended. Think of the landing page content in terms of explanation. The explanation that you are providing should be able to convey to your people what your offer is and how it would work in their favor.

The text-based explanation that you are providing here should be clear and precisely explained in a few words, without any distractions.

Shopify is one of the best examples we can point out when it comes to offering a clear and precise copy of what is expected from your audience. On their landing page, just take a look at the heading and subheading, it explains everything better than having content run into huge chunks of paragraphs. The page tells users what they should be expecting from Shopify’s services. There are impressive testimonies from satisfied customers, which again counts.

There are two sections that you need to focus your writing around when developing content for the landing page. It is pain and pleasure (which are two important factors in user experience). Does your content address these?

Pain arises when someone realizes what they are bound to lose when a particular action is not taken. For instance, imagine the pleasure you feel at gaining $100 and the pain that you feel at losing the same sum.

This pain can be illustrated well when you can provide a solution to the pain that your reader is experiencing. And make sure to provide a detailed explanation of how your product or service is capable of successfully relieving the pain they are experiencing.

The very thought of pleasure is motivating. While you explain how your product/ service will help to relieve the pain, it is also important to provide details on the pleasure they will gain from using it.

Let us think of pain and pleasure in terms of a pill that helps in relieving headaches. So while you provide the details on how it helps in relieving the pain, it is also important to highlight the pleasure and joy to go about with their daily routine (with no headache).

There should be some factor within your landing page that helps to relieve the customer’s pain. Marketers generally follow the strategy of introducing the gains that people will derive, rather than focusing on how it helps to relieve pain. Develop your content such that it acts as an antidote to relieving the pain.

The best example of pain and pleasure is the 14-day free trial illustrated on Shopify’s landing page, which is an attraction and a pleasure, and also the thought of losing a 14-day trial for free is painful.

4. Headlines that grab attention

Headlines are the most important part of a content on any web page. As discussed in the previous point, sometimes, a headline can accomplish what a whole page of content cannot. A headline is the starting point — where interest, attention, and understanding begins.

When we say interest — it should be able to generate curiosity. With curiosity, it drives attention and finally understanding of what lies ahead.

Once the headline wins at grabbing the user’s attention, next, it should be able to tell the user what the product or service is about.

A simple tip to write killer headlines:

Make sure that it does not consist more than 20 words, though experts recommend keeping it up to 10 words.

Try to keep it in line with the images used on the landing page. This is to make sure that if the image is noticed before the user goes through the headline, he/she should be able to understand what is happening.

One of the best examples of a precise and well-explained headline is that of InVision’s landing page.

Sub-headline is another important factor of your website’s landing page that you need to be focusing on after headlines. But here, you have more freedom than with the heading, where you have to follow word limit — you can be more expressive with the sub-headlines.

5. Use videos

Videos are a tried-and-proven technique of increasing conversion rates when used on landing pages. We all are aware of the impact a video can have on people. But how you implement or what kind of a video you use is the big question. There are a lot of options, such as in-video CTAs, embedded videos that come with autoplay, explainer videos or educational videos, videos within modal popups, CTAs after the video plays and many others that you can choose on the basis of the theme of your business.

So now, the point is how do you choose the one that complements your landing page? Test and find it out for yourself. One of the best examples of compelling videos is that of MailChimp. Here, you can find Kristen Lambert, the Founder of ‘Third Piece’ sharing her experience with MailChimp.

She provides details on how MailChimp helped them to set up Facebook ads to drive traffic to their landing pages. Something you could think of the next time when you are thinking of creating a video for your landing page. A customer’s testimonial in the form of a video means a great deal. Isn’t it?

Calm is another interesting example where you can see what a video can do to engage and retain visitors, and finally to get them to do what is expected of them. This meditation company introduces a sense of relief and peace through their video.

Some of the other companies that have implemented videos on their landing pages include PayPal, GoPro, and others. With GoPro, you would definitely fall into a trance through their videos as it is addictive.

6. Visual hierarchy

A landing page is made up of a variety of components, including colors, font, content, CTA, and others, which are bound to serve various purposes. Some of these, for example, the CTA, might deserve the highest priority, while others, such as the color of your copy’s font might not be as important as these (although the least important ones will be removed). Our aim is to ensure that the landing page along with the elements on it meets the visitor’s demands. This is where the visual hierarchy comes in the bigger picture.

Precisely, a visual hierarchy refers to the arrangement or presentation of elements in a way that implies importance.

It is important to arrange the elements based on how your users would skim through the page. Eye tracking studies prove the significance of tracking the user’s eye movements when organizing the visual elements of your landing page. Since the main intent of a user’s visit on the web page is to consume content, the highest priority goes to where and how the content is placed.

7. Forms

The form is where your landing page captures all the essential details from your user, including their contact information. Experts recommend that using a well-optimized form on your landing page would help capture all the necessary user details that would pave the way to conversion.

It is important that the form labels and feedback requests be descriptive. So when you are requesting users to fill forms or provide feedback, it should be clear to them as to what is being requested. In fact, creating a form seems to be one of the easiest tasks — but many fail at this one simple task.

We will share some interesting tips to help you design forms that are better at what they ought to do.

• When creating labels for the form fields, it is best not to use a placeholder text that disappears. Make it a point to place these labels above the fields that they correspond to or else it would create confusions.
• When you request information, make sure only the essential data is requested. Of course, the business needs to know whether they are dealing with a genuine customer or a prankster and these details help them to understand the same. But there are security concerns on the users’ part as well. So, let us not request too much critical information.
• White Spaces are important. To ensure that you are not cramming in your form fields without any room to breathe.
• Radio buttons are the best to reduce the effort of typing. As you are aware, people do not want to spend too much time typing information. It is best to opt for radio buttons, wherever you can.

One of the best examples of a simple web form on a landing page is that of Shopify’s trial landing page. With only a few fields to fill in before the user can get started, this is one typical example of how you can request for information, without asking too much.

8. White space

We just discussed how White Spaces are important in forms. We do not want to create chaos by cramming in all those form fields together. Similarly, this is important when it comes to the spaces around margins, lines, paddings, and images. Myth is that white space refers to wasted space or negative space.

Do not think of white space in terms of emptiness. It is something that you can use to avoid distractions. Below given are some of the advantages of using white spaces on your landing page:

• Helps to improve the appearance of your landing page, making it clean and clear
• Ensures readability, while prioritizing various elements, including content and user interface components
• Acts as a guide to the user to help them with their movement across the landing page

9. How to contact you?

It is recommended that you provide more than one ways of reaching out to you, including your contact number, physical address, an email address, and a contact form. There are landing pages with chat boxes that pop up and a customer service executive is ready to offer help.

These pop-ups actually help in creating an emotional bond as the user can connect and communicate with a human rather than a robot. Once you provide a physical address and phone number, these go a long way in establishing trust. Apart from that, as discussed live chats in pop-up forms are helpful, as people can request for help and support at any time from anywhere.

But then, on the basis of your business, it is up to you to make a final call. Make sure that whatever you do, your people are able to reach you.

10. Creating a powerful CTA

The most important part of any landing page is its call to action (CTA). A high converting landing page always has the best CTA. Though we have discussed a number of elements in the UX that are important to create landing pages that convert, CTA should be your priority. Of course, all other elements are expected to drive user attention to CTA. And when all eyes fall on the CTA, conversion starts.

We will provide you with some interesting tips to create the most powerful CTA:

• It should be big — the bigger your CTA is, the better.
• Ensure that the copy your using for your CTA is appealing. In fact, apart from all other content on your landing page, it is the CTA copy that matters the most. (For instance, you could avoid using ‘submit’, rather use something unique and persuasive, for example, the ‘Show me my Heatmap’ button on Crazyegg’s landing page. ‘Submit’ has become boring and common.)
• It is always ideal to use a button for CTA — because people’s brains are wired to assume that the CTA would always be a button. It is easy to go ahead when they find something that is familiar.
• Colors — when you think of what colors you would use for your landing page, always think of contrasting colors. Your CTA should always be colored — make sure it stands out from the rest. The contrasting color would help it stand out from other components on the landing page. It has been found that contrasting colors are attractive and persuasive in driving clicks.

Check out the red color used on the CTA of Airbnb’s landing page. It stands out from the rest on the screen.

Designing a high-performing landing page is a few steps away

Designing or owning a high-performing landing page is the ultimate dream of any business. While it should be appealing, you should make no mistake to get the message or intent of your business clear. It is agreeable that while there exists a huge competition, it is not easy to attract people to your site and make sure that they reach the landing page, and while they are on the landing page, they take the specific action that is expected from them. The checklist above will help you with ensuring that you design awesome landing pages, which will confirm that your users end up clicking through the main call-to-action (CTA).

Usually, people confuse landing pages with a few parts of the website, which is why sometimes once the design is complete and the site goes live, the landing page fails to convert.

With a high-performing landing page, you reap the following benefits:

• SEO traffic
• Increased conversions
• Credibility
• Brand awareness
• Improved paid search campaigns
• Growth in the email list

Do you need any more reasons to create a landing page that converts? The only thing that matters is user experience when the landing page is designed. When you have accomplished all the items listed in the checklist above, you are automatically moving in the right direction.

If you are struggling to design a great landing page with all the important UX factors, then get expert help or professional advice on how to implement the UX best practices in designing landing pages that convert.

We would love to hear from you. If you have any queries or suggestions, please feel free to drop a comment in the comments section below.

10 UX Tips To Create High-Performing Landing Pages was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.