Best way to show an inner submenu on mobile website?

Question

On my mobile website I have a menu for the main website navigation. When you are in your account area, this is a further submenu, which is accessed by clicking the second burger menu button.

The submenu appears like like this:

However some feedback I got from some users was that they didn't know where the account area options were (I personally thought / still think this is obvious enough).

So is there anything I can do differently here to make it more obvious?

Answer 1

It may seem obvious to you because you're the one designing it, but here's why your end users don't think it's obvious enough:

• The second hamburger icon that's sitting next to "Your Dashboard" title does not appear to be a navigation button, but more of a decorative icon to indicate where the user currently lands at.

Why you shouldn't use the hamburger icon to achieve the goal:

• Inconsistency: Hamburger is a navigation icon (refer to this Android Design Guideline as an example). In your case, you want to allow users to perform actions such as changing their personal details or deleting their account.

Instead, there are a few (non-exhaustive) alternatives you can opt for:

• Setting icon

  

• Meatballs icon to indicate actions, as shown below:

  

• Use a profile thumbnail (display dropdown menu on click):

  

  This is for illustration purposes only. You can use the profile picture of your user instead.