We are graduating the updated button styling for vote arrows

Question

Update

This experiment has been graduated. The new styling for vote arrows is now live across the Stack Exchange network.

---

About a year ago, the Product team, focused on improving the general experience, conducted an experiment to update the styling of the voting arrows on Stack Overflow in order to improve accessibility and meet Web Content Accessibility Guidelines (WCAG) compliance. We shared positive results from the experiment: a net 28% increase in overall votes.

At the time, we decided to not move forward for a few reasons:

1. We wanted to take a broader approach to looking at the question page instead of one particular element and decided to roll this into a different initiative.

2. Additional accessibility issues were raised that needed to be re-tested in dark/high contrast modes

We’ve decided to revisit our decision and to graduate the experiment on Stack Overflow and the Stack Exchange network. Before we proceed, we acknowledge there are still a few outstanding accessibility issues and bugs that we need to address first before we graduate.

Here is what the arrows look like before and after the change:

Before	After

Your feedback

We’ve heard your feedback from the previous posts about this change, and are not moving forward until we address them. We are prioritizing issues specific to accessibility compliance and bug reports. This might mean that any drastic visual changes to the styling will not be within the scope of this first iteration, but that does not mean we won’t iterate the design.

Moving forward, we are committed to:

1. Prioritization of bug and accessibility reports to be addressed before we go live such as:

   • Visibility of non-checked button in dark mode
   • Contrast ratio issues in dark mode
   • Visibility of highlight in high contrast dark mode

2. Open communication

   • Any future iterations will be adequately communicated earlier in the process (i.e. designs, experiment plans).

3. Monitoring accidental voting and other relevant data points

   • In the previous post, we saw feedback from users with >1k rep who flagged the risk of accidentally voting when checking the post score. We took a closer look at this report and pulled the following data:
   • Last month (Apr 2023), we saw 175k users who voted 870k times. Of those users, only 8% (14k users) had undone their votes.
   • The number of posts that had votes undone only accounted for 3% of total votes. This is the benchmark we will use moving forward.

We will continue to monitor these numbers to see if there is a noticeable uptick, and then determine if it’s a widespread issue to prioritize.

What's next?

This change is part of a holistic exploration of the voting mechanism and what it means for everyone. Voting is an essential part of the mechanics of the platform that makes this repository of knowledge so successful. It is how we acknowledge the good work of our contributors, and we want to really explore different ways in which we can make this process more streamlined and engaging for everyone.

Year over year, we are seeing 28% fewer votes (upvotes + downvotes) and 21% fewer users voting. During our research, we also found that voting is a pain point for new users as well. In April alone, we saw:

• 72k unique users who attempted to vote 166k times (avg 2.3 votes per user).
• Of those 72k users, 17k users were new users which is 24%
• This means that 1 in 4 new users attempted to vote, but could not due to system limitations.

Because voting is one of the lowest barriers to participation, we felt that this was the best place to start to help users engage more on the platform. In the coming weeks, we have plans to roll out more ideas that we have to iterate on voting and it’s part of the user story of this site to increase engagement, so please stay tuned for those updates.

Answer 1

I don't really see how this is more accessible.

• The new buttons become weird ovals in Zoom Text Only mode. (The old buttons behave correctly.) At 200% zoom:

  Before	After	Correct

• The new buttons become indistinguishable splodges when blurred. (The old buttons fare better.)

  Before	After

• The old buttons only provide feedback via a colour change, but the new buttons are no different. You should be aiming for colour + shape at a minimum. WCAG 2.1 criterion 1.4.1:

  (Level A)

  Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

