ElkArte Community

Elk Development => Feature Discussion => Exterminated Features => Topic started by: Spuds on May 13, 2014, 09:05:24 am

Title: Likes Layout
Post by: Spuds on May 13, 2014, 09:05:24 am
Down to this (again :P) on my list

There are suggestions to change a few things about likes so wanted to list them and maybe set some direction. 

First up is the old icon, today its the Star with a +/- this was chosen as a kind of neutral image in that the thumbs image does have some less than acceptable meaning in some cultures.  That said the thumbs image is also become the defacto standard on that and if its not right for some, well its easy to change.  I've attached two images we could use for the add a like and remove a like you gave.

Next on the old list is topic likes.  Right now the likes shown on the topic listing are for likes given to the topic, this being esoterically defined as liking the first post in a thread.  Other likes do not count towards the topic like, only those given to the first post.  So should that stay the way it is, to me is seems like the main counter is not going to move much, or should any like given go to the topic total and be shown on the main topic listing (where you can sort by likes)

Lastly (maybe) is how we display when a post has likes.  Right now we keep everything combined in that single button / location.  It will show if you can add a like, remove a like, as well as the total count of likes and when you hover, who liked it.  I kind of like this as its contained in one area and does not clutter the UI with a bunch of crud (it supposed to be about the content you liked, not the like :P).  One suggestion was to keep the current button as add/remove but have a separate indicator in a different location for the total and who liked it.  Personally I think this will be a problem, finding a place for it since we also have other things that optionally occupy room on the ui, such as quick moderation check-box, last edit by, etc etc

So what do folks like ?
Title: Re: Likes Layout
Post by: Eliana Tamerin on May 13, 2014, 11:17:41 am
The first one is probably better, as you really don't have a Dislike button. Simply un-Liking a post does not imply that the post is Disliked. The second version of Un-Like seems to look more like Dislike, rather than a removal of the Like.
Title: Re: Likes Layout
Post by: Allan on May 13, 2014, 01:14:02 pm
I agree, the first one seems to fit better.
Title: Re: Likes Layout
Post by: meetdilip on May 14, 2014, 06:33:09 am
+1. I had in mind as a suggestion. Current like button looks  a bit odd. But was not sure how people will receive it and hence kept quiet. Nice suggestion, first one will be better. But I guess if we can go a bit unconventional and find something different, it will be nice.
Title: Re: Likes Layout
Post by: emanuele on May 14, 2014, 06:57:48 am
I like stars as well (probably coming from github UI), but if the idea is to change, then probably what ET said makes sense.
Title: Re: Likes Layout
Post by: meetdilip on May 14, 2014, 07:42:19 am
In my old SMF forum, we simply used a button which turns green when clicked " Like ". It was a css button with green background and white text. Just throwing some ideas.  ;)
Title: Re: Likes Layout
Post by: Spuds on May 14, 2014, 09:46:33 am
I'll update the sprite to use the first image(s) sounds like most folks are thumbs up on that :P  May toy around with a border color once a post is liked (on that button), to give it slightly more prominence as well.

Any thoughts on the counter question?  Right now on the topics listing page, we show a likes column along with views and replies.  The only way that likes number is increased is by liking the first post of a topic, if you like another post in the thread, it does not increase the top level counter as the system considers that a post not a topic like.

Title: Re: Likes Layout
Post by: emanuele on May 14, 2014, 11:21:59 am
Honestly I don't know...
The likes are stored only in one place or in multiple? (I mean the likes on the first message are tracked only in the messages table? /me haz a mess and can't find this info... truth is I'm lazy. :P)
Title: Re: Likes Layout
Post by: Spuds on May 14, 2014, 11:48:27 am
I've updated the graphics on this site so we can take a look ... also added the green border to the like button when it has likes to provide it slightly more prominence as a test.  May have to refresh since I changed the JS, images and template.

QuoteThe likes are stored only in one place or in multiple?
Multiple :P ... The one for the main listing is in the topics table and individual post likes are stored in the message table,  Easy to update the topic table when a post is liked / unliked so no real performance impact in that regard.

