22

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

Improve this question
5
  • 2
    Or make the flag count text color red to suit the flag
    – Quill
    Commented Mar 13, 2016 at 4:25
  • Vertical bars don't really fit with the Stack Exchange theme. Although, that's really more of an opinion.
    – Zach Gates
    Commented Mar 13, 2016 at 4:39
  • I didn't even know we can see the flags count. One never stops learning! :)
    – Shadow Wizard
    Commented Mar 13, 2016 at 7:21
  • What's this UI? I've never seen this before...
    – Zizouz212
    Commented Mar 13, 2016 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
    Commented Aug 26, 2016 at 3:13

1 Answer 1

Reset to default
14
+50

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.

Improve this answer
6
  • Better yet, also move the star count to the other side, leaving all counts adjacent to only one possible symbol.
    – Nathan Tuggy
    Commented Mar 13, 2016 at 4:54
  • 1
    @NathanTuggy: I disagree; that would make the design inconsistent.
    – Zach Gates
    Commented Mar 13, 2016 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
    Commented Mar 13, 2016 at 5:23
  • @NathanTuggy: I think that would be clear, but in regard to the UX, uglier.
    – Zach Gates
    Commented Mar 13, 2016 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
    Commented Mar 13, 2016 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
    Commented Mar 13, 2016 at 19:12

You must log in to answer this question.

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