By In Growth Marketing

Case Study: The Ideal Navigation Menu [ 126 SaaS websites ]

Each year, thousands of SaaS companies gather around the whiteboard to tackle the thorny task of changing the navigation menu and the taxonomy of the website.

Founders, marketers, and designers start gathering ideas and examples for the long dispute ahead of them. In this artificial habitat, the debates might take hours if not days. More often than not, the outcome is a compromise.

And more often than not, they end up with a navigation menu that is not helpful to the target audience.

Most SaaS websites create a navigation menu based on what they think the visitors need to see and not what the visitors want to see.

In this case study about navigation menus ( first in a long series of weirdly specific articles ), I’ve looked at 126 SaaS companies that registered high growth in the last year.

The most popular lead generation strategy among these companies is offering a demo, with 44%. There’s no surprise here, given that these companies have achieved high growth by offering a premium product.

You need to keep in mind that most of them offer a free trial or demo, meaning the ACV of their users is higher and their content focus is different. This helps put a bit of perspective on the whole case study.

Why optimize the navigation menu?

In my opinion, the navigation menu has 3 main purposes:

  1. To help visitors find and reach the content they are looking for.
  2. To enhance user experience and make it easy for anyone to navigate your website.
  3. Help Google understand your website structure and index your pages easily.

The main priority is to focus on findability. Organic traffic and user experience are useless if people can’t reach or find the information they are looking for. And this dependency only deepens when it comes to mobile.

The link structure of most SaaS websites.

The link structure of most SaaS websites.

Creating a navigation menu might seem like a trivial task but there’s more depth to this. It’s about creating a smart internal link structure. 

You need to juggle between creating a smooth, simple user experience while trying to figure out what content pages you want Google to pay attention to.

You need to make sure content is easily found by search engine crawlers but also take into consideration that you need to not burden the menu and make it easy for people to navigate around and find what they need.

Don't optimize your navigation menu only for search engine crawlers!

Don’t optimize your navigation menu only for search engine crawlers!

The primary concern for you would be to cater to the visitors looking for information on your website. Findability trumps crawlability and usability. If they can’t find sh*t on your website, it doesn’t matter how much organic traffic comes to your website.

How many sections should you consider?

When it comes to deciding what should be in the navigation menu, it’s better to think at the number of sections you want to have. It seems that most SaaS websites have 5 sections in their menu.

percentage of navigation menu sections

We can see from the chart above that ~80% of the menus contain 4-6 sections.
It seems that this amount of sections allows you to compartmentalize the most important zones of your website while also leaving room for other elements like buttons or phone numbers.

BirdEye has a superb blend of sections and CTA buttons.

BirdEye has a superb blend of sections and CTA buttons.

This type of layout transitions well from Desktop to Mobile.

Birdeye mobile navigation menu

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. This helps with the findability mentioned earlier in the article.

People find comfort in things that seem familiar, and that may increase navigation and CTRs.

A graph of the frequency of words in the navigation menu
Take for example “Resources”, that was used in 69 navigation menus. People looking for webinars, ebooks or blog articles know that’s the first place to click on.

The same goes for product/products/features/platform. This is where companies explain the product in detail and highlight the features.

Don’t try to think too outside of the box with the main navigation menu section because you might risk confusing the visitors.

High growth doesn’t only mean an increase in customers or ARR, but also an ample talent acquisition plan.

That’s why some of them prioritize Careers as a primary section of the menu.

ServiceTitan Career navigation menu drop down

There was a tight battle between the type of capitalization used, but the close call winner was “All Upercase”.

