2

For a forum type service that has a calendar, files section, photos section, etc, we use a sidebar on the left side to provide navigation to these pages. The sidebar has about 13 items, including Admin for people with administrative privileges. When clicking Admin, it opens a dropdown secondary menu with 13 additional items. Finally, some of the pages provide access to additional, related, pages via buttons horizontally across the top of the page.

It's a lot of items, and not everything is easily discoverable (you have to know to go to Admin -> Settings page in order to find the Export Group function). And the horizontal buttons aren't great on mobile, where we collapse them to a dropdown.

If we pull every single page into the sidebar, that will get very long. Do we do some sort of accordion to collapse related items in the sidebar to make things more manageable? Do we instead do a modal for the Admin pages so that we have a separate sidebar just for it? Or something else?

Edit: Here's a screenshot showing the Settings page, with the expanded Admin menu, and the buttons across the top. enter image description here

Improve this question
2
  • 2
    Any mockup or screenshot?
    – Danielillo
    Sep 25 at 19:48
  • I've added a screenshot.
    – Mark Fletcher
    Sep 26 at 4:39

3 Answers 3

Reset to default
5
+50

Firstly, I think you are on the right track for choosing vertical sidebar navigation because of the following reasons

  1. Vertical navigation supports more efficient scanning than horizontal navigation.
  2. Vertical navigation offers room for growth when the number of items increases eventually (from 13 to say 15+)
  3. Vertical navigation translates naturally to mobile.

Now, a few ideas on how to optimise for discoverability and decrease interactions (non exhaustive but proven ways other products do it right now)

  1. Place less-important ones at the bottom (dynamically based on access levels) – Study all the list items that you have and map them to the right access levels based on importance for their workflow. Dynamically show the most important ones for corresponding access levels to the top and the rest at the bottom.
  2. Grouping – Identify a categorisation for the list items and group things accordingly. Use accordion to show or hide the sub-menu items. Remember the user's accordion state. eg: I open accordion 2 but close accordion 1 today. Tomorrow when I log in again, I should see the accordions in the same state.
  3. Favourites – inorder to optimise for 'decreasing interactions', you could implement favourites onto the items in the menu bar (Similar to what Slack is doing). This ensures further personalisation for users thereby helping them reduce effort and increase readability.
  4. Include in search – If your product do have a master search, make the nav bar items to be discoverable from it too.
  5. Highlight Notifications – If applicable, display notifications or alerts prominently within the navigation drawer. Users should easily spot important updates.
Improve this answer
3
  • 4
    I agree with everything you said (although adding all of it could be complex from a development POV). But since this is a clear information architecture issue, let me suggest adding user testing in order to determine your first 3 items using techniques such as card sorting, desirability testing, tree testing, content modelling, etc
    – Devin
    Sep 27 at 22:24
  • 2
    +1 for everything Kishan and Devin said. I would also look at jobs to be done and ask which ones could reasonably be excluded from mobile. For example, does an admin need access to Integrations on a mobile device, or could they wait until they're on desktop?
    – Izquierdo
    Sep 27 at 22:31
  • Thats a good point @Izquierdo. Have done it before too and it worked too (reduce effort, maintenance & decrease confusion in-app due to overwhelming number of things to do too.). Suggest Mark to consider too.
    – Kishan
    Sep 29 at 5:54
1

It should be a nav bar with a sub nav bar. A sub bar would solve the spacing issues and it can have rollovers that would help with discoverability issues.

Material Design's site has a nav bar and sub nav like this.

enter image description here

Improve this answer
0

di.fm has a particular layout for the multiple submenus corresponding to each service: they are placed in a button panel within a carousel that allows easy access to each content, both on desktop and mobile.

enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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