Ecommerce website headers: 4 simple things you need to get right

Posted by Hannah Stacey 10 Jan 17

ecommerce website header

Website headers. Sure, they might not be the most glam part of ecommerce store design, but they’re arguably one of the most valuable pieces of on-site real estate going.

Why? They’re often one of the first things a visitor sees when they land on your site, and play an important role in making a killer first impression for newbies to your brand, as well as performing a navigational function that’s crucial to moving browsers on through the journey to purchase.

So yeah, pretty important.

This blog post will walk you through several key elements of ecommerce header design:

  • Primary category/product navigation

  • Secondary navigational elements

  • Search

  • Offers and promotions

We’ll go over some best practice tips and also offer some real-life website header inspo from a handful of top online retailers that have really nailed it with header design. And remember: testing is everything, so be sure to experiment with these elements to see which leads to the most conversions.

Primary navigation

Optimising navigation can be a big winner when it comes to maximising revenue generated by your store. And the way in which navigation options are conveyed in your main header is all-important, especially to casual browsers who have turned up with only a vague idea of what they’re after.

a) Convey product breadth

Some visitors will arrive at your site knowing very little about who you are or what your proposition is. And if they don’t feel like you’ve got what they want, they’re likely to bounce, pronto. 

The main navigation bar on your site is the perfect opportunity to showcase the breadth of your product offering without forcing visitors to delve into the depths of your site.

For example, if you’re a menswear retailer, you might want to include different departments (‘new in’, clothing, shoes, accessories, etc.). If you sell both mens and womenswear, ensure that categories within each department are easily reachable (like the example from Zara below).  

zara website navigation bar example

b) Slice and dice your product offering in your dropdowns

An extension of the point above, getting your dropdowns right is also really important for helping visitors explore and get where they want in minimal clicks.

Many online retailers now opt for ‘mega menus’ - perhaps not quite as exciting as the name suggests, they’re a single dropdown that shows a large number of options in one panel, grouping them into categories and subcategories. It’s less complicated than it sounds - two great examples are John Lewis and Topshop (see both below), who enable visitors to search by category, but also by collection, fit, brand etc. Super userful.

Bonus tip: don’t be afraid of including a subcategory in more than one parent category if it’s logical to do so (for example, putting a ‘desks’ category in both the ‘tables’ and ‘office’ parent categories of your dropdown).

Topshop header navigation bar, dropdown menu

john lewis drop down

c) Let’s get visual

Adding a visual element to dropdowns is another nice touch. MAC (below) is a great example of this, with its super slick sidebar approach, in which each product and category has an image that helps guide the visitor. Likewise, Mashburn incorporates icons into its dropdowns to guide visitors to the right page.

mac header

Welcome___AnnMashburn_com

 

New Call-to-action

d) Don’t forget content

Content - whether in the form of lookbooks, online publications, blogs etc. - is becoming an important part of an ecommerce marketer’s arsenal, and promoting it effectively is half the battle won.

Don’t forget to use your navigation menu to promote content that you’re creating (making sure that the content in question does a good job of selling your products rather than distracting would-be buyers). Benefit, below, saves a section of its dropdowns ('Beauty Banter') to promote its content. 

Benefit websote header

Likewise, Net-A-Porter reserves a part of its main navigation bar for ‘magazines’ - which triggers a dropdown featuring Porter magazine and The Edit.

Screen_Shot_2017-01-10_at_13_29_44.pngFurther reading

Secondary navigational elements

So we’ve established that helping visitors along the path to purchase with a well-thought-out navigation bar is one important aspect of ecommerce header design. But there are a number of other navigational functions an ecommerce header can - and indeed should - incorporate.

a) Quick link to shopping basket

When you’re trying to secure that all-important purchase, the last thing you want hampering your efforts is a visitor not being able to find their shopping basket (hopefully full of your products) easily.

Many online retailers (like New Look, below) choose to link to basket (and even wishlist) direct from their website header.

new look header

 

b) Links to the real world

For multi-channel retailers, having a quick link to a store finder can be great, especially for anyone who is out and about and trying to track down your closest store. Schuh positions this link right about its logo in the top right hand corner of the page.

schuh header

c) Newsletter sign up and account sign in

While some choose to position newsletter signup boxes in the footer of their homepages, many online retailers keep theirs prominent, above the fold in the header like Lazy Oaf below. Likewise, being able quickly sign in to an account should also be incorporated into the header.

Lazy Oaf navigation bar newsletter signup

The search bar

The features that we’ve covered so far have been, on the whole, geared towards casual browsers; those who perhaps do not have a solid idea of what they want to buy. But what of potential customers who do? This is where the search bar comes in!

It’s often said that people who use search tend to have a higher than average likelihood of converting, so it’s important to make your search box easily findable. Don’t make me search for search, bro.

Nonetheless, don’t be fooled into thinking that encouraging all users to use search will result in higher conversion rates across the board - this is classic case of 'post hoc ergo propter hoc'.

The placement and design of your search bar are prime candidates for testing - be sure to experiment to see how adjustments affect your conversion rates.

a) Search bar placement

So first things first: where should your search bar be positioned in your header? The answer to this question very much depends on how important search is as a method of browsing your site.

If search is the primary navigation method for the site, position the search-box centrally on the page, like House of Fraser below. If it is secondary (as it is on most ecommerce sites, where typically 5% of visitors use search), place it top-right on the page header, like Abercrombie and Fitch.

Pull & Bear also provides really nice example of slick search bar design.

house of fraser header

abercrombie header

pull and bear search

b) Search bar design

Running with the 'not having to search for search' theme, the most important thing about the search box design is it visual salience - that the search box it prominent on the page.

This is achieved by size (make it noticeably big), visual isolation (white-space around it) and a high-contrast call-to-action button (typically labelled 'search'). Some online retailers are even going with a simple magnifying glass these days - which research suggests is now universally recognised as representing search. Below are some nice examples from ASOS and Adidas.

asos header

adidas header

Further reading


Offers and promotions

Last but not least, many retailers use their website headers to draw attention to particular promotions or special campaigns and ranges. Below are some nice examples from Argos, Claire’s and ASOS.

argos header

claire's header

asos header

Tl;DR

  1. Ecommerce website headers perform a really important role, both in terms of navigation and making a great first impression.

  2. There are a number of elements worth thinking about with ecommerce header design:

    • Primary category and product navigation

    • Secondary navigation

    • Search

    • Offers/promotions

  3. Testing is incredibly important - ensure that you’re experimenting with the impact that tweaking these elements has on conversions

  4. Primary navigation - Ensure that:

    • Your header reflects product breadth

    • Your dropdowns are logical and help guide visitors using parent and sub-categories

    • You try out promoting content within the primary navigation

  5. Secondary navigation - Ensure that:

    • Your header links to key elements in the purchase journey like your shopping basket, account sign in or a store finder

    • You consider including a newsletter sign up box in your header

  6. Search - ensure that:

    • You test the position and prominence of your search box to see if this impacts conversions

    • You test the design of your search box, making sure that it is easy to find and contrasts with its surroundings.

  7. Offers and promotions - test out whether including any promos that are running in your header encourages people to take you up on offer.

 

Triggered email for retailers by Ometria - find out more

 

Topics: Ecommerce website design, Ecommerce ux

IRpersonalisation playbook.png