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?

Improve this question
5
  • 6
    Tangentially related to the question: be careful when you attempt to sort by rating.
    – zzzzBov
    Commented Aug 29, 2017 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
    Commented Aug 30, 2017 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
    Commented Aug 30, 2017 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
    Commented Aug 30, 2017 at 20:37
  • @MrWhite thanks for your input, I have indeed moved the vote ability to the top along with the rating display :)
    – Rubenxfd
    Commented Aug 31, 2017 at 6:57

4 Answers 4

Reset to default
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 ;)

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

Improve this answer
2
  • Thanks! Another good example indeed. I have adjusted my design to have similar approach :)
    – Rubenxfd
    Commented Aug 31, 2017 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
    Commented Sep 4, 2017 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

Improve this answer
5
  • 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
    Commented Aug 29, 2017 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
    Commented Aug 29, 2017 at 11:55
  • "The first option should be the positive option" --> why??
    – Pierre Arlaud
    Commented Aug 30, 2017 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
    Commented Aug 31, 2017 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
    Commented Aug 31, 2017 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.

Improve this answer
3
  • 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
    Commented Aug 30, 2017 at 6:53
  • 3
    This doesn't answer the question at all, OP wants to have both likes and dislikes.
    – EKons
    Commented Aug 30, 2017 at 10:58
  • "clicking on it again decrease it." - that just removes your existing vote.
    – MrWhite
    Commented Aug 30, 2017 at 20:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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