With 48 out of 126 websites using it, the good ol` “ALL CAPS” gets more eyeballs than sentence case or title case. While it’s considered tasteless by many designers, it seems to be more prolific when it comes to navigation menu items.

Do we need to put more menu on top of our menu?

It shouldn’t be a surprise that a great majority of these SaaS websites don’t stray too much from the classic layout. 78.57% of the websites have only one layer of navigation, which seems to say simply is better.

The other 21.43% of the websites that feel the need to offer an extra menu on top of the main one seemed to link to the help, career, log in and international pages.

It gives you the ability to clear the space around the main sections of your menu while still keeping certain less vital portions of your website in the header.
ThreatMetrix is a good example of why you should try 2 layers of menu on your website.

ThreatMetrix navigation menu

Ignore the CTA button that’s at an awkward distance from the other elements or the disproportionate spacing between layers.

You can see they are totally invested in increasing visibility for those three categories. And the annex menu contains nice-to-have sections that are situational.

ThreatMetrix sticky navigation menu

Once the visitors start to scroll, the annex menu disappears, offering full visibility to the main menu.

Heap Analytics avoids listing all the features from their main menu. They create an isolated menu inside the Product sub-directory.

A solid use case for having multiple navigation menus without cluttering the site-wide menu with extra options.

Heat Analytics sub navigation menu

Cloudability’s upper navigation is in the opposite corner of the main menu, which hinders scannability.

Cloudability navigation menu

Some visitors might omit that part of the menu while scanning the page. Don’t put important sections or CTA buttons in that part.

A strong case for sticky menus

There are certain particularities that most of the analyzed SaaS websites possess.

The first impactful thing would be the fact that 84.13% of them have a sticky bar on the Desktop version.

I don’t think a sticky menu is a must in any situation, but it’s the kind of user experience that allows users to navigate and nudge them towards taking an action. Especially when they explore the website and the pages don’t have clear CTA buttons in the content.

In the case of Stripe, we see a very well designed navigation menu, but it’s not sticky and it does not provide a very prominent CTA button.

Stripe navigation menu

Here, conversion is left at the hand of luck as visitors are forced to scroll to the end of the page or go back to the homepage to sign up for the product.

Other SaaS websites offer a different menu as users scroll below-the-fold. A strategy that Tenfold is currently using.

Tenfold navigation menu

Once a visitor starts scrolling below-the-fold, it usually means they are in research mode and Tenfold makes sure to mimic the same CTA button in case they like what they see.

Some go more aggressive and remove any navigational link in the sticky menu, leaving you with only one choice – SIGN UP.

Docebo navigation menu sticky menu

I do think their heart is in the right place, but I think it would hurt your conversion rate in the long term.

Visitors might go back and forth between your website and competitors. They do research. Especially visitors that come from organic, referral or social channels.

It’s worth mentioning that the menu and the sticky menu need to have a consistent theme across all pages.

Content might change from page to page but users rely on the menu to be their site-wide navigation map.

Elastic navigation menu
Elastic uses a custom menu for each part of their website to drive users to action. You can almost see a funnel in the screenshot above.

Every type of page has a unique navigation, besides the normal sitewide menu.

It’s just an intricate web of submenus and different CTA buttons. Every time I think I’ve seen everything they offer, I end up on another unwalked path.

The most interesting find is that only 61.90% of SaaS websites have a sticky bar on the mobile version.

The percentage of sticky navigation menus on SaaS websites

It’s one big mystery for me, as a sticky navigation gives more control to a mobile visitor as opposed to a desktop one.

But a lot of websites forget to take this feature to mobile, apparently.

Conga sticky navigation menu

One mention though – don’t leave the sticky menu transparent as it can turn into a clusterf*ck of a situation.

 

Drop-down or nah?

This was kind of a no-brainer, but it’s still far less than I would have expected. 78.57% of the websites have a drop-down menu.

The percentage of SaaS websites that have a drop-down menu
The advantage of having a drop-down menu is that you can actually offer your visitors a way they can segment and qualify themselves based on their choices. It can either be by benefits/use cases or by vertical.

Only 45.54% of the websites that have a drop-down menu offer the possibility of looking at how their SaaS caters to certain verticals or industries.

The fact that more than half of these established SaaS websites don’t have the option of offering a personalized offer based on industry or vertical shows the missed opportunity.

Even companies that think they cater to a horizontal market ( I’m looking at you productivity SaaS ) could benefit from focusing on certain verticals that are very lucrative.

Another way of segmenting and pre-qualifying users is by use case. This is a less popular option. Only 36.63% of the analyzed drop-down menus have this type of offering.

Use cases offer visitors different scenarios in which your product can be used. They are the bridge between your product’s features and the problems you’re trying to solve for your target audience.

Intercom drop-down navigation menu

Intercom offers us the perfect use case drop-down menu. You can see how they offer visual cues regarding what product features pertain to each use case.

While there are many SaaS tools offer messaging, Intercom shows you that you can onboard and engage customers with them.

Enhancing the classic drop-down menu

90% of the websites are satisfied with creating only a drop-down list of things they offer without offering any explanation on what’s inside or why users should click on them.

Remember, we’re talking about SaaS businesses that have high growth rates.

And it’s true, it helps to have a good drop-down menu sculpted from the data of your customers and buyer persona research.

But as you’ve seen in the example above, companies like Intercom go beyond what’s considered good practice.

There are websites that manage to create a very intuitive and helpful user experience by making sure they remove redundant links and by adding explanations and visual aids to their drop-down menu.

Pandadoc drop-down navigation menu

Two perfect examples from Instapage and PandaDoc of enriched drop-down menus.

Having a drop-down menu for features/benefits and verticals is also beneficial from an SEO perspective. By having these type of pages and linking from the navigation menu, you’re going to expand the pool of long tail keywords you can rank for.

CoSchedule drop-down navigation menu

A very nice example of a drop-down menu from CoSchedule. The UI is very sleek and offers a lot of information for visitors who are looking for information specific to their vertical.

More choices aren’t always better

Some companies go overboard with the selection of options in the menu.

ETouches drop down navigation menu

You might think you’re being smart by providing your visitors with a wide palette of choices to choose from.

But you’re actually creating the perfect environment for “choice overload” as introduced in 1970 by Alvin Toffler.

Worth making a parallel between navigation menus and the famous jam experiment.

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.

An example of drop-down menu using jars of jam

It’s easy to spot which drop-down menu is easier to navigate.

Make sure you do your target audience research and push the most relevant content that helps them take action.

Buttons, buttons, buttons

A well placed CTA button in a sitewide navigation menu is nothing short of exciting for an optimization specialist.

80,16% of the websites have at least one CTA button in their navigation menu.

I do believe having a CTA button in the header is a very good starting point for your optimization if you don’t have one.

Not only gives visitors that browse your website the opportunity to take action when they feel ready, but it reinforces the call to action from the header.

A breakdown of the number of buttons in a navigation menu

66.67% of the navigation menus have one button in the header. It follows on the theory of the 1:1 attention ratio. Because a landing page has one goal, the call to action should work toward that goal.

Calendly CTA button in navigation menu

Calendly keeps it simple and easy with their CTA buttons.

Lob almost does a good job, but their navigation menu is not sticky. Not sure how effective is that button in their case.

Lob CTA button in navigation menu

If you want to play around with two CTA button, you need to make sure they replicate the intent of the landing pages. While both call-to-actions might seem important, each has a different impact and a different cost/value for your business.

Logz.io CTA button in navigation menu

For Logz.io, it might seem that offering a free trial seems the most valuable action their visitor can take. So there’s a primary and secondary type of call-to-action in the menu.

I would suggest not having more than two buttons in the navigation menu because it dilutes attention.

Alteryx CTA button in navigation menu

Alteryx has three different call-to-action buttons in the navigation menu creating a huge confusion regarding what’s the most important action their visitors need to pursue.

In the navigation menu, they are trying to put emphasis on the “CONTACT US” button by giving it a different color. But on the page, the main CTA button is the “DOWNLOAD NOW”.

Take time and research on what is the best conversion entry point for your target audience. What type of action is essential to start the conversation based on your demand gen strategy and average contract value.

Call-to-action constancy is essential if you want to increase the chances that a browsing visitor will sign up for your tool. Remember, they might be coming from a number of channels and they might be landing on a random page on your website.

78.10% of the websites have a different CTA button in the menu than the ones on the landing page.

Etouches vnavigation menu

While both CTA buttons take you to the same landing page, the difference between “SEE A DEMO” and “REQUEST A DEMO” is huge.

The wording on the buttons was very varied but the most used CTAs were:

Button CTA Frequency
Request a Demo 12.15%
Request Demo 10.28%
Sign Up 9.35%

Taking in mind the fact that most of these websites don’t have a freemium or a trial strategy, it’s only normal that we see these results. 

Button Color Guide

I do not believe the CTA button in the navigation should be poppin` off, but it should match the color of the main website CTA.

