I like that idea but … shouldn’t be that different in size from 1 though a two digit number like 12 is obviously bigger.
I already mentioned to @awesomerobot and @techapj that the CSS should specify larger margins on this element to make it easier to hit.
Took a look at this and thought about spacing/touch targets on our smallest screen size (320px)
If we use the full width of the post we can increase the touch area of all icons and expose an additional one for non-admins… we can also put more space between the icons, which allows us to more closely associate the like count with the heart.
Current controls on the left, adjusted on the right
For admins, we can keep the icons the same size and fit it all one one line as long as we shrink long like counts
Various states, showing an approximation of touch targets
Same just happened to me. And even on desktop I feel that I have to use more energy on checking who liked a post (because the area to click on is considerably smaller). Looks like there is a UX trade-off here between visual experience and interactional experience…
Can you not wrap the heart and the number together, I think that would work better if your going to contain the elements / use a background
I’m liking this a lot so far though
Edit: just upgraded, looks perfect to me! Good job
What it we just take it a step further and just expand the likers immediately when you click ...
Saves a click and paves the way to make that number a smaller subscript to the right (i.e. styled even more similarly to FB/twitter etc.)
Most recent update, default theme.
I keep “hitting” this overlap - I’ll like a post then try to see who else liked it, but end up undoing my like instead of opening the “x people liked this post” list.
I agree the number and the like icon need to be close so it makes sense, but overlapping click targets is not good.
PS. Happy Cakeday @mcwumbly. Thanks for hanging out on Meta for 5 years!
@joffreyjaffeux has made some tremendous improvements here to combine “likes count” and “like” buttons into a single button and both are easy enough to distinguish on hover. I am testing the changes locally and making (very) minor changes. Will push very soon.
I would recommend some UX testing on this and other elements of Discourse. I have rolled out Discourse to some larger enterprises and it always surprises me which UI components I considered normal are confusing to some people. Also, a lot of these folks don’t use social media, and if they do, they use Facebook which is a thumbs up.
To be frank though, the issue here is usually less the UI, but more people asking “what is a Like?” and wanting to understand the impact of that on their participation (some worry that Likes are a way their performance will be measured, for example).
I am liking this change alot - nice work, guys.
There is an issue with it when looking at my own posts. It feels like a broken feature because I can’t select it to like my own post. Maybe suppress the heart on the menu on my own posts completely if nobody has liked it yet? (ah, I can see this is how it already works) And then when people start liking it, display the heart in an obviously different color (light shade of blue?) to indicate the difference between a heart you can click on and one you cannot? The heart is already displayed red when you yourself liked posts by others.
And what’s wrong with that 
The heart has been discussed so much already on this forum over the years. I suggest you search for heart and join those conversations. This topic is about a particular UI change.
Oh, I agree, I am not suggesting this UX change doesn’t makes sense - it does. I am just saying that the UX is the lesser of the issues with Likes from my experience with Discourse in enterprises.
And on facebook, they have … a number followed by a glyph
No, they have a glyph followed by a number, just like twitter does as well.
Is that a change we could also make? I think I prefer glyph followed by the number.
EDIT: ohh but we don’t have numbers on any other glyphs do we? So maybe that would look weird having the number on the right of the heart if none of the other glyphs show a count.
I think it’s more consistent for us to do it in the number → glyph direction because that’s how our UI has always shown it:
Looks pretty good!
However, on this laptop (with pretty terrible white balance) the number is a little hard to read. Could we get the number text changed to the color of the Reply button text?
I continue to be confused by the visible like on my own posts. It’s visually identical to “like this post” but it actually means “this post has X likes”. I find this very confusing. How about this?
I think the applying the grey background to both the buttons on hover is very confusing. On hover, it looks like both the number and the icon belong to a single button but there are actually two buttons. Perhaps something like this for the hover effect would be easier for users to understand and implement on mobile as well?
I want to make sure I understand where the confusion is?
Are you confused cause you think you can like your own post? Or because you think you already liked your own post? Or because you are not sure how to expand likes?
One giant upside is that you have a giant click target to see who looks liked your stuff on mobile
I think the heart not turning red is already a pretty good indicator that you can’t like your own post, but maybe the tooltips could include some extra text explaining the button actions better.
“x persons like this, click to show”
“this is your own post, click to show who liked it”
Or something along those lines, I suspect a lot of people never attempt to click the like button on their own posts because they don’t want to end up looking too self-admiring.
Yes, that one. I don’t like the idea of two identical click targets actually doing different things.
