18

A very minor 'bug' (in the sense that it slightly bothers me, not as in a glitch or mistake):

The icon in front of the total number of votes cast is the same as the one for upvotes.
Can this be turned into an icon with both an upward (▲) and downward pointing triangle (▼)?

I noticed it's a vector path, so I quickly wrote an alternative code, <path d="M 10 1 l 4 4 h -8 m 0 2 h 8 l -4 4"></path>, which gives:

<svg aria-hidden="true" class="svg-icon iconArrowUpDown"  
width="20" height="20" viewBox="0 0 20 20">
<path d="M 10 1 l 4 4 h -8 m 0 2 h 8 l -4 4"></path>
</svg>

As a user in the comments points out, this 'issue' was brought up years ago on Stack Overflow Meta, here, where two other solutions are given (of which one seems to have become obsolete).

4
  • 9
    I wonder why this is being downvoted, since this was previously asked on Meta Stack Overflow and was heavily upvoted there. A then-employee marked it as under review in 2015, but nothing has happened since. – Sonic the Anonymous Hedgehog May 22 at 17:56
  • @SonictheAnonymousHedgehog Probably by users who don't think this is in any way constructive: and I realize it's really low-priority - I get that aspect - but reckoned every little helps towards improved UX. – Joachim May 22 at 18:40
  • 1
    &#10606; &UpEquilibrium; or ⇅ &#8645; &UpArrowDownArrow; or ⚒ &#9874; hammer and pick maybe two separate symbols: ␆␕ using ␆ &#9222;symbol for acknowledge and ␕ &#9237; symbol for negative acknowledge – Rob May 22 at 19:25
  • 1
    I'd feel most for ⇅ UpArrowDownArrow @Rob. – Luuklag May 25 at 12:07
13

The up triangle certainly sends a confusing message because the vote count includes both downvotes and upvotes. There is also no need for creating new icons, SE's own Stacks design framework already has an up-and-down arrow icon to replace the current one with (see the source repo):

<svg aria-hidden="true" class="svg-icon iconArrowUpDown" width="18" height="18" viewBox="0 0 18 18">
  <path d="m9 1 7 7H2l7-7zm0 16 7-7H2l7 7z"/>
</svg>

Here is how it looks like after replacing the original icon on the profile page:

stats widget on the profile page

Give it 6 to 8 weeks to be done. In the meantime, you can use this lightweight snippet to replace the icon:

(() => {
    const SVG_NS = 'http://www.w3.org/2000/svg';
    const ICON_SEL = "div[title*='votes cast'] svg";

    const svg = document.createElementNS(SVG_NS, 'svg');
    svg.classList.add('svg-icon', 'iconArrowUpDown');
    svg.setAttribute('width', '18');
    svg.setAttribute('height', '18');
    svg.setAttribute('viewBox', '0 0 18 18');
    svg.setAttribute('aria-hidden', 'true');

    const path = document.createElementNS(SVG_NS, 'path');
    path.setAttribute('d', 'm9 1 7 7H2l7-7zm0 16 7-7H2l7 7z');

    svg.append(path);

    const icon = document.querySelector(ICON_SEL);
    if (!icon) return;

    icon.replaceWith(svg);
})();

Transpiled to ES5 and minified version:

"use strict";!function(){var t="http://www.w3.org/2000/svg",e=document.createElementNS(t,"svg");e.classList.add("svg-icon","iconArrowUpDown"),e.setAttribute("width","18"),e.setAttribute("height","18"),e.setAttribute("viewBox","0 0 18 18"),e.setAttribute("aria-hidden","true");t=document.createElementNS(t,"path");t.setAttribute("d","m9 1 7 7H2l7-7zm0 16 7-7H2l7 7z"),e.append(t);t=document.querySelector("div[title*='votes cast'] svg");t&&t.replaceWith(e)}();

You must log in to answer this question.

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