How mixed percentage bars should be?

Question

By mixed percentage bars, I mean something like the "likes bar" in youtube, with a left percentage bar, a right percentage bar, and maybe a separator:

Should they be like:

[       70%       ] || [   30%    ]

(But the whole bar would be more than 100%)

or:

[      68,7%      ||  28,9%   ]

(so that the whole bar is 100%)

or:

[      70%      ||] [  30%   ]

with the separator that takes a little space of one of the side?

Answer 1

You're too much a mathematician.

It doesnt' really matter. People can't tell 1-pixel distances easily.

If it's just 2 elements, then add the divider to the length.

If it's more than 2, make sure you use colors which don't mix, and don't use a divider.

Answer 2

I agree with Aadaam that a small number of pixels will not be noticed, so any of the options would be fine as long as the separator is narrow (say, 1-5 pixels).

That said, the important thing to keep in mind is that you're trying to represent a ratio, so you want the ratio of the red and green sections to be close to the actual ratio (70:30). Therefore, I would actually go with your first option (which allows the overall length to be longer than 100%):

[       70%       ] || [   30%    ]