08-16-2022 / deckerdevs
HubSpot CMS Development Tips: Mega Mistakes with Mega Menus
Blog

We said it. When it comes to HubSpot CMS development, we think that mega menus are an excellent way to organize your navigation and pre-qualify your prospects on your website by putting the information in front of them that is most relevant to their interests. But not all mega menus are created equal. It’s important that you create a mega menu that’s strategic to the needs of your buyers, functional, usable and logical. While this can seem like a “no shit” statement, you’d be surprised how many times we’ve had clients approach us with a pretty design from their design team, only to find little to no research or thought was put into how the mega menu they’re requesting is structured.

Your website should be intentional. Manufacturers don’t put extra parts inside your vehicle or television that don’t function to make that machine work better and your website is no different. Every element of your website should be like a cog in a machine, working together to generate leads, further qualify existing leads or sell additional products and services to your existing customers. You should have a strategy session with your marketing agency or internal marketing department to break down buyer personas, aspects of the buyer journey, content and conversion opportunities. If you haven’t taken the time to do this, odds are good that you may be making one of these mega mistakes with your mega menus.

Not having a comprehensive strategy


We know your web designer is amazing, but do they really understand your buyer persona? You should approach your graphic or web design team with a strategic plan that breaks down where prospects on your website may need to go and what their goals and needs are. In order to do that, you have to first create that plan.

What does that look like? It looks like taking a deeper dive into their needs by exploring how they might answer the following questions:

  1. As this target buyer persona, what am I looking to get out of my experience with this company’s website?
    As you probably know by now, the buyer’s journey has multiple stages. Regardless of where a prospect is at in their journey you need to make sure that you have information within your mega menu that caters to these different stages. Breaking down your resource topics or finding new ways to address pain points inside your navigation will go a long way towards catering to that experience.
  2. Are there specifics to my industry that I need to know when considering these products and services?
    Are there special regulations related to your products and services that mean certain industries must be treated in a special way?
    Do you have a special certification relevant to the financial, health or government industries? (Bonus 3 for 1)
    You’ll want to highlight your experience, because those prospects that find themselves in niche industries are often looking for partners that are experienced in those industries and the regulations associated with them.
  3. What are the biggest symptoms of my pain and where can I find information relevant to resolving that pain?
    This one is a slam dunk. Working with a well-qualified wordsmith will usually yield really amazing categories that you can place into your mega menu that really speak to your audience - find those most common pain points and work from there.
  4. I fit into a specific role - is there content that I would want to see relevant to that role?
    Industries are one thing, but don’t forget that organizing content by a persona’s role in the organization can be really useful too. Executives versus managers have very different perspectives and their concerns are often related but with very different focuses.
  5. How can I find the information most relevant to me with minimal effort?
    We operate in an ADD nation that is instant gratification. Keep this in mind when building your navigation and make sure the buyer’s bigger priorities are front and center in your navigation. Deep buyer persona research will help you unlock these insights.

Watch your language


Using the right words is always essential when communicating with your prospects. When it comes to doing business, organizations seem to throw around jargon-heavy words related to their industry, products and services so much internally they don’t realize that their prospects have no idea what they’re talking about. Choosing the right words associated with a buyer's needs in your navigation is critical to the success of your mega menu. To determine what these are. Again, a talented wordsmith can help, but you’ll also want to do some buyer persona interviews with your target audience profiles. Incentivize your best customers or lost prospects to sit with you and understand their concerns, the words they’re using relative to your products and services and how they think.

There will be certain trigger words that help your buyers make their decisions, diagnose their pain points and better understand your offerings. Wherever possible, try to determine what those trigger words are so that you can compel your prospects to take action on your mega menu.

Are your buyers looking for specific solutions to their problems? Consider adding those problems and their solutions to your mega menu. If your products have specifically branded names that a brand new prospect may not be able to recognize, place them underneath a broader category, add an icon representing it or even consider adding a small description underneath, space allowing.

Your mega menu is hover dependent


Hover-over menus in theory are believed by some to be faster and easier for users to navigate. However, when it comes to mega menus, it can be a little presumptuous to think you know how a user is going to move their mouse. The majority of users pause their mouse prior to making the decision to move to the content that they want. Pre-empting this with hover-over pop up navigation can be annoying to users. It gets worse when an organization assumes they can push their website prospects through hover tunnels that require a mouse to be moved slowly and carefully across other elements to reach the information that they are looking for. By not allowing a user to move their cursor the way they want without the menu closing, you’re creating frustration and extra work to get to the information they’re looking for, which is the opposite of your goal. We almost always advise our clients to go with menus that require click through, but many still opt for hover, since it’s what they’re accustomed to.

