Currently looking at a long form with a lot of "yes/no" options presented as radio buttons. Is there any evidence to suggest that displaying radio buttons aligned vertically or horizontally is preferable?
I'm not a fan of horizontal layouts for radio buttons for four big reasons:
- As soon as you have more than two choices, it becomes difficult to see which label belongs to which radio unless you use a lot of padding. That can cause problems.
- Horizontal radio designs do not work if the line wraps. It looks like two questions. This means that you can only add a limited number of options to your radios, and can't translate your app into a language with potentially longer UI text. And because you want to be using the same pattern for all radio buttons in your app, that's a significant constraint. In large projects, constraints are like kryptonite - something to avoid at all costs.
- Because users have trouble resolving items buried in rows, horizontal designs aren't great if a user might enter a form looking for a particular option or answer to provide (common in config forms)
- You need width, and that's limited on the web. You can expand vertically easily, but you never want to force users to horizontally scroll.
I am not aware of the available studies but here are a few thoughts.
Horizontal display seem to be easier to visually scan for all answers since you have "Yes" on one side and "No" on the other. It also I think makes it easier for the user to check all the answers the same way; you just move your cursor down (check, check, check). So I am leaning towards horizontal arrangement.
I agree with Anna Rouben's answer. However, my layout is slightly different...
The goal here is to maximize readability and scannability. And this is the layout I've used for hundreds of questions in the past.
A couple notes...
- Horizontal Radio Buttons are preferred when the options are short and concise and are guaranteed to fit on the line without wrapping.
- I'm right aligning each question in a table cell to make it easier to associate the question with its corresponding Yes/No response.
- The Yes/No options are vertically centered within their table cell so they line up nicely with a question, even if that question takes up several lines.
It should be vertically aligned. Quote from Windows User Experience Interaction Guidelines:
Prefer to align radio buttons vertically instead of horizontally. Horizontal alignment is harder to read and localize.
Thanks for all the answers. I think my view is now:
- If it is Yes/No only, then side by side can make it easier to check answers assuming the line doesn't wrap, and particularly if there are a lot of responses in this form. This checking could be enhanced by putting a shaded box around the bullet to highlight the response. I agree with Steve that putting the 'positive' answer on the right would be in keeping with the style used elsewhere on the site ("OK" button to the right of "Cancel", "Next" on the right etc.)
- For more answers, or answers which we expect to increase in length when the language changes, listing vertically is preferable
I'm not sure how mobile usage would affect this problem but I'm inclined towards vertical as width is typically at more of a premium.
If this will ever be used on a mobile device, a horizontal alignment works better for 2 reasons.
One, you'll need to provide adequate space around each radio button so that users aren't likely to accidentally select the wrong one. I think a horizontal layout with generous space between the radio buttons will look more polished than a vertical layout with generous space between the lines. Likewise people are more likely to gestalt-group a horizontal pair of radio buttons with a good amount of space between them than a vertical pair. You could strengthen the connection between them either way by putting some sort of box around or behind them.
Two, your form will take up much more vertical space if you put the radio buttons on separate lines. That may make it seems like it takes forever for a user to scroll through on a mobile phone.
In a future "Yes/No" will be replaced with "Like", said fb founder (just a joke)
In this case your question: "Do you like drink coffee every day?" Like/Unlike
Like @AnnaRouben, I agree that the choices are probably clearer and easier to scan when laid out horizontally. However, I would like to add that you should always allow users to select 'No Answer', otherwise some of your data will be meaningless.
Do you drink coffee every day? (o) No answer ( ) Yes ( ) No
People need the ability to change an incorrect answer back to No Answer if they mistakenly click or do not understand the question, or if neither choice applies to them.
The horizontal is easier to scan since there's a strong visual differentiation between the Yes and the No. It also forces the choice to be more accurate, because the radios are farther apart. But the vertical is easier to fill, since you don't have to zigzag with your mouse, you just move it down in a straight line.
For speed, stack them vertically. For accuracy, lay them out horizontally.
Microsoft lot of funny guys ... Vertical presentation is preferable as they write and they put horizontal presentation for the question at the end of the article to know if the topic answer the question... Have a look http://msdn.microsoft.com/en-us/library/windows/desktop/aa511488.aspx
So for me, specially for yes and no radio button horizontal is better. And as it is written try to align them for a list of yes or no to be able to check quickly
If you have multiple yes/no type of question, I would go with the horizontal layout.
It will speed up the process as the user will quickly notice the pattern and click on the right or left choice without even focusing on the actual text beside the radio
If it is strictly yes/no you should be using a checkbox. The control exists for a reason, it has both true and false in a single item. Now there is no vertical/horizontal dispute.
I go with vertical.
It seems more readable on horizontal against vertical, maybe; but the difference comes when you resize a lot the screen or you open it on a mobile phone.
When the controls become very small it's easier to select and option with vertical radioButtonList (although it has only 2 options) against horizontal radioButtonList.