On average, visitors cumulatively spend 23% of their attention on the header section of your website. It’s the first thing visitors look at. That’s why last week we learned from eye tracking studies that the header is one of, if not the most important areas of any website.
Any element that gets this much attention is, naturally, worth investigating more closely. We’ll deconstruct different parts of the main navigation area to discover what really goes into creating a header that visitors love.
The Fundamentals of Navigation Design
Although the header navigation is seen by 99.99% of your visitors, you have the amount of time it takes for their eyes to zip from left to right to anchor their trust and convince them to stay and buy from you.
With this in mind simplicity, colors and obvious titles are crucial. Typically the header section includes the main navigation, a search bar, a cart button and additional information like customer service, store locator, top selling items etc. Those extra items are determined by your visitors onsite behavior.
If a lot of them are looking for your store locations, add that to the header. Customers complaining on how it’s hard to reach your business? Add a link to live chat. Running a promotion/special program you’re trying to push more sales for? Add that. Whatever is most important to you (ideally backed by data) should be in the header.
For one merchant that might mean running a sales promotion in the header. For another it might mean live chat + store locations. Just remember that space is still at a premium, so make data-backed decisions based on Google Analytics and other data that clearly shows what people are looking for.
One bigger promo (Free Shipping, Prime Video, 10% off sitewide) + two, three links to other relevant information/content (live chat, store locations and the like) is all you have room for.
Think Geek displays customer service, store locations and a prominent free shipping threshold, which has shown the ability to drive more conversions on their header:
While Amazon heavily promotes its Prime service:
And DODOCase has integrated their top selling items into the main navigation bar itself:
Other companies experiment with adding themed categories like “Halloween,” “Christmas Gifts,” “Gift Guides,” and many others to drive traffic and sales to relevant categories at different times throughout the year.
You could also test dedicated “What’s New” section for frequent buyers/return visitors. They’ll want to see what new products you have without going through the menus or using the search bar.
Even simple techniques like rearranging main navigation items can have an impact on your sales. M&J Trimming found this out when they tested their header and saw a 19% lift in sales after optimizing and arranging their main navigation items.
Your shoppers don’t want to think as they browse. Make their journey smoother by designing a header that is tailor-made to their wants and needs. It should be simple, clear, and most importantly, attractive to your visitors.
Whatever you decide are the most important elements to your header, don’t forget about A/B testing them before deploying it for all your visitors. Just because something worked for others, doesn’t necessarily mean it will have the same results for you. Do your own testing.
Image via Visual Website Optimizer
The Forgotten Star of The Show: The Search Bar
The key to a great search bar is simple: When you sell products that people know to search for, make the search bar more prominent. Think Amazon-style search -- big, bold, and the center of the header area.
Also, product images in site search have shown to boosts conversions:
Image via American AF
In fact, a company called BrickHouse saw a 100% lift in conversions when they implemented product search with images. Will it have the same effect on your site? Maybe. At the very least it’s an idea for an upcoming test whereby you run search with text only for a month followed by one that includes images and then compare results.
The Reason They'll Buy: Site-Wide Benefits Bar
So now, you’ve got a well-designed header (with only the most important information). That’s great, but it’s only the beginning! ConversionXL,the world-leading conversion optimization agency, advocates including a benefits bar just below the header.
The idea is to clearly communicate what makes what you offer unique and the benefits of buying from you over, say, Amazon. The site-wide benefits bar acts as a trust anchor for visitors who would otherwise feel dissuaded of buying from an unfamiliar brand.
Benefits could include things like free shipping thresholds, shipping time, payment plans (buy now/pay later, financing etc), geographical info (American owned, Made in the USA etc) or whatever else is potentially important to your customers.
Think Geek on the other hand uses the same area just below the header to add secondary navigation that includes links to, presumably, their most visited subcategories. Just below that they’ve added a third level with logos of some of the brands that they carry merchandise for. This serves two purposes:
- It enables die-hard fans of a given franchise to navigate directly to the merchandise they were looking for.
- Those world renowned names build an extra layer of trust. They say, “Look! We work with such huge brands, it’s safe to buy from us.” This works because of a principle of persuasion and influence known as “social proof.”
Now that we’ve covered the small stuff in the header, it’s time to look closer at the big one -- the navigation menu.
Navigation Structure - The One Thing You Need to Get Right
In navigation, proper product categorization - or information architecture - is the name of the game. By grouping relevant products together you’re making it easier for potential customers to find what they are looking for. You also make it possible to view and compare a group of products that share a similar set of qualities.
All this makes it easier for the end-user to make a purchase. As for hierarchy, there are two types of categories:
- Parent Categories
A parent category is the name given to a group of subcategories that best describe the shared qualities of that group, while a subcategory is used to group specific products together. Products such as shoes, hats, pants etc.
Sometimes it can be hard to choose the exact subcategory that a given product should belong to and/or it could logically appear in multiple parent categories. For example, users might be looking for a coffee table in the “Living Room,” “Office” or “Tables” section.
How do you choose which one is the most relevant category for the coffee table?
Yes, the ideal solution is to have unambiguous top-level categories, but this is not always possible.
To avoid missing out on sales (visitors looking for coffee tables under “Office”, but you have it in the “Tables” section only), consider having products and subcategories under multiple parent categories.
Best Buy, for example, has the subcategory “Printers, Ink & Toner” under “Home & Office” as well as under “Computers & Tablets” and it makes total sense to do so.
Why make it harder for potential customers to find stuff?
I know what you’re thinking.
“How am I supposed to know which categories people will be looking for coffee tables under?”
Gaining these insights is usability testing 101 which Tommy Walker gave an overview of last week. Herbert Lui will be diving deeper into how to conduct a study later this week, but basically, you would ask the user to think aloud while trying to find a table. As they complete the task, make note which categories they’re looking in. If multiple users are looking in the same place, but no tables are present, you have found a minor improvement that can lead to big revenue gains down the road.
Grouping subcategory options in drop-down menus is vital in making the navigation manageable, scannable and intuitive. The problem is that many sites use text labels and don’t make sub-header navigation clickable. Users expect to click and be taken to a broad category, and when it’s not possible, it’s a problem.
Just look at the navigation of Pottery Barn below. Everything annotated is a sub-header, but none are clickable:
Screenshot via Pottery Barn
Things get even weirder when you take a closer look and discover that some - but not all - subcategories have a link to see “All” - the same action as clicking on the subcategory itself should accomplish. This just wastes pixels and makes the drop-down navigation bigger than it needs to be.
Shoppers should be empowered to scan navigation labels and instantly understand what those labels represent. To enhance scannability, start with the most descriptive word and avoid jargon.
Labels that are clear and easy to understand are more effective. Harvard Business Services rewrote the labels for some of their navigation elements to be more informative and action oriented and as a result saw 15.68% uplift in sales.
Research has shown that the first 10 seconds of the page visit is critical for users’ decision to either stay or leave. 10 seconds. That’s all you have. If I can’t find printers under “Computers & Tablets,” I’m gone. If I don’t understand your navigation labelling, I’m gone. Subheads not clickable? Good bye.
Even if you get your information architecture side spot-on, there’s still the question of how to present that information in a clear, clean and easy to understand manner. This is where mega menus come into play.
Menu Design That Gets Results
From the time a user sees your navigation menu for the very first time, you have less than 10 seconds (after all, it takes time to find the menu and click on it) to display a large amount of information in an easy to understand way.
Muck this up and all the hard work done on the header design was for nothing. The challenge is to display a number of product categories at once. In cases like this, Jakob Nielsen of the Nielsen Norman Group recommends the use of mega menus.
Although the term “mega menu” may not be familiar to you, you’ll definitely be familiar with how it looks. Most ecommerce sites (including Thinkgeek, Amazon, Best Buy, Walmart, Zappos and others) with complex categories and subcategories use mega menus.
As the following screenshots will show, mega menus have the following characteristics:
- Big, two-dimensional panels divided into groups of navigation options
- Navigation choices structured through layout, typography, and (sometimes) icons
- Everything visible at once — no scrolling
What we have above is a product menu with many different parent categories. Click on any of them and you’ll see a new secondary menu:
In this case, I clicked on “Car Electronics & GPS,” and under that I can see the subcategories with corresponding links. Navigation options are grouped together and clearly separated and structured, with all options being visible at once without scrolling.
A mega menu makes finding the right category and subcategories easier and more logical even when you have a lot of different (sub)categories.
RS Components is Europe's leading supplier of electronic and electrical components with a massive product catalog that includes over 500 000 unique products. With such a huge product catalog, having a clean and simple to use main navigation is crucial.
Before the redesign, this is what their header section used to look like:
Image via Econsultancy
The main navigation was divided into 4 sections with click-to-expand style additional items that were always on show. Clearly, it’s not a very intuitive or user friendly option.
With their new design, the company's main focus was to simplify the menu and make it more user friendly. They achieved that by using mega menus, proper structures that were easy to understand, and sub-headlines for subcategories:
Image via Econsultancy
(as a side note, dimming the background to bring the menu into focus is a nice touch.)
Unfortunately, the company doesn’t provide concrete improvement numbers. We do know that this, combined with other changes made to the site (better search, new product pages etc), enabled the company to hit a 41-month high for online sales.
Nonetheless, I’m confident this navigation is a clear improvement. When customers were asked “What are the things you like most about the RS website?,” the most popular answer was fast and simple navigation -- by a very wide margin.
Generally speaking, to cultivate customer confidence -- rather than erode it -- header design should be simple, clear, and, most importantly, attractive to your visitor’s perception. Eye-tracking research shows us, consistently, this is the area visitors look at first, and it’s by far one of the most functional interface elements of your site - so make it count.
As long as you remember the following four points, you’ll do great:
- Conciseness: Header - most important data based and relevant information + links only.
- Organization: Proper categorization + subcategories
- Discoverability: If it’s relevant, place a product or subcategory under multiple parent categories for clarity and ease of use
- Mega menus: Use them especially for large inventories.
From the time I land, you have maximum 10 seconds to convince me to stay. Having a beautiful looking stellar header with just the right information is Step 1. Step 2 is giving me a simple, easily navigable menu to help me find what I want to buy. Nail these down, and I am far more likely to think you can be trusted with my credit card information.