A website’s navigation structure can have the biggest impact on conversions, sales and bounce rate. It can be some of the lowest hanging fruit on a site and the easiest to fix and analyze using some simple data. This is a topic that comes up in just about every web design project I am involved in and I’m always amazed at how reluctant people can be towards navigation changes.
Its easy to look at some of the top websites across different industries and see whats working and what is not, for the most part, simple navigations with stand out call to action buttons is the norm for bigger companies. This article is all about navigation menus, and focusing specifically on how agencies are doing it. I took the top 176 agencies listed on clutch.co to analyze this data and figure out some trends between agencies.
I do want to preface that while Clutch is a great way to get a large list of web development and digital marketing agencies, the order they are in no way reflects the top agencies in America. In fact some of the agencies I admire most were off the list or towards the very bottom, so this article is not necessarily highlighting the right way to do things just an observation on trends and patterns.
How many menu sections?
This was one of the more obvious pieces of data, it’s pretty standard to prioritize your menu structure to show the most important sections. A simple navigation structure makes it easyier for the user to choose where to go and what services you provide.
It seems that the sweet spot here is 6 menu items with 57% having between 4-6 items. The 17.8% of websites that have only one item are hamburger menus which open up into a larger menu list, these were counted as just one for tracking purposes.
More isn’t always better
Some companies want to provide visitors with a way to access every possible page, thinking this will help them navigate through their site faster, we have found through various studies this is actually a terrible strategy. Information overload is very much a thing, providing users with a lot of choices can be stressful and cause them to bounce.
This can be proven using the famous jam experiment by psychologists Sheena Iyengar and Mark Lepper. The experiment tested an offering of 24 gourmet jams against a selection of only 6 jams. And the conclusion was that, while the large display of jams offered more visibility, it actually confused buyers. The smaller display led to an increase in purchases by 10x.
The above is by far the worst example of information overload I had seen on the list, with 7 primary navigation items and 71 sub-navigation items. We won’t even touch on the corner notification popup and the full page popup 45 seconds into browsing.
Uppercase or lowercase, that is the question…
Pretty trivial but with the amount of data I gathered it was really interesting to see the winner when it comes to case sensitivity. Removing all hamburger menus out of the equation we were left with 89 websites that had uppercase menus and 52 that were either capital case or lower case.
The most popular menu sections
In our case, the most popular menu sections don’t necessarily mean the most important. But it’s important to see that a lot of websites use the same words when describing sections Given that all these sites all serve a similar purpose and are in a similar industry its interesting to see what the most popular menu sections are. Using similar verbiage to describe a websites section can be very helpful, people find comfort in things that are familiar and it can make navigating a site a lot easier.
The top 5 navigation items are Contact, Work, services, about and Blog. This tracks as pretty normal, contact can vary between “Contact Us” and about can vary between “About Us”. The top 5 really is everything you would need in your agency navigation, showing off your work, explaining what kind of work you do, who you are as a company, a blog about your industry/work and a contact page.
FINE is a great example of why sometimes being unique is not always a great idea when it comes to navigation items. Their “Mingle” section does not fall in the top 10 navigation item names and after exploring it I am still not sure exactly if its a blog page, event page or a hybrid of everything resource related.
Dropdown menus
The advantage of having a drop-down menu is that you can actually give your visitors more choice to get exactly where they want to go. In the digital marketing field, I do not think this is as necessary as it may be for a software or SaaS company. Leading users to a “Services” page gives them a chance to understand each service you offer at a 5000-foot view giving them a better idea of where to go next.
Surprisingly its almost as a 50/50 split between dropdown and no dropdown. This number may be a little skewed as I counted hamburger menus as a “No Dropdown”.
Menus on menus ( Secondary Navigation )
The majority of these agency sites keep it simple and only implement one navigation, but 12% are implementing a secondary navigation item. This kind of echoes the fact that simple is better, we typically see secondary navigation items come in handy when you have a large site map and need to show things like language options, help pages, and login buttons. When looking into what most of the 12% of agency sites were using a secondary navigation for It seems like most of these navigation areas were used for phone numbers.
In the case above, Windmill design is utilizing their navigation for a second CTA, a phone number and a search bar. This, in my opinion, is a terrible waste of screen real estate for a few reasons, the first issue is echoing a CTA that is just a few hundred pixels away and the second is your site navigation for this kind of industry should not require a search. On top of all of this, the entire navigation is sticky, this accounts for about 22% of screen real estate while scrolling of which the secondary navigation accounts for 45% of that.
Speaking of sticky menus…
Sticky menus
About 70% of all the websites analyzed had sticky navigation which is good, sticky navigation can be a great user experience but another 11% had what I like to call a “Fancy” or intuitive sticky navigation system. A fancy sticky system could be anything from primary items disappearing and only a CTA showing on scroll or the navigation is completely hidden until a user starts to scroll up, these methods utilize more screen real estate and can bring more attention to the navigation CTA.
I really like the approach Gravitate took in having a fancy sticky menu that leaves the primary CTA sticky but on scrolling up shows the full menu is shown. This leaves visitors with a quick way to convert and a smart way to show them additional menu options when they are likely looking for it.
For the record I think there are some use cases for not having a sticky navigation, in fact, this site does not utilize one, but when you are trying to push the visitor towards an action or through a user journey I think they are pretty essential.
Hamburger menus
Above I mentioned that 17.8% out of 176 websites were hamburger menus, this data was based on only having a hamburger menu. Another 6% had a hamburger menu along with a normal navigation. In 2015 web designers were quick to implement hamburger menus as it was an emerging trend and a cool new pattern that was gaining traction. We quickly learned that while it can be aesthetically pleasing, users needs are ignored leaving them wondering the site or taking extra steps to find your core pages.
In my opinion, if you are going to do a hamburger menu it’s absolutely essential that you still add a primary call to action if anything this is a great way to ensure your CTA stands out better than it would in traditional navigation.
Fruition has done a great job with their CTA and overall look and feel of their website. One big mistake I think they made is when they set up a hamburger menu and added it to the left side of the navigation. Users are familiar with hamburger menus solely based on mobile applications, it’s rare to find any app in 2019 that has their menu on the left side due to how difficult it is to reach this area of a phone with your thumb. This bad UX does not necessarily exist on a website but users are conditioned to overlook this area because it’s out of the norm.
Together has done a great job of utilizing a clear call to action combined with their hamburger menu. I would expect this to be the bare minimum when implementing a hamburger menu onto a site that is attempting to generate inbound leads.
Why do you need a home?
Just an interesting tidbit but 14% of the agency websites had a dedicated home button. I think this speaks to the quality of some of the websites reviewed. Home buttons are from an older era of web design and completely obsolete in 2019.
Button Consistency
This is one category that even some of the best sites on the list seem to miss, Call to Action and general button consistency across your navigation and other parts of your site.
Urban Insight has a really cool looking website with a lot of fancy elements but they miss the mark on CTA consistency with their footer CTA having a completely different font than their navigation CTA along with different colors. This could easily be fixed with the dark blue CTA style being moved to the header for consistency and something that stands.
LLT is another that missed the mark, having completely different Call to actions and different styling on both buttons.
Phone Number
18.7% of the sites reviewed had a phone number in their navigation, this is something I cannot find any good research on if its a bad or good practice and to be completely honest I can’t even speculate on it. Some agencies tend to focus on doing dozens of cheaper projects a month with small local businesses, I imagine in that case a phone number on your site could be beneficial.
Conclusions
Navigation menus are one of the most crucial aspects to any website especially agency websites where the bar is much higher on delivering a great user experience. Navigation is critical to guiding your audiance through their user journey based on their needs or preferences. With that said it is very surprising the number of agency websites I reviewed who were making big mistakes when it comes to user experience and conversion focused design.
I think this information does tell us about trends whether they are good or bad, based on these trends we can predict user expectations and stand out in some ways compared to other websites.
.
