Design Vision Updates to the Left Navigation

Question

Update – November 7th, 2023

The visual changes proposed in this post have now shipped and should be live! These changes include:

• icon consistency (icons for all items)
• minor spacing and text color updates
• "Saves" is now available from the left navigation for users logged in
• icon updates to section headings
• visual updates to hover and selected states (color and shape)

---

Update – August 22nd, 2023

We have reviewed all the answers and comments — thank you to everyone who took the time to read this post and provide feedback. Based on the reactions to the visual changes we suggested (e.g. icon consistency, spacing and color tweaks), we will be moving forward with these changes. Adding Saves to the Left Navigation was also received very positively; we plan to move forward with that change as well.

We also received a lot of feedback around adding and removing other items. This type of work is out of scope for the first iteration of the Left Navigation update. However, these remarks merit further investigation and serious consideration. We’d like to take a bit more time to look at the information architecture as a whole and come back with a second proposal that would include some of these larger changes. Here the points we’ll be looking into next:

• Easier access to the Help Center, Chat, and Meta
• Personalization: showing or hiding additional links based on the user (e.g. access to their SE communities, Teams instances, or moderator tooling)
• Reducing noise for items of no interest to the user (rethinking the promotional logic for Collectives and Teams)
• Making Home vs. Questions clearer and more useful depending on the SE community
• Looking into usage for the Users and Companies page, and re-thinking the location

---

Background

As mentioned in the design vision post, we are updating the visual style of individual components while making usability improvements. One of the components currently being explored is the Left Navigation that is used across all Stack Exchange (SE) sites. Our goal with updating the Left Navigation is to scale and support new features, bring more awareness to features that are available and align visuals with the new design vision.

Current

The component is currently broken down into a few parts and states:

• Section headers (Parent)
• Section header links
• Section with navigational items (Children) pointing to different pages within the site with the following states:
  • Default
  • Focus
  • Active (Selected)
• Section without children (empty state)
• Section with promotion (alternate empty state)

Scope of this initiative

We will be restricting the amount of development effort for these changes at this stage and therefore need to limit our changes to be primarily front-end only. Most back-end changes are out of scope for this release.

There are also a few things we can’t change due to the time limitation and other business considerations that would need to be made.

• We won’t be changing the logic around our empty states (e.g. Teams promotional state).
• We will not be removing any existing navigation items. (The logic for which SE sites display the Unanswered or Companies links will remain — see far-right examples in the mockup.)
• We will not be changing your ability to hide the Left Navigation altogether (from your user preferences). However, any design changes shown here would apply to both versions (on page or hidden).

The new look

We’d like feedback on the following proposed changes to the Left Navigation. The images below display a few variations of how the navigation would work in different scenarios and what it looks like in a full page. These are design concepts only at this stage, no development work has started.

Organizational changes

1. Public header

   The header for the Public section has been removed, aligning all items with the Home page link. With the Teams product being moved to its own domain, the need to identify those items as being different spaces from the Public Platform is no longer as important. These items are now aligned as primary pages within the navigation.

2. Order of Public Platform items

   The grouping of items has changed to be more in line with standard information architecture design patterns that are common across the web. The entire site is based on content and we believe the knowledge repository is the most valuable part for users. Our assumption is that it would be more intuitive if that content was the leading piece within the navigation.

   • All content types have been pushed to the top in one sub-section (Home, Questions, Tags and Unanswered — SE only). A couple of additional things we’re keeping in mind for down the road:

     • All users have access to the pages in this section (registered or anonymous).
     • Questions, Tags and Unanswered lead users to the primary actions on the site — finding solutions and helping others solve problems.
     • In a future iteration, we’d like to add Articles to this section (below Questions) and continue the pattern for having all content types grouped together. This would point to the existing /collectives/articles page. This change would only appear on Stack Overflow.

   • The second subsection is separated to create some visual distinction between the primary actions (through content types) and secondary actions on the site. These pages, although important to the overall function are considered secondary to finding and solving problems. Additional reasons we’ve grouped these pages are:

     • Saves is a feature restricted by registration.
     • We would consider adding other restricted pages here like Review queues and the Mod Dashboard in the future.
     • Users and Companies support a tertiary action and are less visited pages within the navigation.

