I was on chat and I hovered over a message (which got flagged) and I saw this:

enter image description here

Whaaaat??? It has four stars? It took me a bit to realize that this meant 4 flags, not 4 stars.

Having the flag right next to the star also has the critical problem that it is very easy to flag a message instead of starring it.

I have a couple of solution ideas:

One is to simply add a couple of | or vertical lines between the items to separate them.

Example mockup:

enter image description here

While this may work, I think the best idea is to take out the spam flag from the hover buttons, as it isn't a function used on a daily-basis (I've only ever used it once) and is accidentally pressed numerous times. Flagging can still be done through the popup when pressing the arrow on the left of the message when hovering. The number of flags can be shown on the left instead, providing a crystal-clear distinction.

Alternatively as suggested by @Quill, the text could be red (I'm using #DA5759):

enter image description here

This doesn't solve the flagging/starring issue however

  • 2
    Or make the flag count text color red to suit the flag – Quill Mar 13 '16 at 4:25
  • Vertical bars don't really fit with the Stack Exchange theme. Although, that's really more of an opinion. – Zach Gates Mar 13 '16 at 4:39
  • I didn't even know we can see the flags count. One never stops learning! :) – Shadow Wizard is Vaccinating Mar 13 '16 at 7:21
  • What's this UI? I've never seen this before... – Zizouz212 Mar 13 '16 at 16:22
  • 1
    I agree, I inadvertantly flagged a message. I feel incredibly bad that this wasted a moderators time (or other high rep user). These options hould not be so close by – Rohan Jhunjhunwala Aug 26 '16 at 3:13

Instead, mirror the flag-count to the lefthand side of the flag icon, and the star-count to the left of the star icon.

The interface remains visually minimalistic while conveying its message more clearly. It would be mentally read as "4 flags", or for the following image, "4 flags and 4 stars"; capitalizing on the misconception that Downgoat had.

  • Better yet, also move the star count to the other side, leaving all counts adjacent to only one possible symbol. – Nathan Tuggy Mar 13 '16 at 4:54
  • 1
    @NathanTuggy: I disagree; that would make the design inconsistent. – Zach Gates Mar 13 '16 at 5:10
  • Do you mean that you think it would make it less clear, or just uglier? I don't see any way it could make it less clear, unless someone thought there was a count of replies for some reason. – Nathan Tuggy Mar 13 '16 at 5:23
  • @NathanTuggy: I think that would be clear, but in regard to the UX, uglier. – Zach Gates Mar 13 '16 at 5:25
  • 1
    The star count currently is to the right of the star icon. Moving it to the left, doesn't solve the problem at all, because then someone might mistake the star count for the flag count. Of the suggestions so far, I definitely prefer Quill's solution. – Martin Ender Mar 13 '16 at 11:40
  • @MartinBüttner: I meant to put the star count on the side opposite the flag, and the flag count on the side opposite the star. Apparently Zach's mockup was misleading, but your note about the current state shows why my suggestion is essential: the current position, with a number positioned between star and flag, is too confusing. – Nathan Tuggy Mar 13 '16 at 19:12

You must log in to answer this question.

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