locked
Navigation Questions

    Question

  • We are working on an application where we are converting an existing iPad application to Metro. In the iPad application, in landscape mode, the navigation bar is on the left-hand side and the right side contains the content frame. To add navigation support, we are exploring 4 options:

    1. On the hub screen, add tiles for each of the navigation items. User can navigate back to the hub to select a different view.

    2. Add the navigation items in the top navigation bar (as thumbnails).

    3. Add a header menu on each view page to switch between views.

    4. Add a navigation fly-out. This is similar to the iOS implementation; however, the fly-out would be overlay the content view and the user could hide/show when needed. A button would be constantly available on the screen, which when clicked, would display the navigation fly-out. If the user clicks the close button in the fly-out or makes a selection, the fly-out would disappear.

    I have seen example applications and/or written guidance on the first 3 options. I have not seen anything on the last option. I know you do not want to display anything on the screen not related to content so my gut is it is not a best practice. A flavor is to remove the button but add an bottom application bar option to display the fly-out. If you include the navigation options in the top application bar, that option could be achieved in 1 fewer clicks.

    So questions include:

    1. Does #4 go against best practices?

    2. Is it ok to implement multiple navigation options? Could we implement options #1, #2, and #3?

    Tuesday, June 26, 2012 2:04 AM

All replies

  • Hi Steve,

    Option 4 would violate best practices of Content before Chrome.  You would not want a persistant button.

    You could use the app bar and tiles (Ala IE) or one of the methods you see in other Metro style apps today.

    I would think multiple navigation options that do all the same may confuse your user.  What style of navigation do you think your app would be served best by: http://msdn.microsoft.com/en-us/library/windows/apps/hh761500.aspx  Hierarchial or Flat?

    -Jeff


    Jeff Sanders (MSFT)

    Friday, July 6, 2012 11:54 AM
    Moderator
  • Thanks Jeff.

    I was thinking the same thing on Option 4. The application is fairly flat. Really a two-level hierarchy.

    Hub

    • Content 1
    • Content 2
    • Content 3
    • Content 4
    • Content 5
    • Content 6

    The user needs a quick way of switching between content areas. For example, they may go to Content 3, switch to Content 5, and then back to Content 1. The Hub would contain the tiles for each of the content areas but I also wanted to allow them to switch to another content area without going to the Hub. My first thought was to add thumbnails in the top application bar (similar to the tabs in IE). There will be other content visible which would display what data is currently being maintained (which they select when first opening the application before going to the Hub).

    Sunday, July 15, 2012 5:49 PM
  • Hi Steve,

    The app bar solution sounds like a viable one for your situation!

    -Jeff


    Jeff Sanders (MSFT)

    Thursday, July 19, 2012 12:58 PM
    Moderator