With it only being the first topic, as it is now, I'm not sure even showing it on the main index is needed as it will always be a very low number (I would think), so why show a zero most of the time?
Title: Re: Likes Layout
Post by: emanuele on May 14, 2014, 12:18:20 pm
Keep it is nice I think, though you are right: show 0 most of the times is a waste, maybe shown it only when there is something to see.

Also I would drop the "post" from the button label.
Title: Re: Likes Layout
Post by: meetdilip on May 14, 2014, 12:33:47 pm
Is it nice now :thumbsup:
Title: Re: Likes Layout
Post by: Allan on May 14, 2014, 03:33:14 pm
They look great, nice job
Title: Re: Likes Layout
Post by: Eliana Tamerin on May 15, 2014, 08:17:07 am
Okay, honestly, it's a bit confusing right now. The Like post button has a thumbs up and a green icon, so it almost seems like every post is liked by default.

Why not a blank (or unsaturated) thumb for default, and colored/green + when liked? That way it doesn't look like I've Liked (god that's an awkward sentence) every post so far.
Title: Re: Likes Layout
Post by: emanuele on May 15, 2014, 09:46:31 am
When there are two states the "correct" thing to show is always difficult: do you show the action you can do, or the one you've already done?

For example, in this case you could have both the current state:
or otherwise:
of course in this second case it becomes implicit that on 1), a click would like and on 2) a click would remove the like.

In these cases I'm never sure what's best.

Another small tweak I would propose: instead of "xx Likes", just "xx Like" (i.e. singular instead of plural). Does it make sense?
Title: Re: Likes Layout
Post by: Spuds on May 15, 2014, 10:03:20 am
The behavior did not change, all I did was change from a Star to a Thumb  :'(

(+) is on the icon when you can add a like
(-) when you can remove one you previously gave

The text will say  either
+ Like <-- no likes on a post and you can give one
- X Likes <-- there are likes on a post, one is yours and you can remove it
+ X Likes <-- there are likes on a post, but you have not liked it

QuoteAnother small tweak I would propose: instead of "xx Likes", just "xx Like" (i.e. singular instead of plural). Does it make sense?
I'm not sure it would look good if it says "7 Like" you could add "this post" but thats to long and does not work with 1.  You could also flip the order so instead of 7 Likes you could do Likes: (7) more of a counter then a sentence so the plurality does not get in the way.
Title: Re: Likes Layout
Post by: meetdilip on May 15, 2014, 11:39:54 pm
You have done a good job Spuds. Just wondering if we can have box on top right of the post saying the no. of likes.
Title: Re: Likes Layout
Post by: emanuele on May 16, 2014, 02:39:53 am
Quote from: Spuds – The behavior did not change, all I did was change from a Star to a Thumb  :'(
I know, I know, I was just babbling. :P
Title: Re: Likes Layout
Post by: Spuds on May 16, 2014, 08:22:19 am
Quote from: meetdilip – You have done a good job Spuds. Just wondering if we can have box on top right of the post saying the no. of likes.
You mean like we have to PM's and Mentions?  ... I'll give it a try !

ETA: done on this site as a test and feedback
Title: Re: Likes Layout
Post by: meetdilip on May 16, 2014, 11:15:25 am
I was thinking something on these lines.

(http://www.elkarte.net/community/index.php?action=dlattach;topic=1423.0;attach=954;image)
Title: Re: Likes Layout
Post by: Spuds on May 16, 2014, 11:43:18 am
Thanks for the screenshot, that makes it easier to understand.  Lets see what some folks think about the options right now, not sure which way we should go.

1) Leave as is, simple button text as in  X Likes or Likes: (X)
2) Button with indicator, similar to the other counters on the site (added image so folks don't have to search)
3) Separate the counter from the button  (or in addition to 1) an add a "badge" of some style



Title: Re: Likes Layout
Post by: Allan on May 16, 2014, 12:37:57 pm
I like the way you have them setup Spuds, dilips is nice but not sure about having a big awareness in the post would just be annoying.
Title: Re: Likes Layout
Post by: meetdilip on May 16, 2014, 12:47:37 pm
Size can always be reduced  :)
Title: Re: Likes Layout
Post by: AaronB on May 16, 2014, 04:37:07 pm
Quote from: Spuds – Thanks for the screenshot, that makes it easier to understand.  Lets see what some folks think about the options right now, not sure which way we should go.

