New Staff and Mod Labels on site metas and Meta Stack Exchange

Question

Update: As can be seen on this post and elsewhere on the site, the styling for the mod/ staff labels has been modified, and hopefully will not pop out and be as overwhelming as the original colors:

Big thanks to Aaron Shekey and Ben Kelly for finding a great solution here.

Original announcement below.

---

In response to the request to Add an immediately visible indication that a user is a staff member or an employee of SE, we recently announced a new feature on per-site metas and Meta Stack Exchange (which is live as of now):

1. Mod diamonds are replaced by the new Mod label (which includes a diamond). These labels will all start out in blue (as shown in the screenshots here), but could change color in the future to match color themes on sites if/when these are modified.
2. Staff labels now follow the user's display name anywhere on the site where the name is shown. This includes question listings, user profile, author/modified boxes on questions and answers, comments, timeline/user history, post notices, (and many more places). The label will be Stack Overflow Orange on all sites.

Here is how it will look in the Users listing:

And here is a sample from some comments:

The new mod labels will not yet be included on Main sites (or anywhere on Chat or the main StackExchange.com site) where for the time being, the good old unaddorned mod diamond will live on. And there are no plans to show staff labels on Main sites aside from the profile page.

I am reposting this announcement here to serve as a collection point for feedback on this in general, as well as reports of positioning issues.

As the labels are being laid out with a new component (that is more complicated than the Unicode ♦), and as we are right now in the process of making all of our pages fully responsive, it has been difficult to get the positioning of the labels (in terms of margin between the display name, vertical positioning, padding, etc) to look "just right" in every instance across the site.

Please post any related issues as answers below. Some things may be addressable now, and some may have to wait for the related page to have its full responsive conversion completed.

Answer 1

feature-request status-declined

The words "Mod" and "Staff" are fine on the user card. However, the badges are too much of a distraction in the comments, especially when there are many comments from mods or employees.

I suggest reducing it to just symbols (as before) next to usernames in the comments similar to what's demonstrated in this answer:

...or any other alternatives. My personal preference is either the Stack Overflow logo shown above or the Stack Exchange logo as in the SOX userscript, but I don't mind any other symbols or icons suggested by the community, like in this answer, for example.

Additionally, if the symbol is added next to "Staff" in the user card (as is the case with "Mod"), it will be immediately clear to someone looking at the comments what the symbol represents.

Answer 2

Some things to call out:

• status-completed This is jarring to look at. Suddenly now my attention is taken up by the fact that a mod or staff member (or mysteriously both) has provided an interaction with this post.

  Just look at this. Nothing quite gets my attention like suddenly blue/orange boxes.

  

  Historically, this hasn't even really mattered to the degree that we have to highlight it to draw out that much attention.

• status-declined Here - right here was some perfectly suitable and conventional feedback on such markers. Making them icons or something easy to identify that wasn't obtrusive or wasn't so doggone in-your-face would have been preferable. Would've been nice to see that followed. Better yet, it could've been applied everywhere as opposed to just the Meta sites.

• Would've been nice to have a period of bake-in before this was implemented, y'know, something we the community could've gathered together and discussed and really talked about what we wanted, and what the goals of this were...

Answer 3

feature-request status-completed

Feedback

The icons pop out too much, with the style they have now.

The colours are much too rich. They only associate with "answered question" icons as shown with the red outline in the following screenshot:

Given they contain text and are used in text areas, they should blend with other text elements such as tags as shown with the blue outline.

That means making the colours lighter.

Answer 4

Update 2021-08-12

The badges have since been updated to be much less distracting in the meantime, so this script doesn't serve much of a purpose anymore. If you're still a fan, I've made sure the script still works, but know that the Stack Exchange official style is now much improved over the initial release.

---

Original Post

In true Stack Exchange community fashion, here's a (very quick) userscript to tweak the appearance of the new badges. Note that this doesn't revert the change, but just tweaks it to be a bit less distracting.

Based on a comment by @Adám above, I played with inverting the badge color and making the background transparent:

I find this design to be still distinctive yet less loud than the filled-in version, which makes them less distracting overall.

Here's the script. It runs on all Stack Exchange Q&A sites, but note that the badges are only currently live on per-site metas. Feel free to edit/ improve it locally to suit your own needs, without limitation.

// ==UserScript==
// @name         Invert Staff & Mod Label Colors
// @description  Inverts the color scheme of the Staff & Moderator labels on Stack Exchange
// @homepage     https://meta.stackexchange.com/a/367942
// @author       zcoop98
// @version      0.2
// @grant        GM_addStyle
// @run-at       document-start
//
// @include      https://*stackoverflow.com/*
// @include      https://*serverfault.com/*
// @include      https://*superuser.com/*
// @include      https://*askubuntu.com/*
// @include      https://*mathoverflow.net/*
// @include      https://stackapps.com/*
// @include      https://*.stackexchange.com/*
//
// @exclude      https://data.stackexchange.com/*
// @exclude      https://contests.stackoverflow.com/*
// ==/UserScript==

