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 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.
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.
Why it works
Adobe.com’s hamburger menu hits the best practice mark in three ways:
- 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.
- 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.
- 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 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.
Why it works
This design works on two fronts:
- It gives high-profile topics, such as strategic initiatives or key products, top billing with lots of room for marketing.
- 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.
Category: Case Study
Class: Best Practice
Websites Profiled: Adobe.com, IBM.com
- Navigation | Think Mega-menus are all the same? Think again.
- Mega-menu Navigation | 2 new rules of the road and great ideas to consider
- Mega and Fat Become the Fashions of the Day
- Don’t Miss/Don’t Bother | IBM.com’s Mega-menu Launch