6

I am trying to understand if there is any issue linked to the presence on the same interface of a menu-tray icon (top nav-bar) and a back button.

This design will affect both iPad and iPhone.

  • Is there any issue that might be linked to this type of approach?
  • Have you seen this identical model in any live app?

enter image description here

Improve this question
4
  • 1
    The answer to this depends on the application. If you provide more detail about the application (preferably with mockups) you will get a better response.
    – JohnGB ♦
    May 14, 2013 at 23:32
  • Hi JohnGB, thanks for answering. I tried to include a mockup but I wasn't allowed. The application is a shopping app, like M&S, ebay, Amazon or so. It allows you to go, on standard user jopurney, from home, to a product list page to a product detail page. Here, for instance, you can find yourself with two navigation bars: the primary one using a menu tray icon (like facebook) and a secondary one with a back button (also on the left-hand side). I hope this makes the scenario clearer.
    – Taritaro
    May 15, 2013 at 5:46
  • Just post the mockup to imgur.com and put a link to it here. One of us who do have permission will add it for you.
    – JohnGB ♦
    May 15, 2013 at 14:29
  • Great: the image is the following imgur.com/45C8eM2
    – Taritaro
    May 15, 2013 at 16:59

5 Answers 5

Reset to default
3

I came across a very similar situation when designing the navigation for the application I'm working on. We evaluated several different types of navigation patterns and landed on two when we got into thorough user testing:

  1. The standard hub-and-spoke pattern (when drilling in, the menu button goes away and you must navigate all the way back to the beginning to access the menu again)

  2. The pattern mentioned by previous answerer Neo: the menu button is always accessible, and if the back button appears, it is to the left of the menu button, so the menu button slides over to the right.

You can find a great working reference for #2 in the ABC News app for iOS (go download the app if possible, all of the screenshots I saw via a google search were out-of-date).

We evaluated both approaches and our users much preferred #2, as they were frequently apt to drill into many pages and not want to drill back through to find the menu again.

Improve this answer
1

No not at all. A Menu represented by three lines is different than navigating back to a previous page. However I would consider moving the back button (and possably a forward button) functionality to the bottom of the screen instead of stacking navigation items at the top.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

That way you could implement this both as a web app or a native app without confusing your users.

Improve this answer
1
  • 1
    I like this idea. However, although this might work for web-app, for native apps a nested-doll IA does not allow you to have a forward arrow. There is also a question around what do I have to do with the remaining space. I will look into it. Thank you for your suggestion.
    – Taritaro
    May 16, 2013 at 8:10
1

Having two tap targets so close together would seem to invite mis-tapping. You're also taking up a lot of precious screen real estate with a row containing nothing but the back button.

Improve this answer
0
0

Thank you all for your comments. The final solutions I suggested was to re-think the way navigation should work on the mobile app.

This should be based on the idea that a back and menu tray cannot be together in the same interface, therefore I suggest to remove the menu-tray from all of those pages placed underneath the first level of navigation.

Improve this answer
0

Agree with @Stephen that should avoid the back button on a new row as it is wasting precious screen estate.

I have came across app that has a different approach to this. When i navigate to the 2nd level page, the "back" button will appear to the left side of the "menu" button. Which means the "menu" button will be slightly push in to the right to make way for the "back" button. Not sure if this is a good approach though. :)

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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