I'm working on app, something like intranet, groupware category. Though all the functionality is now here, I'm not quite happy with the navigation. There is a list of contacts, currently accessible only from the dashboard. And I would like to give a user easy access to the contact list from every screen of the app. Maybe someone saw a great custom navigation that will work out well in this case? enter image description here

  • I assume the mockup shows the dashboard - how do I access the contacts from there? – Matt Obee Nov 14 '14 at 10:19
  • Can you not just have a header bar at the top of the application (it looks like you have one now) which contains the application options? What about a "swipe to the right from the left" type of gesture that pulls out a menu to the left hand side (Google Play Store does that). Play store uses 3 small horizontal bars in a stack to show that there is a menu you can access to the left of the screen. I believe you can see the hint at the top left (next to the shopping bag) on this screenshot: phandroid.s3.amazonaws.com/wp-content/uploads/2014/01/… – Charleh Nov 14 '14 at 10:36
  • What you're talking about is a "burger menu" icon, also known as a list icon. – Taj Moore Nov 14 '14 at 18:50
  • Yes, there is a button, to the left of settings, that launch the contacts screen. – Myro Nov 17 '14 at 6:09
  • The header bar is present only on dashboard screen. Hamburger menu is now a very argued thing for many reasons. But seems to me, it's good idea to use it not for navigation, but for a contact list. (maybe + settings) – Myro Nov 17 '14 at 6:12

I can see a few solutions.

  1. Burger menu
    As suggested by others here, a burger menu could de clutter your UI as well as giving access to important features from every screen. If you put a burger menu in the upper right corner where your settings and contacts icons currently are, you can integrate both existing menus into this one new component. This makes a good solution for the user because it is a widely used solution and users are used to having menus such as this in the header bar.

  2. Sliding Controls
    You could either, as Ades suggests, use a sliding bar with the contacts on it at the bottom of your content screen, or you could use a sliding controls bar. At the moment you have 5 controls on the bottom of your app. If you remove the last one and replace it with a sideways pointing arrow or just a simple ">", this gives users a visual clue that there are more controls to the side which can be accessed by swiping along. Put the menu you removed and your contacts menu in the extra space on this control bar.

| improve this answer | |

Definitely use a burger. You could put the settings in the burger menu too. Fix the settings to the bottom of the burger menu and use a vertically scrolling contact list that scrolls behind the settings button.

| improve this answer | |
  • 1
    Welcome to the site, @Coopstar. A hamburger nav is not a solution for every app. The OP asks for "custom navigation" specific to accessing a contact list. Can you expand your post to explain why a hamburger would be the right option for this case? – Graham Herrli Nov 14 '14 at 23:13

There seems to be three types of pages in your navigation:

  1. Newsfeed, Messages: these seem to contain live content that frequently gets updated and it would make sense that the user will want to visit these pages frequently.
  2. Contacts, Shifts, Tasks: These contain useful information that the user may want to access frequently but doesn't get updated on a regular basis. The user is the one updating content.
  3. Profile and Settings content here rarely changes and therefore the user does not visit these pages frequently.

If this analysis is correct it would not make sense to have Profile, Contacts and Settings at the top of the screen as this takes up real-estate by links to pages that the user visits infrequently.

You could free up the real-estate currently taken up by both top & bottom navigation, and moving them into a sliding burger menu, as has been suggested in this thread. The links inside the menu could be sorted by priority order, with the profile on top, then news, messages, contacts, shifts, tasks, and finally settings. The menu can have multiple levels so that choosing 'contacts' could open all of the contacts in the same menu without redirecting to a new page.

You can see an example of a multi-level burger menu in action here.

BTW Eataly = great place! :)

| improve this answer | |
  • Thanks for a feedback, staccato! You're almost right on Your guesses, sorry I posted so unclear description. The header/navbar shown here is dashboard specific, all other screens are using regular navbars. I'll play around with hamburger menu for the contact list only. Thanks – Myro Nov 17 '14 at 6:13

How about a slider above the main menu?

enter image description here

| improve this answer | |

Consider using quick-draw offscreen nav (side menu or navigation drawer). This pattern is used in Slack mobile app to access group conversations, directly contact individuals and show missed message indicators.

Slack - Team Communication

  • Taking all available vertical space allows you to quickly scroll to the desired contact and keep individual links large enough to tap with less errors.
  • Having the contacts list offscreen reduces clutter and optimises screen space for conversation history.
  • Having the contacts list "physically" attached to the message pane suggests close coupling through proximity. Desktop clients (skype, lync, icq) have cemented this relationship over time.
  • Relying on a gross motor action (swipe) rather than a fine motor one (tap on an icon) simplifies accessing contacts.

If you are really worried about feature discovery, you could alias an icon to trigger the menu. Better yet, include a quick start interactive tutorial during the first launch, literally telling the user how to swipe onto the screen for accessing contacts like StrongVPN does:


| 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.