How Stack Overflow Redesigned the Top Navigation

by Kurtis Beavers

on

You may have noticed that we’re sporting a new look today.

We launched this update today as part of a series of changes supporting our core mission: Make developers’ lives better. In the past year, we fully integrated our by-developers, for-developers Jobs product. We added a whole new content type — Documentation — to help you find even more solutions to your programming questions. And we added Developer Story to help developers ditch the outdated resume format.

During this time, we also evolved our product development process to include more user research, allowing us to validate ideas earlier and surface more users’ voices. There’s a ton you can learn by watching people try to use a feature — things that don’t get uncovered when directly soliciting feedback. As both product and process expanded, it quickly became apparent that Stack Overflow had outgrown some of our previous design decisions.

A Common Theme

A pattern surfaced when talking to users: even with the addition of Jobs and Documentation to the navigation, many developers weren’t aware of the change. Digging deeper, we discovered that many weren’t really seeing the top bar at all – a “mental block” so effective that most users also couldn’t identify what the icons meant.

Here’s what a few of you said:

“When I come here I’m on a mission; I don’t care about the rest.”

“You’re only there for 1 reason: to find the answer to your question.”

“From my point of view, nothing above the question title exists.”

“I scroll down and read the question.”

The data validated our hypothesis — of the average 9.3 million daily visits to Stack Overflow, we get fewer than 88,000 clicks to the navigation or top bar (this includes inbox, rep, profile, and search.) If you divided each individual click per visit, that’s fewer than 1% of visits navigating anywhere (and far fewer if you counted multiple clicks per visit). Our navigation is not being used by 99% of our users.

The common use case for millions of daily visitors is “come from Google, scroll to middle of the page to a find an answer (without seeing the nav and sometimes evening ignore the question itself), and leave. This workflow makes sense — and we love helping the world’s developers gain programming knowledge quickly — but this also means many visitors don’t benefit from everything that Stack Overflow has to offer. If they’re not aware, then we’re less effective in helping more developers share their knowledge by finding questions to answer, advance their career search, utilize Documentation, or become contributing members of our community.

We hypothesized that a lack of engagement with the nav was due to a combination of browsing habits, visual hierarchy, and the right-hand position of the layout. Based on research about F-shaped reading patterns and how readers’ eyes commonly move down the page, it made sense that our navigation was sub-optimal for most people.

We also hypothesized that the focal point of the page (the logo) caused many users to skip over the small top bar. Plus the nav and top bar quickly scroll out of view when moving down the page.

The product design team then did a design sprint. Each designer created their own design of the top nav and then converged to critique and identify the strongest ideas. The team then combined the best parts of their ideas into one design. The main thinking generated from the sprint:

  • Remove clutter and group similar information in a way that’s more quickly parsable
  • Stick the navigation to the top of the page so that users who are scrolling quickly to answers or arriving from answer or comment links still have access to search or navigate the site
  • Use navigation design patterns more commonly found in contemporary web apps
  • Design the navigation as shorthand for the Stack Overflow brand

Stack Overflow users compared the new screens against the current navigation in focus groups at three tech companies. Here’s a sampling of what we heard about the current version of the top bar:

“I’m not even sure if the black bar is new.”

“I logically filter out the stuff that I know I’m not looking for.”

“Nav looks like tags — they might filter, but they don’t look like navigation. Makes you question what it is so I don’t click it and instead go back to Google that I’m familiar with.”

“I’m signed in and I still don’t know what those (inbox, achievements) mean.”

“Jumbled stuff at the top that you have to read and decipher.”

“Black bar is kinda… doesn’t look like it belongs, all else is white, grey, orange.”

And the new version:

“On the current nav I didn’t know what the inbox / rep icons were, on the new one I know what every button will do.”

“I know I can search, I know I can go to Jobs.”

“Much more modern, this one.”

“I like the old black bar, but I like that I know what I’m getting myself into on the new one.”

“A lot less noise, more signal.”

“Cleaner, more organized. Instead of jumbled stuff at top you have to read and decipher you can go to this.”

“More standardized position that you’re used to on other sites.”

Project Definition

At this point there was enough info to make the top navigation redesign an actual project. The nav is an area of the site that touches so many different use cases, user types, and metrics; it was important to tightly scope the project and clearly define the goals in advance in order to ship quickly. To mitigate scope creep, feature parity to the current navigation was the defined scope (with a few exceptions).

Primary goals

  • Present all the tools we provide for developers in a way that’s consistent with them actually discovering them
  • Increase traffic to Jobs and Documentation
  • More intuitive, updated visual design
  • Increase the number of users who sign up and gain access to more site features

Secondary goals

  • Increase in notifications acknowledged
  • Increase or no decline in searches
  • No decline in questions asked
  • And a handful of other important and boring metrics that we simply didn’t want to screw up

The progressive rollout plan to measure success had the following objectives:

  • Usability tests on clickable prototype with 6 additional users to catch any major UX and functionality issues and gather qualitative insights about the new design
  • A/B test with 5% of anonymous users to measure usage data
  • A/B test with 10% of registered users with less than 500 reputation to measure usage data
  • Opt-in for all Stack Overflow employees
  • Opt-in for all users for Meta feedback and for debugging

Our findings from each…

Usability Tests

These tests were conducted in 1-1 recorded hangouts with 6 users who ranged from having low to high reputation.

While a few participants struggled with identifying two of the icons (which were updated mid-testing), all participants successfully completed all tasks, and all participants prefered the new design over the current.

“Looks really, really good. By far I like the new one — in the current one, you don’t notice the navigation at all, only the top bar. The (sub) tabs catch my eye before the current navigation.”

“In the old, it is weird to me that the two bars exist separately. This one feels more natural.”

“The new one is cleaner. Less wasted space. Things are more compact on the new one and account info is better grouped. Tabs across the top is preferable because a lot of sites have a similar flow. …much prefer the new one.”

A/B Test with 5% of Anonymous Visitors

This test ran from 2016-12-01 to 2017-01-19 for about 2 million users in each A/B group. Anonymous visitors account for about 97% of all page views but only 61% of the current navigation clicks.

  • Signups increased by 7%
  • Clicks to Questions increased by 163%
  • Clicks to Jobs increased by 160% (an expected 16% increase in overall Jobs traffic)
  • Clicks to Documentation increased by 229%
  • Clicks to Tags increased by 113%
  • Clicks to Users increased by 178%
  • Clicks to Ask Question increased by 33%
  • Searches decreased by 13%*

