The goal of your email navigation bar
The email navigation bar is the staple of most (but not all) emails, but it usually doesn’t receive the same attention as the navbar on your website. When you think about it, the goals of the two Phone number library navbars are similar yet different. The goal of the email navbar, like the email itself, is to get the reader to the site. The goal of the site navbar is to get the visitor into and through the site.
Be sure navigation is connected to the landing page. It’s important to remember that the email navbar does not need to mirror that of the website. Rather, seeing the different uses, it is quite logical that they differ. However your mail navigation should be connected in content / style so that there’s not a complete disconnect with the site, that could only lead to confusion and confusion leads to missed or lost clients.
Things you should know about email navigation bar:
What can you use for an email navigation bar?
General versus specifics
Changes in Navigation
Double the navigation, double the fun
Avoid too much information and the paradox of choice
How well does your navigation bar preform?
Testing your navigation bar
What can you use for an email navigation bar?
Let’s take a look at several email navbars and see what properties you can apply to your own emails. How can email navbars differ from website navbars?
1. General versus specifics
In the ShopWorldKitchen.com email, the email navbar is focused on featuring brands rather than specific product categories. It is more general. As Mr. Myagi famously says in the Karate Kid movies: Focus! Your email can do with more focus!
Example of general navigation bar focused on featuring brands in email
If we look at the website navigation bar, it is more specific, focusing on categories like tabletop, bakeware and cookware. The brands still appear in the header, as logos and are grayed out so as not to compete with the other elements. They have less emphasis.
Example of specific navigation bar focused on categories in website
2. Changes in Navigation
The changing Lenox navbar reflects varying trends in product focus and consumer preferences. The first Lenox email includes collectibles and catalog in the navbar.
The second Lenox email below doesn’t have those anymore. Gift occasions is transformed into simply “gifts”. Some categories are separate like Figurines or Ornaments. Yet categories such as Dinnerware & Flatware are combined.
Example of changing navigation bar in email from Lenox
This gives you something to think about:
How can I reword my navbar to be more powerful?
What categories could I safely drop?
Any categories that are logical to combine?
3. Double the navigation, double the fun
The newsletter of a Dutch online Department store / cataloger Wehkamp uses a “double-decker” navbar. I am not a big fan of creating crowed navigation, if avoidable. But it is a good A/B split testing idea. (are you listening guys? You should test it!)
Example of two-tiered navigation bar in email from Wehkamp
Gap also uses a two-tiered navbar, user friendly with larger type. They are also logically grouped. The second row being babys and toddlers only. Note that Gap uses slashes between categories to split them up, but no horizontal divider between the first and second row. Keeping it easy on the eyes.
Example of two-tiered navigation bar in email from Gap
Avoid too much information and the paradox of choice
It is tempting to put every and all navigation options into an email navigation bar. Don’t do it.
The Blue Mercury email navbar below is an example of cramming a lot of information in a little space. Next to it being less easy to make your choice, a navbar like this just won’t work when it comes to mobile email newsletters. The links are like clusterbombs, with a big chance of mistakenly tapping on the wrong link with your finger.
Example of wrong navigation bar in email of cramming a lot of information in a little space
Here’s another way to cramalotofinformationintothenavbar. Can you say “run-on”? Check out this email navbar from Ugg:
Example of wrong navigation bar in email of no spacing between each word
A word of caution when offering options to your customers. Presenting too many options can actually backfire. It’s known as the paradox of choice. In other words, less is more really rings true. Psychologist Barry Schwartz discusses this phenomenon in a TED video.
How well does your navigation bar preform?
The best way to determine how well your navbar is performing is to run a heat map or hotspot report on your emails. You’ll be able to see how many clicks each link of the navbar receives, and whether the numbers are constant or vary over time. You also can compare those numbers to other areas of the email. If you have your statistics linked to your site, for instance with Google analytics. Best would be to measure even further all the way through to KPI’s.
Interested in the latest email marketing statistics like the average open, click-through, unsubscribe, and spam complaint rates? Then check out our Email Marketing Benchmarks report.
Testing your navigation bar
Based on that data, in conjunction with other factors such as holiday promotions, and audience, you can decide whether you need to tweak the navbar occasionally. As with any other element, your best bet is to test. If you conduct an A/B test using two different navbars. So as not to skew the results, keep other elements of the email the same.
Share with us in the comments below what your experiences with navbars have been like! Are there any specific solutions that you find work best?
