5 eCommerce Home Page Elements You Can’t Ignore
What makes for a great eCommerce home page? Such a subjective question couldn’t possibly have a definitive answer…or could it?
With so much to consider (and plenty at stake), the perfect eCommerce home page can seem like a far-off dream. But, among all the possible approaches and options, you’ll find five simple home page elements you can’t ignore.
Brand Logo Treatment
Your eCommerce home page logo is how you represent your brand to online customers. It sets the aesthetic of your website, creates brand association in your customers’ minds, and represents a promise for what shoppers can expect from your website.
Your logo should be visible in a way that’s suitable for your brand and audience. For example, the logo treatment for a nightclub’s website could be vastly different from that of a healthcare website. While these logo treatments might be different, they’re “suitable” for each brand and audience.
Website Navigation
Along with appropriate logo treatments, your home page should include a navigation structure that clearly communicates the different categories on your website. Expanding and collapsing menus have become standard, but there are many other options that can effectively display your site’s subcategories and related content.
Amazon’s desktop view displays a small logo at the top-left and an easily identifiable expanding/collapsing navigation menu.
True Religion’s logo treatment is much more prominent than Amazon’s, which is appropriate for their brand and audience. Similar to Amazon’s, the brand’s expanding/collapsing navigation menu is prominently displayed below its logo.
Hero Banner
A hero banner is a large image, typically centered below the home page logo and navigation menu, stretched across the entire width of the computer screen. Hero banners can rotate among several different images or they can display a static, nonmoving image.
Hero banners are often used for eCommerce personalization leveraging customer data like gender, location, or shopping history. Personalization is a great way to transform a disconnected experience into a more personalized one.
In addition to personalization, hero banners are the perfect place to communicate your brand story and aesthetic.
Tourneau’s hero banner creates a compelling narrative that evokes personal emotion.
Promotional Merchandising
You can use your home page hero banner as an opportunity to merchandise your products according to special categories, such as spring collections or trending fashions. How you design and format this section can vary, depending on your brand or specific campaign objectives. Sometimes a tiled design is best while other times a large banner with glamorous photography works better.
Crock-Pot uses its hero banner to promote specials, deals, and offers.
Mobile Optimization
Less is more when it comes to mobile-optimized home pages. For example, the images you serve to desktop users shouldn’t be the same ones you serve to mobile users. The last thing you want to do is force customers who might have spotty 3G coverage to download a 900k banner image.
In addition to size, the format of your hero banner should also be different between desktops and mobile devices. The same goes for your navigation menu, which should display off-canvas using a hamburger menu.
Crock-Pot’s mobile experience displays an appropriate logo treatment for its brand and audience, a hamburger-style navigation menu, and reformatted hero banner.
As you can see, the less-is-more approach on mobile devices ensures all the key elements are there while also promising a positive online shopping experience for consumers.
The next time you’re due for an eCommerce home page review or redesign, consider these five simple elements that can have a not-so-simple impact.
Jerry Manshreck is a technical lead at LYONSCG.
