Shawn Manaher

16 Awesome Tips for Landing Page Design

A plain landing symbolizing how a visitor lands on a landing pageLanding pages should have a specific purpose for visitors. The design of your landing page plays a large role in guiding visitors to doing what you want them to do on your page. The following tips will help you make the most of your landing page efforts (and your visitors will thank you for it). 1. Have an action (something to do) 2. Reduce or eliminate ambiguity 3. Keep important actions above the fold 4. Develop a consistent experience 5. Headline 6. Reduce clutter 7. Secure/trustworthy 8. Quick load time 9. Remove main navigation 10. No large blocks of text 11. Call to Action 12. Logo and branding 13. Testimonials 14. Use images creatively 15. Responsive design 16. Tracking

actionHave an Action

This may seem like a no-brainer, but you would be surprised at how many times marketers fail to have a clear action for visitors to perform. Beginners get a pass, but experienced marketers should have no excuses for missing this simple piece. There are a variety of different actions that you could have visitors perform including:
  • Filling out a contact form
  • Downloading something
  • Watching a video
  • Buying a product or service
  • Donating
  • Filling out a survey
  • Clicking a social media action button (i.e. Like, Plus One, etc.)
The action you have on your landing page should either accomplish or help accomplish the goal of the overall campaign. You probably have some reason you are driving traffic to your website, and typically that revolves around making money or getting exposure for a brand. Whatever your goal is, make sure your action helps accomplish it. Check out Crowdstorm.com’s landing page for my search on Toshiba laptops. In terms of the action they have, it’s pretty clear there is something for me to do on this page. crowd-storm If you don’t have an action for your visitors to perform, don’t start your campaign until you have one. It is very unproductive to send visitors to a generic page or a home page where they can’t really do anything, or they are left to their own devices. The landing page should guide a visitor along a path to an end goal which is ideally based on what they originally came to your site for.

Boy who is confusedReduce or Eliminate Ambiguity and Frustration

Once you have a clear idea of what you want people to do when they arrive at your landing page, you have to ensure that they actually do it. Naturally, there are a number of reasons why people abandon conversion funnels, but you can at least make sure your landing page design isn’t the culprit. Visitors to a web page (especially if they REALLY want it to work) will often muddle through and ensure a lot of frustration. That being said, we shouldn’t make them do that. The action on your landing page should be easy to accomplish. As a best practice, you should remove all unnecessary elements from your page to ensure visitors are not distracted. A person should know immediately when they arrive at a page what they are supposed to do. The more complicated or murky the process appears to be, the more likely they are to give up on your page and try something else. The following are some common reasons people abandon conversion funnels:
  • Forms that are too long compared to the value the visitor sees in giving the information
  • People get distracted by other elements on the page
  • The action to be performed is not prominent or is hidden in some way
  • Language on buttons or next to input fields is ambiguous or confusing
  • Functionality on the page does not work correctly (i.e. a form doesn’t submit, a text field won’t take values that are clearly correct, a form doesn’t follow best practices for validation, etc)
These are just a few examples out of many potential scenarios where a visitor might get frustrated and leave a landing page. Remember to keep things simple, avoid confusion and use what you know will work.

Keep Important Actions Above the Fold

The fold is the point at which content can no longer be seen and users have to scroll to see more information. Obviously, you can’t account for all screen sizes and resolutions, but you can get pretty close. Check out Rocketcases.com and their landing page for my query on leather cases for iPhone 5. All the information plus the action they want me to perform are above the point at which I would have to scroll to see more information. Rocket cases landing page Keep any action you want visitors to perform above the fold. If you make people scroll to see things, chances are they may miss what you want them to do.

consistencyDevelop a Consistent Experience

When you go to a grocery store looking for a specific product, generally, it can be pretty simple to find even though you have no idea where it is. This is because many stores have visual cues that guide us to where we need to go. Aisles are generally labeled with the general types of foods they have stocked in them. Shelving has tags that gives the names of products, and there are also certain conventions for stores that we have become accustomed to. For instance, in hyper-markets like Target, food is typically toward the front and merchandise toward the back or side of the store. In many stores, cash registers are at the front entrance. On the web, however, we are in a virtual world, and we rely heavily on visual cues like images, text and the navigation of a web page to guide us where we need to go. Without the proper language in the right place at the right time, we can get lost pretty quickly online and start to think that we aren’t close to what we are looking for. That is why it’s important to develop a consistent experience among your advertising efforts and your landing page. Whether your visitors clicked on a link, an ad, or something else online, they did so because something looked appealing to them. To illustrate, say you advertise on Google AdWords using a three-line text ad. Keywords are very important for these ads because Google shows ads based on user queries as well as their relevance to the landing page. When a Google search user types in the query, “jeep Cherokee motor parts,” they are shown a series of ads that are most relevant to that query. When they click on one, Google’s job is over, and it is now the job of the landing page designer to deliver on what that person was looking for. The landing page that the user comes to should have the exact same keywords that they used to find the ad so that they know they have come to the right place. All of the content on the page should be about the keyword phrase, or else the user might think they got it wrong and start all over again. On your landing page, the following should be consistent with any advertising you use to send traffic to the page:
  • Call to action
  • Value proposition
  • Keywords
  • Imagery
  • Content
