-334

This experiment has concluded. We've gathered and analyzed the results in Results of the voting arrow experiment.


This week, we're rolling out a test to update the appearance of voting arrows for both questions and answers, which will bring some accessibility gains, namely affordance, feedback, and meeting WCAG compliance; it also maintains aesthetic cohesiveness between services, by bringing them in line with the voting displays on Teams and articles within Collectives. To be clear, this does not include comment voting arrows, nor does this update include any changes to the mechanisms in voting.

First, the up and downvote buttons are getting fancy new coats. Wrapping the vote buttons in an outline like this makes them look more actionable, which is an environmental clue for users, especially new ones. (These are buttons, come press them!) This should make them easier to use and more obvious, which should lead to more engagement with them.

Image showing the new vote arrows

We're also updating how the arrows look after a user has voted. The older arrow contrast change upon voting does not meet WCAG accessibility contrast tests. Along with updating the color for compliance, we're also adding clearer feedback for vote status. You'll see contrasting colors for up and downvotes. This offers more clear and visibly distinct feedback upon voting.

Image showing the new vote arrows with an upvote cast

84
  • 154
    Since this is an A/B test – what is being tested/compared between the groups? How much people vote? Commented Jun 22, 2022 at 18:37
  • 51
    Is this the final design that testers will get to see? In my opinion the buttons need to be more spaced out or a little bit smaller. Right now, the vote count looks rather squished between those big circles.
    – QBrute
    Commented Jun 22, 2022 at 19:54
  • 10
    @MisterMiyagi, the vote buttons are being tested. The screenshots above will be displayed in the test group and we will be comparing vote events between test/control. Ideally, there is no regression so if the vote events are flat between both test and control we will consider that a success.
    – tanj92 Staff
    Commented Jun 22, 2022 at 20:20
  • 15
    @notarobot to improve "accessibility" and adhere to "guidelines"
    – Kevin B
    Commented Jun 22, 2022 at 21:36
  • 52
    thanks so much! as a colorblind user I really appreciate the changes and attention to all visual impairments :) Commented Jun 23, 2022 at 3:57
  • 17
    One remark: the score seems a bit too small to me. It's quite smaller than the buttons. It'd be nice if the number was slightly larger than what's shown in those screenshots IMHO. Commented Jun 23, 2022 at 11:06
  • 24
    Bucketing seasoned users into the test group seems a waste of time; they already know how to vote and vote often. I'd strongly suggest targeting new users
    – Phil
    Commented Jun 23, 2022 at 22:07
  • 54
    I think making clickable items look more obvious is long-overdue so I'm all for that - I do however dislike this look, it just doesn't fit with the rest of the site - nowhere else are there circular buttons, SO is pretty much rectangular throughout, the top menu button highlight in a rectangle, the ask question button is rectangular... the voting buttons should be smaller and rectangular and the accept answer checkmark desperately needs to look clickable also.
    – Stu
    Commented Jun 23, 2022 at 22:39
  • 13
    "not whether it's actually a positive change": how can that be of use?
    – Andy
    Commented Jun 24, 2022 at 1:29
  • 32
    What's the percentage of users targeted by this WCAG compliance push? Not sure whether I'm one of them (a 100% functional ADHD coltorblind), but this change makes SO nearly unusable for me. Distracting as hell tbh. The A/B test should be designed very carefuly to estimate engagement and disengagement metrics.
    – Benny K
    Commented Jun 24, 2022 at 3:22
  • 39
    This new "feature" is ugly but frankly I'm not surprised, since it seems every change you do is for the worst. Why don't you do something more creative if you are looking to increase voting? E.g. when a user who has enough reputation to vote is browsing a question, show him a short-lived pop-up that encourages to vote. You could do this for users who have asked a question and haven't voted on answers, too. A pop-up would be very effective.
    – Paolo
    Commented Jun 24, 2022 at 7:08
  • 35
    elevator buttons?
    – Aarnihauta
    Commented Jun 24, 2022 at 8:48
  • 34
    Why circle buttons then? And what about the accept button? I would first remove that ugly border-radius: 1000px; which would fit with the rest of the UI much better. And since we're at it, I have never been a fan of that orange color once the button has been actioned. Orange has a warning / caution connotation for me (even though people will disagree with that statement). I would either use green for up, red for down, or blue for both.
    – MrUpsidown
    Commented Jun 24, 2022 at 9:48
  • 38
    Please apply the style using proper specificity instead of relying on crutches like !important. That makes it much harder for us to make our own styles to override them.
    – TylerH
    Commented Jun 24, 2022 at 15:51
  • 30
    If you really do care about accessibility, why hasn't the keyboard interface you accidentally broke four months ago been fixed? Commented Jun 25, 2022 at 18:23

21 Answers 21

431

