What design principles and/or guidelines we should use for vote-up/vote-down and counters?

Question

Several times I have clicked the icons next to the counters totals (vote-up/vote-down) on YouTube while trying to vote up or like a video.

What are the design guidelines and/or principles for placing options and its counters without affecting the user experience?

Sample screenshot:

Should you add the interaction in the counters too or remove the icons to avoid the confusion?

Answer 1

Firstly, it's a given that whatever you do, you need to test it with your users. Whatever we suggest is taken to be a good first start.

That said, I think that YouTube's design is not very good. As you rightly point out, people usually click on the up or down vote icons near the counter - which is to be expected. The counter indicates the current voting, and so that is usually where people's attention will be when they are thinking about voting.

It's generally better to have the voting buttons very close to the counter for the voting. This site is an example of a counter with good UX.

I suspect that the reason that it is separated in YouTube's case is related to a legacy consideration. I for one, would not suggest a new site follow their example as it is unclear and unnecessarily duplicates the up and down vote icons.

Answer 2

I have several suggestions, but I'd first advise to make sure it's a "real" problem by analyzing user data. Seems YouTube has organized the counters (views + interactions) on the right, while actions are on the left. I'd assume they've done some testing.

Anyway, here are some guidelines I'd try to follow:

• Have the counters without icons as you suggested. See Facebook's sample of the like button and "3 people have liked this".
• "Unify" the actions and counters. In this example you could have number of likes adjacent to the like button itself.
• Make sure the counters don't have any affordance for interaction (as seems to be the case with YouTube).