Option to remove fuzzy outline and restore clarity to the counts on new top bar

Question

I don't normally care much about these things, but the new fuzzy outlines (and related changes) on the numbers of unread messages / rep delta really hit my eyes wrong (and my eyes are already challenged enough, thanks). It's not a "who moved my cheese" thing, it's an "it's much harder for me to read it now" thing.

For those who, like me, have a tendency toward double-vision or focus issues, please consider an option for plain numbers without the outline (for these and for other places you might be considering adding such an effect). Or just remove the fuzzy outline entirely. (Is it really an improvement for people with "normal" vision in some way?) Specifically, an option that:

• Removes the fuzzy outline - Done!
• Restores the original slightly-larger size - Done? Looks like it's 11px now, and was 11px in February's stacks.css, so...maybe hadn't changed? The screenshots seem like it had, but...
• Removes the bolder font style - Done? Similarly looks like it's 600 now and was 600 in February's stacks.css (but again, seemed to have changed)
• Restores the larger margins (and makes them consistent again) - Still needs doing

New harder-to-read numbers - light:

Dark:

---

I should note that it's not just fuzziness, though that was what I focused on (no pun!) in my original post. A couple of pictures from Justin's post below draw a clear contrast (er, again, no pun):

Old design:

New design:

I'm not a designer, but:

• The numbers are actually a bit smaller
• They're a bit bolder (font, not just color), making them (for me) harder to read
• The margins are much more narrow, defeating the contrast of the number with what's behind it, again making the number harder to read
• The top/bottom margins are inconsistent
• The numbers are crowded by the more-circular border radius

Answer 1

I see only disadvantages to this design. The semi-transparent border only takes up space, making the badge look larger while providing even less room for the content. The numbers are really squished into the small area, they should have at least some margin to the borders. The transparency also has quite different visual effect on the white and black versions of the top bar, making it hard to create a version that works on both.

So the numbers are harder to read because they're squished into a small core badge, and the icons are also harder to see because the semi-transparent part overlays a larger part of them. This combines the disadvantages of smaller and larger badges while providing none of the benefits of either.

It also just looks plain weird to me, I've never seen a badge/notification design like this. The old version was much better.

On a black top bar the red outer layer is almost invisible, this makes the design look extremely inconsistent if you have both red and green notifications:

Answer 2

Yes, it would be great if these changes could be reverted back to the previous design. The reputation text appears smaller than before (probably because it's crammed into that capsule layout), and makes it harder to see. I've got eye problems, and this just made it worse.

Also, the red outer layer for the inbox notification indicator is pointless if the top bar is in dark mode, because it's practically invisible. Please consider changing it back.

---

Previous design for reference:

New design:

---

Also, note how the highlight(?) (when you hover over the review queue icon) cuts a small part of the trans[lucent]/[parent] border (on the right side) of the reputation indicator:

This is not the case on the left side (when you hover over the inbox notification icon).

Answer 3

I'm not getting any younger, and after years of working in front of a PC screen my eyesight isn't getting any better.

Personally I think the fuzzy edges make the icons harder on the eyes.

Answer 4

It looks somewhat better if you add this custom stylesheet:

.s-activity-indicator {
  box-shadow: none
}

.js-achievements-button .s-activity-indicator {
  border-radius: 3px;
  padding: 4px;
  height: auto;
  top: 4px !important;
}

.js-inbox-button .s-activity-indicator {
  height: 18px;
  width: 18px;
  padding: 4px;
  top: 4px !important;
  text-align: center;
}

I'm not too proficient in CSS so tips are welcome.

Answer 5

We've made some changes to the design and removed the box shadow (referenced here as "fuzzy outline") around the notification indicators.

We were originally using our unmodified activity indicator component for these indicators. We use these indicators a bit across the site to designate things like "new activity", but this is the first place we're using them over text and with numbers inside. We reviewed the context in which these are used and came to an agreement that the semi-transparent box shadow makes the layout a bit busy/distracting/confusing.

We went back to the old design a bit, which handled this context better. Technically, we didn't remove the box shadows, but made them the same color as the background they sit on. This gives the indicators a bit of extra visual weight as they "carve out" the area around them.

We're currently reviewing other improvements to this component, such as possibly increasing the padding, to improve the user experience.