25

In the Stack Overflow header, the achievements icon displays an overlay for new reputation, but for other achievement notifications is simply changes color from gray to green. I have mild red-green color blindness and often have trouble determining whether the icon is green. I then either get very close to the screen or just click on it to make sure.

Could the icon display a similar overlay to the reputation notification? Something simple like a circle with the number of notifications (like an email icon on a mobile device) would work. Or, making an additional alteration to the default gray icon, especially something that slightly alters its shape, such that there are 2 distinct visual cues (shape and color) indicating a new notification.

Update:

Looks like this has been discussed before on Meta here, though it was obviously not implemented.

Current Design

Here's an animation showing the current design of the icon states:

enter image description here

Below are proposals for changing the design with mock-up examples. Note, I made these in GIMP on a 4K display so they ended up at 2x the resolution of the way the actual icons display on the site. This makes the current icon example seem more distinct than it actually is.

Proposal 1: Subscript dot

One suggestion in the previous Meta thread was adding a dot (like is used on the review icon). Here's an animation showing the proposed icon states using a dot.

enter image description here

Proposal 2: Superscript square w/count, move rep increase

Here's another idea. Move the reputation change notification to appear above the current reputation count. Use the achievement icon for earned badges and privileges. Use the red superscript square containing the number of notifications for the achievements icon, keeping the trophy color unchanged as gray. This creates a more consistent behavior and color scheme for the all the icons, since red is used for the review queue and message inbox.

enter image description here

8
  • 6
    "I have mild red-green color blindness and often have trouble determining whether the icon is green" I don't (as far as I know) have colour blindness yet I, too find it very hard to determine if it's green or not. It's not eye catching, I have to specifically look at the icon and even then it's not clear at a glance.
    – VLAZ
    Commented Nov 20, 2019 at 16:18
  • 8
    Honestly, this is basic accessibility 101... Commented Nov 20, 2019 at 16:26
  • 1
    I don't specifically support the proposed design, but I do agree with the fact that the there needs to be a better visual indicator. Commented Nov 21, 2019 at 5:35
  • @Nisarg I've added a 2nd proposed design, would be interested in any other designs anyone can come up with as well.
    – Fiver
    Commented Nov 21, 2019 at 13:59
  • Maybe add the proposals as answers? Then people could vote up/down on the individual proposals as well as any additional ones as they come in. Commented Nov 21, 2019 at 14:03
  • 1
    I like the first proposal. Minimal change, since it's still green but with a little dot. It also stays true to the original - it's not very intrusive and only mildly draws attention. The second proposal looks too much like the notifications and there is already the red dot on the review button that does it as well.
    – VLAZ
    Commented Nov 21, 2019 at 17:48
  • 1
    @HereticMonkey I've added the proposals as answers
    – Fiver
    Commented Nov 21, 2019 at 18:10
  • 1
    Yes I think the dot proposal should be implemented the red box is too obtrusive
    – user7437719
    Commented Nov 21, 2019 at 19:10

2 Answers 2

7

Proposal 1: Subscript dot

One suggestion in the previous Meta thread was adding a dot (like is used on the review icon). Here's an animation showing the proposed icon states using a dot.

enter image description here

1

Proposal 2: Superscript square w/count, move rep increase

Here's another idea. Move the reputation change notification to appear above the current reputation count. Use the achievement icon for earned badges and privileges. Use the red superscript square containing the number of notifications for the achievements icon, keeping the trophy color unchanged as gray. This creates a more consistent behavior and color scheme for the all the icons, since red is used for the review queue and message inbox.

enter image description here

You must log in to answer this question.

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