Creating a high-performing landing page can be tough. It needs to look good, but it also needs to communicate your message. It’s hard enough to drive people to your website — and even harder to keep their attention once they get there. Here’s how to keep people engaged with your landing page till they click that main CTA.
1. Keep your layout clean
Minimalism is not the lack of something. It’s simply the perfect amount of something.
–Nicholas Burroughs
Nothing drives people away from your website faster than a cluttered layout. Take a step back and look at your design. Do you see harmonious symmetry or a chaotic barrage of images and dense blocks of text?
Text and other visual elements should come together logically, each reinforcing the other’s message. Your message will only get lost in a messy layout. So cut out everything that’s unnecessary so the purpose of your page — and what you want people to do with it — comes through loud and clear. (But not too loud.)
That’s exactly why our very own Customer Success lead, Will Wong, built the cloneable Atlas landing page template with such a clear, clean layout. He even created a landing page design tutorial to show you how he did it!
A clean landing page done right
The Webflow power users over at Timekit did a beautiful job keeping the landing page for their Hour scheduling tool super clean and ultra-clear.
2. Grab attention — and keep it
An environment with excess information devours the one thing that information truly demands: attention. Attention is becoming scarce, so we have to use it wisely when we get it.
–Alistair Croll
The content you place above the fold on your landing page can make or break it. After all, they create a very important first impression. Bold hero images, inspirational headlines, dynamic background videos, and engaging animations can all hold people’s attention — and keep them scrolling for more.
Once they’re engaged, animated transitions between sections can make your design more dynamic and keep people wanting to see what’s next. Just make sure you’ve logically organized your content to keep them reading, instead of just looking for the next cool animation.
Never forget your landing page’s goal: to get people to take a single action.
Too many calls to action, jam-packed navigation, and other distracting elements will only make people lose focus and forget that one key action you want them to take.
Note that it is okay to have a few other links on your page — as long as they keep driving people toward that action.
For instance, many landing pages will include a “Learn more” link next to the main call to action (CTA). Typically, that brings people further down the page to give them more information about the product or service. Hopefully, that’s exactly the info they need to take action.
3. Gamify your landing page FTW
Play is the highest form of research.
–Albert Einstein
Gamify-ing something means using the elements of gameplay in a context and/or format where they usually aren't used.
It can be a great way to keep people engaged while also communicating your message, because you aren’t just selling them something — you’re entertaining, and in some cases, educating them.
The team behind the Google Doodle has used gamification to great effect bunches of times. Granted, their landing page doesn’t need to be more than a search box and text, but the Doodle adds an element of fun. No other search engine has given you the chance to play a Moog synthesizer, decode a message with a Turing machine, or chomp on ghosts in a game of Pac-Man.
Gamification doesn’t have to be just about fun — but it helps. It can also educate. When we launched our flexbox layout tools, we created a game in Webflow that teaches you how to use flexbox in 28 increasingly difficult interactive levels. It’s a lot more fun than reading detailed documentation (unless you’re into that sort of thing).
Other game-like Easter eggs Google’s given us
Google the following terms without quotation marks:
- Zerg rush
- Askew
- Do a barrel roll
Oh, and next time your internet’s out, try to load Google.com, then hit your spacebar. Enjoy!
4. Don’t sell — teach
Don’t just say ‘the old lady screamed.’ Bring her on and let her scream.
–Samuel Clemens, aka, Mark Twain
There's a right time and way to use marketing language. If you sound like someone selling vacuum cleaners door to door, you’ll send people running … right over to your competitor’s site.
People visiting your website want to know what problem your product can solve or how it can benefit them.
Your landing page should show people how your product/service works and/or walk them through the process of using it. Whichever strategy you use, make sure to break things down into easy steps.
You can build trust in your brand simply through your ability to teach people about your product in the simplest way possible. People will want to buy your product when you demonstrate—without a bunch of fluffy marketing language—why it’s so great.
Use high-quality (but appropriately compressed) images to highlight your product’s features. Short explainer videos are also super-effective for showing just how something works. Make sure that every graphic elements clearly connects to the content on the page.
An educational landing page that walks you through its workflow
The fantastic Olivia AI’s homepage combines showing and telling to clearly communicate not only how valuable Olivia will be, but exactly how she’ll be help you.
5. Share your hope for sharing
Friendship is never anything but sharing.
–Elie Wiesel
We know your product/service is awesome. Your loyal customers know it too.
But the problem that plagues every marketer and growth hacker is: How do you share this awesomeness with even more people? Encouraging others to share your website on social media is a great way to get the word out.
Include a social media block with all the social sites you’re active on in your design. Do you have a just a huge following on Facebook? This could be the only widget you need. People will see how many others love you, and join the masses.
But that’s not enough to get people sharing. On the web, it pays to be explicit. Don’t just make sharing quick and easy: put it front and center, and literally ask people to share. Check out how InVision’s done that on their landing pages, if in a tongue-in-cheek way:
Pro tip: Give people a reason to share
Know what’s even better than asking people to share? Giving them a reason to share (i.e., incentivizing).
So if your beta launch has a waiting list, let people know that a share will bump them up the list, like Olivia AI does. Or, let people download a limited version of something—like a couple weights of your font or a few artboards from your UI kit—like Atipo does. Doing that gives people a taste of something they’ll love, encourages them to come back later to buy the whole enchilada, and helps spread the word about what you’re doing. Win, win, win.
Master the fundamental concepts of web design, including typography, color theory, visual design, and so much more.
6. Let the numbers speak for you
In ancient times they had no statistics so they had to fall back on lies.
–Stephen Leacock
We all know that some statistics mean nothing. Just who are these four out of five dentists who recommend Colgate/Tom’s/Aquafresh anyway? And how can they all get 80% of dentists to recommend them?! And how is it that 90% of our brainpower goes unused?
But meaningful stats sourced from customer surveys provide powerful proof of people’s satisfaction.
How many feel that your product has made them more efficient at their jobs? Just how satisfied with it are they? What percentage would agree that your product has improved their company culture?
Statistics provided by your actual customers give you an honest and effective way to show the value of your offering.
Slack uses stats beautifully in this landing page
We’ve really been impressed with this landing page built by Slack, which uses nothing but real data taken from real customers to show you that, yeah, Slack really does cut down on meetings and improve efficiency. At least subjectively.
Whenever possible, try to use real, verifiable facts. But for some tools (like Slack), that can be a bit tough, so qualitative input presented in a quantitative style works beautifully.
7. Design (and write) for your audience
I don’t know the rules of grammar… If you’re trying to persuade people to do something, or buy something, it seems to me you should use their language, the language they use every day, the language in which they think. We try to write in the vernacular.
–David Ogilvy
Make sure your landing page speaks to its audience in their language.
Who is your audience? Are they web designers, sneaker aficionados, or model train enthusiasts? A pair of sneakers may be “tight” or “dope,” but a miniature locomotive is not.
Do your research. Learn your audience’s idioms and jargons. Check out the websites of other companies in the same business and see what tone and language they use when speaking to their audience. Then either adopt a similar tone — or do something totally different to stand out from the crowd, while still speaking in your people’s language.
You can also pull info like gender, age, income, and location from Google Analytics and use that to shape content that connects with the people you care about most.
And note that this data's useful for design too: fans of Converse have their own unique aesthetic, just as miniature locomotion fans do. Your website's overall aesthetic should reflect your customers too.
8. Keep up the conversation
A conversation is a dialogue, not a monologue.
–Truman Capote
When you’re knee-deep in the hustle to build out your landing page, it can be all-too-easy to forget some key steps. Including designing what happens after people act.
Depending on the nature of your page, this can range from a simple “We sent you an email! Keep your eyes peeled.” message to a request for social sharing to a secondary product pitch.
Two landing pages we’ve already mentioned do a superb job with this:
- Tethr: After you submit your email to get the UI kit’s download link, the page transforms into another landing page, this one pitching the core prototyping product.
- Olivia AI: Olivia keeps up the chatbot-style convo with a few animated messages and another CTA asking you to share in exchange for a bump up the waiting list. It’s effective because, of course, you want Olivia STAT — and the share helps spread the word about the product.
9. Make it easy to act
Do the difficult things while they are easy and do the great things while they are small. A journey of a thousand miles must begin with a single step.
–Lao Tzu
We’ve mentioned this in our landing page design tips post, but it bears repeating:
CTAs that win are CTAs that are easy to act on.
Nobody wants to scroll all the way down your epically long, wonderfully detailed landing page just to sign up.
So don’t make them.
It’s pretty easy to make your call to action “sticky,” so it remains in place as people scroll down the page. That minimizes the time and effort required to get onboard, and one of the cardinal rules of UX design is: the less effort it takes to do something, the happier people are to do it. Of course, you can also skip the sticky element and just repeat your main CTA a couple times across the page, particularly at the beginning and end.
So make your CTAs frictionless, and your conversion rates will make you very happy.
Build more engaging landing pages
These days, people get bombarded by web pages trying to sell them something. That can make it tough to make yours rise above the noise. But by using, combining, and even remixing these 9 simple tips, you can create landing pages that stand apart from the competition — and get you the attention your product or service deserves.
If you have tips of your own to share, don't hesitate to comment below!
Published
June 6, 2016
Category
Web design
%20(1).png)
%20(1).png)
