Post icons and usability

Continued from Are you flagging? - #3 by bluedreamer

When we first moved to Discourse, we customised them to a darker shade of grey. I’m not sure when this was lost, but the issues was raised in a staff discussion a couple of months ago. I’ll add your feedback, and see if we can’t get it fixed.

(BTW, there are keyboard shortcuts for these actions, too - also handy if you have trouble hitting a small target with a mouse.)

1 Like

I darkened them a bit. What do you all think?

3 Likes

It’s a definite improvement.

They seem to have a blu-ish tint to them, but I like them.

Feel free to suggest a better color. I played with a whole bunch of random ones, then got bored. (Color isn’t my thing. :slight_smile: )

1 Like

I know we felt that many of the default Discourse Flags were gratuitous to the point of being relatively meaningless and of no value.

But I’m wondering if this should be revisited.

In particular might enabling the “Read Guidelines” Badge help increase awareness and encourage more to read them?

I’m on the fence with the “First Flag” Badge.
On one hand it might improve awareness and encourage others to use it.
On the other, some might not want the fact that they Flagged discoverable, though no link to the post that was Flagged is shown so maybe not a concern.
Also, First Flag is not revocable and is awarded for using the Flag feature regardless of it’s appropriateness.

1 Like

Definitely more visible. My only other thought, was would it be worth considering a background, or outline for them so they stand out more? That might spoil the general aesthetic though. /randommusings

The thought behind the Discourse decision to lighten the icons is a bit more than looks only.
The Like heart icon used to be pink. But that was felt to be “clown vomit” and made grey. (i.e. a looks only decision)

But reducing the contrast of the icons is more.
The idea is that for a forum, discussion is the main and most important action.

To that end, the Reply buttons were made more prominent, and the rest lightened.

The theory being that seeing a more visible Reply works on a subconscious level to help discussions along.
I’m not a psychologist, so I don’t know, maybe it does I guess.

I do know that my vision isn’t all it could be and if it weren’t for the fact that I already know those icons are there with such poor contrast I would be lucky to ever notice them.

As for @cpradio noticing a “slight blue” at 8A969D it is, but I certainly can’t discern such subtle tinting

1 Like

That’s a bit better, more noticable.

Ideally the flags would be annotated with the action in plain text to make them less “mystery meat”, but that may be a bit much to ask!

Hmm… that isn’t too bad, but once expanded, it gets pretty lengthy

That was using:

.actions button.like:after { margin-left: .5em, content: "Like" }
.actions button[data-action="share"]:after { margin-left: .5em, content: "Share" }
.actions button[data-action="flag"]:after { margin-left: .5em, content: "Flag" }
.actions button[data-action="edit"]:after { margin-left: .5em, content: "Edit" }

Messing with it, it is sort of distracting seeing it like that on every post… /shrug.

Much better, but the gray of the text needs to match the gray of the icon.

methinks that might be your monitor’s color balance ?

1 Like

I tried to go for something other than plain gray.

Not sure what text you mean.

I must have overlooked or missed that (sorry cpradio).

The color of the string “n Likes” should match the color of the heart icon for continuity.

2 Likes

I think the visual difference is because of two things

First, because the icons are “blockier” than the thinner text, there is a bit of an optical illusion that makes the text look lighter. Making the text bold might help some. but do we really want bold text there?

Secondly, and more importantly if not entirely the reason, @cpradio 's post contains a screen capture image of the text.

To improve image quality, some apps do what I think is called aliasing, or smoothing, I don’t really know the correct term.
But basically it blurs the edges in effect bringing some of the light into the dark, and some of the dark into the light.

This effect in combination with the fact that the text is thinner anyway even further reduces the amount of the darkness the text has making the differences in the comparison between the icon and the text seem greater.

I think you and @ronpat are talking about different text.

My understanding is that Ron’s referring to the “x likes” text that currently appears next to the icons.

2 Likes

Klutz alert Just spent a happy few moments repeatedly clicking an image, whilst trying to like a post…

3 Likes

You are correct. That is because .highlight-action is taking higher precedence than the rule @ralphm did on nav.post-controls button, so it is still showing as #adadad instead of #8a969d

There are two ways of solving this, from what I see, put in a new rule for .highlight-action or add !important to the nav.post-controls button rule

The text in my screenshot should be the same color as the icons, but it doesn’t cover the “2 Likes” text that sits beside the like button. That text definitely is still the lighter grey.

Note: Don’t use !important, that messes with the Reply Button on each post :frowning:

1 Like

Finally suggestion for the “X Like(s)” text, and I think this one is the best way to deal with it.

(if you want it bold, otherwise, add nav.post-controls button.like-count to the exist rule for the icons)

nav.post-controls button.like-count { color: #8a969d; font-weight: bold; }