While the new Upvote/Downvote button design is a nice attempt at a new style:

  • it's too big
  • it detracts from the actual answer post
  • it doesn't fit in with the rest of the post design
  • it makes an otherwise great and long-lasting layout design feel cluttered.

Old vs New Voting Buttons


Compare the whole layout of an answer post with the "new" buttons VS the old buttons:

NEW

Why new voting buttons are a step down


------ VS ------


OLD

Old voting buttons blend in more naturally

Slider Comparison


Looking at this, the old buttons also look a tad too big. Here are some alternate suggestions I quickly whipped up:

Alternative design suggestions

The only positive outcome of this redesign is that there's now a clear separation between the "sidebar" (with the voting buttons) and the main post area -- the two "columns" appear more nicely. With the old buttons, the distinction is a bit blurry and everything seems a bit "floaty".

But I mean, who asked for this? 😅

23
  • 167
    Personally speaking, I just loved the simplicity of the big and clear-shaped old voting buttons, and the "power" I've come to associate with them. The new ones look super generic, like in another other website, and detract way too much from the actual answer. The only look good on button down state (when vote has been cast), but in idle state they look horrible :/
    – Prid
    Commented Jun 24, 2022 at 1:27
  • 3
    Sorry, forgot that I was using a Chrome extension to revert Stackoverflow CSS changes to the old ones. The new buttons might be fitting in after all, but I've not been a fan of all the recent changes, which is why I've been reverting those changes. Didn't realize this, so my opinion may not be valid :X
    – Prid
    Commented Jun 24, 2022 at 2:48
  • 65
    Got to say, I agree that this change is basically useless and also seems very out of place compared to the rest of the UI. Commented Jun 24, 2022 at 7:00
  • 23
    "it's too big": Yes, it appears bigger than any other element on a page, including the headline (at least at some zoom levels). Sample page. Commented Jun 24, 2022 at 11:57
  • 28
    It's amazing how the new buttons manage to be both too big and too small at the same time. They occupy a lot of real estate: too big. The actual outline is, what, one pixel wide? Too small. The first time they popped up, I was lost. I could barely see the outline of the buttons. Both the inner color and the outside are the same, or too similar. I had to switch to the high contrast theme in order to be able to see the new fugly buttons in the first place. Commented Jun 24, 2022 at 23:36
  • 2
    @Sam Yeah, and the arrows also look too small...
    – EvgenKo423
    Commented Jun 27, 2022 at 11:46
  • 17
    I ABSOLUTELY AGREE: REVERT IT! It seems to distract a lot of users. I also don't know if anyone ever seriously had problems with the previous design. Commented Jun 27, 2022 at 12:22
  • 5
    @Prid We’ll re-consider the size of the buttons and make changes iteratively if needed, but right now are not immediately changing it. We also have to keep accessibility and usability in mind when thinking about it.
    – tanj92 Staff
    Commented Jun 27, 2022 at 15:16
  • 4
    You're using the same shade of gray of the old design, which doesn't pass WCAG.
    – rodorgas
    Commented Jun 27, 2022 at 16:43
  • 18
    @Prid To somewhat echo your sentiments, I find the original SO arrows to be the most iconic and recognizable part of the site/brand (even more than the logo). They are one of the best designed UI elements I have ever had the pleasure of using, and changing them (to me) is akin to overhauling the logo or brand color scheme. (although worse because unlike the logo, I need to look at the score+buttons multiple times every time I navigate a page). Needless to say I vote keep the orginals.
    – Cole
    Commented Jun 28, 2022 at 2:48
  • 8
    I have the same impression that this feels out of place with the rest of the UI. I tried to get used to it but every time I have gone to SO in the last few days, it has felt slightly jarring to look at the new vote button circles; they appear unfinished and ugly to me personally. I enjoyed clicking the old buttons and they didn't distract me from reading the content of the post. The new buttons distract me and I feel less inclined to want to vote on SO with this change, so please include an option to turn this off if you decide to keep the change(or maybe make it part of the high contrast UI?) Commented Jun 28, 2022 at 18:12
  • 2
    en.wikipedia.org/wiki/Fitts's_law indicates that slightly larger buttons are much easier/efficient to interact with. This will also benefit users with fine motor challenges. I think shrinking the buttons to be smaller than they currently are would be a step back for usability from this standpoint. Commented Jun 28, 2022 at 21:33
  • 9
    @canon: good point, but more important is consistency. If a website has one button design, it's pretty easy to learn its function and expect similar buttons to have same function. But with this "new" button design, you get a mix of different button designs, like you said, and that creates confusion and uncertainty, which leads to more friction and users having to re-learn the website's interactive behavior.
    – Prid
    Commented Jun 29, 2022 at 19:32
  • 7
    Just noticed that the buttons with the new styling turn the triangles gray when the post is locked (and thus the vote buttons are non-interactive). Example image; link to an actual locked post for demonstration purposes (for those lucky victims of the A/B test)
    – Cody Gray Mod
    Commented Jul 1, 2022 at 4:09
  • 6
    The only reason I enter stackoverflow meta is when I find out my UI suddenly changes. I get the need for accessibility, but it's very ugly ☹️
    – Bharel
    Commented Jul 10, 2022 at 23:03