1) Leave as is, simple button text as in  X Likes or Likes: (X)
2) Button with indicator, similar to the other counters on the site (added image so folks don't have to search)
3) Separate the counter from the button  (or in addition to 1) an add a "badge" of some style

Hi Spuds,

I belive the 'balloon' attached to the 'thumbs up button" is nicer looking than having a box with a number in it tossed onto the page somewhere.

I do wonder how this would look if the balloon were attached to the bottom of the button, with the attachment point at the left side of the button, under the base of the hand?  May want to consider also that if a post has a thousand 'likes' (not likely, I know) that perhaps the balloon whether on the top or the bottom of the button, might should attach to the left of the button?
Title: Re: Likes Layout
Post by: Eliana Tamerin on May 16, 2014, 11:02:32 pm
I like the balloon on top of a like, though I noticed it doesn't yet appear if I click the Like button until I reload the page (see attachment). I also like ema's suggestion:

Quote from: emanuele – or otherwise:
  • neutral when not liked by you,
  • + when liked by you
of course in this second case it becomes implicit that on 1), a click would like and on 2) a click would remove the like.

Could always change the icon to the Green(+)/Red (-) icon on hover, that would make it explicit.
Title: Re: Likes Layout
Post by: AaronB on May 17, 2014, 12:41:21 am
Yeah .... I have been ponder that balloon this evening. I think you are right; it looks better on top side. Maybe the balloon just seems too high on the button to me?  Perhaps lower it a wee bit into the button? <shrug>
Title: Re: Likes Layout
Post by: Spuds on May 17, 2014, 10:12:03 am
Quote from: Eliana Tamerin – I like the balloon on top of a like, though I noticed it doesn't yet appear if I click the Like button until I reload the page (see attachment).
Oops ... yeah I was a bit of a slacker on updating the js to do that, I did fix that (I hope) in the PR.
Quote from: Eliana Tamerin – I also like ema's suggestion:

Quote from: emanuele – or otherwise:
  • neutral when not liked by you,
  • + when liked by you
of course in this second case it becomes implicit that on 1), a click would like and on 2) a click would remove the like.

Could always change the icon to the Green(+)/Red (-) icon on hover, that would make it explicit.
I may give that a try, also sounds like a good idea.

Quote from: AaronB – Yeah .... I have been ponder that balloon this evening. I think you are right; it looks better on top side. Maybe the balloon just seems too high on the button to me?  Perhaps lower it a wee bit into the button? <shrug>
I've tidied it up a bit, may be better now.  Also note that the balloon grows to the left, so should you get 100 likes, the right side of the balloon does not move, it grows to the left.

Title: Re: Likes Layout
Post by: Spuds on May 17, 2014, 11:48:44 am
And once again as a test :D  ... the + and - are added only on the hover to indicate what action will be taken.

So if you can like a post (+) shows up the thumb icon on hover
If you can remove a like you gave a (-) shows up on the thumb icon
If you can't do a think it just stays as the thumbs up
Title: Re: Likes Layout
Post by: emanuele on May 17, 2014, 12:17:51 pm
/me likes the idea! :D
Title: Re: Likes Layout
Post by: AaronB on May 17, 2014, 12:21:50 pm
 :)    I likes.   I thunk I saw an attachement ... did you delete it? I sort of liked that orange/gold look.
Title: Re: Likes Layout
Post by: meetdilip on May 18, 2014, 03:14:15 am
Looks nice :)
Title: Re: Likes Layout
Post by: Eliana Tamerin on May 18, 2014, 09:25:28 am
Quote from: Spuds – And once again as a test :D  ... the + and - are added only on the hover to indicate what action will be taken.

So if you can like a post (+) shows up the thumb icon on hover
If you can remove a like you gave a (-) shows up on the thumb icon
If you can't do a think it just stays as the thumbs up

It looks beautiful and works perfectly.
Title: Re: Likes Layout
Post by: emanuele on June 07, 2014, 07:21:07 am
So I guess this is implemented and fixed, right?