Stack Overflow Redesign: Color and Typography

Blue: (Major Change) No longer used for links or buttons. It's now for informational UI (like notices) and is the new system color for "silver" badges.

So... what is used for links and buttons now, then?

You, uh... you are going to be using a colour for links and buttons, right?

Blue: (Major Change) No longer used for links or buttons.

Blue is the standard colour of links on websites. Suppose my browser completely ignores what colour you think links should be, and instead respects my preferences:

Will this cause contrast problems? What about dark mode: is that handled sensibly? Will I be able to override the appearance of the buttons, so they look like the buttons in every other program on my computer? If I override the font (e.g. text size), will the design continue to break?

I could list dozens of other accessibility needs. These should be front and centre for any redesign effort, but historically, Stack Exchange's redesigns have consistently made these things worse. This is because you can't address these problems by "getting the design right": no one design can address everybody's access needs! Any attempt to do so will fail. You need to follow a different philosophy than the philosophy that Stack Exchange has followed in the past, not just try to do the same thing better.

The colour scheme you've described sounds quite pleasant, as an OS theme. But your website is one of many thousands I will use, in one of dozens of programs, each with their own unique design systems: that gets horribly confusing, especially when they all change every few years. I can't go a week without one of my tools changing on me, requiring me to re-learn everything. Have you taken this into account? What is your proposed solution?

In the late 80s, 90s and early 00s, computer companies would actually research usability. Nowadays, people seem to make decisions based on theories that are often quite detached from reality, and have never seen empirical user testing in realistic environments. Have you researched the design principles you are using?

However, to improve readability on modern, high-resolution displays, we are increasing almost all of our type sizes by 1px.

The goal is noble, but the reasoning is wrong.