Hover-over items on the edge of a menu are more difficult to click, requiring more focus and potentially increasing frustration. While this can sometimes be remedied by adding extra space to the menu to avoid it closing if a prospect misses their mark, it usually doesn’t make the hover-over menu much more usable.

Hover-over menus also don’t take into account mobile devices, so the functionality cannot translate well for users moving between devices. Rather than using a hover-over mega menu, we recommend that clients stick to mega menus that activate upon being clicked - which is a clear user intention, saving time and keeping your website visitors happy.

You haven't considered images, buttons or logos


Adding compelling images, icons or call to action buttons on your mega menus are a great way to add engagement and draw your user in while giving them context. Visual elements can help users quickly analyze information and understand more about the products, services and information that you’re offering inside your menu.

Below are great examples from Evernote and Home Depot.

Evernote does a great job of closely relating the included icons to the service offerings inside their popular note taking tool. A user can quickly scan the features included in the software and determine which are important to them by glancing at the icons and headings.

Home Depot’s images help to showcase products and associate icons with special deals on their website. Customers looking for savings also have a CTA button to leverage if they’re looking to save money on home projects they’re hoping to complete. By showcasing a photo of a professional contractor, they relate easily to that demographic and indicate to them that savings are not just for direct consumers, but contractors like them as well.

Both examples are great ways that you can liven up your mega menu and make it more aesthetic, easier to navigate, simple to scan and more functional for your users.

You didn't plan for mobile


Have you taken the opportunity to look at your website traffic by device lately? Odds are very good that over the years the percentage of users viewing your website from mobile devices has increased significantly. We always develop our websites with a “mobile first” approach. That means that if a company or agency approaches us with a design in mind, one of our first questions will be - where’s the mobile design? In many instances mobile traffic is outpacing desktop traffic significantly.

If you haven’t taken the time to create a mobile design, be sure that your developer talks through how your mega menu will translate to mobile devices and that you settle on the functionality prior to beginning the project. An involved mobile mega menu may increase the cost of the project, so you need to be ready to pay a little more to convert your mega menu over to a user friendly design that works on mobile devices and achieves your original goals.

You're blocking critical conversion opportunities


This goes without saying, but you don’t want your mega menu to deploy on landing pages. When it comes to pages that have very specific goals, like your resource downloads, webinar sign ups or other conversion opportunities, you’ll want to eliminate the navigation entirely or shift to a new format for those pages so that expanded mega menus don’t occupy the important conversion real estate that should be a prospect’s focus when they reach your landing page.

What’s the point of an amazing landing page if it’s only going to be covered up by a massive (hopefully not hover-over) mega menu? Take the time to do a little role play scenario and test your pages accordingly, not just inside your organization, but outside as well. Make sure that your designs make sense, don’t get in the way of the main focus of your website and offer expanded opportunities for conversion rather than covering them up.

We still think that mega menus are here to stay and for savvy organizations that are deep in resources and information for their website visitors, they’re quickly becoming an essential. Ask yourself what critical information is missing from your main website navigation and how a mega menu design could give your users exactly what they need. The right mega menu can increase the time a prospect spends on your website, may reduce your bounce rate and can even increase your visitor to lead conversions.

If you need help with your mega menu or you've been wanting to redesign it more intuitively to serve the needs of your website visitors, we can help. 

Tell us:
Do you prefer hover-over menus or click through menus?

Let us know in the comments!

Share this

like what you read?

sign up to get notified with thought nuggets on simplified devspeak, solutions to your website woes and everything HubSpot development by dropping your e-mail below.

recent nuggets of content

How to fall in love with your HubSpot CMS Website Build
How to fall in love with your HubSpot CMS Website Build
Learn more
HubSpot custom theme builder: website woes we’re leaving behind in 2024.
HubSpot custom theme builder: website woes we’re leaving behind in 2024.
Learn more
3 Reasons to Choose a HubSpot CMS theme builder over Boxed Templates
3 Reasons to Choose a HubSpot CMS theme builder over Boxed Templates
Learn more
Google & Yahoo are Tightening their Email Authentication Requirements - here’s what you need to know
Google & Yahoo are Tightening their Email Authentication Requirements - here’s what you need to know
Learn more
How to fall in love with your HubSpot CMS Website Build
How to fall in love with your HubSpot CMS Website Build
Learn more
HubSpot custom theme builder: website woes we’re leaving behind in 2024.
HubSpot custom theme builder: website woes we’re leaving behind in 2024.
Learn more
3 Reasons to Choose a HubSpot CMS theme builder over Boxed Templates
3 Reasons to Choose a HubSpot CMS theme builder over Boxed Templates
Learn more
Google & Yahoo are Tightening their Email Authentication Requirements - here’s what you need to know
Google & Yahoo are Tightening their Email Authentication Requirements - here’s what you need to know
Learn more