Staff notices positioning is ambiguous

I’m just getting around to using staff notices, but have realized that they are confusing as to which post they are referring to. I think it’s very hard to tell if it relates to the post above it or below it.

Wouldn’t it make more sense to have it below the divider that separates posts like this?

3 Likes

I think this is partially down to the theme you’re using? The rounded corners at the bottom of the notice mean it feels kinda detached from the post below. I think it feels better here on Meta with the default theme? (I added some notices to this topic as an example)

3 Likes

Thanks David, but I tried with no theme, and it’s still not clear. The example you put here are obvious because one is the first post and the other has the topic map separating it, once you get beyond there is no telling which way it goes if you’re not familiar with it. Try this, remove those notices, reply to me here and add a notice to my reply.

I want in on the action :slight_smile:

edit: It looks correct to me

2 Likes

If anything, the padding is a bit too little:
image

If you remove the notice above David’s post I feel it’s very easy to confuse which post it refers to. I showed this feature to my mods today and their immediate reaction was that it’s not clear at all.

1 Like

(I came across this old post while revisiting some other Staff notice confusion…)

I’ve always thought the placement of Staff Notices was potentially ambiguous. Since themes can handle things like colors, borders, and dividers differently, it’s probably hard to solve that way.

An alternative that can be applied globally to all post notices today is some custom CSS to insert a Unicode arrow, either before the avatar:

image

CSS: before avatar
.post-notice::before {
  content: '🡇';
}

(Or perhaps more properly):

.post-notice::before {
  content: " \1F847";
}

…or before the text content:

image

CSS: before text
.post-notice p::before {
  content: " \1F847";
  margin-right: .5rem;
}

Ooo — here’s a trick to change the color:

image

CSS: change color
.post-notice p::before {
  content: " \1F847\fe0e";
  color: yellow;
  margin-right: .5rem;
}

(Appending \fe0e to any Unicode character renders a text version that accepts color. Reference.)

And I decided that the downward arrow doesn’t look right for a notice on the main topic, since it’s more obviously leading the topic. This CSS replaces the arrow with a bullet just for the first post:

image

CSS: different for main topic
#post_1 .post-notice p::before {
  content: " \29BF\fe0e";
  color: yellow;
  margin-right: .5rem;
}
1 Like

Great idea Todd! I’m glad I’m not the only crazy one :wink:

I had some issues with that down arrow displaying so I modified it slightly, also cleaned it up a bit and went with the tertiary color for theme compatibility.

.post-notice p::before {
  content: "\2B07\FE0E";
  color: var(--tertiary);
  margin-right: .5rem;
}

#post_1 .post-notice p::before {
  content: "\29BF\FE0E";
}
2 Likes

Because of how posts are ordered in a topic and when I scroll, to me it feels natural and logical to expect that it refers to the post below. the arrow is a nice touch and a good solution for more indication. You can also use a bit of a reference in the staff notice. :slight_smile:

2 Likes

No offense, but that seems like a “I know it and I’m used to it, so it feels self-evident to me”. I would argue the staff notice can obviously only have been put in place AFTER the post has been published. So, it feels natural to expect the staff notice to be after it, if things go “in order”.

Personally, I think @davidkingham definitely has a point: It is ambiguous. It would be better if it could appear clearer to anyone at first sight. Which isn’t really the case, here (If it is wanted at the top of posts, the staff notice below the name of the poster would make it extra clear, for example. That may be technically more complicated, or disliked for other reasons).

For some themes (like the Meta Branded theme I’m using right now), the staff notice is below the line seperating posts, so it is clear where the notice is referring to.
Perhaps other themes could adopt this as well?

1 Like

that could very well be. :thinking:

I think what I was trying to say (but poorly) is that it seems logical when I scroll a topic that it is referring to the post below, despite the logical time order of posts.

1 Like