129

Is the tick icon planned to be changed to a button (for the asker only, and Admins in Teams) too? If not, then I feel like this would conflict with this statement:

Wrapping the vote buttons in an outline like this makes them look more actionable, which is an environmental clue for users, especially new ones. (These are buttons, come press them!) This should make them easier to use and more obvious, which should lead to more engagement with them.

If the vote arrows are now vote buttons then the tick icon will look less actionable if it isn't a button too, in my opinion.

Without Accept as a Button (which any who wasn't the asker would see regardless of a change):
Unvoted and not accepted not as buttonUpvoted and Accepted not as Button

With Accept as a Button (which only the asker (and Admin?) would see):
Unvoted and not accepted as button Upvoted and Accepted as Button

*Please excuse the awful image skills and any saturation differences.

12
  • 11
    (as a note, these changes are already live on Teams and so I'm pretty sure the answer is "No" - there's no circle around the check mark on Teams)
    – Catija Staff
    Commented Jun 22, 2022 at 18:28
  • 12
    Thanks, @Catija , I just checked on my teams account and you are correct, the tick isn't a button. It would, however, be nice if it were.
    – Thom A
    Commented Jun 22, 2022 at 18:31
  • 4
    It's only a button for the asker, though, right? :)
    – Catija Staff
    Commented Jun 22, 2022 at 18:31
  • 16
    True, it should only be a button for the asker (and perhaps an admin in Teams, as shown in that picture). I should make that clear. :)
    – Thom A
    Commented Jun 22, 2022 at 18:32
  • 8
    I say just get rid of the tick icon
    – Kevin B
    Commented Jun 22, 2022 at 18:36
  • 5
    @Larnu, thanks for providing the screenshots and the feedback around the accept tick icon. We'll revisit this after with the product design team once we've collected enough experiment data and we will share with Meta.
    – tanj92 Staff
    Commented Jun 22, 2022 at 20:25
  • 6
    Thanks, @tanj92 . It might be interesting to monitor is accept rates differ. Though it's not really a KPI users (like myself) should care about, it would be interesting to see if users that do get the buttons and are the asker accept less. I can see it being a little confusing for user whom are new to the platform more than those than aren't.
    – Thom A
    Commented Jun 22, 2022 at 20:28
  • 8
    Thanks @Larnu. We can monitor that as a secondary KPI metric. We track accepted answers internally so this should be doable.
    – tanj92 Staff
    Commented Jun 22, 2022 at 20:56
  • 10
    Oh God, please no, that would only make the "new" buttons feel even more cluttered with yet another circle... as if the new buttons weren't already detracting from the actual answer, this would steal even more attention from the main info :(
    – Prid
    Commented Jun 24, 2022 at 2:39
  • 15
    Considering that only the asker would see the tick as a button, I'm not sure I can side with you on that it would steal attention; the asker should be interested in the answers as that's why they asked the question, @Prid . That that isn't the point of the answer here; it's to denote that the inconsistency more, and that it'll make the accept icon look less actionable when the goal is for things to look more actionable. I don't think we have any chance of stopping the permanent change to the vote icons/buttons.
    – Thom A
    Commented Jun 24, 2022 at 8:00
  • 1
    @Larnu: Sorry, my mistake! Hastily jumped to conclusions, but thanks for clarifying still -- your points make sense :)
    – Prid
    Commented Jun 27, 2022 at 2:20
  • 1
    In addition, if you're going to make things look actionable, once the user has the privilege to see the vote split, the vote count should be made to look like a button, too. And I agree with others: Circular buttons look out of place on this site. Make them rectangular or, if you must, rounded rectangular with small corner radii.
    – RobH
    Commented Jun 27, 2022 at 18:04
87

Wrapping the vote buttons in an outline like this makes them look more actionable, which is an environmental clue for users, especially new ones. (These are buttons, come press them!) This should make them easier to use and more obvious, which should lead to more engagement with them.

You say you want the vote buttons to look like buttons to provide a recognizable environmental clue for users? Well, then please consider the following modest proposal (interactive demo in the code snippet below):

const imgUpNot = 'https://i.sstatic.net/U6r0J.png';
const imgUpHot = 'https://i.sstatic.net/7joO5.png';
const imgUpHov = 'https://i.sstatic.net/TicRh.png';
const imgDnNot = 'https://i.sstatic.net/KZXuh.png';
const imgDnHot = 'https://i.sstatic.net/1sZHq.png';
const imgDnHov = 'https://i.sstatic.net/1voqE.png';