• The text size on my computer is set up so I can read it. If you leave everything on default settings, I will be able to read it. You're making a website, not a poster: your job is to be declarative, not prescriptive.
• What's readable for you, and what's readable for me, are very different. Overriding my settings does not help me: I will simply have to override them back. If your design language cannot handle that (for example, if text-related things are sized directly based on CSS variables, rather than rem configured by CSS variables), I will then have to manually fix the issues that overriding the text size causes. Those I cannot fix, I will have to just put up with. (Personally, I'm not good at the fixing or the putting up: when Wikipedia made some problematic changes a while back – now reverted, fortunately – I just stopped using Wikipedia.)
• If you want to make changes specific for high-resolution displays anyway (which you shouldn't), you should use the resolution media query, which is intended for that purpose. Otherwise, the adjustments you make for your high-DPI environment will make the text size unusably-large on my small, low-resolution display! (And if this doesn't work for you, then your screens are misconfigured, and you should fix that: Stack Exchange can't be the only website you're struggling with.)

This is SO-centric - We've got a considerable backlog on smaller Stack Exchange sites. How would these changes affect sites with existing designs (such as Super User), sites with unique designs (like Anime or Worldbuilding), or smaller sites with no unique design yet (like Pets)?

Relevant to colours: it is important for me to have easily distinguishable visited and unvisited links as titles. This was not the case for quite a while until relatively recently. At least it was updated for the high contrast dark theme on Stack Overflow.

However, here on MSE (and some other sites) the contrast between the two is still exceptionally poor:

The two are very similar but you can make them out if you stop and look at each title.

However, just go to any question list and scroll down. Fast enough to just be able to see keywords in the titles but not stop and read each detail. Then it is almost impossible to notice which you have seen or not. And going through lists and lists of questions is something that happens a lot. Knowing which ones I have already looked at helps me a lot.

I do use a userstyle to fix this and make the titles and links distinguishable. It would be better if I did not need to.

Better Spacing: We’ve also adjusted the default line height and spacing to complement the larger text, making longer posts less dense and easier to follow.

This doesn’t look like “better” spacing to me.

The questions page images certainly look like they have much too much space, not only between the lines of text but surrounding everything: headers/titles, posts, tags, etc.

Extra spacing might look nice for display purposes, but it’s not functional. Too much spacing gives the eye more travel distance, it makes posts longer and requires more scrolling, items that should semantically be grouped appear to be deliberately separated.

In particular, the double line spacing for the left navigation makes that column particularly hard to read — at any zoom setting.
The questions page, but even more so the individual question page and the profile page (from the related questions) feel empty because so much space is wasted.

Are dark mode and the high contrast modes going to be considered?

I've read the redesign threads over the past few years and participated in many of them.

One argument that's common but a fallacy in my opinion is that the site should have less color. The maquette you're showing takes away many of the colored elements and seems to tend towards chromatic minimalism but, let me stress this: you're taking away eye candy that's made the dark theme very appealing! If the SO dark/light theme becomes more bland less users will enjoy it, imo, less.

I think a key historical post that defines the limit of color use in the theme is New post summary designs on site home pages and greatest hits now; everywhere else eventually by Ben Kelly and the design team back then - to this day I am a fan of their work. I am convinced -having followed events carefully at that time- that the post's score and the reactions were to a significant degree overdetermined by the historical context that might not be apparent in hindsight if you weren't around as events unfolded (with many of the said events, being site changes that weren't design related).

The particular historical context (as I see it) was of a major site redesign that saw many launches over months that were riddled with bugs, for example the 241 answers under New responsive Activity page was just one of them. So at one point the community became saturated with the constant changes and I saw several users who are consistently soft-spoken criticizing the design team harshly over minutiae. (You have to appreciate, as an SE designer, that if you try the userbase's patience often enough in a short amount of time, eventually you will trigger users on a bad day where design criticism becomes the motif of their personal catharsis that day, and the worst that can happen is a crowd frenzy of reputation fueled criticism.)

So, in short, in this case: less color really is less. And that's the problem: it just feels like... less.

It's not particularly visible or obvious in the screenshot provided but the use of magenta for new indicators (new inbox notifications, review queue items, etc) is not something I'm a fan of but I didn't notice it until a post was shared on the Moderator Team that has more of the alerts visible than in this post.

I was asked to cite my concerns here instead but I can't share the image that drew the color change to my attention and feel like the only image available here is not sufficient to make it understood why the magenta is a poor color choice for this purpose.

Please, if you really want input on a design, ensure we can fully recognize the breadth of the changes. A single tiny dot in the corner of a gigantic screenshot isn't enough of a signal to us of what you mean when you say:

Pink: (New) A new color used sparingly to show temporary, ongoing activity that requires attention, like notifications or a "live" status.

But if I get a dozen inbox notifications, when I open my inbox, there's a dozen pink envelopes, even though the icon change from the unopened letter to opened is more than sufficient to indicate the status. That's not "sparingly".

You say text size is larger but the left nav text seems much smaller and harder to read than the current left nav text.

I don't feel enough separation between the question title and the body, leaving me confused about how a question list without summaries will look. You say...

We’ve heard feedback that the sheer number of blue links on a page can be overwhelming, making it harder to actually read a question or answer. By reducing this amount of colors on the page, we can create a calmer, more focused reading experience.

Even if that's true for a question page (which is the only place you can read a question or answer), why would you remove the link color from everywhere on the site for every user? There are many options that address this without requiring this drastic change:

• If the HNQ list is a big blob of blue links, change their color - it's obvious they're links in the same way the Featured Posts box is all links but doesn't have any link color.
• If usernames being blue (which is limited to comment sections) is a problem, at least give them text decoration - you've removed the blue and failed to add in the underlining to indicate text is a link.
• Many browsers have "reader" views that clean up the UI to optimize for reading. Use something like this to allow users to focus on question pages.
• Give users a setting similar to dark mode that removes link color in posts.

When question titles lose their color, this leaves the entire page just a bunch of white with black text and only the occasional tiny avatar giving it any color at all. There's nothing drawing my attention to anything, so I'm left feeling like there's nothing to actually look at - except probably ads, to be honest. The biggest block of color in the screenshot is the ad.

I'm not saying that to make it sound like SO is just interested in ads - truly I'm not... but the less you make the actual platform grab your attention, the more the ads will. I just don't understand why so little color is being used.

• You're removing link colors - (see above)
• The accepted status of a question is significantly smaller, shoved to the far right (putting it closer to ads), and a more prickly lime green rather than the inviting grass green.
• Avatars are given more priority but they're actually usually not as colorful as the ones in the design.
• Tags haven't had color recently on SO, so it's not a change there but they do on many sites, so this seems to further de-color the sites.

I guess I just don't see what the point of making a big deal about color is when you don't use it anywhere. I point out the confusion about how you're saying you're using pink "sparingly" but... I mean... look at the design you have... that pink dot is practically the only system color on the entire page.

How will it look if I hit CMD-+ 3 or 4 times (to zoom in)? I have to do that in order to be able to comfortably read just about any website, so the screenshot you posted is likely not much like what I'd actually see.

I'm quite happy with the way the current sites handle it, with the left-hand sidebar disappearing entirely and becoming a hamburger menu in the top left, which stays out of the way unless I need it. I hope the redesigned sites will continue to behave this way.

I think the scores should be on the left as in the current layout, they should be also more emphasised. The design should be fluid, always filling the page width in an optimal, or good looking form. In such a design, this large, ugly empty space would not exist.

This isn't covered here, but currently, the sites use specific default fonts on the system - webfonts are a thing, and some choices the company has made else where (like using source sans as a corporate font) have been pretty good.

Could embedding fonts into the page, and having the sites use uniform fonts across platforms be considered?