Being a designer in the digital age is great!
There are always new things to learn, with so many different areas for businesses to show themselves off.
One of our main focuses to help businesses grow is Landing Pages, run by our Lead Generation team. I have collaborated with our LeadGen and Development teams on many projects, constantly growing my own knowledge of best practices, both in the visual aspects and in a site’s potential to create leads.
Based on what I have learned, I have put together a little cheat sheet of the best practices when designing a landing page. Here are four important areas to focus on:
1. Hero
Let’s start at the top, shall we! The hero is the first thing you see when visiting a landing page, so it is important that it is visually appealing, HOWEVER, it cannot be too distracting from the most important part of any landing page…the form!
The form is the reason we have landing pages, to generate leads, so your hero should “frame” the form and lead the viewer’s eye to it. This can be done in various ways, such as subtle directional lines in the image. An example of this would be by using a person or a mascot that either looks in the direction of the form, or if you want to be more obvious, could be pointing towards the form. Another way of achieving focus would be to reduce the saturation of the background image or apply an overlay, making use of bright buttons on the form, so your eye is automatically drawn to it.
Another pointer that reflects on general human behaviour is for the form to be on the right-hand side. Going from left to right is more natural and subconsciously emotes a more positive response. Although, if you want to shake things up a bit, try placing your form in the center. This is a balanced approach that I’m finding to be increasingly more popular, but it all depends on the business and the elements required, as you’ll see in examples further down.
Random semi-related fact: In movies, the “good guys” are often depicted walking from left to right on the screen, whereas the “bad guys” are more likely to be seen walking from right to left as this is more unnatural and uncomfortable for viewers.
2. Unique Selling Points
Unique Selling Points (USPs) should feature on the hero below the main heading and subheading. You want people to see what you can offer before they hand over all their details. Aim for about 3 to 5 USPs to go on the left-hand side, being careful not to overcrowd the top of the page, otherwise, you’ve got a very top-heavy site.. don’t skip leg day people! We want this site to be strong throughout. So be picky with your USPs. Step into your target audiences’ shoes and ask yourself what they want from you, keeping it short and sweet – we’re in a very fast-paced world and no one has time to read essays anymore! You can elaborate on these points further down the page and let them know everything you have to offer after they’ve made it past the “front cover”. Get them hooked with punchy bullet points first.
Speaking of bullet points, it’s been noted that ticks are more engaging at the top of the page, so think about switching out your everyday bullet points with some tasteful ticks to make your USPs stand out more!
3. The Form
The form is easily the most important player on your page, aiming to get as many conversions as possible. I’ve got quite a few pointers for you here, so don’t abandon me now!
The first section I’m going to talk about is the progress bar. This isn’t necessary on all pages, but if you have multiple steps in your form, it’s a very good idea to include a progress bar with the percentage listed. No one wants to keep clicking next, next, next with no end in sight!
Keeping the focus on the steps, you’ll want to leave the personal details until last. It has been noted that asking for name, number and email straight away can scare people off. You need to draw them in, make them need your service and feel comfortable with you before you get personal.
We are all visual beings, whether we are aware of that or not, so why not feed that by creating an engaging landing page? Some people reckon that icons on forms are more engaging than text. So let’s get creative (that’s what we’re here for)! Making use of icons can also open up opportunities for additional colours on your form to draw people in even more! If icons aren’t practical for a specific question, try and keep your option buttons a reasonable size so it is easy for the customer to click on.
If you can, use the above point with the icons, even if it means having an extra step. More steps are better than drop-down options. Drop-downs should be avoided if possible as they lead to more unnecessary clicks. Ain’t got time for that! The fewer number of clicks the customer has to make, the better. You may feel this contradicts with what I said about adding more steps if need be, but this is all within reason. We obviously don’t want 10+ steps, but the viewer is less likely to mind clicking on sections that are more engaging than continuous drop down options.
While we’re on the topic of avoiding certain things, let’s add asterisks to that “do not touch” pile! Rather than putting an asterisk next to every field that is compulsory, let’s normalise putting “optional” next to the categories that aren’t mandatory, otherwise, we end up with forms covered with these bad boys “*” everywhere you look!
Something that surprised me when I was discussing best practices with our Lead Generation team was that form fields have shown to convert better when the field headings (name, phone number, etc) are above the block it needs to be filled in. We will often see form fields with the heading inside the block, which then disappears when you begin to type your own information in. Is more space effective? Well, yes. But apparently not the most effective-effective! Personally, I’ve gone on sites and clicked on the block to fill in my details and straight away forgotten what was asked for in the block before I start typing, and I’m only 25! So this pointer makes sense, especially if dealing with older target audiences.
4. Call to Action
Following the form, the CTA is so important! This is, as appropriately named, the action you are calling on the viewer to make! Much like the USPs, we want to keep this short, sweet and to the point. We also want to keep it constant throughout the page, so stick to one CTA message. A good example of this is “Get a Quote”, simple and action-y. No fluff needed.
An example of a bad CTA is “Start Your Free 30 Day Trial Today”. This is far too long. It’s better to rather mention that the trail is free and 30 days long somewhere in the hero, or even in the form heading, but we DO NOT want this in a call to action button. This can be shortened to “Start Trial”. Fits on one line and still says what you need it to. Perfect! Something to keep in mind with the length of CTAs is how it will fit on mobile. Being mobile-friendly in this day and age is so important! Having a wordy call to action may cause the words to fall onto two lines on some devices, which is not desirable.
The last point I have to make today is the use of colour on your CTA. Remember that you want this to stand out without clashing with your brand. If your brand colours are blue or navy, try using a bright green or a nice orange. You don’t want to use a colour that is the same as your main brand colour, as it won’t catch viewers attention if it blends in. Contrast is key.
So to finish off, what can we take from this in just a few sentences? We want to get people’s attention with short, sweet wording, good use of contrasting (but not clashing) colours to get CTAs standing out and engaging with the audience through elements that speak to basic human behaviours.
So as you can see, it only takes a few small changes to get the conversions rolling in, so what are you waiting for? Feel free to get in touch to get you on the next step to improving your landing pages.
I hope this was helpful!
