Our Design Vision for Stack Overflow and the Stack Exchange network

Question

For those who don’t know me, I’m the Director of Design at Stack Overflow. I’m responsible for the team of designers who work on the public sites.

The visuals of Stack Overflow and the network sites have remained largely unchanged since I joined Stack Exchange, Inc. in 2017. The aging design has become frustrating for me, for our designers, and for our audience. We all deeply care about the sites and want the visual aesthetics to reflect that, in addition to making the site(s) feel welcoming and less intimidating.

What is a design vision and why do you need one?

A design vision is intended to provide top level inspiration and guidance for the design team. It helps designers create a unified experience when working on different projects. With new features coming down the pipeline for both our community and Teams products, it is imperative for us to align on a visual direction. We can build new components in our existing design language, but we’d like to use this unique opportunity to evolve.

The design vision is not something that is written in stone and being shipped as is. This means that each designer will be able to work within their unique problem—taking research, user/community feedback, and other constraints into account.

Show us this vision, please

As you can see, there are inconsistencies, things we haven’t touched yet, and items pushed very far visually just for the sake of exploration. There is a lot that is different here: top navigation, sidebar widgets, post summary, and more—but the only things that are finalized right now are our colors and the items we’ve already shipped (like buttons). Nothing else is set. It is simply meant to portray a visual identity described by the team as simple, modern, efficient, and scalable.

How will you bring the design vision to life?

We are working on many things right now and simply don’t have the capacity to go heads down into a redesign. You’ll see designers build new features in this style (e.g., Search) and you’ll also see designers pick up “components” (e.g., buttons). In short, things will be shipped iteratively and may feel disjointed from time to time. No matter how they ingest this design vision, we will be bringing major ideas to you with time to provide feedback, and we commit to reviewing that feedback carefully. If we believe a change is very minor and will not impact your workflow, we may make the change and discuss only if an issue arises. For instance, we may not bring every change that adjusts a border by 1px to the community in advance, but if we add a new section to the page, we’d bring that in advance.

So what’s next?

We have three designers eager to discuss specific components with you that they want to work on. They have now made individual meta posts regarding the left side navigation, user cards, and the post summary display. I want to reiterate that development has not started on these components. We are bringing you our thoughts early in hopes of gathering useful feedback based on your time spent on the sites that can influence the design.

I look forward to hearing from you all and building on, improving, and implementing our vision for Stack Overflow and the Stack Exchange network.

Answer 1

I know that the images which you shared is not the final version, but I wanna know... what's gonna happen to the footer?

Is it gonna be removed or redesigned?

Answer 2

Is it possible to have some sort of "theme selection" that the user can choose? I think a major issue is that for any new design that is shipped/implemented, there will inevitably be people who liked/were more comfortable with the older design, compared to the new design. In other words, every new design will inevitably lead to some happy users becoming less happy users. (Of course, it's possible that the opposite can also happen; maybe the new design will make some users even happier. However, it's just not a good look, and will lead to major fusses, to make previously happy users unhappy.)

Proposal: there could be some "theme selection" somewhere in Settings, containing (at least) all "looks" that the SE site had through history, that allows a user to go through and click the one they are happiest with.

For example, Reddit went through a design change, but you can still use the "old style" by appending "old." in front of the URL. That way, users who are "stuck in their ways" so to speak have the option to see the aesthetic that they like, while the site can move on ahead and change with the times.

---

In some sense this is quite clumsy, since it's possible a user could like one aspect of one design, and another aspect of another. But I imagine that making a theme selection page with that level of flexibility is quite hard. I do think however that even this clumsy theme selection page, containing the historical themes, will allow users already content with the way the site looks to remain happy and not inevitably complain about every design change.

---

P.S.: this also aligns with another common point people raise, namely asking for a dark mode. This "theme selection" page can host historical themes, as well as new themes like the requested dark mode.

Answer 3

Please do not show excerpts in the questions list

When I browse the Top Questions page (i.e. the front page when logged in), most questions in the list are uninteresting to me based on the title and tags alone. The same is even more true of the All Questions page: for most questions in that list, I do not need to read an excerpt to know that I am not interested in that question.

So what the excerpts are really doing is slowing me down as I hunt for questions whose titles do look interesting. If I can scroll through 50 titles easily then I might find 5 worth clicking on. If it takes me the same amount of scrolling to see 10 question titles then I will only find one interesting question. If I also have to click to navigate to the next page in order to see more than just 5 questions, I will lose interest very quickly.

Answer 4

Are the symbols used on the UI part of the design vision?

---

Below is included to help clear up the above question; it not propose changing features and user interface elements as those requests should be posted as a question using feature-request.

Let's take the symbols used to show that the OP has chosen or not an answer as the "accepted answer". The symbols used are tick marks, gray and green.

• The gray tick mark is only shown to the question creator.
• The green tick mark is shown only when the question creator has accepted an answer.

The following image shows an answer with the green tick mark:

^{Source: Crooped image taken from one of the images included in the question}

Only some users understand the meaning of this symbol in the public Q&A platform, as is commonly found in comments and posts referencing the "correct answer" instead of the "accepted answer". Sometimes there is no "semantic" / "pragmatic" difference, but other times the author thinks the answer with the green thick mark is correct when it isn't.

---

It will be nice if the Design Vision leans toward something closer to a "universal" approach. Remember that the audience is global despite using English on almost all sites. There are sites in Japanese, Portuguese, Russian and Spanish.

One source of inspiration might be PlayStation. While it's a product developed by a Japanese company, they use simple geometric shapes, a triangle, a circle, a square, and a cross mark, instead of ASCII characters, A, B, X, and Y, as Xbox One does.

^{source: https://www.mirror.co.uk/news/technology-science/technology/xbox-one-vs-playstation-4-2843214}

---

As mentioned in comments to this answer, the tick mark meaning varies. In some countries tick marks are used to mark incorrect answers and errors, but in others, it's used to mark correct answers / approved elements.

One of the contexts where the tick marks are used to signal that a specific element was approved is a quality assurance review in the manufacturing and assembling industry. I have used tick marks this way when reviewing assembled electrical harnesses in a manufacturing plant when comparing the sample against the product specification drawing. All the elements in the physical part should be marked in the drawing with a tick mark; the missing elements were circled, and the elements present in the physical part having problems were marked with an X.

---

Would the new design vision concerns include "semantics" / "pragmatics" of the design elements like the accepted answer indicator?

I'm sorry for not using designer terminology correctly; I don't have experience with "design vision" and haven't used ChatGPT or similar GenAI tools to write this, only Grammarly.

Answer 5

It looks like we might be in for another extremely disappointing spate of design changes...

Since there are already a lot of answers and quite a lot of text, let me stick to some key messages and principles.

1. Be more humble: Your design should be a public service, not a visionary experiment.

2. Start by reverting/fixing onerous and injurious previous design element changes

   Some examples:

   • Question list page lost its columns making it harder to read through
   • The increase of line spacing to 1.5x justified by a false claim of a usability requirement.
   • The introduction of an unnecessary left sidebar - it can be removed, but the default should change.

   All of these were rejected by the users - some staunchly rejected - and still they persist.

3. Don't redesign without mass public demand. Just say no to that nasty urge.

4. In (website) design, Newer != Better and also Fashionable != Better.

Finally, remember the first ethical rule for doctors: Primum non nocere.