How to create a good landing page that converts from the start?Date : December 18, 2019 By
- 1 Landing page prototype basics
- 2 The good landing page headline
- 3 Lack of distracting elements on the optimized landing page
- 4 The goal. An effective СTA button in a perfect landing page.
- 5 How to show visitors the benefits of your company on the landing page?
- 6 Trust elements on a good landing page
- 7 Mobile-friendly landing pages
- 8 SEO basics for a landing page
- 9 Summary of the landing page creation process
Why do you need a landing page for a website or an e-store? Obviously, to generate leads or make online sales. In this case better conversion rates сan be ensured by the competent use of the user experience (UX) basic principles while landing page creation process.
“UX can be defined as user experience – when someone is interacting with your product, application or website. Generally, a good website usability leads to higher conversion rates.”
The product landing page usually includes:
- convenient arrangement of elements,
- lack of distracting elements and blocks,
- relevant and readable content,
- catchy CTAs (call-to-actions),
- compounds that respond to the “pain” of the client,
- separation of the main information from the secondary.
The usage of these key landing page optimization principles leads to the positive user experience, in which client’s interaction with your website is easier and more convenient, and your conversion rates are higher. Below we will look at the best practices in a landing page UX development and will study the basic rules for creating a good landing page with high conversion. Let’s start with the basics first.
Landing page prototype basics
Landing page development begins with layout creation, this helps to immediately organize the placement of the content and arrange it so that the prospects get the information required for conversion in the right order. The rational arrangement of page content is a good way to succeed with a top-converting landing page.
This optimized landing page was created back in 2006 when I used to work for Parallels in digital marketing department. It still contains all the important elements in the right order:
- Headline text at the top (with a main keyword which relates to the problem which is solved by the product);
- Key advantage of the product over competitors (marked with red near the headline);
- Short description of the product (3-5 sentences maximum);
- Bullet-list of product features with icons to make it look better;
- Call-to-action block with product image, price and action button at the right side.
There are many different programs that you can use to create an interactive (dynamic) prototype with detailed explanations about each element of the landing page. You can also create a static prototype that will display information regarding the location of elements and content on the page.
For example, there is Axure RP tool which is suitable for creating both static and dynamic elements in a prototype. Let’s take a look at the capabilities of this landing page mockup tool.
- Here you can create a new page and see all of the previously created landing pages. These pages can also be sorted in a convenient manner using folders.
- “All Libraries” section contains the most common elements and symbols, such as “Title”, “Text”, a block with a background, a “Droplist” for a dynamic prototype, and more.
- If you work with two or more layers, you can use this panel to conveniently arrange one layer on top of the other one in the desired order.
- Here you can align a large number of elements on the left, right, or center parts of the landing page.
- This panel displays parameters of the selected image, you can also use it to change the length and width of any selected element on the page as you wish.
- By clicking on this button, you сan see how your layout looks in the browser. This will allow you to make sure that your page will be displayed correctly.
- The interface of this panel is necessary for working with dynamic elements. You can create different rules for one or several elements. For example,if you’re inserting a link, you can add underlined text when you hover over, or you can adjust other parameters from the set.
- You can use the ruler to adjust indents.
The good landing page headline
The first thing a visitor sees when arriving to a landing page is the page headline. It must immediately catch the attention of the visitor and stop the bounce process. Post information about how the prospect will benefit from interacting with you, answer the questions like “Who are you?” and “What are you offering?”. Place this text so that there is enough free space around, and the user will focus only on what you want to offer to him. Make sure that the page headline is large enough and differentiates from the rest of your text. This way you will be certain that the user will definitely see it.
Signs of a great headline include:
- Clear, informative and capacious
- Сontains a unique selling proposition
- Answers the main problem of the client (the visitor understands that he/she can solve his problem here)
- Customer’s focus on your USP is maximized
Lack of distracting elements on the optimized landing page
By placing a large amount of distracting content on the landing page, you’re running in the risk of being left with little to no conversions. You have to minimize the number of elements that might distract your visitor’s attention. Everything that you place on your page should smoothly move towards the target action, and not the other way around.
“Don’t give your page’s visitors a single chance to get distracted.
Focus of attention is the key to high conversion rate.”
Think again about what your landing page can avoid and remove the unnecessary elements from the layout. Minimize content up to the point when the visitor starts to lose the understanding of the USP.
When we talk about a successful landing page, you should have one main goal in mind – everything on your page should lead to this goal. The contents of the CTA (call-to-action) button, as well as its visibility, also affects the conversion, as well as the rest of the content.
The description of your product may be arbitrarily good, but if the call to action element remained invisible – it’s a failure of the user experience and this page will not convert. You can use a ready-made item template to add a call-to-action button to the prototype.
What you need to do to create a great CTA button:
- Simple + Clear + Short = Effective
- Choose calls to action that inspire rather than command
- One button can trigger only one action (try not to confuse your visitors)
- Maximize the visibility of the CTA button
How to show visitors the benefits of your company on the landing page?
When describing the activities of your company or a certain product in a written form, try keeping it brief for a better website usability without huge texts. 3-5 sentences is a maximum text size in 2020 that the visitor will be ready to read attentively.
The things that you need to specify in the text:
- What are the benefits that your client can get from interacting with you?
- Why should he/she choose your company?
- What exactly do you propose to solve a visitor’s problem?
The bullet-list with icons is one of the best ways of listing your company’s key advantages. To highlight the benefits in a single line, add a background using the ready-made” Box 2 “or” Box 3 ” elements. Select the icons in the “Icon” section and place them horizontally at the same distance from each other. Then add short text to the icons.
This way your visitor won’t be frightened by a huge amount of text and would be able to immediately focus on the important points of your offering. Icons can be easily taken from free icon stocks.
Trust elements on a good landing page
Strengthen your company’s advantages with awards, customer logos or reviews – just place them on your page near the call-to-action elements to support the visitor’s action. It’s enough to show 4-5 best items selectively with a rotation mechanism. You can also post your portfolio or case studies block here. Use the same principle as with the whole page – try not to clutter it up. The optimal way is to place one element in the middle of the page with the ability to scroll (arrows on the sides of the image) or three small elements horizontally. If the text can be replaced with a picture – do it.
Mobile-friendly landing pages
Mobile traffic today significantly exceeds the traffic from desktop, so it is also important to take care of creating a prototype for the mobile version of your landing page. Do not forget that the smartphone screen has much less space than the desktop one. Keeping this in mind, a perfect landing page should provide your prospect with better website speed on mobile devices which means the lack of heavy interactive elements and following to Google Page Speed Insights guidelines during the development process.
The heading and CTA must be visible and must be significant in size, preferably on the first screen. Images should be compressed or even removed when not possible. The lead generation forms should be relatively smaller in the number of fields or can be even replaced with a Facebook Messenger bot that will collect your contact details in a very convenient place of yours – your Messenger app. Don’t forget about the calls – leave the phone icon at the top for an immediate user action.
SEO basics for a landing page
During the creation of a prototype, you are already working with the finished text, and therefore must be careful when it comes to SEO. To help you with that, here’s a checklist of SEO basics for a landing page:
- Determine for yourself the target keywords for the landing page that you are creating;
- Use Google Keyword Planner to find medium- and low-frequency search queries about your product and add them to the page content (meta-description tag, product description and bullet list);
- Place the primary keyword (which relates to the problem that can be solved by the product AND is frequent enough) in the meta-title tag, in H1 tag AND in the URL of the page;
- Never copy information from other websites, use only the unique content.
Summary of the landing page creation process
Landing page creation requires careful execution to succeed. Do not put too many elements on your landing page, even if you think it is interesting. Too many words, images or graphics will likely decrease your conversion rate, and you will be unhappy with the final result.
It is important to remember that there are three important factors in landing page creation:
- The answer to the visitor’s problem;
- Always keeping the visitor’s attention;
- The right type of call-to-action on the right place.
Landing page creation is based on these three factors. If you want to be successful in it, here’s a checklist for creating a good landing page:
- Landing page development begins with layout creation. Layout can be interactive or static, but whichever method you use, be sure to organize the placement of the content properly, and place the elements in the right order.
- The first main element is the headline. You have to make sure it meets the following requirements:
- It is clear, informative and capacious;
- It contains a unique selling proposition;
- There is an answer to client’s main problem (the visitor understands that he/she can solve his problem here);
- Customer’s focus on your USP is maximized.
- The second one is the CTA button. It must be:
- “Easy + Distinct + Concise”;
- It should inspire, not command;
- One button = one action;
- The CTA button has maximum visibility.
- List company’s key advantages using bulleted icons.
- Minimize the number of elements that might distract the visitor’s attention.
- Only use text that is essential to your message. If in doubt, put more images on the landing page.
- Follow the SEO guidelines to make sure the page gets ranked well in Google;
- Mobile version:
- Check page load speed on mobile devices;
- Avoid heavy interactive elements;
- Follow Google Page Speed Insights recommendations;
- Compress images, or even remove them;
- Place the phone icon at the top.
You can also get the checklist in a PDF file and a free 30-minute consultation with me if you’ll fill in this form.