Move heart and "X users liked this" to the left

(Erlend Sogge Heggen) #1

Continuing the discussion from Put likes and replies in the bar, not between the posts:

It’s that time of the year again: I strongly dislike how the “x users liked this” text adds a newline with whitespace and crowds up a page if a lot of short posts have received likes.

That being said, Likes are special, and they deserve some extra attention. And because Likes are so special, I had an idea…

I moved them to their own special spot, to the left:

I really appreciate the way this emphasises Likes without making it a disturbance. The heart and text are also more harmonical when they share the same line.

The big troublemaker was always “N replies”, which occupies the left space. I removed the text and moved it directly adjacent to “Reply”. See Sam’s post in the middle.

I don’t find the lack of symmetry to be a big problem, but it could be improved by making the N-replies button the equivalent size of 1 or 2 icons.

Here’s the difference on narrow mobile (which excludes “N replies” entirely):



Considerably cleaner imo.

Suppressing the word "likes" on posts
(Sam Saffron) #2

This has been discussed many times before. (and the discussion since fizzled down)

The N Replies button is in the way so we would need to somehow allow for it, please revise with a mockup that takes that into account. Additionally you need to allow for flagging UI.

On mobile there are too many words in the mockup, it should simply be “3 likes” which conserves much space.

There is a reasonable issue on desktop where you are making the “like” actions a lot harder to reach by moving them to the left.

(Jeff Atwood) #3

It is a reasonable proposal but it does make Likes hard to reach which is bad. Liking should be a natural and foremost part of the palette of post actions. That is why it is the first post action button.

I think the real trick is not presenting too many possible actions, and causing analysis paralysis aka Don’t Make Me Think problems, which the ellipsis button solved for us already.

(Kane York) #4

Remember that there is no ellipsis for normal users on posts that aren’t theirs.

(Michael Downey) #5

Please remember that admins can specify what buttons are hidden (or none!) behind so the width can vary significantly.

(Jeff Atwood) #6

Also remember that TL0 users cannot flag, so they have one less button. Can it vary? Yes. The core post buttons are

  1. like :heart:
  2. link/share
  3. flag (tl1+)

(Erlend Sogge Heggen) #7

That’s already in the mockup, as mentioned, albeit quite hidden. Here’s a clearer one:

  • Attaching it to “Reply” for context instead of it having its own massive button which very rarely gets noticed and clicked.
  • As long as it’s something new and different that’ll occasionally appear next to the Reply button, it’ll get clicked.

I also experimented with putting it in the gutter, but that won’t work on narrower displays that hide the gutter sidebar but still want to show N-replies.

[quote=“sam, post:2, topic:28110”]
Additionally you need to allow for flagging UI.
[/quote]What do you mean? If you’re talking about the text added underneath, that wouldn’t change, just like it wouldn’t change for the Likes.

[quote=“sam, post:2, topic:28110”]
On mobile there are too many words in the mockup, it should simply be “3 likes” which conserves much space.
[/quote]Agreed, that’d be even better.

[quote=“sam, post:2, topic:28110”]
There is a reasonable issue on desktop where you are making the “like” actions a lot harder to reach by moving them to the left.
[/quote]I really don’t see how that is. You read from left to right, so as you’re finishing reading/skimming the post, the Like is now the start of your landing strip.

It also stands out more when it’s there all by itself instead of being bundled together with all the other icons.

(Jeff Atwood) #8

Hmm, I still really dislike hearts being banished to Antarctica, and I have to say you’d have to do a ton of convincing to ever have me believe otherwise, but…

The idea of moving the reply counter / expansion closer to the reply button I find much more interesting.

Moving the N-replies counter / expansion closer to the Reply button
(mountain) #9

Why not keep the like button in the spot it is now (because I agree it needs to be there to make it easier to like) but instead have the list of users that like the post on the left?

If one can add a simple CSS override to do that, I’m game.

(Pirat) #10

I do not think that this is a good idea

(Mittineague) #11

It looks OK to me, but I’m not sure about the “like it too” being there

(John ) #12

I’m in favor of anything that saves some vertical space. The Discourse UI is so beautiful, and such an advancement over every other forum, that a lot of people don’t seem to recognize it as such. Making it a bit more cozy might help a bit.

(Michael Downey) #13

Additional bikeshedding:

For consistency, why not a round counter icon over the heart like is done with notifications and post summary?

(Erlend Sogge Heggen) #14

I don’t really mind that positioning at all. And with the suggested minimised N-replies button the available space at the bottom isn’t so cramped any longer.

As Sam pointed out, The “N people liked this. Like it too” doesn’t have to spell the whole thing out. It could be responsive, shortening it down to “N people liked this” and even further down to “N likes” when necessary, e.g. on a small screen with all the possible toolbar icons enabled.

(Sam Saffron) #15

That really makes me nervous, let’s put a button that I never ever use directly next to a button I always use with 1 px separation. It really scares me.

(Jeff Atwood) #16

Come on, this is Discourse you are talking about, we’d put at least 2px of separation in there.

(Michael Downey) #17

With that design (which I don’t think is the right one) the 2 ▼ should at least go to the right of “reply” since it’s more specific, just like the breadcrumb-subcategory-selector-thingy.

(Jeff Atwood) #18

The main issue is how do you expand it to see who else liked that post?

I think if we could resolve that, I would definitely support putting a counter on the like button itself. But again: how do you expand to see who liked the post? That is an important action and it should not be suppressed.

(Michael Downey) #24

I spent no more than a couple minutes this morning on this, but something like this was on my mind last night:

(Clicking on the number that appears shows the likers.)

and also:

(cpradio) #25

How do you preform an undo like?