The hamburger is an all-American meal (yes, Beyond Burgers count), but when it comes to a mobile navigation menu, those two or three bars at the top of the screen aren’t very filling. Navigation menus are supposed to enhance the user experience, except too often the ole hamburger can give users some serious heartburn.
Users might come to your mobile site looking for something specific, but given the constraints of mobile, if you aren’t careful, your navigation menu could send them scurrying away without ever finding what they’re looking for.
The problem is technical in nature but easy to understand. What is a smorgasbord on a desktop–navigation menus with broad parent categories and more narrow subcategories, filtering options, and search features–has to shrink down to something far different in the mobile ecosystem. The three-bar hamburger symbolizes the constraints of the mobile navigation menu. It can work well if handled right but can be a disaster if you don’t heed some important considerations.
It Starts with Homepage Design
If your homepage doesn’t instantly tell users what your site is all about, chances are they won’t stick around too long to find out. The irony is that mobile devices account for about half of all web browsing, and that number is sure to rise in the coming years, but mobile doesn’t convert at the same rate as a desktop. In fact, mobile lags behind at about a 50% clip, meaning that mobile is missing many potential customers.
Why?
One possible explanation is just poor design of the mobile homepage, in particular the way that navigation is arranged. It is imperative that users ascertain in an efficient manner the breadth and depth of what is being offered in the product catalog, and this is best accomplished through easy-to-grasp navigation categories. Images here would be advantageous so that users can visualize the commercial parameters of the homepage. It is well documented that users bounce from websites that actually have what they wanted…users reported not being able to find it!
You don’t want too many Homer Simpson moments when it comes to e-commerce.
Establish a Theme
More of the same: this seems to be a root cause that leads users to get turned off my mobile navigation. Searching for a specific product can actually lead to a kind of information overload–so many choices, all sounding pretty much identical–that users just bail instead of sifting through the dozens of options.
One way to combat data dumping is to use thematic product browsing, where instead of searching for specific products, so-called “finders” can help users navigate through non-traditional categories, possibly even with employing filters that focus less on product specs than on what you need the product to do.
For example, searching for “binoculars” can get very technical very quickly, but if you need them for bird watching in Costa Rica, then the choices will narrow quickly. The faster you can deliver what the user wants, the less likely that user will bounce.
Goldilocks Redux
Too many mobile sites rely on a category hierarchy that is either too deep, too narrow, or too redundant. The net result is that users encounter difficulties to intuit a site’s basic design. A hierarchy that is too deep might ask a user to sink down 5-7 levels of categories before even getting to a product listing, while a shallow hierarchy might yield too many off-target results.
Both too shallow and too deep lead to the same place: users perceive the site’s selection as too narrow, too limiting, and thus users will likely abandon the site. The hamburger has to be cooked just right.
Don’t Spin Around Too Much
Another common issue with mobile navigation is the product carousel that auto-rotates. The mobile ecosystem isn’t designed for a carousel, because users frequently touch the wrong thing or get distracted by so many spinning choices.
There’s also the nagging problem that many users view a product carousel as an ad and just forego the chance to tap in. For these reasons, on your mobile site, you need to stick with static–organize your images and call-to-actions in still frames that don’t dance around. This is yet another example of the truism that less is more, but when it comes to mobile navigation menus, that is probably good advice.
A Simple Life
The mobile navigation menu is supposed to make the user’s journey through your site as simple as possible. It can be difficult to pull together the various pieces into a coherent whole, but you can do it if you continue to focus on core functions. The structure of the site has to impart order, and the navigation menu should reflect that deeper concern.
The trend seems to be moving toward bigger, clearer icons that are replacing smaller tab bars. How navigation menus will be presented will undoubtedly change, but what won’t is how fast users get impatient with sites that confuse or confound them.
