Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

When using a sidebar menu, it's a good practice to place a menu button on the app's "navigation" header to make it easy for the user to discover the sidebar.

The menu button will be on the left, like the sidebar, and should be visible in each and every view.

Now, let's say a view brings in a master-detail navigation (for example, it offers some details specific to only a part of its content). So now your navigation header must display a Back button.

The question is: how do I layout both the back button and the menu button (they will be both on the left side)?

  1. I don't want to hide the menu button, cause I don't want the user to be forced to think how to access it,
  2. I don't want the back button to go on the right side, cause it's awful,
  3. I don't want the menu button to go on the right side, cause it's awful,
  4. I don't want to put the back button on a footer, cause it's even worse,
  5. I don't like right side sidebars, but that could be an option,
  6. I don't like the approach used by Gmail for iOS, disabling the sidebar when displaying a back button,
  7. Google+ approach (full screen, modal, detail views) is not something I would use as a general solution.

The "less unpleasant" solution I can think of is having the menu bar on the very left side and the back button just on right of it (maybe with a light vertical bar separating the two?).

Any advice?

share|improve this question
add comment

2 Answers 2

up vote 1 down vote accepted

Well, there are at least two solutions coming to my mind, maybe one of them could be helpful for you:

1 Placing back button and humburger icon on the left side - it's not a bad idea, I use a few apps which provide this solutions and I don't encounter any problems with clickable area. I suppose even clumsy finger user could click right button.

enter image description here

  1. Placing button on the right side of the header - also common practice, a lot of more place on the left side.

enter image description here

If you're designing app with a huge amount of content in vary categories you should rethink if hamburger icon on the every page is really needed.

share|improve this answer
    
Could you list a few apps using one of the two solutions you mentioned? –  ftartaggia Mar 30 at 22:09
    
Screen shots are from polish apps: allegro and ceneo, the first one doesn't use this solution any more. –  steppenwolf Mar 31 at 12:50
add comment

I agree with the above - there is enough room to put both those elements on the left, provided they have adequate clear space around them. I wouldn't add a thin bar to divide them as you suggestion, as this just exacerbates the issue by adding in more elements.

I'm not sure why you think having the menu hamburger on the right is awful. I think it would work and there is always the opportunity of A/B testing.

Give it a shot.

share|improve this answer
    
It just doesn't feel right, I don't know exactly why... maybe the fact that a right-side button opens a left-side menu. –  ftartaggia Mar 31 at 21:55
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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