0

I have noticed that many web applications displayed in mobile devices or views seem to be simply moving or displaying the same content in a different viewport rather than trying to tailoring content for this use case/usage.

A result of this is the deeply nested or long navigation menus that are easily displayed in desktop view (e.g. using a mega menu) having to be squeezed into a very small space, which means that you also have to navigate the navigation menu with a very limited set of interactions.

Below is an example of a navigation menu on mobile that has multiple hierarchies and therefore requiring additional navigation elements, but I am wondering if this is a standard design pattern that is used in established development frameworks or a workaround while we are working out where the next trend of mobile application design is heading towards.

enter image description here

What is an common design pattern used for complex or deeply nested menu so that users can easily navigate the options (assuming that this provides a good user experience in the first place)?

Improve this question

1 Answer 1

Reset to default
1

The pattern you listed is a fairly common implementation of a mobile mega-dropdown. Is it bad? No, I don't think so. You just need to nest all the topics into a logical order. If you take a look at e-commerce sites, you'll see a version of this pattern for nearly all of them. I've included some screenshots of Bol.com, a popular shop in the Netherlands.

enter image description here enter image description here

The good

  • Sort subtopics underneath a 'main' topic level; e.g.: Books -> Genre, or Account -> Invoices, meaning it's easier to navigate through limited space.
  • Allow users to take a step back within the menu, meaning they can easily recover if they selected the wrong item, or didn't find what they were looking for in the more detailed level.
  • Adaptable to any kind of item, including account specific pages.
  • Due to the nested design, you won't end up with an endless scrolling list.

The bad

  • It does takes more time to find the specific page you're looking for.
  • It does not show all items at once, meaning if you didn't group your topics in a way the user expects, they won't be able to find what they're looking for.
  • If you have more than 2 levels, your user won't be able to see the highest level. They can only see one level above the current one. This doesn't necessarily have to be a bad thing, but it can lead to some users feeling more lost.

There's also a variation of this pattern, where you show users the selection of each level that they made. The benefit of this is that the user sees exactly what they selected and where they are at in the navigation process, but it's heavier on the mental load due to everything being visible at once. However, since users can change their choices on ANY level, it has some serious benefits. Only testing it could help determine what works better in your particular case

enter image description here

Improve this answer
2
  • +1 I wasn't sure if it is just common in e-commerce or all other areas of mobile web applications, but I find the discoverability of nested elements rather impossible so I don't know if that's necessarily the intended experience...
    – Michael Lai ♦
    Nov 5, 2018 at 17:03
  • @MichaelLai Lai Some websites don't really lend themselves to this format. Your example image is a great example of where it doesn't work. "I want to..." is a level containing subtopics. Just from that name alone it's impossible to expect topics like personal data editing and calculating costs there. I'm not surprised you're wondering if the format lends itself here, because I don't think it does either. Users need to know through trial and error where to find something. E-commerce sites benefit from having very straightforward and easily categorised products.
    – Wendy Wojenka
    Nov 6, 2018 at 8:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.