Muse-ability: Complex Menus Go Mobile

Our Muse-ability posts are a series of observations on experience design and UX practices, sparked by our daily interactions with sites, apps and more.

When it comes to site navigation, we’re walking a fine line, right? Organize the information we have to work with in a way that helps the user understand where to go without confusing or overwhelming them. It sounds like a straightforward goal, and yet it’s an incredibly hard thing to nail, especially for a retailer looking at a lot of different categories. This challenge only increases (like we needed that, right?) when you go to mobile.

You no longer have ability to show things on hover, much less screen space, and much higher user frustration if they end up at the wrong spot. No pressure. In case you were worried that it can’t be done, let’s take a quick look at a company who’s done the Big Mobile Menu with grace.
Boden is an apparel company with a whole lot of categories – women, men, boys and girls (each divided into two age groups) and baby. That’s quite a bit of information to display on a (relatively) teeny tiny mobile screen. Their approach: take the hamburger and make it a double.

IMG_8667IMG_8668IMG_8669

Their hamburger opens up a two-layer menu, with several standout points of execution:

  • It opens up in a way that clearly demonstrates how the menu works. Users don’t have to take any extra step to get to the clickable content.
  • The highlighting and arrow elements are subtle and effective at showing the users the way. This is particularly true in the boys and girls sections that have subdivisions – this could be tricky and/or result in a menu a mile long, but the information is clearly presented and the functionality plays nice.
  • It doesn’t force the user to expand things in a way that hides other content and menu options. If they have to hit a “+” to show something and then it’s not what they want, they have to hit “-”, go to the next thing, and then “+” that. That’s an extra step that probably involves a teeny tiny icon. Avoiding that opportunity for frustration helps everyone.

Without getting into a bunch of examples of how not to do this – we’ve all run into/have been frustrated by plenty – Boden’s mobile menu showcases a way to take the next level of menu… to the next level. Three cheers for usability!

No Comments Yet.

Leave a Reply

Your email address will not be published.