$('.js-vote-up-btn')
  .click(function() {
    const el = $('img.iconArrowUpLg');
    const other = $('img.iconArrowDownLg');
    const score = $('.js-vote-count');
    score.text(parseInt(score.text()) + (el.attr('src') === imgUpHot ? -1 : (1 + (other.attr('src') === imgDnHot))));
    el.attr('src', (el.attr('src') === imgUpHot) ? imgUpNot : imgUpHot);

    $('img.iconArrowDownLg').attr('src', imgDnNot);
  })
  .mouseover(function() {
    const el = $('img.iconArrowUpLg');
    el.attr('src', (el.attr('src') === imgUpHot) ? imgUpHot : imgUpHov);
  })
  .mouseout(function() {
    const el = $('img.iconArrowUpLg');
    el.attr('src', (el.attr('src') === imgUpHot) ? imgUpHot : imgUpNot);
  });

$('.js-vote-down-btn')
  .click(function() {
    const el = $('img.iconArrowDownLg');
    const other = $('img.iconArrowUpLg');
    const score = $('.js-vote-count');
    score.text(parseInt(score.text()) + (el.attr('src') === imgDnHot ? 1 : (-1 - (other.attr('src') === imgUpHot))));
    el.attr('src', (el.attr('src') === imgDnHot) ? imgDnNot : imgDnHot);

    $('img.iconArrowUpLg').attr('src', imgUpNot);
  })
  .mouseover(function() {
    const el = $('img.iconArrowDownLg');
    el.attr('src', (el.attr('src') === imgDnHot) ? imgDnHot : imgDnHov);
  })
  .mouseout(function() {
    const el = $('img.iconArrowDownLg');
    el.attr('src', (el.attr('src') === imgDnHot) ? imgDnHot : imgDnNot);
  });
body, #content, #answers, .answer
{
   margin:  0    !important;
   padding: 0    !important;
   border:  none !important;
}
<html itemscope="" itemtype="https://schema.org/QAPage" class="html__responsive html__unpinned-leftnav" lang="en">

<body class="question-page unified-theme js-comments-menu-events">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://meta.stackoverflow.com/Content/Js/third-party/npm/@stackoverflow/stacks/dist/js/stacks.min.js?v=6cc27826a5fd"></script>
  <script src="https://meta.stackoverflow.com/Content/Js/stub.en.js?v=e700279bb0cc"></script>
  <link rel="stylesheet" type="text/css" href="https://meta.stackoverflow.com/Content/Shared/stacks.css?v=3bbf3c79def9">
  <link rel="stylesheet" type="text/css" href="https://meta.stackoverflow.com/Content/Sites/stackoverflowmeta/primary.css?v=205802c9d683">
  <div class="container">
    <div id="content">
      <div>
        <div class="inner-content clearfix">
          <div id="mainbar" role="main" aria-label="question and answers">
            <div id="answers">
              <div class="answer js-answer accepted-answer js-accepted-answer">
                <div class="post-layout">
                  <div class="votecell post-layout--left">
                    <div class="js-voting-container d-flex jc-center fd-column ai-stretch gs4 fc-black-200">
                      <button class="js-vote-up-btn flex--item s-btn s-btn__unset c-pointer " data-controller="s-tooltip" data-s-tooltip-placement="right" aria-pressed="false" aria-label="Up vote" data-selected-classes="fc-theme-primary" data-unselected-classes="" aria-describedby=""
                        title="This answer is useful">
            <img src="https://i.sstatic.net/U6r0J.png" class="svg-icon iconArrowUpLg" width="45" height="45">
        </button>
                      <div class="js-vote-count flex--item d-flex fd-column ai-center fc-black-500 fs-title c-pointer" itemprop="upvoteCount" data-value="24" role="button" tabindex="0" data-s-tooltip-placement="right" data-controller="null s-tooltip" aria-describedby="" title="View upvote and downvote totals.">
                        42
                      </div>
                      <button class="js-vote-down-btn flex--item s-btn s-btn__unset c-pointer " data-controller="s-tooltip" data-s-tooltip-placement="right" aria-pressed="false" aria-label="Down vote" data-selected-classes="fc-theme-primary" data-unselected-classes="" aria-describedby=""
                        title="This answer is not useful">
            <img src="https://i.sstatic.net/KZXuh.png" class="svg-icon iconArrowDownLg" width="45" height="45">
        </button>
                      <div class="js-accepted-answer-indicator flex--item fc-green-500 py6 mtn8" data-s-tooltip-placement="right" tabindex="0" role="note" aria-label="Accepted" data-controller="null s-tooltip" aria-describedby="" title="The question owner accepted this as the best answer 17 hours ago.">
                        <div class="ta-center">
                          <svg aria-hidden="true" class="svg-icon iconCheckmarkLg" width="36" height="36" viewBox="0 0 36 36"><path d="m6 14 8 8L30 6v8L14 30l-8-8v-8Z"></path></svg>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</body>

