A few days ago I asked a question about the best way to display a like/dislike rating. I wanted to know how I can best show the balance between the two. Using the answers given I had made the following design:

enter image description here

On the homepage of my website I am displaying an overview consisting of all posted articles. I want to display the rating of the concerned article here as well, however, I don't have much space available and it's not possible to vote for this article here, so I need a different solution to display the overal rating of this article.

As shown in the picture below, I have tried displaying a percentage based on the given likes/dislikes percentage = (likes/total votes)*100

enter image description here

The problem is, that when only 1 vote has been given and it's a like, the article will have a 100% rating. This makes sorting the articles by rating unreliable.

So my question is:

Is there a better way to display the overal rating briefly so that sorting articles based on their rating is reliable?


What would work for at least the desktop variant (no tooltips on mobile), would be to refrain from showing a rating as long as there are not enough votes.
You could show a line like in the edited screenshot and on mouseover display a tooltip saying "not enough votes".

Also, I'm sure this will not be too confusing as the user can see other content with a rating present, so he understands that the rating will come later.

enter image description here

  • Thank you, I was just considering to do this! I am going to user test this solution. – Rubenxfd Sep 1 '17 at 13:37

Is there a better way to display the overal rating briefly so that sorting articles based on their rating is reliable?

There is and it's already been done in YouTube!

enter image description here

Observe the UI above. You immediately see the number of views and the number of people that liked and disliked the video. In this way YouTube already is showing you ratio and you can quickly understand if the video is of value or not.

Would a way like that work in your case?

  • Thank you for your answer. It looks very similar to the rating balance I showed in the first picture. The problem is that when I show a bar below those two icons, it takes up lots of space and looks very crowded along with the date. I guess I have to adjust my design as this seems the only possible solution. Thanks :) – Rubenxfd Sep 1 '17 at 12:13
  • Also, I do not want to raise the intention that the article can be liked or disliked when not viewing the entire article. – Rubenxfd Sep 1 '17 at 12:25
  • 1
    That is exactly what he alreay adressed in the first part of his question and described, why it would NOT work for him. – Big_Chair Sep 1 '17 at 13:22

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.