It just makes my right eye twitch when the navigation button is green and all over the website there are orange buttons that have the same call-to-action.

Fastly CTA button color

From all our studied high growth SaaS websites, I’ve created a palette of 5 major color trends.

      1. Green button – 22.58%

The most popular color for B2B SaaS websites.

Duo navigation menu CTA button color

Duo and Bpm’online are both offering a free trial and both have a green CTA button.

BMP Online navigation menu CTA button color

While the first two examples are positive, I wanted to have an example of button coloring that might create confusion.

You can see that the CTA button in the drop-down menu has the same color as the Sign In button.

Carbonite navigation menu CTA button color

Again, if you don’t want to create frustration, try to differentiate between buttons.  You have a world of colors and shades out there that wait to be discovered.

      2. Hollow / No color button – 18.28%

This one was interesting because I didn’t expect so many websites to have hollow buttons.

Skuid navigation menu CTA button color

Walkme navigation menu CTA button color

I don’t really know what’s the advantage of having a transparent button. On all the websites I’ve analyzed, the hollow button didn’t make any sense.

If there’s a reason that’s slipping my mind, please tell me in the comment section or on Twitter.

      3. Orange button – 16.13%

I liked Gong’s example because they managed to try something different and place a whole request demo form in the navigation menu. ( that mimics the one from the homepage ).

