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.

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
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

4 Answers 4

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

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
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

The horizontal layout is much less readable.

In my opition, this case is the only exception: (x) yes ( ) no

(not to mention lay outs used in A/B tests, where two images are displayed horizontally with a radio button underneath each one)

Even if the labels are "left/center/right", I don't see components being used that way. If we want to mimic something, we use icons. If the user chooses "left", they want 'something' to be the on the left, not the label. It's like writing the "blue" option in blue, the "red" option in red... it might sound as a good mapping, but it's weird in professional designs, because:

  • it is not consistent with the font color of the other fields; (it is not forbidden to break patterns, you just need a good reason for that)
  • the user wants 'the thing' to be blue, not the form field;
  • the blue color used in the text may not be exactly like the blue of the result (e.g. the user is choosing the color of a machine; when it is "blue", it has some parts in dark blue, some in light blue and some in white and gray. What shadow of blue should you use?)

The only place where I think coloring the field text works is when the user is choosing exactly the text color, which is more an icon than a colored text. The same applies to left/center/right options in regular fields.

So, I don't see any reason to use horizontal radio buttons.

You can also try a drop down menu if you need to save space.

share|improve this answer

No one mentioned localization so far.

UI Design guidelines recommend leaving enough space for longer wordings potentially coming with other languages. Vertical radio buttons have as much space as width of the section. But with 3 horizontal buttons you are limiting yourself to less than 1/3 of the width (3 radio buttons and 3 labels in one row) and it might easily happen (and it happens in practice) that translated labels between two radio buttons will appear clipped:

Choice: (•) Examp( ) Examp( ) Example

share|improve this answer

Your Answer


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.