GM_addStyle(`
  .s-badge__staff {
    border-color: var(--orange-400) !important;
    background-color: transparent !important;
    color: var(--orange-400) !important;
  }
  .s-badge__moderator {
    border-color: var(--theme-secondary-color) !important;
    background-color: transparent !important;
    color: var(--theme-secondary-color) !important;
  }
`);

I know that this doesn't fix any other issues brought up here (eg. contrast, placement, size, etc.), but I presume that Stack Exchange itself will address those, and hope that someone else may find this useful in the meantime anyway.

As a final note, I want to mention that no disrespect whatsoever is intended to the Stack designers who engineered this change, I know this change took effort and careful consideration to create; Meta folk are just fickle about design changes.

---

If you'd instead prefer the old pointy (but smaller) diamond character instead of the new SVG, add the following stanza to the end of the script (this requires a little more work than simply changing the SVG color):

.s-badge__moderator:before,
.s-badge__moderator.s-badge__sm:before,
.s-badge__moderator.s-badge__xs:before {
  background-image: none !important;
  background-color: transparent !important;
  mask-size: unset !important;
  -webkit-mask-size: unset !important;
  mask: none !important;
  -webkit-mask: none !important;
  content: "♦" !important;
  width: unset !important;
  height: unset !important;
  margin: 0 2px 0 0 !important;
}

This will yield the following:

Comments/ Posts	Profile Page

---

In the meantime, I've uploaded the diamond character (♦) version of this script to GitHub.

Answer 5

feature-request status-declined

Yaakov: There is a new help center page for staff. However, since the redesign of the user profile page has moved the clickable label for leagues to a different position on the page, we will not be linking the staff label to the help page (as this would now be the only label in that section, and the moderator label is not linked anywhere).

Users will try to click on the labels, especially since the other label in a profile is clickable and leads to the reputation leagues:

The moderator label could link to the Help Center article Who are the site moderators, and what is their role here?; I'm not sure about the staff label (this post does not cover every staff member) but suggestions are welcome in the comments :)

Answer 6

status-completed

The diamond next to Community’s name has always been confusing, but now it seems a little more so than before: why should it have the same “mod” label as the people who moderate our sites? It would make sense if it was labeled as the bot that it is, perhaps similar to how Discord is:

In short: Community should keep the diamond but be labeled “bot” instead.

Answer 7

status-completed

Is it intentional that the new icon cuts/rounds off the top and bottom tips of the diamond? Personally, I liked the sharply defined points. The degree of cutting off varies from place to place.

Old:

New Communities list:

Username on the profile page (much sharper points!):

In a comment:

(All pictures are of Tink, for consistency)

Answer 8

feature-request status-declined

Related to this request, I suggest to "unite" the Staff and Mod labels when a user is both a staff member and a moderator.

Before:

After:

This is easily seen as "Staff member who is also a moderator", and can be applied anywhere. To achieve that all I did was adding the s-badge__moderator class to the Staff span element.

Answer 9

bug status-completed

Quick feedback: not a big fan. I feel like these are inconsistent with the overall style of comments/badges/tags. The new labels are overtly styled and simply jump out of the screen.

In any case, here's what looks like a styling bug in profile pages (link) when hovering the mouse over the communities listed in the "Communities" sidebar:

Answer 10

feature-request status-completed

The "Mod" icon has the classic "Moderator" tooltip/hover text, which was also visible when hovering over the ordinary diamonds before this change (or as they appear now on main sites). The new "Staff" icon doesn't have a tooltip. Could you add a tooltip to this icon with some fitting text? For example, "Stack Overflow Employee" would do nicely.

If you were feeling fancy, you could put the employee's job title (if available) there instead. "(Position) at Stack Overflow" or something similar.

Answer 11

status-completed

This is what the moderator tab on a certain user's profile says right now:

Perhaps it's time to drop the '(moderator)'?

Answer 12

bug status-completed

On the moderator history page, the labels underflow the Talkative / Outspoken badge indicators:

Perhaps the easiest solution is not to show those indicators at all; it's not like they are really significant...

Answer 13

bug status-completed

The new muted blue of the Mod marker makes it difficult to see in the user card for questions and self-answers:

I'd suggest maybe adding a darker blue border to the marker box, or something similar to demarcate them from the user box

Answer 14

feature-request status-declined

Can we change the blue and orange colour used on the mod and staff button to use stacks colour: theme-secondary-300 and orange-300?

This makes it a little less bright and in your face, and more in line with the more neutral background of the rest of the sites.

It would then look like this:

Answer 15

bug accessibility status-deferred

The new Staff badge text colors fall short of accessibility standards and are difficult to read

The background color for the Staff badges only has a contrast ratio of 2.63:1 with the text "Staff". This falls short of the WCAG AAA accessibility standard for normal text, which requires a contrast ratio of 7:1. Also, the small badges that appear on comments and home pages are very difficult for me to read without zooming in.

While the AA standard only requires a ratio of 4.5:1, I'd highly suggest that they conform to the AAA standard, because the badges that show in some places (e.g. comments, home pages, etc.) are smaller than normal text.

Answer 16

bug status-norepro

If a marker appears as the top line in a comment, the top side of the marker is cut off

