10 mistakes in landing page design
Your landing-page design is your project’s highlight. It can give the user more information than any other words on the page. It’s like a girl’s make-up: if it’s neat and elegant, it looks up-market and beautiful; if you overuse the color or turn it into messy war paint, it seems cheap and frivolous.
But how can you create a wow-effect landing design, without overdoing it? Here are 10 common landing page mistakes, and 10 tips on how to fix them.
A landing design that has gone a little too far.
1. Excessive use of triggers
Triggers are different elements on the landing page that attract users’ attention and make them do certain things that are useful to the site’s owner. They boost the landing page’s conversions. However, when there are too many of them, triggers may overshadow the main idea you want to convey or distract people who visit the site from the targeted action.
Here’s a striking example of a landing page with too many triggers. Visit http://www.lingscars.com, and try to guess what this site is about.
An ideal example of what we call an anti-design. The background shimmers with all the colors of the rainbow, the cat jumps out of the box, the chicken runs through the text, and dozens of Ling’s heads sing and dance all over the page.
Of course, this doesn’t mean that triggers are generally inappropriate, but using few of them can be enough. Use them like condiments, to spice up your dish.
2. Banners (advertising pictures)
Using banners on your landing page is a definite no-no. If you get too carried away with them, you might turn your page into something like this:
It’s hard to tell what this site is all about, so the main meaning of the site is lost – http://www.arngren.net.
The conclusion is obvious. Do not use banners on your landing page. Never. Ever.
3. Huge blocks of texts
Don’t try to squeeze the entire history of your company onto the landing page – including the complete biography of your first client’s second cousin. Highlight only the main things. Today’s users are typically too lazy to read. They like to save time, and a huge block of text has a great chance of ending up skipped over.
A dental clinic website that has too much text.
Divide the text into paragraphs and smaller blocks. Add some pictures. Convey the essence briefly.
See how the business titans do it: https://www.google.com/drive/. Google Drive’s landing page has barely a dozen sentences on it!
4. Text that is impossible to read
Reversed type (white text against a darker background) should be used sparingly. Same goes for Caps Lock, and for “fancy” fonts. Don’t use words that consist only of capital letters, except in titles. Users are reluctant to read as it is, and hard-to-read text makes this task even harder for them.
White text on a black background quickly tires your eyes.
White letters against a black background combined with huge blocks of text – this is all it takes to make your text impossible to read.
Make your text easy to read. Black text on a white background is a safe and iconic example. If you want something offbeat, think of color combinations in which the letters won’t melt into the background or dance before one’s eyes.
5. Too much humour
We all like to have a good laugh every once in a while. However, too much humour on a landing page will distract the user’s attention from the page’s main goal.
Here’s an example of a landing page that can make you roll with laughter – http://roltrol.by. But did you learn anything useful about the product from this page?
Too many jokes distract the user from the targeted action.
And here’s another example:
These guys certainly do not lack a sense of humour – but would you “buy” from them? http://rafik.viplanding24.ru
When it comes to jokes, less is better.
6. Color attack
This common mistake is made by everyone who loves color. They want to use more colors to create a certain mood, but eventually end up with a crazy landing-page design that dazzles the user but distracts their attention from the message.
Sometimes color can even overshadow the whole perception of your text.
“- I want bright text on a bright background!
– But the text won’t be visible!
– Well, we can always add a white stroke!”
Have you ever noticed that many successful companies use only a few basic colors on their landing pages?
They use extra colors on the capture points to focus attention on them.
If your landing page looks like a paint factory disaster, don’t expect your conversions to be high. Choose a clear design without excess colors.
7. Sudden video commercials, unexpected sounds
Recognize this situation? You’re sitting quietly in your office, minding your own business on your laptop, and all of a sudden there comes a disgusting harsh sound. You’re trying madly to close the tab as soon as possible. Finally, you get it! But you’re red with embarrassment, and your colleagues are scowling at you.
Be careful! The following example of a landing page may cause the aforementioned situation: http://www.dogetech.com.tw/
Example of a site with a sharp sound.
Unexpected sounds make most office workers close the landing page without even reading it. This means a decrease in conversions for you. Moreover, different people like different music, so uploading sounds decreases the site’s loading speed. Mobile versions don’t need any music at all. It’s just another thing that bugs users.
There are two situations when using sound on your landing page is OK:
- You cannot convey your concept without sound:
Here’s an example, a melody is needed to create a certain mood for viewing a painting:
http://www.monet2010.com/
- The users can turn the sound on if they want.
8. Too many pop-ups
You’ve just loaded a landing page, and a pop-up appears with a bang: “You’ve been here for half a second already. Why haven’t you chosen anything? Can I help you?” You close the pop-up, but then comes another one: “Download our new book for free!” You start filling in the form, and there’s one more – “Why haven’t you filled in the form yet?” Sometimes they don’t even let you go quietly. A finishing shot – right into your head. “Why are you leaving the site?” Obviously, this only makes you not want to come back.
Nothing is worse than an irritating pop-up that distracts you from your work – except another pop-up that makes you want to close the site.
Of course, not all pop-ups should be put into cold storage. You simply need to use them wisely. Give users a chance to get interested, and encourage them to act at the right time.
9. Pre-loaders
A user visiting a new site won’t wait more than 3 or 4 seconds for it to load. We’ve already mentioned how reducing the loading time by just 2.2 seconds added 10.28 million more downloads to the Mozilla website. If after 5 seconds of loading the user still sees a white screen, he’s very likely to close the tab. Knowing this fact, many site owners use pre-loaders – a light animation that (they think) amuses the customer or at least lets him know the content is being loaded.
An example of a pre-loader http://www.c945.com/
However, having a pre-loader on a landing page is not reasonable at all. A landing page is created to quickly capture the user’s attention and to steer it in the right direction. No one will wait for you to capture his or her attention. Make your landing pages quick to load. It will increase your conversions – guaranteed.
People won’t look at your pre-loader unless you’re a world-famous brand and your product is highly coveted.
A pre-loader on a famous Tissot brand landing page (http://www.t-touch.com/en-en/#!/t-touch-expert-solar).
Spend your time and money on making your landing page quicker, not on adding preloaders to it.
10. Poor quality or stock photos
Sometimes even a high-quality product can be presented in a bad light, and will look unattractive in a photo.
Here’s an example of a bad picture of a rhinestone tooth-decoration service from a dental clinic:
You can hardly see the decoration, and the white background insidiously points out the yellowness of the model’s teeth.
Stock photos are a subject for a whole another article.
The only thing worse than a bad picture is a landing page with no picture at all. Spending money on a professional photographer will pay off in spades. Their work will emphasize the benefits of your product or service.
What are the main takeaways?
Always remember the main idea you want to convey.
Highlight the main things, and try not to distract the user from the target action.
Clean and minimal design, simple colours and a clear concept will always be on trend.
When choosing a design, look to the user, not to yourself.
If you’re afraid to become a victim of your own preferences in style, ask a professional to help you. They can create a beautiful picture and make it “sell”.
P.S. And finally, the most terrible landing page ever – a hyperbolic anti-design that was created to make you smile and direct your attention to common landing page mistakes:
http://texterra.biz/landing-page-design/