You don’t have to copy exactly what the ad says but you should instead expand on it. Deliver on what the ad promise and entice the user to take the next step.

Headline

Headlines are important on landing pages. In the hierarchy of the page, people get lost if there is no prominent element guiding them. Any keywords relevant to what you are promoting should be in the headline of the page. The headline should be one of the most prominent things on the page, and visitors should know they came to the right place when they land there and read the headline.

Clutter of nuts and boltsReduce Clutter

There is a tendency among business owners to want to provide as much information as possible when showing people their websites. In reality, people become paralyzed when there is too much information; and when there is no specific goal, campaigns often don’t do very well. Do your best to remove any unnecessary elements on your landing page. If it doesn’t help accomplish your predetermined goal, remove it. Things that can be removed include:
  • Side navigation that doesn’t help complete the action
  • Images or text that have nothing to do with the action
  • Main navigation (more on this in a moment)

SecureSecure/Trustworthy

This design element doesn’t apply to everyone, but if you are doing financial transactions you may want to think about it. These days, there are a lot of people still skeptical about doing business online. They want to know their information is secure and that the people they are dealing with are competent and reputable. This comes in a couple of different forms online, which are trust symbols and overall design: Trust Symbols These are symbols of security programs or similar icons that people can see during a checkout process. Sometimes, it can help to reference these at certain points on your landing page so people can see their information is secure. Don’t overdo it here, though. The last thing you want to do is make people think you are trying too hard to make them feel safe. Overall Design Icons won’t make a lick of difference if people don’t have confidence in your site. If your overall design looks amateurish or if functionality doesn’t work right, people will be hesitant to do business with you. Imagine going to a store to buy a product and the building that houses everything is practically falling down or poorly constructed. What if the person working there didn’t know how to count your money or make a transaction with you? As consumers, our trust in a business is directly proportional to the image that the business portrays. The same is true online. If a company has a nice website that works well and is well-designed, consumers feel safer doing business with them. When you build your landing page, make sure you:
  • Use best practices for web design conventions and layout
  • Test functionality and ensure that everything works as it should
  • Make the page attractive
  • Ask yourself if you would leave a credit card number in a field on your own landing page

urlQuick Load Time

Just like with everything else today, people are used to instant gratification. When you are sitting at a red light, if you have to wait more than a couple of seconds before the person in front of you starts moving when the light turns green, you are probably already getting impatient. The web is the same way. At one point in the early days, it took forever for a web page to load, especially if it had large files associated with it. Today, speeds are faster than ever, and if people have to wait more than a couple of seconds for a web page to load, they are more likely to leave. Former Googler Marissa Mayer proved this concept back in 2006 when (after extensive testing) she presented at the Web 2.0 summit that year. She explained that by decreasing the load time of Google’s SERPs, they were able to make larger amounts of result appear more quickly. Consequently more people used the site and were more satisfied with the results.

Remove Main Navigation

Taking out the main navigation of a site helps reduce the chance that a user will go somewhere else and not complete the action you have laid out for them. You might be saying, “hey that’s pretty inconvenient for visitors.” It won’t be inconvenient if you’ve done a good job at creating consistent experience for your visitors. If people feel like they have found what they were looking for, there really won’t be a need for them to go anywhere else. Having the navigation present takes up valuable space and could cause visitors who are focused on completing the action to leave the page.

No Large Blocks of Text

The copy on your page should be concise and broken up into short paragraphs or bullets. People using the Internet and looking for information are generally impatient. They skim information quickly and respond well to lists, bullets, images, video and anything that can help them complete their information search quickly. Large blocks of text cause visitors anxiety. Tons of text looks like a lot of work, and people don’t want to do a lot of work. They want to get the information they need quickly and easily.

call-to-actionCall to Action

You should have a call to action on your landing page, and it should be close to the task you want visitors to perform. A call to action is a statement impelling someone to act. “Buy now,” “apply today,” “try it,” and “call today” are all examples of simple calls to action. These could be placed on or next to buttons, as hyper-text, or as prominent text on the page. Get creative and mold your call to action after your action. For instance, if you are getting people to sign up for an email newsletter, your call to action might be, “Get Your News Today!”

