Homepage Design: The Tip To Top All Best Practices

Mobile websites’ homepages beat the pants off regular websites’ homepage designs at achieving a homepage’s goal: driving the visitor deeper into the site.

Q: Why are the homepage designs of mobile sites so much more effective than the design of ordinary homepages?

A: The reduced space on mobile screens forces choices in what to display, and this is especially true on the homepage.

Look at Amazon’s regular design:

Full size design of Amazon's homepage

The design of Amazon’s full size homepage suffers from clutter. The extra screen space available has lead to a unfocused homepage design – and this despite generous whitespace.

Amazon home page gaze plot

The gaze plot for Amazon’s home page shows that visitors’ eyes will likely bounce all over the page, not focusing on a single spot.

Amazon's homepage design overlaid with a heatmap

As with the gaze plot, the heatmap indicates several very strong points of focus on the page, increasing the bounce rate and decreasing conversions.

Look at how the gaze plot and heatmap from Feng-Gui (that’s predictive eye-tracking; check out my friends at MiraMetrix.com for actual eye-tracking equipment) shows the human eye having too many focus spots on the regular home page … and this is Amazon we’re talking about, the retailer everyone looks to for leadership in usability and conversion rate optimization.

Compare that to their much easier-on-the-eyes mobile homepage:

Amazon's mobile homepage

The page’s simple design limits the number of eye-catching elements, making it much more effective.

Amazon mobile homepage gazeplot

The gazeplot for Amazon’s mobile homepage tells us that the Kindle promo draws most of the attention.

Amazon mobile home page heatmap

This heatmap shows again that the page’s primary focus is on the Kindle, and only secondary to that are the other, photo-less, calls to action.

The difference isn’t always as dramatic, as when the layout has already been well designed with a main focal point and the remainder of the page in secondary focus. Observe the change from eBay’s regular homepage to their mobile site:

eBay's regular homepage design

The full-size eBay homepage design is built simply with the goal of drawing visitors to browse popular products or else to learn about eBay’s buyer protection measures.

ebay Mobile Hompeage

eBay’s mobile homepage: designed to make visitors click through on a category.

Q: Based on the above example, couldn’t you argue against designing a homepage by starting with the mobile site? Where would you place the product spotlight?

A: It’s far more likely you’ll succumb to the temptation to clutter your homepage if you first create a full-size design, rather than designing the mobile homepage first.

Besides, look at the focused, effective job Amazon did with their mobile homepage, which spotlights the Kindle. If you must have a spotlighted item, you can do that on mobile and translate that later to your regular home. Note also that the valuable upper-left hand screen real estate on eBay’s full size homepage is dedicated to the main navigation, just as the mobile site design emphasizes it.

So if you’re designing a new site for a client, here’s a best practice tip:

Build the mobile homepage design first. Then port that to the non-mobile version of the homepage. You’ll find a lighter, more usable design.

Even better, by starting with the mobile design, you have less to do quality assurance testing on before going live. That means you can get a design out faster.

Liked this? Check out my collection of links and guidelines on mobile landing pages and this mobile usability case study.

Comments

  1. Interesting Gabe. I have to admit I find the new Amazon layout to be really obnoxious. Can't believe with all the testing they do that this new layout converts better. Some good food for thought here thanks again.

    Comment by Dan - September 20, 2011 @ 12:53pm

Leave a Reply