Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 6 down vote favorite
1

If I have a requirement to display three radio buttons, is there some UX standard that says they should be laid out vertically and not horizontally? i.e. is:

             o High  
Temperature: o Medium  
             o Low

Better than:

Temperature: o High  o Medium  o Low
share|improve this question
if it's a pretty long list, it can be easy to lose track of which label belongs to which button. go vertical – Neil McGuigan Jun 11 '11 at 19:00
1  
I would definitely say that in your first layout, the group label should not be centered vertically - it should be either be above the list or at the top [to the left of "High"] – Random832 Jun 15 '11 at 15:49

2 Answers

up vote 7 down vote

Stacking the controls is much better in terms of both scannability and association of the right control with the right label. In a horizontal list the distance between the control and the label is often similar to the distance between the label and the 2nd control, which can be extremely confusing.

The actual values also may have an effect on this. As @Tamás Szelei mentioned, the high-medium-low do beg to be stacked, but that's an extreme case. In your case I actually think that the values make a bit more sense horizontally, because the 3rd value is a bit different from the first 2. But I'd still do it vertically, because of the scannability issue.

Having said that, you usually don't display controls in vacuum, the layout needs to make sense visually within the context of the entire form / page / screen.

share|improve this answer
>>>In your case I actually think that the values make a bit more sense horizontally, because the 3rd value is a bit different from the first 2.<<< See, in the example, I like the vertical stacking for exactly this reason: it's like arithmetic on a balance sheet. Lump sump + periodic payment = combination. YMMV ;) [link]useit.com/alertbox/reading_pattern.html F-pattern scanning would definitely support stacking, provided the listed options are fairly short. – finiteattention Jun 13 '11 at 7:46
@finiteattention - It ain't that simple about 'F-pattern scanning'. The label 'Temperature' would need to be above, not to the left. If you eye-track this you will find the T of Temperature and the L of Low get more attention than 'High' - because you're being brought in at the middle of the stack. That's not F-pattern. To get the F-pattern you'd need to move the label or reduce the weight on the label relative to the options. Surrounding context can/will radically affect fixation patterns. – James Crook Jun 13 '11 at 9:00
@James — thanks, that's really interesting. What I actually meant to say in my original comment was that my preference was for vertical stacking with Temperature above, because I thought it might be easier to scan than coming in on the middle line. Do you know if there's any evidence that helping people scan in an F-pattern (by laying out data in a way that encourages that) in turn promotes better reading/scanning/comprehension? Or should I just let go of the whole F-thing? :) – finiteattention Jun 13 '11 at 11:21
@finiteattention - Ask it as a new question, e.g. "Should I aim to promote F-Pattern scanning?" - You'll get answers from people far more knowledgeable than me. In that question you'll get a better answer if you are clear about what objective matters to you - fast completion, increased completion rate, improved comprehension. Note that you can disrupt the F pattern not just by visual tricks, but also by including interesting words like 'sex' in positions that normally wouldn't be scanned heavily. It's only an approximation. – James Crook Jun 13 '11 at 11:44
up vote 5 down vote

If your labels do say "high, medium, low" and this not just an example, then I'd say the first version is better, because it also illustrates (in a way) that the first one is "higher" than the others (and also, "medium" is in the middle, "low" is at the lowest position. On the other hand, if you had labels like "left, middle, center", I'd choose the second option.

Generally speaking, I think that it depends on the actual content. If the labels are not suitable for this kind of illustrating, the best way is to be consistent with the rest of the UI.

share|improve this answer
1  
Good point. The labels were just the first example of three values that came to my head. The actual set that caused the discussion at work were : Lump Sum, Periodic Payment and Combination. – Bill Jun 11 '11 at 14:35

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.