Best Practice | How IBM and Adobe make Hamburger Menus work for Enterprise

Using hamburger menus on desktop designs is one of the most hotly contested UX issues these days. Designers love them, UX pros hate them, and A/B testers eye them with suspicion.

In fact, if you search for “hamburger menu on desktops” you will find pages of articles that present well-crafted arguments for and against the use of these little icons. But 99% of these posts question using hamburger navigation to present an site’s entire navigation structure — an idea that few enterprise-class sites could even begin to entertain.

Believe it or not, there are enterprise-class sites using hamburger menus with success — and they are two of the biggest names in IT.

Adobe.com

Adobe.com was one of the first enterprise-class sites to adopt the hamburger navigation menu on a desktop site. But this isn’t your run of the mill hamburger menu. While it looks like your standard fare on the home page, it is actually a horse of a different color.

This isn’t your run of the mill hamburger menu. While it looks like your standard fare on the home page, it is actually a horse of a different color.

Where most hamburger menus slide out a slim panel from the right side of the page or drop it down from the top, Adobe.com’s panel takes over the entire screen.

This small change in menu placement makes a huge difference in the number of navigation options that can be presented. In fact, Adobe.com’s design delivers a greater selection than a mega-menu could hold — and with more panache too.

Adobe.com’s panel takes over the entire screen. This small change in menu placement increases the number of navigation options presented -- even more than a mega-menu could hold.

Why it works

Adobe.com’s hamburger menu hits the best practice mark in three ways:

  1. The full-page menu provides ample space to display its portfolio of products — with logos and in living color. Then it offers more topics across the top of the pane.
  2. It aligns perfectly with its audience. Adobe.com’s creative visitors are accustomed to seeing off-beat designs that use unconventional approaches. So a little hamburger icon isn’t going to throw them off their game.
  3. The hamburger menu’s small footprint frees page space to showcase artwork created by its customers using Adobe products. There isn’t a better testimonial than that.

IBM.com

IBM.com combines the classic mega-menu with a hamburger menu to optimal effect. The mega-menu highlights IBM’s solutions while the hamburger menu provides access to the site’s major sections.

IBM.com combines the classic mega-menu with a hamburger menu to optimal effect. The mega-menu highlights IBM’s solutions while the hamburger menu provides access to the site’s major sections.

 

This structure allows for two different types of information to be presented without leaving main navigation options on the cutting room floor.

 

This structure allows for two different types of information to be presented without leaving main navigation options on the cutting room floor.

 

 

This approach gives high-profile topics, such as strategic initiatives or key products, top billing with lots of room for marketing.

 

Why it works

This design works on two fronts:

  1. It gives high-profile topics, such as strategic initiatives or key products, top billing with lots of room for marketing.
  2. Highlighted topics can change with the times while navigation into major site areas goes unaffected.

The Bottom Line

Hamburger menus aren’t for every site — and using them on enterprise sites is especially challenging. But that doesn’t mean they can’t work at all or that they won’t provide added benefits to a site’s navigation structure.

As IBM.com and Adobe.com show, when hamburger menus are paired with solid marketing strategies and a compatible back-end architecture, they can go together as perfectly as a hamburger with fries.

Print Friendly, PDF & Email
2016-12-08T15:04:39+00:00

About the Author:

President of siteIQ :: I focus on best practices – and share with our clients and Library members how leading Web teams deliver world-class user experiences. My job is to find best practices and illustrate why they work. How the smartest Web teams innovate – and solve common problems. How leaders put the right pieces together to perfect effect.