I've seen radio buttons sometimes positioned vertically and sometimes horizontally. Which direction if any is considered superior UX? Are there factors that determine when to use one vs the other?
1
-
1I think the question is too broad to answer even covering a good topic. There may not be a single point when deciding or just applying this way. I mean you may not have a possible usable area to display one of them or there might be just visually appealing part to use that way. If you can specifically show your case, then you'll probably get better answer and I also can also contribute.– Erhan YaşarDec 5, 2019 at 18:30
Add a comment
|
1 Answer
Vertical is preferred.
Based on research from the Neilson Norman Group as well as the various human interface guidelines for Apple and Microsoft, radio buttons should have the circle to the left of the label, and the list should be stacked vertically.
This aids the user in scanning the choices, and also reduces ambiguity caused by alternating circles and labels when laying the choices out horizontally.
Like most things in UX, the real answer depends on your use case, and generally speaking, the fewer options you are showing, the fewer issues there would be with a horizontal layout. For example, Yes/No pairs are often placed next to each other, though with adequate spacing between the two options.
Further reading:
https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/
https://www.nngroup.com/articles/radio-buttons-default-selection/
https://developer.apple.com/design/human-interface-guidelines/macos/buttons/radio-buttons/
https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/radio-button
answered Dec 5, 2019 at 21:22
-
1Vertical is preferred for lists of similar items almost 100% of the time due to the simple fact that some cultures read right-to-left while others read left-to-right Dec 6, 2019 at 19:25