Blog

Five website home page essentials

If you don’t engage visitors with your home page in seconds, they’ll leave your site

1) Headline

Within three seconds, a website needs to tell visitors what the business has to offer. That’s where your headline comes in. It may only be a few words, but it’s one of the most important piece of copy on your website.

Many different types of people might visitor your website, and you’ll be hard-pressed to find a few words that hit home for everyone. Instead, the folks at KISSmetrics recommend writing your headline to target the 20–35% of those people that are most likely to be happy with your product.

Keep the headline itself clear and simple. Dropbox‘s headline is a great example: “Securely share, sync, and collaborate.” It’s simple, yet powerful — no need to decode jargon to figure out what Dropbox really does. Plus, the word “securely” touches on a pain point for people looking for file managers. Notice how they repeat that word again in the sub-headline to really drive the point home.

2) Primary Calls-to-Action

The goal of your homepage is to compel visitors to dig deeper into your website and move them further down the funnel. Include two to three calls-to-action above the fold that direct people to different stages of the buying cycle — and place them in spots that are easy to find.

These CTAs should be visually striking, ideally in a color that contrasts from the color scheme of your homepage, while still fitting in with the overall design. Keep the copy brief — no more than five words — and action-oriented, so it compels visitors to click whatever you’re offering. Examples of CTA copy are “Sign up,” “Make an appointment,” or “Try it for free.”

To optimize your CTAs for mobile users, make sure it’s big enough to easily touch with a finger.  If you’re using a button, make it a minimum size of 44 px by 44 px so it’s big enough for people to press with their finger. Consider adding whitespace around your CTA, too, so mobile visitors can easily tap it without accidentally clicking on something they didn’t mean to.

Uber has a few great Primary CTAs on their homepage that are geared toward different personas: “Become a Driver” for potential drivers, and “Sign Up” for potential riders. Notice how starkly the bright blue CTAs contrast with the dark background.

3) Supporting Image

Most people are visual. Make sure to use an image (or even a short video) that clearly indicates what you offer. Use images that capture emotion and cause action, and avoid cheesy stock photos. (Here’s a list of 17 great places to find free stock photos online.)

To optimize your images for mobile users, use high-quality images that have a reduced file size. (HubSpot customers don’t need to worry about this, as images uploaded to HubSpot’s software are automatically compressed. Otherwise, tools like TinyPNG will do the trick.) Also, add alt text to your images in case mobile devices block any images by default.

The 4 Rivers Smokehouse homepage is a great example of emotional imagery: It features a series of short, high definition, and mouthwatering videos that play on a loop behind a simple headline, sub-headline, and primary CTA.

4) Social Proof

Social proof is a powerful indicator of trust. Your product or service could be the best in the world, and it’s okay to lay that claim — it’s just that people may not believe you unless they hear it from other people, too. And that’s exactly what social proof does.

Include just a few of your best (short) quotes on the homepage, and link to case studies if applicable. Adding a name and photo gives these testimonials more credibility. Codecademynails this on their homepage, and you can click into any one story to read the whole case study.

5) Navigation

The design and content in your homepage navigation could mean the difference between a website conversion and a bounce. To decrease bounce rate, give your visitors a clear path into your site from the homepage. Make the navigation menu visible at the top of the page, and organize the links in a hierarchical structure.