There’s no right or wrong way to eat an Oreo, and there’s no cookie-cutter template that works best for mobile home pages. While you have the freedom to design as you wish, each design element you choose either supports or detracts from your home page’s objective: guide your visitor to a click deeper into your site (as an alternative to using mobile search or navigation.
This chapter explores eight “types” of home page merchandising zones commonly used on mobile commerce sites (often used in combination), with design and usability tips for each.
When considering which styles to apply to your home page, keep in mind the following:
- The context of the mobile visitor: Where is he? What is her intent? How does he use a mobile device?
- The relevance of content to the mobile context and the visitor
- The opportunity cost of using one tactic vs. another, given the design constraints of smartphone view ports
1. Entry pop-ups
Love them or hate them, entry pop-ups are becoming equally as popular on mobile commerce sites as desktop. While they are interruptive, their value to your business (increased email and SMS opt-ins) can exceed what you may lose in bounced traffic (if they affect bounce rates at all).
While A/B testing this tactic is strongly recommended, it’s important that your test design is user friendly, and your messaging persuasive. There are multiple variables at play when testing opt-in overlays; it’s not a matter of simply testing with versus without. For example, your pop-up will contain a combination of headline, offer / request, call-to-action button and opt-out mechanism.
Mobile entry pop-up tips:
- Ensure they render properly across multiple devices and browsers, and don’t bleed outside the device’s viewable area in portrait mode.
- Ensure the opt-out icon is clear and doesn’t compete with background design or other elements. In the Focus Camera example above, the “X” is white-on-white, nearly invisible (though the “No Thanks” link offers a second way to close the lightbox).
- Ensure secondary calls-to-action don’t compete with your overlay button (as the “Message” button does in both examples).
- Allow the user to escape the overlay by touching outside the box area (“behind” the overlay).
- Consider suppressing the overlay for returning visitors that have previously opted out, or existing subscribers that have arrived via email referral.
- Avoid “takeover” screens (below).
When content isn’t visible behind the overlay, it appears as a “gate” rather than a pop-up. Though the Clymb above uses an “X” escape route, some visitors will assume the only way into the site is through social sign-on.
Testing tip: If you’re testing an email opt-in entry pop-up, for example, test it against showing the same offer prominently on your home page. The goal of your experiment is to tell you whether the pop-up approach is what drives sign-ups. Otherwise, your results may be skewed by the fact the pop-up contains an offer.
2. Promotional offers
The role of your mobile home page is to point the visitor to something click-worthy. If you’re running a promotion, the home page is a logical place to communicate what’s happening on your site.
A common mistake I’ve found with responsive ecommerce sites is scaled-down promotional graphics aren’t optimized for mobile. Ensure offers are readable (including the finer print).
Bealls’ promotional graphics include text that’s near unreadable on mobile devices
Also ensure that promos don’t blend in with header navigation, and are large enough to click without accidentally activating other hit areas.
Sports Authority’s shipping promotion blends into the header menu
Bonus tip: Coupon codes are a pain to enter on mobile. Fathead’s “tap to apply discount” makes it easy to auto-apply to the cart, and provides immediate visual assurance of “success” to shoppers.
3. Graphic features
Ensure images scale to mobile
Like promotional banners, graphic merchandising zones must be mobile-optimized. Too many m-commerce sites scale down images and text to an unreadable degree, and overlay light text over busy background images.
Though these graphics are more readable as they scale up in landscape orientation, don’t bank on users trying that approach. When in doubt, swap them out for mobile-optimized content.
Clearly connect links to images
Rather than overlay text on top of images, some mobile sites separate text from images. While this makes text easier to read, it can also be harder to determine which text blurb goes with which image. For example, it’s not 100% intuitive which image represents Tween Shop as the user scrolls.
In the following examples, it’s not clear which images their “Shop Now” buttons relate to.
Extra white space between graphics and text can make this more clear, as can connecting text to the images, as below.
Show off store value props
Showing featured product and categories on home pages is a gamble – the larger your product catalog, the less likely your features will be relevant. And on mobile, you don’t have much space to gamble with!
Instead, use your mobile home page to romance your store’s value propositions. Give visitors a compelling reason to stay on your site and explore your catalog using your well-designed mobile navigation menus.
4. Category menus
Showing a top-level category menu is the OG approach to mobile design. Back in 2011 (before the age of the hamburger menu), most major mobile commerce sites looked like this:
Today, only a handful of m-com sites take this approach to the home page. Despite its utilitarian look and feel, opting for a scannable list of available product categories can be an effective way to communicate to mobile visitors what you have to offer, and help them move off the home page to a category list as quickly as possible.
A more modern twist on this approach is to combine navigation with a graphic header.
This allows you to feature a specific category, promotion, or value proposition, and add some aesthetic appeal to your home page.
If you do choose to show a category menu on your home page, avoid truncating it to a select group of categories. This will discourage your visitors from using your full menu, and many will assume what you display in your home page menu is all you have. And pass on the home page sliders!
5. Graphic categories
An alternative to link menus is to offer a visual way to explore your category offering.
Again, showing a truncated list of top or featured categories risks giving visitors the impression that’s all you offer. I recommend going all-or-nothing on this approach.
It’s also important to make it clear that you are featuring a category, not an individual product. Emphasize the plural form of the category label (or include “View All” links), and when possible, use images that include more than one product.
To encourage scrolling, ensure graphic links (and any graphic features) “slice” (partially appear) at the bottom of the default home screen in portrait mode on each major device. This serves as a visual cue that more lies below the “fold.”
6. Featured product
Isolating featured product on the home page is a risky merchandising strategy. The larger your catalog, and the more diverse your customer base, the lower the chances you’ve picked the right features to affect your customer journey and revenue.
What percentage of mobile customers are enthralled by the flannel shirt?
One strategy is to communicate a compelling reason why a product is featured. Rock Bottom Golf’s Daly Deal (not a typo) is a feature that can motivate visitors to check back regularly (with a relevant email opt-in to boot).
Ditto Newegg’s urgent, mobile-only deals.
Another approach is to highlight the featured product’s value proposition. Rather than populate product slots, creatively suggest to visitors why these products are worth their attention. Backcountry’s “weightless warmth” and “responsible durable goods” taglines are examples.
Beware of horizontal scrolling
A responsive design trend is to collapse featured products and content from the desktop version, which may appear in a single row horizontally, to a slider. While this results in less vertical scrolling than presenting them in a stacked column, it’s easy for a mobile user to miss forward and back controls if they’re not highly conspicuous.
In the example above, it appears there’s only one featured product, though there actually are several. Bellacor makes its controls more obvious.
7. Non-product content
The “content+commerce” trend is strong on sites like Mr. Porter, which features editorial pieces that rival popular magazines.
While content can contribute to sales, it’s important to validate whether it deserves mobile home page love. Pay attention to analytics (click through rates on content), and run mobile A/B tests with and without home page non-product content to ensure it’s not harming your sales goals.
8. Social galleries
Galleries that populate based on #hashtag submissions on social networks may be effective on mobile home pages for a few reasons:
- Browsing social content is one of the top things people do on mobile devices, it fits the device context
- Showing what “people like you” are wearing, doing or how they’re using products is one way to apply guided selling via inspiration (assuming social content is “shoppable” with associated products linked to photos)
- Mobile visitors may be more likely to take action on the #hashtag and contribute when their mobile device (and social apps) are in their hands (vs. desktop users)
As with non-product content, showing social content on mobile should be tested against not showing it (and make sure to consider its impact on page load speed, and how that impacts your mobile experience and key metrics).
Final tip: Make sure everything works in landscape mode
In order to zoom in to pictures and view text and other elements more clearly, some visitors will switch to landscape mode, which can make some images and merchandising zones too difficult to view in context.
For example, when a product carousel is viewed in landscape mode, it’s less obvious that there’s more to explore by scrolling left or right.
In this example, it appears only a single product is recommended.
Also, the > attached to “Shop Brands” is so far from the link text that they don’t appear connected. Moving them closer together can solve this usability issue.
Test your mobile home pages
The merchandising options described in this chapter are all elements you can A/B test. I recommend you begin testing “with and without” a given merchandising zone before optimizing how you design or populate it. Merchandising zones that prove their effectiveness on your mobile home pages are the ones you keep and refine with further testing (versus assuming they work and attempting to optimize them under that assumption).
Need help with your mobile commerce design or testing strategy? Drop me a line.
Ecommerce Illustrated is a project of Edgacent, an ecommerce advisory group.