which is the best way to show Like/Dislike click results?

Question

I am planning to use Like/Dislike buttons in my forum for rating the comments and posts. I found two nice ways to implement Like/Dislike results:

A. Show the sum of Likes - Dislikes between the buttons.
B. Show the total likes and dislikes beside the buttons

Method A: before like After like
Method B: before like After like

I think Method A have less information (bad) about the votes and less visual noise (good) and Method B have more information (good) and more visual noise (bad).

What do you suggest?

Answer 1

Method B maskes it much clearer, although I would amend the colouring to make sure the positives are more clearly highlighted.

The danger with method A, IMO, is that if I voted down from the starting point, it would then go to no votes. And always when voting against the majority, the visual reflection of the total is rather negative - it is as if all I am doing is getting cancelled out by another vote.

Providing more information while not increasing the space being used - which you are not - is probably a better route.

Answer 2

I think it depends upon the nature of content that you are asking for votes on.

If the content that I'm voting on is opinion based, like say a You Tube video, then we must show both the + and - counts. A summation count is good in places where it is used as a way of validation (Stackexchange; 'this question is not appropriate', etc.).

Method A, if used, needs to be represented in a slightly different way in terms of UI, like the way it's done in SE, counter inbetween the 2 buttons. Gives a more clear meaning to the number and how a user's action will effect it.

Method B gives info on total votes cast, I think thats something you would want to show the user in most cases. Representative of the popularity (or unpopularity).

Answer 3

Method A impacts not only the amount of information, but the conclusions to be drawn from it, because it removes the context. Imagine a situation with 1000 likes and 1010 dislikes. Under method A, a user would interpret this as "situation clear, all voters disliked". Under Method B, as "hmm, voters are split 50-50 on this one".

As SchroedingersCat said, expressing an opinion different from the majority would put the user under lots of (falsely) perceived social pressure. Effectively, the first few votes would determine the final outcome. Even for this reason alone I would strongly discourage method A.

I do not see the digits as noise; they have a clear role of information display, whereas the thumbs up and down are commands. I would also consider making the coloring consistent, i.e. if "thumbs up" AND likes are green, then "thumbs down" AND dislikes should be both red. You could also experiment with lower resolution icons and/or smaller fonts.