</html>

5
  • 32
    Oh man... this makes me miss all the beautiful custom up/down vote arrows on different StackExchange sites :'( Commented Jun 25, 2022 at 10:31
  • 1
    Am I allowed to click the up-arrow button in your snippet and the up-arrow (not a) button on the post itself? Or would that be considered voting fraud? Commented Jun 27, 2022 at 12:46
  • 7
    Well, this is just fantastic.
    – Rob Grant
    Commented Jul 5, 2022 at 8:32
  • 1
    Looks like vote breakdown has stopped working for me? Should I report this as a bug? :-D
    – 41686d6564
    Commented Jul 8, 2022 at 2:01
  • 1
    @41686d6564standsw.Palestine No, this is open-source, so you can fix it yourself! :-)
    – Cody Gray Mod
    Commented Aug 12, 2022 at 2:36
82

The styling for a focused non-checked button is a little ambiguous on dark mode compared to light mode:

Dark mode Light mode
Focused upvote button on dark mode Focused upvote button on light mode

The fill color is pretty noticeable on dark mode, which might lead some users to mistakenly think that the button is checked. This can happen by selecting the button using the Tab key or by clicking the button to undo the vote:

Not clicked First click Second click
Upvote button not focused Upvote button focused and checked Upvote button focused and unchecked
0
65

As many others have stated, the design doesn't really match the site. I would propose removing the border-radius: 1000px; and changing the padding: .8em; to a .6em, so it doesn't take up too much space.

Here is a preview of what that would look like.

enter image description here

3
  • 5
    Not bad, but they look like badges now :) I think we just need to go full ham and use thumbs instead of triangles. There ain't no misunderstanding the symbolism behind the thumbs up or thumbs down. Except the origin of it.
    – Gimby
    Commented Jun 28, 2022 at 15:55
  • 8
    wow, nice buttons, I want it added
    – Aarnihauta
    Commented Jun 30, 2022 at 8:36
  • 5
    square buttons look hideous here
    – TylerH
    Commented Jul 13, 2022 at 16:29
62

What will the HTML look like? Will it be easily revertible with custom CSS?

While I fully understand this change and applaud SO for making the site accessible, I'm probably not the only one who prefers the classic look.

I have since changed my opinion and now consider this to be just another attempt of pushing some random change onto users. The large majority of users will have no benefit from this change and there are plenty more important things on SE that can be made accessible. The vote arrows aren't one of them.