• Changing things is inherently an accessibility problem. Some people find it much harder to cope with changes than others. (This is a much huger change than anything else you've changed over the past 7 years: make it count.)

  • Why does the layout need to change? It disrupts muscle memory, increases the minimum screen size required to use the site, and ruins perfectly-good clickjacking attacks.

---

The only obvious-to-me improvement is that it's more obvious that voting is possible, for people who:

• have an account;
  • with enough reputation to vote;
• didn't know they could vote;
• are familiar with this design language.

A blue dot upon earning the privilege, as was used in Documentation, might suffice for this; and it wouldn't place "click me!" buttons in front of people trying to do other things¹ who can't even click them. (The adverts are bad enough.)

For people capable of ignoring them, these buttons are just going to fade into the background, eroding the very design language that you're relying on in the first place.

^{1: Have some webcomics: one two.}

---

That said, I don't understand what your goal is. You write:

Because voting is one of the lowest barriers to participation, we felt that this was the best place to start to help users engage more on the platform.

Your company isn't valuable because people want to go on a website and vote and edit and answer and re-tag: it's valuable because those actions result in a high-quality library. The vast majority of people aren't here to interact with the system: they're here to get answers to their questions, and the best possible outcome for them is that the question has already been asked and answered.

Everything else follows from that. Everything else is secondary to that. And you know this: to quote the new Code of Conduct (draft):

• Answering - The knowledge sharing of the Community is the platform's foundation. To ensure the highest quality repository of information, we have adopted quality standards that apply to all answers on our network. […]
• Voting - Our voting system is central to how Stack Exchange works. Votes are how the Community signals great content and rewards its members for their contributions. Improperly cast votes undermine the integrity of the platform. […]

There is no way that "engagement", how I understand the word, is actually your goal here. Voting isn't a social media ♥ 👍 😠: it's a curation activity. Stack Exchange is not supposed to be engaging: it's supposed to be useful. I've seen far, far too many companies chase the metric of engagement² off a cliff, and destroy everything that made their offering valuable.

… which I don't believe you're doing here. But I still don't understand your goal, so it's hard to give useful feedback.

^{2: Have another webcomic: three.}

Answer 2

A 28% increase is not necessarily a positive outcome. Perhaps more users voted without having read the content properly.

The "holistic exploration of the voting mechanism" similarly sounds like you are aiming for engagement, not quality.

How are you going to ensure that vote counts reflect post quality?

Answer 3

Looks like the new buttons were recently released fully. They look awful; this does not look like an improvement at all.

...Yuck.

The preview showed they were ugly, but in the implementation, they look even worse.

They are big, they are obtrusive, the arrows seem too small for the circle, and they don't go with the rest of the page at all. There are too many circles now.

Increasing (thoughtful!) voting is a good idea, but this monstrosity is probably not the way to go. Maybe make more voting-badges, create Meta posts encouraging users to vote, or do something else constructive. But these buttons are the equivalent of ruining a skyline with one of those big, blocky, gray buildings, and... blech.

Answer 4

Maybe if you tried a community of 100,000+ UX specialists, you would gain some surprising insights. If only such a community existed somewhere...

PS: If these buttons serve as an accessibility solution, I wonder which accessibility guidelines you are following. It appears that those of us who actually work in accessibility use something different. Moreover, visual accessibility is not the sole type of accessibility that exists. I highly doubt these buttons pass most neurological accessibility tests and they will probably fail at quite common conditions like Autism and OCD. Show this

to someone with OCD (and many autist people) and see the world burn. (thank you @wizzwizz4 for the image)

EDIT: Any UX apprentice knows that the image below is a perfect example of cognitive overload. It is typically taught at the early stages of one's career.

with vote up

Answer 5

I agree with many of the other commenters here stating that the buttons are ugly and a strict downgrade. I find it hard to see how they are somehow more accessible, given that the arrow itself is much smaller and harder to see. I also take issue with changing something so fundamental about the SE experience, those buttons are arguably more iconic than the SO logo itself.

I also seriously question the 28% increase metric. Are you sure this isn't due to some other confounding factor (e.g. overall increased participation due to the pandemic)?

Edit: Given how significant of a change this is, I would also really appreciate an account wide option to revert the buttons to the old design when logged in. WCAG is fine, but if I personally don't need it then it seems reasonable to have an option to use the buttons that have existed since the inception of the site.

Answer 6

We’ve heard your feedback from the previous posts about this change, and are not moving forward until we address them.

You've moved forward. Have you really addressed them?

🦆

Answer 7

I honestly did not have a strong opinion on this change until it was finally in effect on my devices. And now it is crystal clear that it is several magnitudes worse than what was previously in place.

• If the intent was to make it clear that the voting buttons are buttons, then it is something that does not contribute to the experience of existing participants who already know about them and how to use them, which amounts to almost all users with an account. This is even explained in the tour, which we expect new users to see. It almost makes it sound like you want to signal visitors without an account to vote more often, which we know is not that useful right now... Right?
• It's less usable, because it's now harder to grasp whether I already voted on a post. The original announcement showing how the button looks like when selected was only presented in the non-dark Stack Overflow theme, seemingly disregarding how it would look like in dark mode and in other sites of the network. I have the impression that the colors employed in the selected choice do not contrast enough with the unselected buttons, and it's a bit worse here on Meta Stack Exchange, on Meta Stack Overflow, and on the main Stack Overflow in dark mode. Even this particular announcement did not show how the buttons would look when selected, so it seems to me that a lot of folks out of the A/B selection wouldn't really be able to understand what would happen before it went live.

I have the sentiment that this roll-out will catch many people off-guard. Primarily from the part described above: we weren't sure of what we were getting. And also from the fact that we should expect better design from a company hosting one of the most important online platforms for programmers.

Answer 8

Why ask the community for feedback if you are just going to ignore it?

As a protest, I will not be voting any longer until this change is reverted, or at the very least made optional.

Answer 9

I appreciate the A/B testing. If the 28% increase in voting engagement is accurate, then it sounds like a big win.

However, the design is pretty "meh" in my opinion. The buttons are generic and lack branding, like something I'd see in a cheap hotel elevator or one of the dozens of knock-off SO sites. Maybe it's clearer that those are buttons, not just decoration, but I'm curious if any other designs were tested? Perhaps something that is a bit more uniquely identifiable with SO?

Answer 10

I want to say that I think a big barrier to voting is that the place where the learning happens is not the place where the voting happens.

When I go to stack overflow from google I immediately scroll away from the question and into the answers. I will likely never return to the top of the page and will therefore never see the voting buttons. No matter what they look like. And when I am reading an entry (whether a question or an answer) it is frequently long. And even if the buttons are still visible on my monitor, my eyes are now at the bottom of the page and moving on to reading the next answer.

In these scenarios the voting arrows are no longer part of my view. There is no call to action for me to use them.

Perhaps it would be useful to add a supplementary upvote/downvote at the bottom of the question/answer, near to where the username avatar and rep appear. This way you would see them as soon as you finished reading and may be reminded to vote.

PS: I would like to add that I think a 28% increase in voting makes sense simply because the buttons are different. We notice things that are different and are therefore reminded to use them. I would theorize that changing the buttons in any way whatsoever will cause voting to increase temporarily, and then go back to baseline as soon as people become used to the new design.

Answer 11

With the change, it feels like the buttons are more important than the actual vote count. They're humongous and the padding and roundness remind me of Material Design 3. Then somehow the vote count either is or looks a lot smaller; it's pretty confusing and the design seems counterintuitive.

From a (unqualified) designer's perspective this does not seem to match the look and feel of SE sites. I understand that the purpose is to increase voting interaction, but just because one design does what you need means you should definitely use it. I imagine alternative designs that may have the same effect.

Just an example of a random idea, what if the original design was used, but when not pressed you use an outline? This makes it more obvious that the element can be clicked.

Answer 12

status-completed

On the Meta for math.se, a vote doesn't change the arrow from black to blue, you just get the pencil-thin ring, and maaayyyybe a shade of grey - hard to be sure about that.

Is this intentional?

Edited to add: Yup, this is getting really irritating. It used to be that I could revisit an older post with recent activity, and just glance at an answer and see that I'd already voted on it, and move on to other parts of the page. Now, I just can't tell. You are wasting my time, and a lot of other people's time too.

The responses to the arrow change seem to be spread over multiple Meta posts. Does anyone know if there's even been an acknowledgement, like "Okay, we are aware of this, and are figuring out a fix"?

Answer 13

With the new buttons live across the network, in my opinion, they look awful and distracting. Some observations:

• As others have noted, the circles feel like added elements to parse. So whereas the "traffic light" of widgets next to each post used to be 6 things, now it conceptually feels like 8 things (just on the bad side of the magic number seven).

• In the unclicked state, the circles are so thin and dim they disappear at certain angles of my eye to the screen, and re-appear at others. So as I scan the page there's a distracting shimmering effect as the circles come & go from visibility in the corner of my eye.

• In the clicked state, the button colors match the site theme which may not provide contrast. For example, on English Language & Usage they're brick red which is pretty visible (to me), whereas on Mathematics Educators they're a dark blue, which is harder to distinguish from the unclicked gray (to me). In combination, I have to track a different feel as I browse different sites on the network. And I bet somewhere on the network there's a site where the theme matches the unclicked gray exactly (who knows)? I'm pretty stunned that the only distinction between on & off is the color; I thought that was a canonical bad practice for accessibility.

• The appearance conflicts with the comment voting buttons on the same page. Previously all the voting buttons were synchronized, now they're not. The comment buttons are still solo-arrows that get darker when clicked. The new q/a vote buttons have these big circles, the arrows relatively smaller and swimming inside, with upvotes noted by a color change (which may or may not be a tonal change depending on the site theme).

The overall effect is actually much worse than I would have expected before the general roll-out, ouch.

Answer 14

This is actually a total failure of accessibility on Stack Overflow.

Perhaps I am slightly color-blind, but for that very reason the new buttons are not accessible to me. I can no longer make out how I have voted, if at all, on the given item.

In the past, if I had voted up or down on an item, that vote arrow was drawn very differently in a way that was completely obvious and attention-getting. But in the new way of drawing, there is no discernible difference (to me) between, say, an up arrow where I have not voted on this item and an up arrow where I have upvoted this item.

Answer 15

I want to acknowledge everyone who has indicated that with the new buttons it is harder to tell whether you have already voted on something or not. This is an issue that makes it harder to engage on the platform, which we take seriously. We saw that this problem was especially prevalent on the Meta sites because they use grayscale.

We just rolled out a change across Meta sites on the network, making it much more obvious to see that you have voted on a question or answer. Now, after you have voted the whole button should appear dark, rather than just the outer ring, with the arrow inside appearing lighter.

Before	After

If you find a meta site where the updated style is not live, please let us know so we can address it.

On the network sites (excluding Meta) the coloration of the voting buttons varies based on the theme of the site, so they don’t look the same everywhere. If there are specific sites where you are finding the same problem of visibility after voting, please let us know in the comments here.

Answer 16

No, things do not always look better when you put them in a circle.

The new buttons are badly designed and other answers explained why pretty well. What's more disturbing is this appears to be a solution in search of a problem nobody asked for, whereas real issues with disappearing plus/minus signs when the vote count exceeds hundreds, or relentlessly requested literacy in using a proper minus sign − in place of a hyphen - are ignored for a decade:

• Replace hyphen in front of scores/reputation by minus
• Negative vote counts should use Minus Sign (U+2212) instead of Hyphen-Minus (U+002D)

Before making superficial updates (which for many turn out to be downgrades), please make sure the site content is displayed competently and is in agreement with good typographic practices and standardized notations, and not with what is easy for your designer team to implement or is aligned with their current mood.

Answer 17

For those who want it, I have once again made a user style to revert the vote buttons to an approximation of the way they were before. You can find it here. If I got anything wrong, don't hesitate to open an issue!

Answer 18

Regardless of taste, if this is the final design of the buttons, personally I see some adjustments at the perceptual level that can be improved.

The contiguous circles perceptually emphasize the central axes where they are located. This causes that in centered alignments, elements with irregular optical areas, such as the numbers 4, 7, and negatives, seem to be off center.

To avoid this, it would be enough to reinforce other virtual alignment axes. For example, in square buttons, the importance becomes of the lateral margins instead of the central axis, disguising the off-center effect:

The middle term between one option and another is explained in this answer, where the use of squircles (no circle, no square) decreases the strength of any kind of emergent virtual axis:

Answer 19

The text showing the numeric score is now smaller. This matters not just for readability (it's one of the most important bits of data about a post!) but also because clicking on the number shows the breakdown of upvotes and downvotes.

It's highly unusual for "accessibility" to be cited as a reason for making important text smaller, or for making an interactable element smaller.

Answer 20

I've created a userscript for anyone who may want to revert this change. Lemme know if something goes wrong with it and I'll try fixing ASAP.

Answer 21

If this is about accessability, it could have been done better (refer to other answers).

If this is about generating votes, I suggest to create a new privilege: After giving fifty votes, you are allowed to return to the old button design.

Answer 22

While I realize that not everyone will like every change that's introduced, at the very least a new feature should be getting mixed reactions - ideally the majority should be positive. Currently, this post is the 11th 5th most downvoted of all time here on meta only a few days after rolling out the new buttons.

Please revisit the community's feedback and (at least temporarily) roll back this change.

Answer 23

I think the update is pointless. And it will not encourage users to vote more. All that has changed is that the buttons have become larger (although they were normal size before), but they have become ugly and very poorly combined with the design of StackExchange sites.

And it also annoys me that I have to click on this terrible button to vote against this post.

Update:

You have seen a negative reaction from the community (+124/ -673). You have been pointed out a lot of shortcomings of the new buttons, of which you have fixed only one!

Answer 24

The change is live now and my first impression is that yes, the voting buttons are more obvious and I can understand more people using them but at the same time the score has become less obvious to decipher. For me as experienced user I already know where the voting buttons are, but I need to see the score frequently. That became harder. My association is two big balloons with something small squeezed in between. It may just be me being used to the old design but I find it more pleasing aesthetically.

Some concrete feedback:

• the circles edges are too emphasized
• the arrows are too small
• the circles are too big
• the colors are too similar

Hope that helps you in case you ever want to redesign the feature. Btw. just discovered again that it still says "X votes" instead of score but one can get used to a lot. I will need to come back in a month/year and recheck my impression.

I guess it could be that the novelty effect of these voting buttons has worn off by then. I also didn't understand why voting is/was a pain point. People missed the arrows? Maybe they simply would have needed to be reminded of the feature a few times if they didn't vote.

Answer 25

On locked posts, the new bold font hasn't been applied. Like on this question:

It still has the old font, not the strange, new one that we have now:

I'd say I wanted them to be consistent, but I really don't, because they're ugly. But it probably should be fixed.

Oh, and while you're at it, maybe you can fix this related issue, where high-scored lock-posts have un-centered scores.

Answer 26

What I specifically dislike about the change is the lack of contrast on many sites, for example https://scifi.stackexchange.com:

The difference between the regular colour and "I already voted on this" is just too small; I already accidentally upvoted things more than once by accident.

I actually have fairly good vision, but I'm typing this in in the evening with my screen fairly dim, so it seems like a fairly serious accessibility problem (which is ironic since that was one of the main reasons for this change!) On full brightness it's probably a bit clearer, although still not spectacularly so.

On Stack Overflow it's orange instead of light blue, which is a bit better, though still not brilliant. On https://meta.stackexchange.com it also sets the background colour:

And that's much better, IMHO.

(While some other answers already touch on this aspect a little bit, I felt it was worth pointing out in a separate answer – personally I don't really care about most of the other criticisms, and would hardly have even noticed the design changed if it wasn't for this).

Answer 27

Since the Product Team wanted numbers, here's some numbers:

Problem #1: How do we make a triangle more accessible to the vision-impaired users (near/far-sightedness, visual agnosia, color blindness, etc)?

Solution: Make the vote icon less than one third the previous size, and draw a pretty circle around it. It's actually closer to one fourth the former size, but you get the point...

Numbers: The total surface area of the upvote/downvote arrow icons went from 264px² to 76.5px²: that's a 71% reduction in size of the one entire visually-identifiable element used to know whether you're about to upvote or downvote something. Hate to break it to you, but no matter how you spin it, that circle without the trusty triangle infers literally nothing about what will happen when you click, tap, or press it.

Furthermore, in the world I live in, which happens to feel very real, the only way these updated vote buttons will actually have a predictable outcome on a user's voting habits in a deterministic manner is if you add the classic MW2 hit marker sound to your onClick event and hope they have their speakers on.

Problem #2: How do we make our tiny but emboldened circled triangle more accessible to the physically-imparied users (DCD, hand tremors, age-related motor control decline, fat fingers, etc)?

Solution: Increase the size of the button (circle and all) by 5px because the intern just remembered that adding a circle also means adding margins or the whole UI begins to look like a broken record.

Numbers... Previous clickable area was 36 * 36 = 1296px². New clickable area, using πr² with a radius of 19.5 for the circle excluding the border width, we arrive at 1195px². Which is a mind boggling 101px² smaller than before. Bigger button, smaller hittable region.

So in other words, not only can you not eat your cake, but you can't have it either.

At least it's accessible.

Answer 28

As a person who sits on advisory committees for persons with disabilities in a major Canadian city, I really have to ask; How many visually impaired people were consulted during the process of deciding to overhaul the UI?

As several other people have mentioned, these circles are making it harder for people with visual impairments to understand what they are looking at. As voting is an essential part of how content gets moderated on ALL SE sites, its very disturbing to know that people with visual impairments will have a harder time being part of that process as a result of this overhaul.

Changing things for the sake of changing them is one issue in itself, but making major changes to the visual layout of an entire network of websites without consulting people with disabilities, is a beyond concerning.

Want to help make the lives of people with disabilities easier? Consult with us, hire us, talk to us. We are always in need of a voice.

Disabled people exist.

Answer 29

Why, I'm thrilled about our new and improved voting graphics! It's nice of you to provide some diversionary entertainment while we are experiencing the moderator strike.

By the way... remind me, what is that Code-of-Conduct rule one violates if one degrades the network site's UI against the overwhelming objections and protest of the users? Oh wait, I guess there isn't any such rule.

Answer 30

I can see the style has been modified since this was posted. Both hover and clicked button styles differ much more substantially, making it much more readable. Despite there is even more contrast than before, I somehow find it more harmonizing with the whole page, in comparison to what was proposed originally.

I think this was my biggest remark, and perhaps I can retract my downvote now. Please propagate this to other SE sites!

For example, on Music SE the buttons look like this:

It somehow lacks contrast, and I need to look twice to see if I have clicked a button or not. Also, on my FHD screen the circle actually looks pixelated, the top, bottom, left and right edges look thinner, and overall the impression is not pleasing. It doesn't seem to affect the light gray unclicked button, but the darker line clicked one looks jagged. The filled button (as here, in the Meta site), looks much better.

Some sites, like Physics SE example shown below, use color, but I'm afraid this is of little help to colorblind people.