How to make a menu discoverable with the right icon on e-commerce mobile?

Question

i'm designing an mobile site ecommerce. On a meeting i've seen the last wireframes developed (see image) of the topbar detail. The right icon show a lot of different actions (like cart, my account, wishlist and so on).

I think that this kind of icon doesn't permit the right discoverability of all action.

My first though is to explode all actions into icons like this but we have some problems with the logo width

What is the best way to improve discoverabilty on menu actions? Can i keep the menu with some more explaining icon or is better to explode all action with a smaller logo?

Answer 1

Is there not enough real estate for a tab bar at the bottom of the page? It's a very standard thing to do at least on iOS.

Another solution might be incorporating their account name/picture as a button (not substantiated by research, but user probably are more likely to tap their own name/picture to see where it brings them). A similar alternative may be just the "my account" icon, though both of these solutions might not make as much sense with the search icon coming out of it. But cart, wish list, and my account do seem to belong to the same category.

I recognize the 3x3 grid as an icon, but if used in conjunction with the hamburger on the left it might lead to confusion. Users are still learning what these icons mean.

If you are designing for Android, I strongly suggest the vertical three dots as seen here (4):

Also note in this example that there are two icons that are not collapsed into the three-dot detail button. Using the brand name/logo as a drop down (2) could be another solution, depending on your specific situation.

If you want to see other design patterns, try looking through here:

http://www.pttrns.com/categories/13-navigations

There are people who have done exactly what you have and other variations, so you may find a solution you might like.

I hope something here helps!

Answer 2

I think what the wireframe has is a better option minus the 9 dots. 3 dots, from what I've been seeing, is becoming the (dare i say universal) 'more' icon. With your suggestion, what happens if they want to add more links in a few months?

You could also look into some design patterns for side drawer menu options as well. You can have them show just a bit and then slide into their closed spot, this way the user sees it as well as to where it closes into.

Hope this helps.