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:
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.
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.
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:
The page’s simple design limits the number of eye-catching elements, making it much more effective.
The gazeplot for Amazon’s mobile homepage tells us that the Kindle promo draws most of the attention.
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:
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’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.