7
  • 11
    While we do not provide any support for using third party extensions, you should still be able to modify the CSS to revert back to the current styling.
    – tanj92 Staff
    Commented Jun 23, 2022 at 15:07
  • 53
    @tanj92 do you think you could possible use fewer !important declarations in CSS? They should be a last-resort
    – Phil
    Commented Jun 24, 2022 at 2:08
  • 9
    Unfortunately because the up and down vote buttons are done via SVG, it will require JavaScript to truly fix. While you can reset the path values in SVG using CSS (e.g. button.js-vote-down-btn svg.iconArrowDown path { d: path('M2 11h32L18 27 2 11Z') !important; } for the downvote arrow, the viewbox attribute on the SVG parent container of the vote buttons will need to be reset from 0 0 18 18 to 0 0 36 36 to fix (and height and width attrs will need to be set to 36, too). And CSS cannot affect HTML or SVG attribute information; JavaScript is required to do that.
    – TylerH
    Commented Jun 24, 2022 at 14:07
  • (CC @tanj92 regarding my previous comment)
    – TylerH
    Commented Jun 24, 2022 at 14:08
  • 4
    @MMM I just published a user script here stackapps.com/questions/9443/… that reverts the buttons back to something very close to what they were before.
    – TylerH
    Commented Jun 24, 2022 at 18:35
  • 2
    @TylerH I just used a scale transform to fix the icon size. Seems to work, at least visually
    – Phil
    Commented Jun 24, 2022 at 22:17
  • 6
    While this change may make the site more accessible for some people, I feel like it makes it less accessible for lots of other.
    – EvgenKo423
    Commented Jun 27, 2022 at 11:56
58

Maybe it's just me, but my brain doesn't easily recognize the "it's up-voted" part.
Now it takes effort. (not good)

enter image description here

So, please either:

  1. revert it
  2. allow us to choose
  3. or modify your change to make it intuitive/pleasant

(Pretty sure, 1. and 2. are the safest options.)

5
  • 7
    I struggle with this issue everywhere where there are only 2 options and one of them is differently colored than the other, and there's no immediate and intuitive way of telling which one is in "active" state and which one is in "dormant" state. Good catch! The new colors look better, but your proposed way is definitely easier to grasp :)
    – Prid
    Commented Jun 27, 2022 at 2:15
  • 2
    true, didn't even see that. Btw: who even makes these decisions on so/se ? has there been a poll besides this thread? Commented Jun 27, 2022 at 12:24
  • 6
    I fail to see what is better about the old version? How is the new one not clearly upvoted? Commented Jun 29, 2022 at 15:20
  • @CrisLuengo For me, the new one looks like a focused-but-not-clicked highlight
    – Izkata
    Commented Jun 29, 2022 at 15:39
  • 4
    @Izkata The only reason you don't say that about the old one is because you have been looking at those for 11+ years. You're used to the old thing and don't like change. This is understandable, but not a good argument, if the new thing indeed improves accessibility as they claim. Commented Jun 29, 2022 at 15:43
54

I have to say I find the new buttons quite ugly and have been really bothered by them since the change. They clash significantly with the rest of the UI and look like they were designed for touch/mobile instead of a desktop.

The classic arrows are superbly designed and, in my opinion, are the most iconic part of stack overflow. I associate them even more strongly with the brand than I do the actual logo. As a result, this change goes beyond a simple UI tweak for me and also impacts the part of the page I always look at first (as well as most frequently).

I strongly recommend you do not keep this new change.

53

The contrast between the arrow icon and button highlight / background on voted buttons in dark mode is too subtle

dark mode vote arrow

I have two requests...

  1. Please tone this down to match the contrast ratio of the light mode version

  2. Please please please test your design changes in dark mode. I feel like this just doesn't happen enough or at all. Anyone remember this atrocity?

    dark mode watched tag


Here's a user style that reverts this as best as I can remember the previous design looking

@-moz-document regexp("https://(meta\\.)?stackoverflow.com/questions/.*") {
  .votecell .bar-pill {
    border-width: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
  }
  
  .votecell .bar-pill.fc-black-700 {
    color: var(--black-200) !important;
  }
  
  .votecell .bar-pill .svg-icon {
    transform: scale(1.8);
  }
    
  .votecell .js-vote-count {
    font-weight: 400 !important;
  }
}
4
  • 39
    Was about to post the same thing. The contrast ratio for these buttons is very bad... fails both WCAG AAA and WCAG AA. Pretty funny since one of the goals is "meeting WCAG compliance". Commented Jun 23, 2022 at 23:27
  • 13
    Thank you for bringing this to our attention. You are correct—reviewing the designs in dark mode doesn't happen enough. I completely agree that this (both the design solution in dark mode and lack of process in dark mode testing) is not okay. I will work immediately on a solution for the arrows in dark mode and I will also work to make sure dark mode testing is added to our process is a more formalized manner.
    – Piper StaffMod
    Commented Jun 28, 2022 at 12:51
  • 2
    @Piper don't forget high-contrast mode
    – Phil
    Commented Jun 29, 2022 at 0:04
  • 1
    Well done. Hope SO restarted the A/B testing. Or now limit the results to day theme.
    – ruffin
    Commented Jun 29, 2022 at 15:29
43

(Prid's answer, posted a few minutes after this, expresses the same sentiment but with nice diagrams showing actual before/after spacing, and with more specific reasoning for why it's distracting and feels cluttered even in light mode. If that answer had existed already, I probably wouldn't have written this.)


In dark mode, my initial impression of the new buttons is that they're too big and obnoxious looking. Too large a circle becomes bright on a post I've upvoted, distracting the eye from the vote total. (See Phil's answer for a screenshot of just the buttons, but it's more apparent if you look at that big orange circle on a whole page of dark grey background with off-white text.)

The vote total is the most interesting thing, especially with the new trending-sort option that makes vote total non-monotonic as you scroll down the page, making it even more interesting to look at them. Not at these giant buttons that are more eye-catching that the number, especially on posts I've upvoted.

Maybe this is something my brain will just get used to, I don't know; I'm not a UI expert. I just know I disliked it enough initially to find a meta post about it where I could chime in my 2c.

Update a couple weeks later: still feels ugly every time I click it, or look near it, especially when clicked. Still distracting from post scores when clicked.

If there's a significant accessibility benefit, it's something I can accept as a compromise, but hopefully something can be done. I'm not a UI designer, don't have any specific suggestions for how it should look that would still achieve any accessibility goals.

The previous design is quite nice; the orange triangle for an upvote is bright but limited in area, and far enough away from the vote total. If I had an option to keep that design, I would.

Even on posts I haven't voted on, I don't like that the new circle around the vote arrow comes a lot closer to the vote-total, distracting my eye taking it in with as quick a glance.

3
  • 9
    This, they're so out there and eye catching that I stop paying attention to the content. They make me want to click them just so they're clicked while also irritating me so much it would influence how I vote. Commented Jun 24, 2022 at 1:44
  • 5
    Well, if you are into meta-gaming, you have the option to stop voting for two weeks to make the A/B test fail... :') Commented Jun 24, 2022 at 12:35
  • The more perspectives shared, the better, imo 😇⭐
    – Prid
    Commented Jun 27, 2022 at 2:11
41

No visibility of highlight in high contrast dark mode

I am in the B group with the new buttons and have been since the experiment started. I was shocked to learn that there is supposed to be highlighting on hover. Can you blame me? Here is how the buttons look:

Screenshot Description
Image of the voting buttons in high contrast dark mode. Regular, unpressed, and not hovered
Image of the voting buttons in high contrast dark mode. The background colour of the downvote button is almost imperceptibly different. With downvote hovered
Image of the voting buttons in high contrast dark mode. The background colour of the upvote button is almost imperceptibly different. With upvote hovered

If it is not very clear from the screenshots, here is an animation

Animation of the voting buttons in high contrast dark mode. The mouse hovers over the downvote and the upvote button and the background changes imperceptibly.

And if it is still not clear, the background changes from rgb(0, 0, 0) (black) to rgb(0, 12, 20) (basically still black).

I sincerely doubt this meets the WCAG compliance. Which is quite bad, considering high contrast mode whose goal is to make Stack Overflow meet or exceed WCAG AAA contrast criteria.

3
  • 7
    Also, is the cursor behind the button outline? It looks like the circle outline cuts the points finger in half when you hover in the animation.
    – Henry Ecker Mod
    Commented Jun 27, 2022 at 14:13
  • 14
    @HenryEcker I'm using inverted mouse colour, so this is normal. If the cursor is something black, the cursor is white. And if it's over something white, it's black. It's sort of "see through" so if there is white and black, it's inverting each.
    – VLAZ
    Commented Jun 27, 2022 at 14:15
  • Ah, that makes sense. Thanks for the clarification.
    – Henry Ecker Mod
    Commented Jun 27, 2022 at 14:18
41

There's one more button in the layout, the post score (which is available to all users with 1k rep), and it's now nearly impossible to tap without accidentally voting:

old vs new button side by side

(Image from Prid's answer)

A quick measure shows that the vote buttons are 40.8px square while the score is less than 26px tall.

That's a failure for WCAG 2.5.5: Target Size which requires that controls be a minimum of 44px square. (The old buttons were better, though they probably still failed this — and indeed I had problems misclicking with them too.)

Please fix this. It affects not only mobile users but also anyone with a condition that makes it hard to precisely click.

3
  • 4
    Are you suggesting further increasing the size of the whole component by another 24.4px
    – Kevin B
    Commented Jun 27, 2022 at 16:27
  • 2
    @KevinB That's only one solution. It doesn't look bad to have the numbers be 32px (except it's too wide for extreme scores). The other solution would be to move the vote breakdown somewhere else (under the post? in the timeline?). Maybe there's another solution I didn't think of.
    – Laurel
    Commented Jun 27, 2022 at 18:51
  • A year later... meta.stackexchange.com/a/389965/1306850 Commented Jun 8, 2023 at 7:43
26

It's not in the middle, is it?

Maybe because you can't put an arrow with a two pixel tip into the center. The arrow needs a redesign.

Update: this seems to happen because I browse Stack Overflow at 90% zoom in Firefox. It looks better at 100% zoom, but that's too big. (And yes, Windows as the underlying OS is already set to 100%, not 125%)

6
  • 5
    On a standard Safari 100% Zoom level, the arrow is slightly off – the circle is 40 px to the right and 38 px to the left of the arrow's middle. It's just off enough to be annoying. Commented Jun 27, 2022 at 14:37
  • 12
    Thanks a lot friend. What has been seen...
    – Gimby
    Commented Jun 28, 2022 at 15:55
  • @MisterMiyagi now I don't like it even more
    – mx0
    Commented Jun 30, 2022 at 15:37
  • It's a really annoying part, actually. I take notice of it every time I see the buttons. Commented May 22, 2023 at 16:28
  • Good thing I checked before I posted the same thing. I noticed this right away, and instantly hated it. It's probably a subliminal flaw that makes many people hate the new design "instinctively". PS: With Safari on macOS with a retina display I see this dribbble.com/shots/…
    – Gabriel R.
    Commented Jun 2, 2023 at 11:30
  • 1
    @GabrielR. Just goes to show how much even the simplest of feedback was "handled". Commented Jun 2, 2023 at 11:40
16

Wrapping the vote buttons in an outline like this makes them look more actionable, which is an environmental clue for users, especially new ones. (These are buttons, come press them!)

Except new users can't vote on questions until they have 15 reputation. It seems like if this change has any effect on new users, it will only frustrate them, because they will see the big buttons (These are buttons, come press them!), and then they will be turned away because they haven't garnered enough reputation.

Source: I have 11 reputation and it was frustrating that I couldn't downvote the redesigned buttons.

13

You've added the outlines, and kept the overall width of the button relatively constant. That preserves the overall page layout, but effectively shrinks the meaningful part of the buttons.

If my MS-paint based measurements are correct, the arrow portion of the old button had an area of 360 pixels. The arrow portion of the new button is 100 pixels. That's less than 1/3 the size it used to be.

A border may make it clearer that these are buttons, but replacing most of the button's label with whitespace makes it harder to tell what this button does. I recommend making the arrow much larger and reducing the whitespace.

Also, the button border is too thin and light-colored (on a light themed page, at least). I can see it fine when it's in the middle of my screen but when it's near the edge of the screen and I'm no longer at an ideal viewing angle, the round border completely washes out and becomes invisible. Even a center-screen button will wash out when there's sunlight on the screen. This makes the "small arrow" problem much more exaggerated. High-quality monitors with wide viewing angles may not exhibit this phenomenon, but the dinky LCD panels in many laptops don't fall in that category. Contrast and visibility looks fine in dark mode or after you've clicked an arrow and it gets a highlight. I'm only seeing this on un-clicked arrows on a light/white background.

10

Wrapping the vote buttons in an outline like this makes them look more actionable, which is an environmental clue for users, especially new ones. (These are buttons, come press them!) This should make them easier to use and more obvious, which should lead to more engagement with them.

This also makes them loud. (These are buttons, come press them!) As a low-activity (5k rep, 1k votes, 4 years, 680 days visited) Teams user, I find the voting buttons annoying – less so now I'm used to them, but still a little bit. (I haven't complained, because the UI differences help me to distinguish between the Team and Stack Overflow proper.) The decision on whether to vote should be made based on the answer, not based on whether the voting UI is visible and salient. While seeing the voting buttons has prompted me in the past, that hasn't really been a factor for me for the last two or three years. (I do still need the "questions need votes, too!" banner on occasion.) If long-time users do the majority of vote-based curation, making the voting buttons more "this is actionable!" attention-grabby might be a net UX negative.

For people who can't vote yet, this UI change risks diluting the "circled means actionable button" design language. This has already frustrated a user.

I expect making the voting buttons more salient and attention-grabbing to have a more significant effect on the voting of short answers than long answers. It'd be interesting to see whether your A/B testing reflects this.

If you want to improve WCAG compliance, why not just make the existing buttons black, for higher contrast? The bounding box for the existing buttons is already rectangular (and slightly bigger than the arrow); while the redesign does have a larger hitbox, the increased blank space means it's less visible when I blur my screen.

1
9

I'm not sure if this is intended or not, but on your own posts the buttons do nothing; the mouse pointer stays the default, there is no highlight and tooltip when hovering and clicking has no effect either. This might be confusing, especially for new users.

On Teams, where the same buttons are used, they work as normal:

enter image description here

and you get the 'You can't vote for your own post' error message when you click.

1
  • 1
    This is indeed confusing. Even now that they seem to have removed the tooltips. The problem is that the buttons are disabled but it's hard to tell (they don't really look disabled).
    – 41686d6564
    Commented Jul 8, 2022 at 2:16
6

Just an observation. I switch computers between school and home (with my same SO account). And I noticed that the A/B test is based on cookies/preferences and not on a per-account level.

Takeaway: For people that dislike the change, you can clear cookies and data for SO and there's an almost 50% chance you will fall in the other trial group (with the old buttons).

Question: Why isn't this test administered on a account level but rather on the front end?

1
  • 3
    Traditionally there are two ways to administer an experiment, one of which is on the account level and the other is based on the IP/UserAgent header combo. On the account level setup, we wouldn't be able to administer to anonymous users, even though anonymous users can't vote we can still track their vote attempt.
    – tanj92 Staff
    Commented Jul 11, 2022 at 16:30
6

On dark mode, when an answer is highlighted, the outlines around the arrows become (almost) invisible and for a second, it looks like we have tiny (arrow) buttons with a huge vertical space:

Vote buttons look tiny with no outline around them

Here's a gif:

1
  • 5
    Thanks for reporting this. When we are ready to pause the experiment this week we will be analyzing results to share with the community before determining next steps on some of the bugs reported here.
    – tanj92 Staff
    Commented Jul 11, 2022 at 16:33
3

Is this test also going to do anything with the tooltip?

1
  • 13
    There aren't any changes to the tooltip as part of this experiment.
    – tanj92 Staff
    Commented Jun 22, 2022 at 18:22
-10

Oh thank god this is just a test. These new orange buttons are TERRIBLE. Orange is the "something is wrong or needs your attention" color. GREEN is the "everything is good here" color.

Let this experiment run its course, then throw away the code, format the drive that once contained the code, then take the computers out to the parking lot and set them on fire just to be safe.

See: Upvote UI Now an Orange Circle?

2
  • 11
    They've always been orange.
    – Kevin B
    Commented Jul 8, 2022 at 15:18
  • 1
    ...at least, on Stack Overflow. They do have green(ish) vote buttons over on Biking SE. Commented Jul 12, 2022 at 15:18

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .