In our application, we've got a dual sidebar design. On the far left is the main navigation sidebar, with all the top level pages. Next to this is a contextual sidebar, with links relevant to the page your on. On some pages, these are tab links which change the content you're viewing, on others they can be filters.

On some pages however, we don't really have any content to put in here, so this leaves me with a few questions:

  1. From a UX point of view, does this navigation system make sense in general?

  2. Is it a bad idea to only show the secondary sidebar on some screens? It's currently always shown for consistency but it is wasted space on the pages where there's nothing to show.

Edit

Here are a couple of screenshots of what we currently have. You can see the empty sidebar is just a waste of space really.

Sidebar with content

Sidebar without content

  • A visual would help us understand your question a bit more. – RobbyReindeer Aug 10 at 6:19
  • 1
    @RobE updated :) – PaReeOhNos Aug 10 at 8:15
  1. It's hard to tell if it makes sense from a UX point of view, because a lot will depend on the user, their profile, backgrounds and habits. However, it is often seen to have a global view on the left and a contextual one on the right. You can see this pattern in a lot of "studio" applications like Figma. enter image description here

    1. Your users are better having only what provides value to them. So if there is nothing that can be useful in the secondary sidebar, you should get rid of it.
  • The contextual model you reference is generally an "inspector" or "detail" view of the selected object(s) on the main stage. That is not a navigational pattern in any application I've seen. I think that would carry a considerable amount of mental overhead for the user. – plainclothes Aug 9 at 19:09

I really really like the look of it, great job! Here's a very quick fix, the arrow is a bit bigger for demo purposes.

Arrow allowing user to collapse second sidebar

Collapsed second sidebar with icons

Another method would be to extend on hover but that may lead to accidental clicks or actions

You need to restructure your side navigation bar. The nesting of elements should be within a single navigation bar and actions should be brought in the main view instead of keeping them in the navigation bar. By structuring it this way you will be able to avoid that empty secondary navigation bar.

Check out the wire-frame given below for the concept explained above:

enter image description here

  • Wouldn't this be a bit confusing in that the content within the projects option in your example would change? The projects view is a listing, so I would be wanting to show filtering options instead of those menu items, but when looking at an actual project it would be the options shown above? Side note I am planning on remove the actual actions in the sidebar - i hate them. – PaReeOhNos Aug 10 at 12:22
  1. Yes, secondary navigation is quite normal and can appear anywhere on the page. But in a bar along the top you can share space with breadcrumbs, for example (see also @Sheraz answer).
  2. No, because you are showing things exactly as they are. You can’t get much clearer than this to tell users about your site structure, and therefore what they can expect.
  • So it wouldn't be a problem from a consistency perspective? I was always under the impression the one of the most important things from a UX standpoint was that the app remains consistent? In this design I thought that simply removing the sidebar on some pages would be too inconsistent? – PaReeOhNos Aug 10 at 8:16
  • @PaReeOhNos Consistency can also mean ‘never show empty containers’. Rigidly applying layout components should not be your primary guideline. If you must, you should consider moving it to the right, for example. – gerstemout Aug 10 at 10:57
  • Fair point. From a design perspective then, would it be less confusing to have that sidebar stay as it is and then suddenly disappear on some pages, or adjust its design so that it looks more like its part of the content? Say make the background of it transparent so it becomes a menu within the pages content if that makes sense? – PaReeOhNos Aug 10 at 12:23
  • To visually move it to the margin of the content makes sense, but in that case I would move it to the top or the right. Otherwise you are trying to solve a problem of your own making. A ‘tool bar’ at the top would be my choice, after just not showing it in the first place where it is not needed. (That is my answer anyway, feel free to disagree!) – gerstemout Aug 10 at 12:47
  • We had the options in a bar across the top originally, it just started to get very cluttered when we expanded the system and didn't seem very nice. – PaReeOhNos Aug 10 at 13:48

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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