If a moderator or staff marker appears in a comment, it only appears correctly if it's the second line in the comment or later:

But if it's the first line in a comment, the top sides are cut off slightly:

Can this please be fixed?

Answer 17

bug status-completed

The staff label isn't applied to all revision entry types

Weird little thing I noticed, but there's something of an inconsistency to where the staff label appears on non-revision post history entries. As far as I can tell, it happens both on the /revisions page and the \timeline.

Examples:

Unprotection

Bounties

Closing

Locking, deletion and undeletion

I don't know whether there are other actions which also don't get the staff label, outside of bounties these aren't trivially tracked down.

(And I'll leave it link only as it's only a gratuitous dupe of the second example, but this makes certain timelines look silly.)

Answer 18

status-completed

The spacing between the indicators and the user names is different in user cards and in the comment sections:

Makes it look like the user card is slightly broken when seen in proximity like that.

Answer 19

bug status-completed

In comments, the Mod/Staff labels are not aligned with the box indicating that Yaakov is the OP of this question.

See how the red line in the following image is perfectly on top of the box surrounding his name, but intersects with the mod badge:

This is because they are not equal in height. The post.owner item is 20.2 pixels, while the mod label is 20.5 pixels according to Firefox's inspector tools.

Answer 20

status-declined

I understand why you are hesitant to ship a simple orange box, as suggested by https://meta.stackexchange.com/a/367900/1044379.

But this is unacceptably gaudy. Those big blue and orange boxes are literally all that I can see. On some site metas, the huge blue Mod boxes clash very weirdly with the color scheme. We do not need to draw attention to certain questions just because they have recent changes by moderators. Particularly when that moderator is Community, who, for all we know, is just bumping an old question.

Here is a reasonable middle ground: Use a blue hollow box (like mentioned in this answer with an "M" for moderators and an orange one with "S" for staff. While these boxes are not self-explanatory, they do not look like weird symbols that failed to load, and they will attract enough attemtnion for people to click the link to the profile and see a significantly larger indicator that a user is staff or a moderator, thereby resolving concerns mentioned by Catija in this conversation.

On a related note, having both the diamond and the "Mod" marker is a redundancy. This shows up in places where screen real estate is tight, so it is important to shorten things as much as possible. The bigger the new blue box, the more attention it draws. Either the diamond or the "mod" (or abbreviated m) must be dropped.

Answer 21

status-declined

If the Mod and Staff badges were reduced to 2/3 of their current size that might resolve half of the complaints here. It's a quick tweak, before working on the "saturation" and resulting WCAG AAA accessibility contrast. Note: The top grid image uses pointy diamond.

Example appearance:

Answer 22

bug status-completed

The "Staff" badge is missing in the "Closed" section of the post notice.
For example: in the below screenshot, in a post's notice Catija has Mod badge only, but in the same post's comment section Catija has Mod and Staff badges. Seems this is not consistent on the same page.

Answer 23

bug status-completed

In mod's profile (who is also a staff), double staff appears. (Mobile view)

Answer 24

status-completed

The labels need more margin in the ♦ moderator flag dashboard; it covers/touches letters with descenders on the previous line, like the q in this example:

_{(screenshot from Safari, iOS 14.6 an iPhone 11. In case you're wondering: yes, it's a flag on this very question)}

Answer 25

bug status-completed

Nicolas was kind enough to fix a typo in one of my posts, but on /revisions the new badges don't align properly and cover part of his name:

Answer 26

Consider the fact that the label string needs to be translated at the international site.
Because there is no suitable Japanese that represents the abbreviated "mod", more character widths are required.

Mod
モデレーター

Answer 27

status-declined

The Staff badge is pushed to the next line when the username is a bit long

Actually, when the username is even longer, both badges are pushed to the next line:

Is this a bug or intentional behavior?

Answer 28

feature-request status-declined

Remove the mod card on MSE and leave them as diamonds.

There are similar requests elsewhere, but I'm limiting this to just MSE. My reasoning is that MSE is different from other Metas. On any other Meta, the Metas work for/with the mods. It's useful to see mod interactions highlighted in that regard.

On MSE... not so much. Mods here aren't the reason to post. I mean, the MSE mods say useful things and all, but the Staff interaction is what people are after here. I'm not as concerned with what, say, Glorfindel posts, because as far as SE policy is concerned, we're all in the same boat.

Answer 29

feature-request status-completed

Don't show mod labels in network account lists

Mod labels are shown in a user's (network) account list on Meta sites:

(and as @41686d6564 mentions, the Communities list)

but not on main site profiles, where the diamond nicely 'blends' and almost looks like it's part of the site name:

The new mod label indicates (to me) some degree of importance; 'pay attention to this, it's written by somebody who knows things'. Since I'm just a regular on Meta Stack Overflow, I have no additional powers or authority there; it feels a bit out of place.

Answer 30

status-review

When the line above the line containing the staff/mod badge contains a hyperlink, they underscore of the hyperlink (almost) collides with the staff/mod badge:

This could be fixed by making the height of the badge a tad smaller, as to be consistent with the OP indicator on comments.