x

20 Bitesize Tips for a Better Home Page

From first impressions to pointing the way, your home page does a whole lot of heavy lifting. Joel Klettke shares 20 tips you can put to use today to help make your home page drastically more effective.

It’s the Grand Poobah of all pages – the most carefully planned, written and designed place on your site. It may be the first face a lead sees – or the last one. But for all the work you put in, your home page has just seconds to get your message across.

These tips are short enough to chomp into over lunch, but actionable enough to make a difference. If you’re really in a reading mood, find 113 design guidelines here.

keep in mind: Your home page is where all customer personas converge.

Messaging must apply to all of them. Focus in on what’s common: your value proposition. Do not be abstract. Do not try to be clever. Confirm that the site is what they came for, then wow them with the benefits of your offering.

basecamp

Above: Basecamp leaves no question as to what they do or who it’s for, adding a nice dose of social proof.

Layout & structure

1 Prioritize Placement

For left-right reading languages, 69% of a user’s time is spent looking at the left half of the page. We also tend to read in an F-Shaped pattern. Place critical elements and messaging in these high-attention areas.

2 beware of SLiders

Sliders are typically bad for conversions and users, robbing them of control, cycling too quickly and looking too much like banners/ads. If you do use them, make them fast-loading, manual-cycling and relevant to your complete market.

3. White Space: use it

White space increases reading comprehension, places prominence on other elements and increases trust. Chaperro, Shaikh and Baker also found that white space improves user satisfaction and experience.

Clutter: Feeling lost yet?

Clutter: Feeling lost yet?

4. Scrolling Happens

Users DO scroll - and “the fold” varies greatly between devices/screen sizes. While critical elements should still be placed where they are sure to be seen, there is no need to shy away from long-form content.

5. Less is more

Too many choices lead to inaction and abandonment. Reduce navigation items, limit calls-to-action (preferably just one) and remove unimportant customer pathways.

Copy

1. Home Page ≠ aBOUT uS 

Your home page is not the place to talk about yourself. It’s where you show customers what you can do for them (value prop, remember?). Check how often you’re using “we”; present a solution, not a biography.

2. No Wallpaper, Please

“Award winning”, “Clinically proven”, “We are the best X”, “High Quality”, “We get to know your business.” Statements like these are so ubiquitous that they’ve lost all meaning. Don’t lean on clichés for self-affirmation. This piece can help you get past wallpaper copy. And please, never waste space welcoming people to your website – this isn’t 1999.

3. Don’t Get Cute With Critical Elements

Navigation elements and orientating way points like links are not a place to break convention. Don’t obscure important pathways with “clever” or ambiguous language. (E.g. Don’t call your “Contact Us” page “Ring Ring!” in the nav. It breaks expectations – and not in a good way)

4. Headlines Get More Attention Than Images

The case for compelling headlines continues to grow. Not only do they communicate your value prop, they also eat up more eyeballs. Make them central to your design, and don’t waste that space with fluff content.

getambassador

Example: GetAmbassador.com puts their headline front and centre, then supports with images. They also sum up their value prop to the customer at a glance.

5. Size matters (Zing!)

Visitors prefer shorter width text, but read long-length structures faster. This ties into layout/design: use initially short paragraph layouts to draw in a reader before layin’ on the long stuff.

6. Test Without Images

If you want to be sure your copy is strong, view it in a text-only format. Does it convey emotion? Is your value proposition clear? Would it still be worth reading without all the visual stimuli? If not, revisions are due.

Visuals & Design

1. Customers are shallow. Invest in good fantastic design. 

Multiple Standford studies show customers judge companies by their design – just like attractive people are treated differently. If your site looks dated or ugly, aesthetics may be robbing you of business.

2. Mind the “Van Restorff” Effect. 

What stands out is what gets remembered. Value props and critical elements should stand out. You can use…

  • Size (Fitt’s Law applied)
  • Contrast (Color attracts the eye; contrast differentiates)
  • Leading gazes (When viewing images of people, we follow where their gaze is pointed)
  • Directional cues (Arrows, etc.)
3. Ads – and things that look like ads – get tuned out. 

Nielsen found that  content that shares too much in common with advertising will be ignored. Be careful of clever formatting, especially in side bars.

