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