21

I am researching and designing a new online community platform where developers can share their knowledge by writing articles with tutorials, tips & tricks etc. I want to have a rating system so that users can see which articles are well-received and which are not.

Based on this question about like/dislike and 5-star rating I have chosen to use a like/dislike approach. However I can't seem to figure out how to display this properly.

I currently have this displayed when viewing an article:

enter image description here

As you can see I want to display the balance between likes and dislikes. For other users to vote for this article I have made a design displayed at the bottom of the article:

enter image description here

Now, my question is if there is a best practice about displaying such like/dislike feature. I.E. should I display the dislike icon AFTER the like icon or vice versa? Or is there a more common way of displaying this?

  • 6
    Tangentially related to the question: be careful when you attempt to sort by rating. – zzzzBov Aug 29 '17 at 18:02
  • Thank you for sharing this. It's not really what I was going to do anyway but I appreciate your help and I will take this into account! :) – Rubenxfd Aug 30 '17 at 6:57
  • @zzzzBov I remember that one site just adds a fixed number of dummy votes to every item for calculation purpose, which are set to the average of total votes (so if every item gets 50 dummy votes, and total votes of all items are 40000 positive and 10000 negative, then for calculation, 40 positive and 10 negative dummy votes are added to every item). This smoothes out the outliers without using a complicated formula. – Alexander Aug 30 '17 at 13:31
  • FWIW To me, it looks like the area where you are displaying the rating (top/right) would also be the where you would cast your vote. I think I would probably try clicking it. – MrWhite Aug 30 '17 at 20:37
  • @MrWhite thanks for your input, I have indeed moved the vote ability to the top along with the rating display :) – Rubenxfd Aug 31 '17 at 6:57
60

If you are planning to display the balance between likes and dislikes - I think, these guys have done a great job. There are separate like and dislike icons, and also a meter to show balance along with views:

enter image description here

Note: Those who know the source of this image, please keep it to yourself. It just fits well for this question ;)

  • 32
    One of my favorite websites. Great user "expierience" :^) – Pectoralis Major Aug 29 '17 at 11:35
  • 12
    Oh my goodness, @DPS is now my favorite! – Mike M Aug 29 '17 at 13:42
  • 24
    Don't Google EvilAngel at work. – Chris Schneider Aug 29 '17 at 14:14
  • 20
    Wait, that site has stuff below the main video?!? – pee2pee Aug 29 '17 at 15:17
  • 5
    @Rubenxfd irrespective of the type of website... I generally can't ignore UX part of it. :) – DPS Aug 30 '17 at 8:29
6

Just do what YouTube does.

Note that they've gotten rid of the red/green axis. Obviously this helps colour blind folks and makes it less of an absolute good/bad indicator which I think makes more sense as no like/dislike system is perfect.

enter image description here

  • Thanks! Another good example indeed. I have adjusted my design to have similar approach :) – Rubenxfd Aug 31 '17 at 6:59
  • Just want to point out that YouTube (at least in my country) has updated their design once again. They made their like/dislike system even more compact, disposing the view counter to the other side of the screen. It looks much better now in my opinion – Rubenxfd Sep 4 '17 at 13:17
3

The first option should be the positive option (like). You should place the like/dislike count next to the like and dislike options, as a user i don't want to scroll up just to see how many people liked/disliked to compare my vote.

I don't think displaying the visual counter as a bar is optimal since its using a lot of real estate, something like this would make more sense:

Before voting

enter image description here

After voting

enter image description here

Since the thumbs up and thumps down are one of the rare cases where icons say enough you don't need to add wording in my opinion.

If you look for patterns regarding this, check the most popular sites that display likes and dislikes.. Facebook, Youtube etc.

Ps.: i would change the "Recommend"-Icon since a heart is often used as a icon for like which can cause confusion, something like this might work better, especially when you add wording next to it.

enter image description here

  • 1
    Thanks for replying! I see now that it makes more sense to display the like button before the dislike button. However I disagree with your argument about a recommend icon. The icon you suggest is commonly used as a share button. Maybe I should change the recommend label to favourite as I want user to save these articles on their profile page. Thanks again! – Rubenxfd Aug 29 '17 at 11:53
  • I assumed this is the same function just with a different wording. What is actually happening when i hit recommend then? The thing is that a lot of online services use the heart icon for like/favorite so users might expect something else when they see the icon. EDIT: wrote my comment before i saw your edit, if its a favorite option disregard my comment, a heart is perfectly fine for favorite-function! – Pectoralis Major Aug 29 '17 at 11:55
  • "The first option should be the positive option" --> why?? – Pierre Arlaud Aug 30 '17 at 14:22
  • 1
    @PierreArlaud We're entering the realm of psychology here. Reading or hearing positive words have a positive effect on your brain and mood, whereas negative words not only have a negative effect but also a much stronger one as they might pose a threat to our survival. Seeing the yes as first, which is more likely if it stands on the left side and on top due to our left-to-right and top-to-bottom reading creates a more positve impression of your site. This is why Facebook has no dislike button up to this day and probably won't ever have one. It would connect negative emotions to the website. – Otto Abnormalverbraucher Aug 31 '17 at 11:56
  • Same goes for the coloring, btw. As red is an alarming color it has a greater impact on the users experience in a negative way. As youtube was mentioned in another answer, just take a look at it. The blue color of the comparison counter makes the site more neutral and calmer. Also the blue "like" fraction stands more out than the light gray "dislike" fraction. In fact the latter rather seems more like it's just not fully filled up with blue, much like a loading bar. – Otto Abnormalverbraucher Aug 31 '17 at 12:14
0

I would recommend like icon like Facebook one. User clicks on it and like counter increases and clicking on it again decrease it. That way you avoid the dilemma of keeping it before or after.

  • I don't want a like counter. I want to compare the given likes AND dislikes so users can see the balance between the two. – Rubenxfd Aug 30 '17 at 6:53
  • 3
    This doesn't answer the question at all, OP wants to have both likes and dislikes. – EKons Aug 30 '17 at 10:58
  • "clicking on it again decrease it." - that just removes your existing vote. – MrWhite Aug 30 '17 at 20:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.