How to Effectively Design a B2B Mega Menu


Your website has grown to the point where you know you need to separate pages into categories and subcategories. A mega menu is a perfect solution for a larger business to business (B2B) website. You can showcase the various areas without taking up too much real estate on your landing page.

In a recent survey, 94 percent of consumers said that if a website wasn't easy to navigate, they would leave that site and go to another. People have very limited time these days between work, raising a family and personal pursuits. Anything you can do to improve and speed up the experience on your website benefits your conversion rates.

Once you decide on a mega menu, knowing how to create it is the next step. Here are five different ways of designing an expandable menu for your website and a few examples of how other brands created theirs.

1. Make It Easy to Find

A mega menu is only useful if users can easily find the expanded menu. There are a couple of ways to activate your mega menu, including clicking on a tab at the top of the page or simply hovering over it. Keep in mind that users expect your navigation structure to be near the top of the page, so your mega menu activators should also appear near the top of the page.

One method is adding a navigation bar showing the main categories on your site. If anyone hovers or clicks on one of those buttons, the mega menu expands and appears.

dbs interactive

DBS Interactive features a mega menu on their website. Users can choose from Capabilities, Clients or a view of their Portfolio. If you hover over Capabilities, a drop-down menu appears. Pause on the tab long enough and it takes you to the page with full information on the services they offer to business clients.

2. Keep the Wording Simple

Don't try to get too cutesy with the wording of your categories. Have you ever visited a site with a theme, but the pages had such strange names that you didn't know what they were for? Instead, stick with basic wording such as "Shop" or "About Us."

If you're unsure what words to use, check out the searches people do while on your home page. What are the words they hunt for? Also, check out the wording on other popular sites. The words people are used to seeing in navigation bars on sites such as Walmart.com or Amazon.com are good choices for you as well because they're already familiar.

3. Add Calls to Action (CTAs)

Think CTAs are only for the bottom of your page? Think again. Expandable menus are the perfect location for a CTA. Your customer has already taken one action, so asking them to take the next step makes perfect sense.

mc call handling

McCall Handling places a call to action so users can "Get More Info" right in their mega menu. Click on the category "Warehouse Solutions" and you'll see choices for subcategories such as overhead doors, dock levelers and vehicle restraints. You'll also see a bold CTA button calling the user to find out more about what they have to offer.

4. Use Directional Cues

One of the great things about a mega menu is that you have a much larger space to work with than if you used only tabs on a navigation bar. As the menu expands across the screen, you now have an opportunity to add directional cues like arrows or category indicators such as icons.

Imagine an "About Us" category, for example, that drops down into an expanded menu and features an email with a letter icon, a phone number with a telephone icon, and a physical address as well as links to more information about your brand's history.

You can move a user through your site simply by giving them arrows as directional cues on where to head next. In a fast-paced world, this may make the difference between the buyer completing the journey on your site or bouncing away. Fellow business owners are just as busy as you are, so pay attention to the steps that get them from Point A to Point B the quickest and show them how to move there.

5. Mobile Responsiveness

Designers sometimes make the mistake of creating for a larger screen and forget about the many people accessing the internet via mobile devices. The most recent stats show that 52.2 percent of all Internet traffic is mobile. If your site isn't optimized for mobile, you're missing out on about half of your potential traffic. However, you also must consider how a mega menu looks on smaller screen sizes and if your expanded menu accounts for variables such as the device being used.

Fortunately, creating a responsive site isn't hard. The mega menu may look different for mobile, but it should have text and buttons large enough for a human finger to press and navigate through. Test out all aspects of your menu for smartphones and see how it looks.

buy swings

BuySwings.com is a website catering to organizations and businesses with playground equipment. They sell items such as seats and accessories. Their mobile site adapts perfectly for the user. Instead of showing the different categories in a nav bar, there is an option for "Categories" near the bottom of the screen on your mobile device. Click on the text and a page pops up with the categories of "Swing Seats," "Swing Set Hardware," "Accessories" and "Slides," or you have the option to shop by brand.

 

Is a Mega Menu Right for You?

If your site has multiple categories that don't fit easily onto a single line, it may be time for an expanded menu. Only you can determine if a mega menu is the right choice for your website. Testing out different options with your target audience is a great first step to figuring out whether this option is best. Either way, you now have the tools and examples to create a mega menu that draws in users and keeps them coming back for more.


Related Articles

Post a Comment

You must be logged in to post a comment.

Search The Blog

Subscribe & Share

Our Latest Tweets

Attention #colourlovers: Feeling hungry yet? https://t.co/CFhcmxR7w4 Rainbow platter by @ohhappyday https://t.co/0ex9GbEwb8
about 1 month ago
Tweet this ArticleFollow @COLOURlovers

Latest Blog Posts

//View More ›

Tags

Latest Colors

//View More ›

Latest Palettes

//View More ›

Latest Patterns

//View More ›
电竞比分网