2

Since the hamburger menu is slowly starting to bleed out I was wondering about including the bottom menu in my website projects. Now the bottom menus usually do justice for 6 or less elements, but I was wondering how to make them work with lange scale menus. After a day of thinking I've come up with this mockup. mock

My question for you about this is do you believe a menu like this would work as a substitue with large menus for mobile. Any additional feedback would be well appreciated

Improve this question
2
  • Your implementation seems correct, however I would recommend to only use the Bottom Navigation for Menu elements >2 and <5. Anything less or more makes it unreasonable to use it. Also, the shadows are pretty much unnecessary for your icons.
    – Swapnil Borkar
    Jun 29, 2016 at 6:48
  • This reminds me of mobile navigation for e-commerce websites. Webshops often have tons of categories and links. They need everything to be easily navigated and the products need to be easy to find. Have you looked at what works for them or not? Example article: baymard.com/blog/mobile-ecommerce-search-and-navigation. Or maybe more here: baymard.com/research/mcommerce-usability
    – Paul van den Dool
    Jun 29, 2016 at 10:28

3 Answers 3

Reset to default
1

I like your design. Bottom menues are certainly better than top menues since nowadays phones are getting larger and larger and top actions become harder to reach.

I don't like the way the way parent and child layers look, because items do not look clickable. Facebook has a similar layout but I like that they include an arrow to let you know that you can navigate into the item. I include a screenshot:

menu with more options

I also like the way they handle the search input. I think that the search icon in your example looks unattached to everything else and doesn't give a clear hint for what it's intended to. I would include an input with a placeholder that says what you can search for in that view.

Improve this answer
0

Nice. Looks real clean.

You have probably thought about this - I would also suggest being able to see where the user is arriving from. If I am arriving from the parent layer, and arrive to the child layer, I would perhaps add a hint at the top, of the parent layer that has been selected to orientate the user.

Improve this answer
2
  • Please give more details as to the "why's" of your answer. Why does it look clean, why does it look nice? Why would you do the things you recommended?
    – Andrew
    Jul 14, 2016 at 15:45
  • Thanks, well if you'd look closer you could see the parent layer - child layer relation shown in the "Products Food" on the top in the last picture. I want the feature to make the top elements into a side-scrollable list
    – aln447
    Jul 16, 2016 at 1:36
0

Contrary to the popular opinion, I am not too much in favor of the above usage of a bottom menu

  1. using this for more than 5 items, is a pain. The user will have to scroll to even know what all options are available. He will have to do this almost every time. The chances of a user remembering the exact placement of hidden icons will be very low, i guess

  2. I am not very sure why you use different colors for all buttons. It really does look nice aesthetically, but is there a relation between the color and the actual item? Is there some sort of correlation you want the user to draw and base his decisions on the colors? I would prefer consistency, and would only compromise that for something really important.

Also, I am unable to understand what the search icon next to the bottom nav is for.

Improve this answer

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.