Mobile UX Tip: Don’t Mix Menus
Mobile commerce is projected to reach 27% of ecommerce retail sales by the end of 2018, and the majority of ecommerce sites today have adopted a mobile-tailored experience, whether through responsive design or adaptive solutions.
But simply having a mobile-friendly design doesn’t mean mobile-optimized. In my own survey of the Internet Retailer Top 1000 sites, there are several common design gotchas that plague a good number of ecommerce sites, but are quite easy to remedy.
One example is the issue of “mixed menus.” Mobile screens can’t accommodate a full screen width navigation menu. Ecommerce designers must determine how to pack multiple types of links into a very small horizontal header and “hamburger” (the ubiquitous three-bar menu icon).
Though the hamburger icon may be a well-recognized convention, what lies behind the burger varies from site to site. Many ecommerce shops use the hamburger for catalog navigation (good idea), but some slip important features behind the burger that should be stand-alone icons and links.
In the example below, Search, Store Locator and Sign In are all baked into the burger menu. This isn’t intuitive to customers used to their easy access on the desktop version of the site, or to first-time mobile visitors who expect to find these quick-links in a horizontal menu.
A secondary issue is the placement of important links on a colored field. Our brains are wired to hone in on white space, and shaded areas can often be overlooked (think banner blindness).
It’s also risky to use the hamburger icon for non-category links, as shoppers often hone directly on the menu link to explore your catalog. In the example below, both “Jewelry” and “Gifts” menu contain category links, while the hamburger menu holds only search and account features.
If you do choose to mix your menu, make sure you clearly differentiate link types from each other by visually separating catalog links from customer service links and other calls to action.
When different types of links are all styled the same, it makes the menu harder to scan and use.
In the example above, catalog links like New, Departments and Bargain Cave blend in with Sign In, Register, Your Cart (!), Newsletter and everything after.
In the first example below, promotional (e.g. Clearance) and thematic (e.g. Denim Shop) categories are tacked on to the alphabetically organized category list. Consider using bold colored headers to separate link types. In the second example below, Shop by Category is clearly separated from More Ways to Shop.
You can also differentiate with text colors. The following example uses red text for non-category links.
You can also use color to make icons “pop” and stand out as calls to action for features like Sign In and Store Locator. But again, be careful when placing utility links like these behind the burger. Your customers may be expecting them in your horizontal header.
Want more quick-fix mobile commerce tips? In my recent webinar with Workarea, I shared 10 of the most common mobile mistakes from home page through checkout.
Sign up here to view the webinar.