In this Don’t Miss/Don’t Bother we take IBM.com’s new mega-menu for a spin (or two).
IBM.com has launched revised home and solutions pages that feature the next major piece in its evolution: a new take on mega-menus. Not surprisingly, IBM.com has put its own spin on what is fast becoming an industry norm. In this Don’t Miss/Don’t Bother we weigh in on the pros and cons of IBM.com’s latest design.
Fair warning, this post is long!
Marty | Neutral (with a qualified Don’t Bother)
One thing that’s sure about IBM: it always marches to the tune of its own drummer. That’s why I wasn’t really surprised when IBM.com launched its own rendition of the mega-menu. With browser in hand, I took it for a spin.
After putting it through its paces, I’m essentially neutral about this evolution.
On the plus side, it’s lighting fast and creates a slick first impression. By using the whole page width, it makes maximum use of page real estate. This, in turn, makes it easier to handle those pesky stakeholders who insist on having their little piece of heaven on the global nav. It’s also a design optimized for companies with huge product and services portfolios. Clearly IBM fits that bill.
So why am I neutral? Let me count three ways.
Just because you can, doesn’t mean you should. There’s an old saw that nature abhors a vacuum—and the Web is no exception. Take IBM.com’s mega-menu real estate for example. Although a savvy design makes this menu look manageable at first blush, it is actually packed with 145 links spread across 5 main category tabs. The Solutions and Products tabs are the whoppers in the family, weighing in at 36 and 37 links respectively. Fortunately, the Solutions menu is listed in alphabetical order. I guess the “Products” tab owners missed the class on how to do A-Z categorization.
To be fair, there is no doubt that IBM.com’s new mega-menus are pencil slim if compared to the 200+ links buried in its older fly-out menus. But that doesn’t mean that progress should be measured in a best practice vacuum.
Here, consider two other mega-menu powerhouses with the same general tab layout: Cisco.com and Juniper.net. Cisco.com’s mega menus clock in with 60 total links; roughly half of them (28) are on its new support mega menu (which qualifies as a new best practice and the industry’s first mega menu workhorse, read more here). Meanwhile, Juniper.net weighs in at a very svelte 44 links.
As important, both of these sites visually break up their lists of links using asymmetrical layouts (Juniper.net) and, in the case of Cisco.com, additional visual cues that make it easy to spy and select the right links.
So what’s the point? Simple. Finding and acting on a navigation decision is much faster and easier on the Cisco.com and Juniper.net sites.
When Mr. Magoo is you. Although most users will find the navigation panel easy to read, those in front of larger, high-resolution screens are sure to have Mr. Magoo moments. One culprit is IBM’s decision to present links in a medium gray color—which is intended to provide a clear contrast as a link turns white when touched by a mouse. In practical use, this means that the Mr. Magoo crowd will end up mousing over every link in the lists until the correct one lights up. A beautiful design point, to be sure, but not one optimized for those of us whose arms aren’t quite long enough anymore. (If you don’t understand the reference, go ask your Mom).
On the plus side, I’m glad to report that viewing this new design on an iPad is a perfect user experience. The font is an ideal size and the links work well with the touch of a finger. At the other end of the spectrum, don’t even get me started about the experience on a smartphone.
The law of unintended consequences. Everyone who works on the Web knows about the law of unintended consequences. The day the Oracle Technology Network site hijacked the Oracle.com home page (schwoops!). The year that Cisco’s IT organization redesigned and launched a new site—which created such an uproar that it had to provide a side link to the old site and ended up hiring a professional Website team (there’s a lesson here).
IBM.com’s marriage between its scrolling mega-menu and its F1 feature is just such an “unintended consequences” moment.
Simply put, users who happen to be moving to a menu on the right at the precise time that the F1 feature is cycling to the left are likely to have something akin to an out-of-body experience. Since a moving picture’s worth a thousand words, I’ve loaded a video of this experience into our Case Study Library. Just to let you know, a preemptive dose of Dramamine is strongly recommended.
So what does this mean in practical application? Simple. If you plan to follow in IBM.com’s footsteps it’s a good idea to settle on static F1’s or a design that allows users to manually step through multiple features on the page. Combine automatic features and moving navigation willy nilly and you’ll need to hand out air sick bags.
Of course there’s plenty of other pros and cons associated with this new mega-menu launch—including why following IBM.com’s lead will require a design commitment well beyond your home page and why this is likely to be an unpopular decision with stakeholders. For many companies facing limited budgets, marginal executive sponsorship, and a sea of cranky stakeholders, IBM.com’s gambit qualifies as a nasty rabbit hole you might want to avoid and thus, a Don’t Bother moment.
Kenna Dian | Don’t Bother
I have been using IBM.com’s new mega-menu design for a week now—opening it, closing it, spinning it, reading it. But after poking and prodding it every way possible I am only left with one question: where’s the added value?
If the purpose of a mega-menu is to display more navigation links using a larger panel, then IBM has hit the jackpot. But that is only one measly piece of a much larger puzzle. Mega-menus are also supposed to make a site’s global navigation easier for visitors to use. This is a much bigger job—and one where IBM misses the mark by a country mile.
IMHO, here’s why.
First, each panel is a blizzard of navigation links. Each menu is completely devoid of any design elements that would help users visually separate one category from another. In practical use, you end up scrutinizing each link to find the one you need, which is about as much fun as reading the white pages. Usability challenge: scannability.
Second, the topic headers are hot—or maybe not. After wandering through these menus for 4 days, Marty finally let me in on the secret: the yellow headers are actually links. Funny, I was wondering why some headers got to play on the “A” team (yellow font) while the others seemed to be permanently benched (grey font). I still don’t know the answer (but I can guess). Usability challenges: scannability (again), breaking your own convention, and category confusion.
Third, the categories in the global navigation bar aren’t linked to a top level page; their sole purpose is to open the navigation menu. Visitors who want to see all of IBM’s solutions, products, or services must hunt down the “all
Fourth, visitors have to click on a link in the global navigation bar to open the panel, but if they let their pointer slip, this panel it will slap shut faster than a thousand pound door. This not only violates the current “click to open, click to close” convention; it also creates a rousing game of “now you see it, now you don’t” while the visitor figures out how to drive the menu. Usability challenges: common conventions, missed expectations, and general confusion (again).
From one perspective, I could argue that these issues are first experience nits that regular users will learn to work around. That might be true. But then there’s my final gripe.
Sometimes the IBM.com home page behaves like a Whirling Dervish. Here, the culprit is the marriage between the page’s navigation panel and the F1 feature. Select a panel to the right while the feature graphic is doing its thing and you’ll feel like you’ve ended up in a Tea Cup at Disneyland. Here, I agree with Marty. It’s a good idea to have Dramamine in your Web surfing kit. Usability challenges: breaking common conventions (again) and too many moving parts.
In the final analysis, I want to like IBM.com’s new mega-menu. I really, really do. But, every time I take it for a (open, read, close) spin I wonder what value I’m getting for all the work, time, and effort it takes to get what I need and go where I want to go. For this reason, I have to give IBM.com’s new mega-menu a reluctant Don’t Bother rating. Think of it as an opportunity for other sites to learn from IBM.com and do it better.
Case studies about mega-menus and fat footers
Mega-menu Navigation | 2 new rules of the road and great ideas to consider
Design | Cisco.com’s support zone gets a “nip/tuck” facelift that makes its support mega-menu shine
Design & Architecture | Cisco.com’s best practice support home page gets a clever mega menu
Blogs about mega-menus and fat footers
What we can all learn from Microsoft.com’s fat footers
Cisco.com’s Support mega-menu raises the bar—again
Cisco.com launches drop down mega menus & fat footers
Mega and Fat Become the Fashions of the Day
Become a Website Best Practices Expert
Get instant access to 20 of our most popular case studies and reports.
Register for your Guest Membership today …