Suppressing the word "likes" on posts

UX
1

In 2015 we switched from a discrete line of {x} people liked this under the post…

image

… to moving the smaller phrase {x} likes up near the like button itself.

image

One additional tweak we discussed at the time, but discarded, is removing the word “likes” as well. I believe here in 2018, a number next to a glyph is widely understood to be how many times that action has been taken:

image
image.png1109×255 47.3 KB

Obviously this is 2 replies, 4 retweets, and 16 likes… without ever using those actual words.

So in the name of further simplifying the Discourse UI, which is one of our primary goals as a project, we’re removing the repeated word “likes” on every post.

There are a few tweaks we still need to make, but the first iteration of that change is now in effect on meta:

image

33 Likes
2

Is this TL1-only, like the “* new” indicator, or is it for everyone?

1 Like
3

For everyone. Is there really anyone alive today that can take one look at the Twitter UI and not understand what “number next to a glyph” means?

9 Likes
4

Love this idea, will make things cleaner and like you say, everyone understands what it is.

5

Nice sentiment but it’s bugging me … I think there’s too much spacing between the N and the :heart: to make it visually clear that they’re about the same thing.

But that’s just me :nerd_face:

Edit: UI/UX design theory to back this up:

5 Likes
6

Fortunately, CSS is very easy to change… you can experiment yourself by pressing F12 in your browser and testing on the live page.

1 Like
7

It also doesn’t help that they’re two different hoverable elements so each one gets the hover background color. :slight_smile:

8

Unintentional side effect: On my post I have 1… share?

image

5 Likes
9

Correct that is why I said

3 Likes
10

Looking forward to implementing this when it is final, thanks!

11

I’m afraid yes.

Ignore these additional characters.

1 Like
12

While your there, can you wrap the 2 elements in a span, I have an idea for a rounded border that might look nice :thinking:

5 Likes
13

There are definitely some markets and demographics where assuming familiarity with other products and services such as Facebook and Twitter will work against us.

I’m all for de-cluttering the UI, in another topic we discussed the possibility of removing the word ‘new’ and just leaving the blue dot. For TL1+ users who have been on Discourse for a while that makes perfect sense.

But for new communities still trying to find their feet taking away a lot of these annotations could be pretty harmful. I asked in the other topic as to whether bootstrap mode would be affected and didn’t get a response, here the removal appears to be for all users.

Is there no scope to either tie these UI changes into trust levels (respecting bootstrap) or maintaining the annotations entirely, toggled as a user preference?

3 Likes
14

Adding a zillion pointless toggles is not a useful exercise, and harms Discourse in the long term. If you want to insert arbitrary text, use CSS customizations to do that on your site.

3 Likes
15

Except that CSS won’t allow you to distinguish between singular and plural, or will it?

2 Likes
16

Even if we can achieve it via CSS, can we offer css per trust-level?

17

I would not recommend mucking with this with CSS, you would use a theme component for it which would have a bit of CSS + other stuff and then you could support localization and everything else.

Overall I am ok to live with this for a bit and see what happens.

4 Likes
18

Note @techAPJ in the case of “me looking at my post” the heart plus the number should be the click target.

Me wanting to tell who liked my post is very common and we have a huge benefit here cause we can have a very big single click target for this case.

8 Likes
19

2 spans wrapped in a button would be ideal

1 Like
20

On mobile if something has one like expanding the likes just made me fat finger and like the post, the click target is just too small,

Idea, clicking … should add the word like back in which helps some

6 Likes