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?
I can see a few solutions.
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.
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.
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.
There seems to be three types of pages in your navigation:
- 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.
- 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.
- 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! :)
How about a slider above the main menu?
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.
- 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: