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 have realized that there is another state that I have been considering posts to be in: "Not (yet) engaged with". And previously, those posts had nicely greyed-out up and down arrows, which very well reflected their status wrt me.

I know you went ahead with this change in part because it increased the number of votes. Well, I'm mostly on math.se, and on most posts my opinion would be fairly uninformed - I shouldn't be voting on them. And now I'm getting poked "vote, vote, vote", as intended.

Listen, I know what you want is "more", while what I want is "better", and this isn't enough of of an irritation to make me stop using math.se, and like all modern irritations it'll eventually become ignorable and ignored. But it's not appreciated.

Answer 2

The buttons have 100% opacity by default; they look selected when they aren't. The circles also make the arrows way too small.

Answer 3

As many other users, I find the new design of voting buttons not quite appealing. But that is not a serious problem for me.

What is worse about them is that since the buttons have occupied a larger area on the screen, the area for the text of a question or an answer has reduced. I don't bother about PCs and laptops as I use SE mostly on mobile device. But the size of the default text has surely diminished a bit which forces me to zoom in the page. However, after zoom in, the page starts looking rather odd and other features of the site will vanish off the edges due to zoom. Also re-adjusting text size for the browser itself is not a good alternative as it will cause too large text for sites other than those of Stack Exchange network.

The new style buttons might not have been bad but what makes it worse (at least for me) is that it costed the default size of the text.

Answer 4

This is like:

• How can we improve our income?
• Let's make the "Buy" button bigger.

I'm really not interested in this change, either as a member answering questions or an elected moderator. But still, how will the button-pressing rate help the community grow or help answer quality improve?

Potentially some new members will gain a few more votes. Potentially some more members will become active members, right? ...Wait a minute! I see that the downvote button size was increased too.

Regarding the UX, I think that the visual weight of the post votes counter was significantly decreased in contrast with the button size. "Accept answer" button was also affected. There was not an improvement but a tradeoff. A change that changes nothing.

Regarding UI, I like this answer.

Finally, what about "Accept answer" button? It doesn't look like a button at all.

Answer 5

The new design has a bad developer experience (dx). the developer can't focus on the content.

As a developer, it attracts my eyes, but I can't focus on the real content. (it's distracting / annoying).

The picture below (no circle border) is a clean design and developer experience (dx) (no distraction, so we can focus on content):

(Note that for accessibility, the circle can still be there on hover state, the circle border is just transparent in normal state. or you can make the buttons a bit bigger, like prev design, so there will be no need for a circle on hover state.)

And the below one (circle border) is a bad design and a bad developer experience (dx) (it always has an extra attention to the buttons, so we can't focus on content):

Aside from the dx, the design is also not suitable. the simple big circle doesn't fit to the rest of design (it doesn't have harmony, and it's odd looking). the ui may seem beauty, but for the long period and this usecase, it's not a clean solution.

Answer 6

An analysis of the statistics

When I read lots of numbers, I like to see in which context they are used. Here's my review of those numbers, regardless of the button design^{(hint : I moderately dislike them :p)}.

---

We shared positive results from the experiment: a net 28% increase in overall votes.

28% increase compared to what? If it's overall, note that if there are 28% more users overall, there will be a normal and expected 28% increase in votes, too. No real cause-to-effect can be determined from this number alone.

---

• 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.

Five things here :

• Have you excluded from your search unexperienced users as you looked at >1K users? Because if so the 8% value is certainly lower than real. We don't have any source to check what you tested, exactly.
• "only" 8% of potential misvote is an awful lot. Let's be our kindest and remove half of misvotes from users who actually changed their mind (e.g after a post's edit), we're still left with a very big 4%. This means that every 25 voters, one has mis-clicked at least once (one out of ~12 for 8%). Since voting is a critical component and your "lowest barrier to participation", do you actually think this is a good stat?
• Where's the number of votes that got undone? Votes are not users. Some people could be undoing their votes repeatedly, and that'd be interesting to know why!
• "The number of posts that had votes undone only accounted for 3% of total votes.". Are you actually comparing posts to votes? Is it from the same time period as the 8%? Total votes over this period, or overall? In what is it relevant to misclicking? It is extremely unclear what you're talking about here.
• Why didn't you checked how many people removed their votes within the 5 or 10 minutes of voting? Those are very likely actual misvotes : The post likely didn't change meanwhile, and most people quickly realize when they've done something wrong.

---

Year over year, we are seeing 28% fewer votes (upvotes + downvotes) and 21% fewer users voting.

Again, isn't this due to other reasons? It's really easy to mistake correlations and cause-to-effects relationships. Users becoming less active overall is a much more reasonable explanation for this : A system that didn't change isn't very likely to change much the behavior of users because in there only the user could have changed!

---

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.

Well, let's exclude the absence of source explaining the test procedures because I'm really starting to feel I'm punching a underfed dog to death. First and foremost, what do you mean by "attempted to vote"? How did you notice attempts that failed? If the user failed, then it's not reflected in the "succesfully voted" KPI, right? If so, how do you know?

Then, 24% of new users who failed has no meaning if you don't tell how many new users are there in comparison to old users overall. For instance, I can have 60% of new users overall, which means that there are less new users who make the mistake than old ones (60% > 24%). If there are only 12% of new users, yes here potentially we have an issue, but a new user's ability to vote still needs to be reviewed with actuals user-experience tests, not KPI reviewing.

Conclusion

From this text alone and without even considering the design^{I moderately dislike :p}, I feel like the KPIs used are at least not explanatory enough. At worst, and that's what I think because they're piling up quite a bit, they're not displaying an honest behavior. Throwing in numbers semi-randomly does not make a point stronger, they need to make sense and be explained correctly.

Here -and complementary to the other answers proving the buttons are not as accessible as you try to make think they are-, I find the downvotes count on this post and the test one much more speaking than any of the numbers you gave. A ratio of 14.8% of "likes" vs total votes on this question means this isn't what the community's core sought at all, ie. the one that run the inn and bring new travellers in. There is no doubt in that.

Answer 7

My eye-sight is rather poor.

I have found that, on non-meta sites, I seem to have to squint and peer more closely at these new arrows to see if I have voted or not, because the ring highlighting just isn't sufficient.

The previous arrows never made me need to squint.

I also find that after a while, I am getting eye-strain and headaches from the squinting to check for any previous upvotes/downvotes.

Note that if I don't bother looking at the arrows, then I find no need to squint to be able to read the text - so it isn't that my eyes are completely shot. It is clearly just these arrows and the fact that it is harder to see their highlighting.

So, one has to ask, was any accessibility checking done when testing these new wonderful (hard to see) buttons..?!

---

It should be noted that, however, on the meta sites, the filled-in/inverted highlighting of the vote buttons is perfectly visible. Taking these examples from SuperUser:

Non-meta vs Meta:

Answer 8

I don't like the new styling for two reasons:

1. It doesn't fit in well with the rest of the layout where everything is, well, rectangular (search boxes, page buttons, horizontal and vertical lines, profile icons, sidebar panels, selected or marked menu items etc.)

2. For some reason it feels like something is wrong with the voting arrows. Cognitively, the first thing that comes to mind is that some CSS is missing and the browser tries to apply some sort of default rendering.

Honestly, in comparison, the comments' borderless up-arrow and flag look much better.

Answer 9

Fully aware that this seems to be a small minority opinion here, I personally like the change, even though there is always room for improvement.

• Most people seem to agree that the buttons are generally more eye-catching than before(even though for some people that is because they find them ugly ^.^ ). This was the whole point, so at least in that regard, success! (I am avoiding the important accessibility aspect here, about which I don't feel knowledgeable enough to really talk).

• I personally noticed that I'm more likely to leave a vote, especially for the usual google search -> solution sort of visits.

• I can understand the opinion that the current buttons feel somewhat out of place with the rest of the style, maybe a square with rounded corners would be more in line with the site's other button-like things:

• On the other hand, that stark difference is part of what makes them stand out so much in the first place.

• While the discussion seems to have remained mostly civil, I just want to thank the many members of team trying to improve the site for all of us, even though the community often gives them tough love in return :).

Answer 10

I would like that the experiment included a measure on comments, specifically if there is more comments and if comments including content like '+/-1'. That would make also something that doesn't affect the likeness of the votes themselves (after all they scream "USE ME"), but also what actions those users stopped doing.

Answer 11

I prefer the new vote button arrows because they have a much more obvious contrast between voted and non-voted arrow vote buttons in dark mode (through the Dark Reader browser extension), even on meta sites. I use Dark Reader to enable dark mode on all websites whenever possible.

In the previous UI, some SE site themes conflicted with Dark Reader. This made it difficult to see the difference between voted and non-voted posts. The new UI addresses this issue by increasing the area of the button that is a different color if it has been voted on, making it much easier to see the difference between voted and non-voted buttons.

Screenshot of the new vote button UI in Dark Reader dark mode (in Movies & TV SE) — notice that the area covered in orange, contrasting it to the non-voted button, is much larger in the new UI than in the old UI.

In the old UI, it was harder to see the contrast since only the arrow had a different color (a smaller area), and some site themes made the difference even less obvious in dark mode.

I hope that SE will eventually implement native dark mode for all Stack Exchange sites. This would improve the overall user experience for users who prefer dark mode.

Answer 12

Seriously, this insignificant change should not elicit so much whining.

If you go all ballistic because of a button design change (!) nobody will listen to you when it concerns more serious issues, because you oppose everything anyway.

I know I make the prediction after the fact, which is cheap, but still.

Answer 13

If you really wanted to emphasise voting buttons WHY didn't you make them look like buttons?

E.g.🔼/🔽 or ⬆️/⬇️

I have never seen a computer application that uses round buttons

Answer 14

For devices like Apple Vision Pro, round icons are better. If the icons have sharp corners (like before), it makes eye tracking more difficult - people will instinctively stare at the corners.

Apple advises developers to use round-cornered icons when developing apps for visionOS, for the same reason.

(That's probably not why they changed the icon. I'm just sharing information that I think might be useful.)

Answer 15

I feel like (at least some) people express such a disaffection because of a something called the "mere exposure effect".

This is a psychological bias that suggests people tend to develop a preference for things simply because they are familiar with them.

It is evident that some individuals concoct seemingly rationalized justifications to disapprove of these familiar elements, thereby framing their preferences as matters of personal choice rather than engaging in constructive thinking. Hence, it becomes imperative to approach such discussions with a critical and open-minded attitude.

When I think of a button, I think of something round. Historical design conventions have predominantly favored round buttons, and this dates back to at least 1880. On the other side of the spectrum, they could also be squares, but this is often regarded as antiquated (and often for a good reason). Personally, I strongly prioritize simplicity and user-friendliness over subjective aesthetics. Round buttons, in particular, convey a sense of a larger click surface area, a crucial aspect contributing to enhanced usability.

Nevertheless, I harbor reservations regarding the compatibility of these circular buttons with the overall design scheme at hand.

Answer 16

If StackExchange wants to increase voting, I encourage StackExchange to actively encourage kindness across its network (and the world) and explain why upvoting is a kind thing to do (and how unnecessary downvoting is a mean thing to do).

I've noticed that quite a few prominent StackExchange users have a 2:1 (or even worse) downvote to upvote ratio. These people often become community moderators, and continue their pattern of negativity.

Perhaps StackExchange should start penalizing users with downvote to upvote ratios that are greater than 1:1.

If you desire healthy and engaged communities, the first step is to act kindly towards other community members. Slightly changing a button's appearance isn't the big issue.

Upvotes literally cost nothing, yet so many people are incredibly unwilling to be kind enough to upvote helpful posts. I find it sad and indicative of a larger problem in society.