*Adjustments to the design between the anonymous test and the registered user test were made that resolved this issue and actually improved the number of searches in the next test.

While some dropoff often happens after launch due to novelty effect, these increases were large enough to make us think that a good portion of the increases would be sustained after launch. Regardless, we’ll continue to measure and monitor the performance of the new top nav.

A/B Test with 10% of Registered Users with Less than 500 Rep

This test ran from 2017-01-18 to 2017-01-30 for about 100k users in each A/B group . Registered user account for about 3% of all page views but about 44% of the current top navigation clicks.

  • Inboxes shown increased by 45%
  • Achievements shown increased by 11%
  • Clicks to Questions increased by 51%
  • Clicks to Jobs increased by 99% (an expected 15% increase in overall Jobs traffic)
  • Clicks to Documentation increased by 113%
  • Clicks to Tags increased by 32%
  • Clicks to Users increased by 82%
  • Clicks to Ask Question remained the same
  • Searches increased by 8%

Opt-in for Stack Overflow Employees

This phase began Tuesday, February 1. About 100 Stack Overflow employees opted in to test the new top nav.

Opt-in for All Users

This phase began 2017-02-07 to 2017-02-14. Around 1600 users opted in.

Feedback from the Meta community has been extremely helpful. Thank you to everyone who participated! A number of bugs were fixed during this period, some feature requests were implemented and others considered or planned. For a more complete list of updates, see Des’s most recent post.

Next Steps

There’s a running list of ideas we’d like to try in the near future. We plan on iterating upon the design and functionality of our new top nav in a series of A/B tests. There are also early-phase explorations into how this might roll out to international and other Stack Exchange community sites.

The design team is working on a cohesive design language in order to create consistent experiences across all our product areas. Some of these changes have already rolled out, and more are coming in the near future. Special thanks to Paweł Ludwiczak’s and Oded Coster’s hard work designing and implementing the new top navigation.