4. images and graphics are not “decorations”

The visuals on your site should serve a purpose; not just “zazz up” the page. Visitors ignore decorative images. The images you choose must be:

  • Immediately relevant. Images used must build either story or context. “Story-building” images intrigue the viewer and drive them to the copy to learn what is going on. Context-building images show a product or service in action or demonstrate an outcome.

A fast example: Here is a Nixon watch. It looks okay.

nixonwatch

Here is someone wearing the same watch. It looks much better. Both images show the same detail – but only one shows how you look wearing it.

watchworn

5. Death to Stock Images – Especially of People

People ignore stock images. Stock images that show people who don’t work for you (like that customer service rep in the headset) tell the world “We are not real people. We will not show our faces. We are not to be trusted.”

Social Proof & Trust Factors

Similar to my post on addressing fear to improve product pages, building trust starts by removing fear.

1. Show your “NAP”

Instantly answer the question of “Is this a real business?” by sharing your address and phone number in one consolidated area. Even if they don’t ever contact you, customers appreciate the safety net. It’s proven.

2. Show your Face (and those of your admirers)

Studies show images can increase trust and empathy - but they also show that you’re a real person. Use headshots next to testimonials to boost credibility and trust in the fact that they came from real people. (h/t to Gregory Ciotti)

3. Show your Proof

Testimonials, reviews, credible partners. All 3 add credibility to your claims and act as “external proof” of your claims.

4. Be cautious with trust symbols

Trust symbols like Norton/BBB only add credibility if people recognize them. Otherwise, they can have the reverse effect (i.e. 8 different “secured by” icons). Use sparingly.

We’re done!

That list is far from exhaustive, but hopefully there were a few new nuggets in there that you can put to use!

  • Pingback: 20 Bitesize Tips for a Better Home Page | SEO f...

  • http://thedsmgroup.com/ Jason Diller

    Exactly what I was looking for. Perfect post at the right time! Cheers

    • Joel K

      Cheers, Jason – glad to be a help!

  • ronellsmith

    Whew! Joel, you included so many of my pet peeves in this piece, I’m going to recline in my chair and stare at the screen for a moment. Elated. Seriously, this is a piece I wish I could give as a handout to companies creating/managing websites.

    For example, even some of the best companies still use sliders, even in verticals where it is widely known that sliders can be conversion killers.

    RS

    • Joel K

      Haha! I’m using a slider. I break my own rule. Argh!
      But I’m glad you got value out of it Ronell. As always, thank you so much for taking the time.

      • ronellsmith

        Oh! I use a slider, too. The problem, as you make clear, is they can be problematic, especially for ecom sites. You nailed it, as usual.

        RS

  • Pingback: 20 Bites Sized Tips For A Better Home Page | Anastasia's Annotated Bibliography

  • Pingback: http://www.iacquire.com/blog/20-bitesize-tips-for-a-better-home-page/ | Danielle's Annotated Bibliography

  • http://www.caitlinsupernatural.com/ Caitlin Grussing

    Hey Joel, Thanks for all of the great info! I’m starting an ecommerce site and the info above is really helpful. Your post about product page content will also be very useful. I’m wondering: could you elaborate some more about what kind of content/text should be on homepages, as you have done for product pages?

    • Joel K

      Hey Caitlin – sure, but I’ll have to be brief.

      The purpose of a home page is to get the lead to:

      a) Immediately identify the page as relevant to their interests (clear information on primary pain points/need states)

      b) Quickly navigate their way to the section of the website most relevant for them

      c) Communicate clearly and obviously the brand’s key values.

      How that translates into content:
      Headers often focus on in answering the “Who is this for, and what does it do” – check out http://www.salesforce.com/: “Sell More. Grow Faster. Grow Anywhere”. Right away, a reader knows what problems this tool will help them solve. And “Close Anywhere” is a qualifying statement; the language will only be used and understood by people in sales.

      The content that follows discuses how the tool will make the sales person a rock star, then offering three buckets for three different stages of the buying cycle (View Demo, Editions and Pricing, Free Trial), allowing the consumer to self-identify according to their place of need and proceed.

      Your content on your home page needs to do the same: Disambiguate, emotionally connect as a solution to obvious problems, guide to the next stage.
      Does that help?