3. Adding Saves

   Saves has been added as a primary item within the navigation. This would link to your Saves page within your profile. This item will only appear for registered users (logged in with an SE account). Non-registered users wouldn’t see this item. Our assumption is that users would benefit from a single-click access point into their Saves page (versus having to navigate through their profile page every time). More visibility would likely also increase the usage of this feature.

4. Adding Labs section

   • A new section will be added to the left navigation soon. This change will only appear on Stack Overflow (none of the other SE sites) and will only be visible if there are any ongoing Labs experiments.
   • In an effort to make the experimental Discussions feature more visible and discoverable, we’ll be adding it to the Left Navigation. This will live under the Labs parent section while in its experimental phase. Discussions will initially redirect to the Labs site but will eventually redirect to a /collectives/discussions page within Stack Overflow. This page will display all discussion posts available on the site (NLP and potentially 1 other collective by the time these changes go live).

Visual UI changes

5. Active (selected) state for navigation items

   • The accent color bar (orange on SO) has been removed. Although the accent color does tie into the overall brand of the site, we find that adding an accent color to an element calls additional attention to that element. Calling attention to the item of the page you are currently on, doesn’t have enough value to warrant such attention. Removing this color reduces some of the noise on the overall page.
   • Corners have been rounded. To keep consistency with all our other button styles, we have decided to add a border radius to the floating outer edges of the rectangle shape.

6. Icons and alignment

   Icons have been added to all the public navigation items. This is to create better consistency and alignment across all pages including the Collectives and Teams items below. Adding icons to the navigation also helps reinforce visual recognition when those icons are used in relation to those content types in order areas of the site.

7. Section header links

   • The info icon has been changed to a plus icon in order to better signify to users that these section headers are not just for informational purposes but that a user can add items within these sections.
   • We’ll be making the entire header a clickable link (text and icon) versus just the icon for a larger clickable surface area.
   • The Labs header link will redirect to the separate Labs site, which is why the icon displayed is one we use for showing an external link.

8. Color and spacing

   • As mentioned in our earlier post about color choices, we’ve reduced the number of black shades in our design system. The following choices were made with the new shades in mind:

     • Default states use the medium shade of black, found as the primary shade in most text on the site.
     • Active states use a darker shade combined with the existing bolded style to make it clearer which page you’re currently on.
     • Section headers were made in the darker shade to help create better hierarchy between headers and items.

   • Overall, the padding space has increased to help with readability in between each section and the accessibility of each item’s clickable area.

Our ask

We’re looking to improve the Left Navigation to make your workflow easier and more intuitive. We're keen to receive your feedback, and we've outlined a few questions to guide your input:

• Which items are most useful to you in the Left Navigation?
• Are there any items missing that you would be interested in seeing here?
• If you could prioritize one improvement to the Left Navigation, what would it be and why?

Other feedback related to the Left Navigation that does not fall under the previous questions is also welcome!

What we’ve heard

We’re hoping to make updates iteratively when the timing works with other priorities. Some future changes may include larger information architecture work and exploring some previous requests from the community such as:

• Improving the discoverability of the Meta and Chat links (as requested in Tiago Martins Peres' Q&A here)
• Making the Help Center link easier to find and all icons easier to identify (as requested by Journeyman Geek here and by canon here)
• Re-thinking the top navigation bar, which links should go in the top bar versus the left sidebar, and how can we improve responsiveness (e.g. iRon’s request here).

Next steps

We are eager to gather feedback on these Left Navigation changes and iterate on concepts. Once we've made progress, we'll return to you with an update on where we landed.

Answer 1

Chat and Meta are kind of ignored, and I'm glad the request for them to be added is being considered.

Meta and Chat are integral parts of the network sites — including Stack Overflow. I've an old, request for it to be brought in for quite a while as well. (Looking at the FR y'all referenced though, I guess someone is going to dupe vote one or the other.)

People don't even know they're there hidden in the top side bar, and these are tools we use in managing our communities that are somewhat nerfed by poor discoverability. They belong front and center, well left.

