Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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:

enter image description here

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?

share|improve this question
    
They should be as mixed as the percentages allow... I dont really understand this question –  Mervin Johnsingh Sep 2 '12 at 19:10
add comment

3 Answers

It doesn't 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, don't use a divider and make sure you use colors that don't mix.

share|improve this answer
add comment

The CENTER of the separator should be calculated to be in the exact ratio position, rounded to the nearest pixel.

You can easily tell the centerline of a thick line from its width, and the center of something, most will agree, is where something "actually is", specially in this case where a thick line is just a concrete visual implementation of an imaginary line with no thickness separating two rectangles.

share|improve this answer
add comment

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%    ]
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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