As always, we appreciate your feedback. If you have a bug or feature request — post it on Meta.

  • RobB

    i am sure this will grow on me, the colours mix well and it seems to flow nicely, not had a notification yet so i am hoping it will stand out nicely.

  • I liked the new top navigation.

    I would suggest to include the complete logo of stackoverflow (including stackoverflow text), because new users will see and remember the logo. People seldom notice the address bar, but if the logo is complete it will get registered in their mind. Just a thought.

    • Kurtis Beavers

      The full logo is present for anonymous users, but condenses when logged in.

      • I’d still rather see the full logo than the 4 links beside it, those 4 links are mostly useless. Questions is redundant (if you want newest, there’s a tab for that when you click the logo) The Documentation landing page is awful (and documentation in general is an unsearchable underregulated mess, we dont need more people that don’t understand it going there…) Users… not sure why someone would go there, and Tags i can see being useful… sometimes? maybe? The logo is what i click the most because it gives me the list of questions i’m looking for.

        Otherwise, I do like the new nav, once sticky is disabled.

      • That’s great, just noticed after logout.

      • Ashhar Hasan

        Wow, that’s a really good idea. It’s amazing learning about the amount of work / attention to detail and use-cases that are done by the design teams. Thanks for the welcome improvements.

  • Stephan de Vries

    Looks really fresh, I like it. Nice contrast, color usage and layout. I am not so sure about the icons in the top right though. I still had to scroll over some of them to understand where they exactly lead. I guess that will stay hard to improve upon though.

    Well done.

  • Adam


    The common use case for millions of daily visitors is “come from
    Google, scroll to middle of the page to a find an answer (without seeing
    the nav and sometimes evening ignore the question itself), and leave.
    This workflow makes sense — and we love helping the world’s developers
    gain programming knowledge quickly — but this also means many visitors
    don’t benefit from everything that Stack Overflow has to offer. If
    they’re not aware, then we’re less effective in helping more developers
    share their knowledge by finding questions to answer, advance their
    career search, utilize Documentation, or become contributing members of
    our community.

    So in other words, this is an exercise in grabbing readers’ attention. Marketing. Your navbar is deliberately annoying: it’s designed to get in the way, diverting people’s attention when they have a job to do.

    I’ve had block it until the next spin of the UX Fashionable Ideas Merry-Go-Round. Hopefully the next one your designers come up with doesn’t steal screen space. Now I won’t be able use your company’s other products at all, even if I wanted to.

    By the way, do your statistics on improved attention-grabbing include the case where your users remember the old bar, and are irritated by the unannounced change to their workflow?

    • Kurtis Beavers

      There’s an option to disable the sticky navigation if you prefer.

      • Tao Klerks

        This is nice, and partially addresses the concern raised, but it would be particularly user-friendly if it used an in-context option (like a “Pin”), because:

        1. If you hadn’t provided this answer, I would never have looked for a “Preferences” section hidden under my profile and two further links/sections, and would have been left with an impression of a “meh, never mind the users, they have enough screen space, we’re a business and we need more eyeballs on our profitable features” attitude – as Adam seemingly was.

        2. Even *with* your answer, I had a pretty hard time finding the option in question – “Fixed navigation” is not how I would have described the annoying floating bar that wants to pull me to places that Google doesn’t take me (because they don’t match my goals/intent). It also doesn’t match how *you* described it right here!

        It’s your site, your business, your prerogative – but StackOverflow now looks that little bit more like Quora, which (in my opinion) is not a good thing.

        • Adarsh Konchady

          Agreed!!! Most users wouldn’t know there is an option to disable the navigation stickyness.

      • That is <Profile page>, “Edit Profile & Settings” → “Site settings”, “Preferences” → “Navigation”, “Disable stickyness”.

        “Disable stickyness” = it scrolls off the top of the screen (it does not disappear)

    • Tyler Hibbard

      There’s more usable screen space now than with the old version. Bit hypocritical of a viewpoint, tbh.

  • If you liked the old design more, here’s my CSS to make the bar thinner, disable the search animation and rearrange some buttons, amongst other things. A sort of pro-bar if you will, moving the inbox and such to the top left for easier access.

    A better top nav bar for Stack Overflow

    It’s closer to the original design, but wasn’t created solely for that purpose. It keeps most of the new design elements.

  • Drake

    I really like the new top bar design and thanks for the insights sharing.

  • Kobi

    I’m surprised “Increase traffic to Documentation” is a primary goal.
    Wouldn’t you prefer people arriving to a documentation page directly
    from Google, as a search result?
    Besides, the landing page of
    Documentation is not very inviting – nothing particularly interesting
    (just a list of popular tags, no code), and nothing relating to the
    question you came from.

    • Kurtis Beavers

      Plans are in the works to make updates here in the near future.

  • George

    Can you elaborate a bit on some of the statistics provided? Was the goal to increase clicks to “Users” and “Tags”? If so, for what purpose?

    Can you also elaborate on how this fits in with other initiatives, such as the quality project the Tim Post in involved in? I ask this question because of these stats:

    “Clicks to Ask Question increased by 33%” for anonymous users. This seems to be directly contrary to improving quality. However, you do mention that you fixed the search between the anonymous testing and regular using testing. That doesn’t seem to have helped much when clicks to “Ask Question” remain the same even though the number of searches increased by 8%.

    • Tim Post

      That’s a really good question for meta SO if you care to post it? There’s other testing we completed when looking at overhauling the ask question page, which ties into this. The size of the funnel isn’t as much of an issue, it’s what we do *after* people click that button that really stands to make a sustainable difference. A hint: Most people *do* search prior to asking (some through Google, some using our own search, some both). In most cases, they just had no idea what they should have been searching for in the first place.

  • Why is it only on Stack Overflow? Why not also on other Stack Exchange sites?

    • Aries

      Quack!

      • Kurtis Beavers

        There’s a plan to roll out at least part of the update eventually on other Stack Exchange sites. The reason the changes weren’t made in tandem is that there are just so many custom header designs on all of the sites.

  • Ashhar Hasan

    I really like the new nav bar. Also, the “logarithmic” checkbox in one of your analytics screenshots make me feel good. Someone knows statistics and visual information.

    • Kurtis Beavers

      I considered checking logarithmic before posting the screenshot, but thought it might at a glance look like our conversion rates for the events were greater than they actual are.

  • My first impression is very positive. I disagree with the opinion that it’s “deliberately annoying.” I think it’s the opposite. Much more subtle than the big black bar.

    My only negative response to the new bar is that the gray text in the search bar is a bit too light. My 53-year-old eyes would like to see a little more contrast there. (But at least it’s not gray-on-gray. Thanks for that.) Of course it’s entirely possible that it was the same shade of gray in the previous bar. But today I’m paying particular attention.

  • Emanuel Vecchio
    • Indeed. Is it a coincidence that it happened at about the same time?

      • Kurtis Beavers

        This was not planned, but it is possible there are hidden forces of the universe at work here.

      • Josh Stewart

        It’s about middle of first quarter 2017…that probably explains it.

    • Elliott Belardo

      Current state of Stack.

  • Sameh Deabes

    1- I liked the black new nav bar more
    2- the nav bar is not responsive
    3- generally, I feel it is better now

  • pentium10

    Is there a way to remove the numbers from the review icon. It’s too disturbing seeing that always there. https://uploads.disquscdn.com/images/ee4ede1f7ad020ab0e21f51098bc63c0bd21ed5a50faa292c3e00312af34eca6.png

    • Kurtis Beavers

      There’s a plan to make an update to the review section. More details are mentioned in this post: http://meta.stackoverflow.com/questions/343653/top-navigation-update#343779

      • pentium10

        simply we need an option to hide that counter, it is confused with notifications and constantly changes as things get reviewed or not.

      • Tyler Hibbard

        It’d be great to be able to choose which queues populate that number per user, but I understand that designers/engineers don’t want to do that because of the stigma of giving users a choice.

        • That actually has little to do with Stigma and everything to do with performance. We simply can’t calculate those numbers per user, they’re incredibly complex queries. Selecting which queues show up is a finite set of calculations and isn’t *crazy*, but such a preference system to back a single number wouldn’t be simple either.

          I’m certainly not saying I’m happy with how it works – I don’t think the current approach is anywhere near ideal. I’m just generally responsible for making it go fast. Discussions on meta for how it *should* behave are more than welcome. Then we’ll see what we could do to make it work.

    • Tim Post

      IMHO we over-tax people by constantly showing that. No one really complains about it, but it just feels a bit overreaching to be constantly blaring that number to people that have been actively reviewing during their time on the site. Ideas currently float around .. just turning it off for a few hours after you’ve done a certain number of tasks. We wouldn’t take the link away, but we’d stop pestering you by calling on your good nature until the next day. Need to talk about options more, but we’re not comfortable with that either (and one of the reasons why we agreed to provide an unstick option from your profile).

      • pentium10

        just put a simple dot instead of numbers, that tells it’s something there, but not numbers that change frequently, sometimes 507 next 495 next 601 and so on. It’s disturbing.

      • adblock it till it’s changed.

    • Thomas Andrews

      Just do all the reviews. 😉

  • Jackson Sandland

    To be honest, now I always feel like the page is stuck in a loading state. It looks like those thin bars that move across the view as the page loads. It’s also orange, and I can always feel it in the top of the window. I preferred the previous layout. Just two cents from an avid user. Thanks!

    • Tyler Hibbard

      I agree; were that the notion of a colored top-border animated to display ‘loading progress’ never caught on anywhere… The worst culprit in my frequent usage is YouTube.

      • Ajay Ramachandran

        Github has a blue loading bar at the top.

  • asmeurer

    Please make it collapse when you scroll down. It’s too much vertical space.

    UPDATE: I guess there’s a flag for it. https://stackoverflow.com/users/preferences/current#fixedHeader. But why on Earth isn’t this just the default?

    • pentium10

      You have option in Profile -> Site Settings -> Preferences -> Disable stickyness

      • Carl Witthoft

        Flip the default.

        • Tyler Hibbard

          That would defeat the purpose of the effort, which was to make sure users are more aware of the nav bar, and more often.

          • Tao Klerks

            Give users an in-context option to change the behavior (eg “Pin” button), rather than hiding it in such a way that only the trollish freaks like myself find out about it, in this blog-followup context.

  • Aries

    My 2 cents worth..I think the Navigation needs to be made slightly bold, just to give it a little bit more focus, but not distracting the visitor too much from their real goal(to get an answer).

  • Adarsh Konchady

    The top bar shouldn’t be fixed when I scroll down. It distracts me a lot from the question/answer I’m trying to view. Also lesser space on the screen!!!

  • I am reporting a bug: you have tabindex=”1″ on the search field.

    I suspect you want it to be the first item a user tabs to on the page, but you can do that just by putting the search box first in the DOM (in the raw HTML).

    Why this is a problem for keyboard users: after entering a search term, the next interactive element in the tab order is the logo, not the submit button. Remember, not all users hit the Enter key to immediately submit. I do not; that is how I found this issue.

    Why this is a problem for screen reader users: after allowing the screen reader to describe the controls, the search control is not the first item but appears after the navigation items. Once I start tabbing to the control it is not where I expected (the 8th tab stop) and confuses me about where I am on the page. In addition, I cannot tab directly to the submit button (as outlined above).

    An additional bug: The search field has no accessible name.

    I suggest you either add a (which you can visually hide to maintain your design) or add an aria-label attribute. The placeholder is insufficient and, when pre-populated with a searcch term, confusing.

  • dman777

    I like the dark bar better…. the contrast gives a better user experience

  • Flawless work. Thanks SO.

  • There is 0 contrast between the content on the page, and the navigation bar. Horrible choice in my opinion. Pure white is rather bland.

    • Eric Duminil

      To be fair, there might be 3% contrast.

  • einpoklum

    You’re using bogus statistics to push through this poor design. You should have separated the ‘sticking’ of the navbar to the top of the site and the bar design change. Come on, do we need to lecture you on separation of concerns and on isolation of dependent variables?

    I massively dislike the new design. Don’t really mind the stickyness – if it had been the old bar.

    Also, the fact that new design causes registered users to make more inbox clicks and achievement clicks is not necessarily a good thing. I feel the new bar makes me more edgy.

    • Kurtis Beavers

      One of the primary goals of the redesign was to increase awareness of (or traffic to) Jobs and Documentation — the post is transparent about that. I’m not sure I understand how making the old bar sticky would have solved this given that the two are separated in the old design.

      • einpoklum

        It would have made “Jobs” and “Documentation” visible all the time on the old-style bar.

        Also, you can increase awareness and traffic to Jobs and Documentation by covering the whole screen with two large buttons going to one of those two places… but at the expense of other aspects of the experience of using SO.

        • ludwiczakpawel

          That’s very interesting idea, thank you! I will discuss it with team.

          • Ajay Ramachandran

            StackOverflow should be replaced with a page saying “GO TO JOBS NOW”

  • Nature loves change.

  • Carl Witthoft

    Sticky bars are never EVER EVER acceptable. I’ve got few enough vertical pixels as it is. If users are too stupid to hit the Home button now and then, well, YCFS. Please don’t violate fundamental window display rules.

      • Charlie Hayes

        What are the statistics on the number of people that realize there’s a settings screen, and a preferences screen under that, and where that checkbox is?

        • Kurtis Beavers

          Mainly active users who contribute regularly. You can find it by clicking on your avatar then going to “Edit Profile & Settings”.

        • Izkata

          I didn’t know such a page existed, and created a Stylish theme with “header { position: static !important; }”

      • Carl Witthoft

        So I’ve heard. Do you really think it’s sensible to require everyone (computer-savvy or not) to dig into Prefs tabs just to find out what new “features” are controllable? At the very least, make the default the other way around.

  • now, when we’ll be able to select from a set of themes as per our preference? … 🙂

  • The new navbar is great, but please please please do not make it fixed… The first rule of making navbars is they should not be fixed.

  • That orange bar at the top just asks for becoming a “loading” progress-bar

    • Jeremiah Smith

      Agreed. I kept waiting for it to go away when the page loaded.

    • Sebastian Morkisch

      Strange, Why does the site use a progress bar? My browsers have animations (Firefox, Chrome), when waiting for content. So this is just a duplication of already implemented Browser features…

      • Ajay Ramachandran

        If the site just uses Javascript to refresh content faster.

  • 林果皞

    Come on, I like dark theme better.

    • Kurtis Beavers

      I can’t believe no one has commented about the Hot Dog theme.

      • Ajay Ramachandran

        This is so weird. Github changed to a messed up dark theme, and StackOverflow changed to a horrible light fat theme. WHAT IS THIS WORLD COMING TO!

        • ludwiczakpawel

          2017 Design Trends, I believe…

      • Rdster

        You mean the option put out there so everyone can think “Well, at least they didn’t stick us with that ugly bar as a default?”

    • Artem MIkhailov

      then you should check out Github

  • Tyler Hibbard

    What percentage of test users said they did not like the header being black or commented about the color in general, in a way that cast a white nav bar in a better light than a black one?

    • i mean… only a very small percentage commented at all.

      • Tyler Hibbard

        Right, the change from black, high contrast to white, no contrast is a very big one; easily the most noticeable change out of all of the adjustments. I want to know, out of the several million who ultimately tested this, how many (at each stage, ideally) made comments that could be used to argue in favor of a white and/or low contrast nav bar. If it’s a negligible amount, then the design team is on the hook for introducing what ultimately may be a regression without basing it on any solid data. I’m not saying there weren’t any people arguing for this, I just want to see some numbers.

        • Kurtis Beavers

          We did not test a dark version of the nav (yet) — the scope of this project was a total redesign and consolidation of two things — the old topbar (which was dark) and the navigation (which was a series of gray boxes plus the logo on white). The design team decided together that the lighter version was less invasive and distracting from the content (which is really why everyone is here), especially given that it’s sticky. We still wanted users to be able to ignore it if they choose. Also the style matched better as a cohesive whole with other elements of our design, so we tested a lighter theme against the old version. We plan on continuing to test iterations in the future, and don’t really consider anything ‘done’. One thing that is difficult to measure is effectiveness vs. distractiveness, (something we do care about.) Regarding preference of dark vs. light, this seems to be fairly subjective. I’ve seen identical remarks both on this design update and GitHub’s recent update that range from “My eyes are bleeding” to “I love it.” The dark theme subject did not come up in conversations in focus groups or user testing, but began coming up we started sharing with the greater Meta community.

          • neminem

            I know anecdotes aren’t really data, but with this new redesign, every single time I open SO, my eye is now immediately drawn to the top-right corner, because with the current color scheme, the badge display (especially the gold badge) looks exactly like how my brain has been trained to think an urgent message/warning would look. It’s driving me crazy. >.>

          • that_contrast_guy

            Feels like a justification for change just because you feel it should change and grasping at any excuse that supports it.

            Like Microsoft… Office and the Ribbon interface, Windows and the murder of the Start Menu, the tiles-based UX, the violation of the basic usability principle of Nokia and any phone-based UX, Visual Studio 2012+ and the horrid theme & UX contrasts… I could go on

            Speaking for myself, the removal of black and contrast just messes a whole lot of things up. Suddenly, it’s no longer “visible”, “seeing” the content that was always instantly recognisable is now hard, it’s like I am lost and I need to figure things.

            Please give us an option to revert back to a dark bar or the old theme, regardless of what you want to do with it. If we need that something you want to show off, we will find it.

            This literally messed up my day and will most likely leave a mark as Microsoft did when it overhauled things that work, just for the sake of change.

  • Really like the new top navigation, my initial sense is that it’s a leap forward in usability although it does seem to “get in the way” after a while when I’m using the site.

    Was any consideration given for hiding it (or shrinking it to a more compact layout) as the user scrolls down, but then re-displaying (or re-embiggening) it gently if the user scrolls back up more than a couple of lines (a little touch of hysteresis)? (Essentially how the address bar behaves in the Chrome browser on Android)

    While the orange stripe at the very top seems nice for branding (especially once this is rolled out across other sites in the Stack Exchange network), it does sort of look like a progress bar, as others have mentioned.

  • Peter Connolly No Spam

    So the one, single, part of the UI that I used – the top left dropdown to get to the stackexchange sites – has now gone – or moved to a hidden place. Yeah…. great improvement. Not.

    • Megamaiku

      Can’t win em all. Plus, it isn’t hidden, it’s on the opposite side 😛

  • Maxim

    How to change it to black back? or at least to very dark gray?

  • Juraj M.

    You just ruined my day!
    And how you dare to quote `“The new one is cleaner. Less wasted space.` when this one take clearly more space and it even stick on top so that it can take space whenever I scroll!!!

    • Megamaiku

      I do agree with you about the sticky bar. I personally find it intrusive. Why not make it like the google search bar? Just leave the design the way it is, but don’t make it sticky. I didn’t realize how much it bugged me and distracted me from what it is really important….the question.

      • Kurtis Beavers

        There’s an option in user preferences to disable the sticky nav.

        • RN

          Is there an option to just revert to the old design?

          • ludwiczakpawel

            Nope.

    • ludwiczakpawel

      new header is combination of navigation and topbar (that dark bar). that being said, new header is smaller than old nav AND topbar combined. It was about 146px before site content, now it’s less than half of it.

  • Lankymart

    Honestly, if the topbar only received 88,000 unique clicks then that is the user base you should be focusing on, because they obviously have more then one brain cell between them.

  • Megamaiku

    It would be great to have the dark theme as an option for the entire site, where even the body of the page is a dark grey, with white text.

    • pwd

      You can try Stylish plugin…

  • Wei Chieh

    It looks much more simple and good UI design 😀

  • Could you add at the -webkit-box + -moz-box flexbox prefixes as well, for older browsers such a Safari 6 and Android < 4.4. That new top nav is covering the site in such browsers and makes the site unusable in them as a result.

    • Kurtis Beavers

      Even though we don’t support those browsers, this seems reasonable.

  • IllidanS4

    Enough justification, how do I revert the design?

    • Zack Kenyon

      Seriously, it’s like they don’t even understand why their users responded with “You’re only there for 1 reason: to find the answer to your question.”

      • Kurtis Beavers

        We understand it. We’ve also heard a lot of developers like jobs once they were aware it exists, and in the new version we think people are more likely to browse for questions to answer. Sure not everyone’s in the mode to do these things all the time and they can ignore the nav (one of the reasons it’s not dark is so it doesn’t overwhelm the content). But when folks want to, it’s good if they’re at least aware. We’re proud of the idea of helping developers find jobs that they love and want to create a platform for more people contribute their programming knowledge to the greater community.

        • Zack Kenyon

          Do you remember the days of internet old, when toolbars took up as much of a third of the screen?

          Did it, at no point in the design process, occur to your team that what you were doing is just the teensiest bit analogous?

          And no, it’s not page specific. The tools on the so called nav bar are not actually a way for me to interact with the resource that I have requested. It can only serve to redirect me, and since the vast majority of your users have no interest in being redirected, this “update” is no better than a toolbar.

      • animuson

        Have you ever gone to a grocery store with the express purpose of getting one particular item and then walked out without the item? A lot of people have a purpose for going somewhere that’s rather specific, but that doesn’t mean they’re not at all interested in other things you have to offer along the way.

  • RN

    Did the thought enter your mind that people don’t click on the new tabs because they just don’t want to? You can’t get people to click on a crappy idea just by tweaking UI design!

    • Kurtis Beavers

      In the old version, people specifically said, “Oh, I didn’t realize you added anything.” We heard it many times. Once they did see, most were interested.

      • Rdster

        “So this time, we made it where they can’t avoid our changes.”

  • Jiri Klouda

    Of course the navigation to different places will go up with a new look. Everyone is looking for where the stuff is and how it looks. But I could not actually find basic navigation elements for several minutes, clicking on everything to see what it does. The placement is totally non-intuitive for a left-to-right person. I don’t expect the things I start with to be all the way to right. I’ve got to move mouse way more and I’ll probably stop using the site altogether as the new look is just too infuriating and the change useless, no options to customize the look or even option to use the old look for a while to get adjusted. Further many of the elements are now smaller than before, making them harder to use, the contrast is worse as well. The white wall is too much, … simply… good bye.

  • Basile Starynkevitch

    **I am very unhappy with the new interface**. I want to be able to quickly go from stackoverflow to http://programmers.stackexchange.com/ and that is no more easy.

  • Ian Binnie

    When are you going to roll it out to other sites. I am sick and tired of seeing 30% of my screen devoted to a stupid green decoration on http://raspberrypi.stackexchange.com ?

    • The horizontally reversed layout is what chaps me. I like the new design, but I also like consistency.

  • Sebastian Morkisch

    The new “design” eats up my spare vertical space. Well, I have plenty horizontal pixels, but why on planet earth do Webdesigners think that a **fat** navbar supports a better experience? To be honest: Save vertical space! Not everyone has an Apple MacBook UltraXP Plus 3000 HyperHD Nano-Sonic Matrix Display (TM). Please reconsider the fat navbar to make it a small one. Thank you.

    • my eyes are hungry

      Because it worked for Facebook. It all starts and ends with Facebook. They have a hamburger menu, we need that too! It would take a big shift in thinking to get a bunch of sites to start a new paradigm. While I agree with you, screens are getting wider, not taller, I just don’t think it’s gonna happen anytime soon.

    • Pekka Gaiser

      You can turn off the sticky navbar. Pretty sure the net result is a *savings* in vertical space.

  • Jakub Mareda

    Wait… You saw people don’t care about navigation too much, so you made it bigger and sticky? Do you think people will care because you decided to stuck it in their face?

  • Gogol

    Errrr I kinda feel weird with this navigation :S

    Will take time to get used to but kudos to the team.

  • Mister Six

    Devs don’t like change do they?!

    FWIW I think it’s a change that makes sense, although I would probably shrink it right down scroll.

  • Theodore

    The orange line on top looks like a progress bar stuck at 99%. Feels like the page is still ‘loading…’. Other than that, I love the new nav bar and am happy to see something new in the UI.

    • my eyes are hungry

      Oh man, now I can’t unsee it.

  • Łukasz Wiktor

    The fixed header is quite annoying. It takes too much space. Could you make it static?

  • Toby

    Muchos gracias to Paweł and Oded, I know from meta that they have been very interactive with users about the theme changes, which is to be commended, as of course is the work put in to design and implement this.

    I like the new icons with the coloured counters and the changes to the drop-down menus. While the bar feels kind of chunky it does alleviate the cramped feeling felt with the old bar.

    On the other hand I immediately disabled the stickyness as soon as I was able. Most people are aware that there will be some menu towards the top of a webpage, if they want the menu then the home button is one small finger flex away. Having the menu follow me around taking up vertical space is not going to make me more likely to click on it if it’s not what I need/want. If I go into a shop and they don’t have the pizza I want, I leave again, I do not instead see that they have an advert for toilet cleaner that they *do* have in stock and thus buy that in place of the pizza.

    Initially I was not a fan off the loss of contrast in relation to the change from black to near white… but it’s growing on me I guess 🙂

  • EU EG

    If you happen to use some kind of browser plugin that allows you to overwrite styles: http://pastebin.com/VhADqn5p

    This will make it 10px smaller in height, and removes the uber annoying screaming orange line. I can live with it now.

  • Rdster

    Can we all agree that this person…“I’m signed in and I still don’t know what those (inbox, achievements) mean.” is a complete idiot? If you use the site even just a little bit, those 2 are obvious to anyone.

    People couldn’t figure out the standard Search bar with the magnifying glass in it was a Search bar???? I’m curious how only making it larger will suddenly make people understand what its function is? These same buffoons were too timid and afraid to click on a button if they didn’t already know its use…doesn’t sound like developers to me. They sound like lowly end users (the kind that call the help desk after a long weekend because they can’t remember their password.)…and those people won’t change. You can change the UI, they still won’t know what those buttons do unless someone holds their hands while going through it…so I wouldn’t expect to see much change in the usage metrics.

    There should be an option to change the colors at least, the black bar was so much better looking, the contrast made it much easier to see. All you had to do was throw a couple more links up there, not this huge redesign.

    • my eyes are hungry

      I’ve been searching this site for years and never participate. I just lurk, get my answers and leave. So yes, I don’t know what any of that stuff is, nor do I really care. But it doesn’t mean I’m an idiot. We’re just different user types.

      • Augusto Zangrandi

        Yes, I’m just like this. If the answer is not on stack overflow but on X, Y or Z, I don’t care either. I just want to get my answer, fast.

      • Rdster

        If you don’t participate, what’s the point in making an account? If you participate at all, ask a question, provide an answer…those 2 icons become obvious as soon as you have feedback. I find it almost impossible for anyone who is signed in and done pretty much anything on the site as far as participating, doesn’t have any clue what those mean.

        • my eyes are hungry

          I haven’t made an account. There is no wall to using the site, you don’t have to have one.

      • One could argue that “takers” who never offer anything in return fall a bit lower on the priority list for UI feature approval. No offense, but that’s only fair.

        • my eyes are hungry

          I see where you’re coming from here, but don’t pat yourself on the back too much.
          By your logic, I can’t vote in America because I don’t write my senators weekly?
          For all you know I could have a PHD in User Design. None of this is qualified by whether or not I give back.

          • Yeah… but SO isn’t a democracy. 😛 A better analogy might be a potluck supper. You don’t get to complain if you don’t bring anything.

          • my eyes are hungry

            haha, you act like SO has a roundtable discussion and then says “let’s email that Clint guy and ask what he thinks. He’s commented over 20 times, we better not anger him.”

            SO is a business and does whatever the want and benefits them. You honestly have no more voice in it than me, or another million generic IP addresses.

    • Rdster

      I don’t want to be accused of just complaining without providing solutions…

      I merged the two together, only took about 5 minutes. Still maintains the good visual contrast from the black bar (I had to use Code Review to get a grab of the old style, that’s why it’s blue), doesn’t move everything all around just for the hell of it, Ask a Question is prominent and colored to attract attention…and you can still have Users and Tags up there even though I don’t ever use those myself. If I’m looking for a user, I usually just follow the link from their question or answer.

      It’s different but still the same.

      https://uploads.disquscdn.com/images/31e6e32bf445cb30fb64c313e6fcbc4ef769c7932172f8139243f57cbf1b6c5a.jpg

  • Apart from the usability discussion, the major issue for me is that the green reputation+ badge is not as exciting and thrilling as before.

    • Mukesh Yadav

      Very True.

    • Martin Parenteau

      Agree 100%!

  • Manny

    Can I have the old bar back please?

  • Mark Findlater

    I found this an open and interesting read. I’m surprised at some of the negative posts below. The redesign had stated objectives and used a sound method to test them. Statistically the approach was validated through the large uplift in the areas the team sought uplift in.

    Maybe the design didn’t suit you, maybe it doesn’t suit me but you and I are not the anonymous masses being targeted. We probably already know what we want and where to find it as well as what other services SO offers.

    “We plan on iterating upon the design and functionality of our new top nav in a series of A/B tests” sounds great to me.

    Personally I love the new fat grey/orange nav but I can imagine it failing AAA Accessibility on contrast grounds.

    • Wafflecone

      You don’t sound like a real SO user. You are spewing UI designer/Data analytics lingo right and left. Please leave our websites alone! We don’t care about your silly career!

  • Cool! What tool have you used for the A/B testing?

  • Doug R.

    I like the redesign except for one thing. Having the top navigation bar a contrasting color (i.e., black, like it used to be) gives me a visual reference when I do need to go to the nav bar. Now that it’s white, I find myself searching for the bar when I need it.

  • Vadim Ovchinnikov

    Please add a profile option to revert to old design for those who don’t like new design and finds it unusable.

    • Jean-Luc

      Also an option to revert to the old old design. And the old old old design. And every previous design ever. After all we’re paying customers…

    • Izkata

      I added “header { position: static !important; }” with Stylish, that alone makes it far less intrusive and annoying.

      This new header is too tall for something that’s always visible.

      (I’m also considering forcing “display: none” on the Review Queue; the number makes it look like something that pertains to me, like the Rep and Message icons next to it, but it’s not)

  • Girish Oemrawsingh

    Is it possible to change the top navigation’s color?

    • ludwiczakpawel

      No, we don’t have that option.

  • I appreciate you the hard work you have put into this. But when I scroll down I expect the navigation bar to disappear. I want that screen space to be more useful than just show the navigation bar. Maybe I am old school. So what you do with good ole boys like me?

    • Timothy

      You can toggle the sticky navigation bar (for each site) in your profile settings

  • Cracking Cloud

    The review notification is too intrusive. I know why you as a SO owner would like to have it so big and in my face, but as a regular user it’s too intrusive.

    For now I filtered it out with Ublock Origin.

    • Kurtis Beavers

      We agree and are planning on making updates soon to make it less intrusive.

  • Hi Kurtis/ Paweł/ Oded/ someone else on the team, I have three questions related to the search bar:

    * Why do you expand the search input field on focus? Is it to encourage people to write longer queries? (I think it’s a nice feature but I’m interested in your argument(s)

    * Why don’t you offer autocomplete (a.k.a. query suggestions)? I find it very helpful on other services and am curious as to why it’s not something you support, when most aspects of your site(s) seem very feature complete.

    * Why is the ability to search across Stack Exchange given so little significance? I’m aware of stackexchange.com/search, which I’m assuming uses Google Custom Search (CSE), but it’s hard to reach this template, and I can’t find a flow arriving there when starting from the search input field. Personally I have had several questions that span across multiple SE sites, e.g. both SO, Software Recs and Super User. Am I an outlier in this regard?

  • Brad Buhrkuhl

    This is a VERY annoying change as a user and clearly optimized to drive more revenue. This whole “you are the product NOT the customer” thing of the web is really getting annoying.

  • concerned citizen

    Sticky header by default is a horrible idea. What about non-logged in users in untrusted networks? You know there’s no way >90% of your visitors are logged in.

  • Alex Thurston

    I hate the new top bar, I wish it was darker.

  • TunaSushi

    Gotta say I dislike the new look. Everything seems too cramped, and the header bar needs to go away when scrolling down.

    • TunaSushi

      Okay, found that the header bar is configurable. Still annoying that I had to look though.

      • trlkly

        How? I see nothing that indicates some sort of settings button.

        Edit: found it: profile options. But nothing in the bar indicates that there are options in there, so most people won’t be able to find them.

        Plus the only configuration is to make it not sticky. The sticky I like. The size, I don’t. Not sure about the color yet.

        I’d actually like it even smaller, the same size as the “One new comment above” notice for Discus. If you must have it be touch accessible, figure out some heuristic to tell that you’re on a touch enabled device. And then do it the right way, where it goes away when you scroll down, but comes back if you scroll up.

  • I’m so glad I have Stylish installed. How, in all that is holy, does Stackoverflow, a place for coders, manage to botch a redesign in such a way? Not that it’s completely horrible, but it takes up too much space, and has too much whitespace.

  • 7stud

    Whose genius idea was it to implement a search box that when you click on the text in the search box to edit it, the search bar expands to the left, and the text whizzes off to the left requiring you to reclick on the text to edit it? In addition, the overall look of the new changes is terribly bland. I agree with the previous comments that the constant header bar takes up too much space.

    • Sam Hazleton

      Honestly, this is the only feature of the new design that has really bothered me personally so far. If I see a text field, I expect text field behavior when I click there. I’m probably not the only person who often clicks on a text field without having formulated precisely in my mind what I intend to type. I think it is a bit ridiculous that by clicking in the search field I lose everything else in the nav bar, and even after deleting any text I entered, still have to click away from the search bar to get the nav options back.

  • BigDave

    You’re using too much whitespace in general with this redesign. The top takes up too much space and should scroll off when I scroll. I don’t want it in my face at all time. Also, the moving search bar is non-standard and obnoxious.
    At the very least, provide a static and compact option for those of us who hate modern UI design with all it’s big fonts, widgets and white space.

    PS: Disqus really sucks! Please stop using it on your blog!

  • trlkly

    I like the idea, but it is taking up too much space. You can easily reduce the height like 16px and have it still work.To be honest, it looks like the old bar was sufficient in height to handle everything.

    And I agree the search field should not move. That’s only useful if the search field is really small, on really narrow screens. And, in that environment, you should display a search button but no field, and then do what you currently do on a click. It’s much cleaner, and doesn’t have what the person is typing moving.

  • King GeneraL

    I like your navigation, but could you make an option, to make it black in user settings, white make my eyes hurt.

  • Squyb

    It’s funny how you only picked positive commentaries about your new toolbar. Look at the rain of negative ones on meta and tell me they’re irrelevant.

  • Prema van Smuuf

    Question: How Stack Overflow Redesigned the Top Navigation?
    Answer: Hideously.

    • Beauty is in the eye of the beholder.

      • tritium21

        And Prema van Smuuf is the average beholder.

  • MiChAeLoKGB

    Well, it doesn’t look that bad, but its too big/tall and I really miss the old black bar, so I did some small changes to it and published the CSS here:
    https://userstyles.org/styles/139050/stackoverflow-black-header

    Enjoy.

  • SwiftDeveloper

    Please do black one ? white bar is too bad.. TY.

    • iamduncan

      Please don’t. Even just to annoy this guy.

  • Alox

    Could we potentially have a customize option? Where once you have an account you could use the dark theme? This is just preference, the new bar is really nice but dark feels more at home for me, thanks! 🙂

    Also, why can’t I post here with my SO account?…

    • Sam Hazleton

      Totally agree. We are all developers here, we don’t like being restricted without being consulted. I feel like you guys could squelch 80% of the legitimate complaints about the new design by simply giving users the option to opt out of sticky mode, and add a dark theme option, and make them easy to find.

      • Kurtis Beavers

        There is an option to turn off the sticky in your user preference, and you can customize the theme using stylish or another browser plugin.

  • hd84335

    How can we customize the color, i see in the screenshot above that there couple of other colors. Is there any way we can revert to black, or use this dark green instead of white ?

  • PopSoda

    This reminds me a lot of the disastrous UI redesign by some new young UI guys at Chowhound. They too took a “screw the content creators we are catering to the airheads coming from Google!” Lots of arrogant comments coming from their UI team at the older content creators who complained about it – they too used metrics and lingo as if that made it OK. They also made comments about older users aversion to change as well. They came really close to losing their content creators.

    http://www.eastbayexpress.com/WhatTheFork/archives/2015/09/22/chowhound-in-crisis-an-unpopular-redesign-prompts-longtime-users-to-leave-the-food-discussion-website

  • ycomp

    I still have the old design up on one of my open pages, comparing it I see it is far superior.. black is a better color, the top scrolls away to give you more space to read on the page, less clutter – documentation is a good link though

    p.s. it’s a bit silly to have to sign into the comments when you’ve signed into the site already

    • Silly yes. But we ran into the same issue on our own projects when switching commenting systems, discus, livefyre, Facebook etc. The only way to allow for single sign-in w/o losing your own auth/members is to host your own commenting solution/platform – as far as I know.

  • I don’t mind the new look at all, it’s beautiful and clean. however, I hate the search field, I mean the animation, you click on one stop to edit your search enquiry and it animates to the left and you’d have to shift your focus, it is confusing. that’s bad UX right there.

    • hemant19cse

      Even I liked the overall clean design. But hated the Search field design. It is really bad design to shift left side, as it requires complete refocus. If I was the UX designer, I would have personally not done this animation. Even if a bigger search box is needed, it is kind of OK to expand right side without changing the height, and look of search box. If it expands right the user will not need refocus.

  • Frankie

    I felt more comfortable with the old one but as long as SO is doing A/B tests I’m all for it. Just don’t (please don’t) hire a UX team and stop testing like Gmail did a handful of years ago. Great work!

  • I’m not anti, but seriously dislike killing the functionality of finding/going to other SO sites that was a part of the old version. Not only was it incredibly useful, it was informative: I found out/joined many new sites from that functionality. Please bring this functionality back into the fold. These quotes:
    “When I come here I’m on a mission; I don’t care about the rest.”

    “You’re only there for 1 reason: to find the answer to your question.”

    “From my point of view, nothing above the question title exists.”

    “I scroll down and read the question.”

    sound like they come from users you should not be optimizing for. Yeah, they may make up most of your traffic, but they sure sound like they aren’t giving back to the community and are only here to copy/pasta.

    • Kurtis Beavers

      The function wasn’t killed, it was just moved to the far right under the hamburger menu/Stack Exchange logo. We believe this is a better location given that this is an exit to the current site. There’s a plan to update all of the topbars on the other network sites in the near future so that the site switcher is in a consistent location.

  • Lasha Kakhidze

    I don’t like it return back old design!!!

    • Gabe Rogan

      I like your sense of humor

  • Peter Waegemans

    This article reads like a novel to me. Exciting! Would like to know more about your choice of A/B tool.
    A few remarks:

    1. When performing a usability test, DON’T mention which one of the designs is “new” or your desired design. This may have an impact on the results. And do cross-testing, showing another group the new design first.

    2. I like the bigger layout as the old icons weren’t visible enough for me. I find the text labels that explain them to pop up slowly though.

    Gr,
    Peter

    • Kurtis Beavers

      1. In the tests we didn’t mention which was new, but most participants were familiar with Stack Overflow so they immediately recognized the change.

      2. Good point on the tooltips.

      • Abhishek Mandloi

        Can you tell more about the AB testing tool are you using here?

  • Karl

    How much design, research and development time went in to this? 4 person weeks design, research and dev? (multiple of each working together?)

    Want to compare with our teams efforts when

    • Kurtis Beavers

      This is hard to gauge because the project went on in the background while a lot of other things were going on. In the beginning the whole product design team spent a few hours on it (6 designers), but then the research fell on one person over a two months, then implementation was a portion of the work week for another designer and developer over a few more months. All the while other work was going on.

  • iamduncan

    This is an example of a business driven design change ie: force users onto your new jobs and documentation sections. It’s not driven by user’s needs or goals, but yours. You state pretty clearly that you understand why your users come to you, how they come to you and what they do when they’re there.

    “We hypothesized that a lack of engagement with the nav was due to a…”

    Or it might be that people genuinely aren’t interested in that content, and come to SO for answers and nothing more.
    Not saying that what you’ve done is wrong per se, but this isn’t a change to benefit users.
    It’s a change to benefit yourselves.

    • Kurtis Beavers

      I’m not certain that I agree the two are exclusive. I think this is at the intersection of user needs and business goals. We’re not forcing anyone to visit documentation or jobs, but we are making sure they’re aware that they exist in case they could benefit from them. The old design was created before the two areas of the site existed, and was intentionally designed so that it was easily ignored because the contents of the navigation were less important.

    • You typically don’t have users without a business or a business without users.

  • Martin Parenteau

    The more I see the new look, the more I miss the old one. Especially for the colors of the top bar.

    • Martin Parenteau

      Finally installed Stylish, got the StackOverflow “Black Header” template, tweaked it a little bit, and got back to a nice black header.

  • Pavel Biryukov

    How to remove the annoying orange line on top of the page? Feels like some error with account…