I'm a big fan of what Adam Savage calls "First Order Retrievability" and Jeff Atwood calls "Just in Time" theory.

We want people to know and remember they are there. In earlier site designs, they were right on the top bar, at least in my memory, a lot more active on normal days.

Unlike communities, and to a lesser(?) extent, labs, these are things that every site has (well meta, has no meta... but then it'd be meta all the way down), and something I feel would be helpful to users of any experience level.

In the past they were on the top bar, and new users had an easier time finding them. Pointing them to the site main room would do wonders for discoverability of chat, and help people find and explore site metas.

I do feel considering that there's a LOT of vertical space on the sidebar, 2 additional items, of immediate, cross network use is a good use for them.

Answer 2

Which items are most useful to you in the Left Navigation?

Honestly, I rarely use it. Rarely, I'll use it to get to tags. But I feel like it's a lot of wasted space. Instead of "Home", I click on the site logo in the top left corner (or, more often, the "Stack Exchange" logo in the bar, since that's sticky). I don't use the "All Questions" view, since I find it extremely cluttered with the preview of the body of the question - that doesn't usually add value over the title. I also don't have a good reason to view Users or Unanswered. The Teams section was useful when it had links to the Teams I'm a part of.

Personally, I don't find Left Navigation that useful at all. I'd rather have wider content spaces and bigger text that doesn't have so much left and right whitespace or a left nav that never gets used.

Are there any items missing that you would be interested in seeing here?

I really like the idea of Collectives, Collections, and some of the new features. But those are on SO right now and I'm not on SO enough. That could make sense to think about including on the left nav. But I still don't know if I'd like that because (and see my first answer) so much of the left nav doesn't add value.

If you could prioritize one improvement to the Left Navigation, what would it be and why?

Other feedback related to the Left Navigation that does not fall under the previous questions is also welcome!

It's less about Left Navigation, but from my perspective, I'd like to see navigation looked at. But right now, I rarely have a reason to go to other pages. I'm either on home or a question page. On the two sites where I'm a moderator, I'm in the mod tools. I guess I'd say focus on what makes it more useful to want to browse users (although long resisted, do any "social" features make sense?) or tags or unanswered (which doesn't even exist on SO) or whatever else you put in Left Nav.

Answer 3

Which items are most useful to you in the Left Navigation?

I mostly just use it to click "Questions" (so I can see the most recent posts), "Tags" (when I'm not sure what tags to use), or "Users". I think I've never clicked anything else (although I rarely use Stack Overflow).

Are there any items missing that you would be interested in seeing here?

Just throwing out some ideas:

• A link to the help page.
• Related sites: links to the sites listed when you click "This question belongs on another site in the Stack Exchange network".
• A link to the site's greatest hits page /questions/greatest-hits.
• Random question button.

If you could prioritize one improvement to the Left Navigation, what would it be and why?

Hard to say, I very seldom use this feature.

---

I'd also be a bit cautious about "SE with theme background" clashing with individual sites' designs.

Answer 4

I have operated with the left sidebar hidden since the day we were allowed to do that.

When my Teams were visible in the left nav, that was vaguely useful.

Would this be a good time to review the functionality of the top bar with an eye towards improving consistency? It doesn't make sense to me that there are several buttons which act as hamburger menus as well as a left sidebar. To actually make the left sidebar useful, several of these buttons could be retired or rescoped, and obscure features which they hide brought to a place where they can be discovered and expected.

After all these years, I still have trouble remembering which links are in which hamburger menu.

The links in the footer are also quite cluttered and apparently hard for some people to find. The "contact us" link at least would make sense in some sort of main navigation pane, but why not all of them?

On the other hand, having a column of the display permanently occupied with a bar is wasteful and unattractive. Perhaps it should be more like a regular menu which is hidden by default, but easy to discover by having it clearly labeled, instead of obscured as a nondescript button with no mnemonic value.

Answer 5

I think the reason I have this panel hidden is because it's too noisy, and it doesn't normally help me with what I seek to accomplish when using the site.

In looking at this:

• Home navigation feels redundant since I can always just click the logo
• Questions navigation feels out of place since it's really a sentiment to show us all questions rather than the most recent questions, which has different motivations depending on where on the network you are. Smaller sites could benefit from seeing all questions at once. Sites that have more traffic on a daily basis could benefit from seeing only the most recent questions.
• Promotional content feels more like an ad and should be in the ad locations (and subject to the "Reduced advertisements" privilege). If I'm forced to use the side panel, then I'm either looking for a Team I'm a part of or all of the questions on the site.
• Users and Companies seem to be a bit out of place, in that...well...this isn't a social networking site, and the only time I think anyone needs to look at a list of recent users is for moderation purposes. Companies feels like a hold-over from the Stack Overflow Jobs service, and again - since this isn't a social networking site, I don't really care about what companies are active here.

In my head, the side panel should have be a means to help me identify critical resources that I need to access infrequently, rather than extra fluff. Otherwise I would never have a need to use it.

Answer 6

It seems a bit inconsistent to use filled icons here but use non-filled ones in the rest of the design as shown in this and this. Is there any reason in particular for this? Or was this an oversight due to lack of internal cohesion / communication? And why is this screenshot here inconsistent (using the current look) with the one in the parent post?

You said unanswered isn't going anywhere (but it was never there to begin with?), but why does this screenshot not show it?

What about Staging Ground on SO? Or is that being removed from the sidebar now that it is on pause to do... other things™?

I like that saves will be there now. It's a bit annoying to click into my profile to get to it if I'm too lazy to use my browser's omnibox.

I also like that at least everything has icons now. It was weird to only have an icon for questions, and I didn't even understand what a globe had to do with questions.

---

Which items are most useful to you in the Left Navigation?

I mostly only use the "Questions" item. I use it to look at new or active questions, and that's only on meta sites like MSO and MSE where the new questions listing is actually meaningful to me in any way. Looking at new questions on a giant like SO without a custom filter is just totally useless to me, except to show me garbage that I might want to downvote. I'd use the site logo in the banner except that that page doesn't have a listing for new questions. Apparently lots of read-only users also don't know there is a homepage- exhibit A, exhibit B.

I sometimes use "Users" (usually just to get a link to their profile if I'm writing a meta post and have reason to want to link to it), and "Tags" (when I want to search for tags to potentially use).

If "Saves" gets added, I'll definitely use that too. I use saves to keep track of various moderation / curation tasks I still want to do, but have run out of daily quota for.

Are there any items missing that you would be interested in seeing here?

You mentioned that you heard us about meta, chat, and the Help Center. And yes, it would be great to give them more visibility, I'm just not sure about the best way to do it. I think it would also be weird to have multiple ways to get there with both the sidebar and top bar. I'm personally not against having meta, chat, and the Help Center go in the sidebar, but the questions I have are whether that leaves enough space for everything else there, and what to do with the things that remain in the top bar, such as links to the tour, About Us, the log out button, "Your Communities", etc.

If you could prioritize one improvement to the Left Navigation, what would it be and why?

Depends on whose definition of "improvement". I don't ever navigate to collectives or SOfT-related things from the sidebar, so to me, having anything to do with those would just be noise. I'd personally rather see them gone in my UI, but I recognize that the site does not revolve around me, so consider me mostly silent on this question.

In my personal day-to-day, what I look at the most that isn't in the sidebar or top bar is my custom tag filters, and the New Answers to Old Questions mod tools.

Answer 7

Button alignment in dropdown version of the menu is asymmetric, lacking left margin altogether.

Meta Stack Exchange

Stack Overflow

Answer 8

Good to see some movement and improvements on the way!

I do have a slightly exasperated issue with the section that is headed: 'What we've heard'. I quote below but I have added italics for emphasis:

We’re hoping to make updates iteratively when the timing works with other priorities. Some future changes may include larger information architecture work and exploring some previous requests from the community such as:

Followed by a small list of referenced needs that have been expressed by members of the Community.

I think the time has come in this post strike time for the needs expressed calmly and rationally by senior members of the SE community to get a little more focus and attention than may include?

But again good to see some well needed improvements on the way...