Logo and Branding

Branding is important for everything we do in business. We have to make a clear image for our businesses, so a logo is something that should not be left off of your landing page. Keep your logo in the top left corner of the page with a link to your home page. This is a common web convention.

Testimonials

Testimonials are a good way to build trust and showcase some of the good experiences your current customers have had. They build trust by giving the visitor some extra incentive to complete the action. If people can see that others have had a good experience, they are more likely to see you as an authority and want to interact with you. Testimonials also help enhance your brand’s image. For those visitors who aren’t already aware of your reputation, a few good comments from previous customers can help them understand that you are reputable.

Use Images Creatively

Images can help your landing page in a few different ways. Powerful or Enticing images If you use images to represent a product or service, they should be eye-popping and visually appealing. Whatever they are representing, they should make your visitor want to interact with your company, buy the product or service, or in some way help in making them want to complete the action you have outlined for them. For example, a travel site might have a really nice image of an exotic destination they are advertising on a landing page. Guiding Visitors Images can help guide people in the right direction in the most subtle ways. You can use images of people to point users toward the action you want them to complete. We naturally look in the direction that others are looking. By placing an image of a person looking in the direction of your signup form, “buy now” button or other action, you will increase the likelihood that they will find it easily. Relevance In general, if you are using imagery, make sure that it is relevant to your audience. Use images that will resonate well with your target market. For example, pictures of the specific product or service the landing page is marketing, images of people that are representative of the target market and/or images of objects that are relevant to why they person is on the page all work well.

Responsive Design

Does your landing page work well on mobile devices? You might have to look at your analytics to figure this one out. If it is easy for you to make your landing mobile friendly, you could do it regardless of whether there is data to support it. If the process of making a page mobile friendly is more involved, then it makes sense to have data to back it up. For instance, does a large percentage of the traffic to your site come from mobile devices? If so, it’s a good idea to make sure your page renders on cell phones, tablets and other mobile devices. If the traffic to your site via mobile devices is very low or nonexistent, you might skip the process for making the page mobile friendly; however, you should always keep an eye on these traffic levels to see if having mobile-friendly versions of web pages makes sense.

analyticsTracking

This isn’t technically a design element, but it goes along with design. Pretty much all behaviors on a web page can be tracked, meaning you can look at what users are doing and improve upon your design. Platforms You can use one of many different free or paid tracking software packages to measure your success with a landing page. If you don’t have the budget for a paid solution, you can’t get much better than Google Analytics. It is one of the most flexible and powerful free tracking tools on the market. There are other tracking programs that have free versions, but they are severely limited until you sign up for a paid membership. Some offer pretty cool features, though, like heat-map reports. Paid solutions include:
  • HiStats
  • Clicky
  • Click Tale
The major tradeoff you get with a paid solution is that it may be much easier to implement than Google’s service. Not that it is any harder to install Google’s tracking code; it is just that a paid service may have support for such a thing, or have a more user-friendly setup process. Whatever platform you end up going with, ensure that you only use one on your website or landing page. Some may disagree; however, you may see discrepancies in data, or the tracking code snippets could potentially interfere with one another. A/B Testing Aside from having tracking installed on a website, there are special ways that you need to measure your landing page performance. There are a variety of tests, but the most common for tasks like this is called an A/B test. In this type of test, two or more versions of a landing page are made, and traffic from a website diverted to each one equally over a period of time. They are all similar in terms of the end goal and some larger elements of the page (i.e. what visitors are supposed to be doing). The test comes in where a designer changes aspects of the design in an attempt to measure which design works better at converting a visitor to a customer or lead (or whatever they are supposed to be converted into). A/B testing is one of the simplest ways to tell if one design preforms better than another. It is also a test you can perform while a campaign or page is live as opposed to in isolation without making sales or generating leads. measurementKey Metrics Aside from actions unique to your landing page, there are a few universal metrics you should look at for indications of how well designed your page is. For instance, your landing page’s bounce rate is a good barometer of how effective the content is at engaging visitors. It can also be useful in determining how well designed an action is. For instance, if you have a page where users are supposed to fill out a lead form and they are leaving right away without completing the form, it may be that it’s too complicated or ambiguous. Perhaps users don’t see enough value in what you are selling in order to leave their information. Time on site (or in this case average time on page) is also another metric whose value can indicate success or failure. High conversion rates coupled with a low time on site means our process is efficient. Low conversion rates and high time on site could indicate that users are interested in what you are offering, but confused on how to cash in on it.
What landing page design tips have helped you increase conversions? Join in the conversation by commenting below!


Written by:

Loading Facebook Comments ...

No comments yet.

You must be logged in to post a comment.