Gong navigation menu CTA button color

A perfect example of having two buttons in the navigation menu provided by CoSchedule. Not only did they manage to create a helpful drop-down menu, they managed to stylize CTA buttons based on importance.

CoSchedule navigation menu CTA button color

      4. Blue – 15.05%

Birdeye is consistent with their CTA button in the navigation menu and on the landing pages.

Birdeye navigation menu CTA button color

Exponea does a wonderful job of making the navigation menu clear and useful while highlighting the most important action visitors need to take – requesting a demo.

Exponea navigation menu CTA button color

Unfortunately, Nearpod provided us with a negative example of a CTA button in this category. It’s highly confusing and unclear why they would highlight the Sign In button in the header.

Nearpod navigation menu CTA button color

You can also clearly see, it’s way different from the CTAs on the homepage.

      5. Red – 13.98%

Twilio was the first example that came to mind when I looked for an example of red CTA button. It’s embedded into their whole brand theme.

Twilio navigation menu CTA button color

Conga, I know there’s a lot on your plate but I feel like you should distribute some of that attention on different landing pages instead of having 4 different buttons in the above-the-fold.

Conga navigation menu CTA button color

Are phone calls no longer popular?

While almost half of these SaaS companies are demo/multiple touch point/high ACV, they don’t offer the possibility to call a salesperson to start a conversation.

The percentage of websites that don’t have a phone number on their Desktop website is 81.30%.

On Mobile, only 18 out of 126 websites had a phone number in the navigation menu. ( and less than that have an ACTIONABLE phone number ).

Price Intelligently is aware of the higher entry price point and offers an actionable phone number on both Desktop and Mobile.

Price Intelligently navigation menu CTA button color

Podium has an interesting example of an actionable phone number. It’s a 2-step process where you can choose between calling or sending an SMS.

Podium navigation menu CTA button color

While they have two phone numbers visible on their website, Wordstream disappoints us by not making them actionable. Again, I don’t understand why it’s not actionable. If you’ve gone through the trouble of offering direct lines between you and your potential customers, make sure it’s set up properly.

WordStream navigation menu CTA button color
Kind of disappointed given they are advocates of personalization and landing page optimization. They could have done a better job on this.

How does all this translate to mobile?

If you work at a B2B SaaS company you know how important the desktop version is. Most biz is getting done on the desktop version.

But offering a good mobile experience is important for discovery and creating a connection.

There is no surprise then, that 125 out of 126 of the analyzed websites had a responsive website.

The big surprise was that from all these high growth SaaS companies, the only one that strayed from the norm was a design SaaS.

Invision is serving an adaptive design on mobile. Which is kind of a shock giving the many benefits responsive carries over adaptive, from SEO and UX.

InvisionApp adaptive mobile homepage

While I may talk about mobile UX on another occasion, you need to observe the fact that they removed the navigation completely and looks like a “squeeze page”.

As with other elements of the navigation menu, you need to be consistent in your website’s transition from desktop to mobile.

Matryoshka doll transforms into Mario from desktop to mobile

Matryoshka doll set will serve you a smaller version of that doll every time you open one up until the end. You won’t find a Mario doll.

The same can be said about your website. Don’t serve your visitors a Mario mobile version if your desktop is not. 

Presuming visitors are discovering your product through the mobile version, if you serve them a squeeze page with the limited functionality you can bet they won’t feel the need to look for more information on the desktop version.

Conclusions

Navigation menus are detrimental to SaaS websites not only because of SEO but also because they help segment your audience based on their needs or preferences.

If you don’t give them enough choices you risk not capturing their interest or having bad retention rate ( because they didn’t fully understand the benefits/features ). The same goes for offering a cornucopia of choices. You’re going to confuse them.

I’m not a big fan of TL;DRs and I do think if you’re interested or currently planning on working on your navigation menu, all the info is relevant.

Hope you found this in-depth dive into navigation menus insightful. There were a lot more things that I could have wrote, but I felt the need to limit and compact the content to an acceptable amount.

I couldn’t go too deep or specific with the explanations. If you didn’t see the information you were looking for or have any question give me a holla via email or Twitter/LinkedIn.

Spread the love
  • 11
  •  
  • 8
  •  
  • 11
  •  
  • 8
  •  

2 Responses to Case Study: The Ideal Navigation Menu [ 126 SaaS websites ]

  1. Tom says:

    Great post – that’s a lot of research! Fix your SSL cert so this is shareable!

  2. Michael says:

    I hardly ever comment… this is an exceptional case study with the right balance of insight, attention, and detail. Immediately shared this with our team. Lots to take in. Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *