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?
1Not sure I understand what you mean -- aren't radio buttons circular? Could you add a screenshot?– Andrew ShipeMay 8, 2012 at 17:42
how many makes many? :)– sreeMay 8, 2012 at 17:46
Andrew: I mean stacking them vertically as here google.co.uk/… or horizontally with the yes/no side by side– PeterMay 8, 2012 at 17:50
1From Nielsons AlertBox Lay out your lists vertically, with one choice per line. If you must use a horizontal layout with multiple options per line, make sure to space the buttons and labels so that it's abundantly clear which choice goes with which label.– Roger AttrillMay 8, 2012 at 19:22
2I know this is a question about radio buttons but have you though about turning the Y/N radio set into a single check box? Users then only have to read one label and the check the box if they agree with it.– JeffHNov 8, 2012 at 13:23
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.
5In general what I've found is that if you're dealing with enough options that you're going to have a problem with wrapping you should absolutely use a vertical layout as you say. But in the case of a simple Yes/No response, I prefer the options to be horizontal and aligned from question to question. May 8, 2012 at 20:03
1@SteveWortham That's fine, but what if some of your questions might not fit this pattern? Swapping between horizontal and vertical is probably bearable between forms, but in a single form things will look inconsistent. You can't guarantee that requirements won't change to make that constraint a problem. May 8, 2012 at 20:19
I totally agree and would have provided the same answer if this one was missing. More to read on radio button alignment: msdn.microsoft.com/en-us/library/windows/desktop/aa511488.aspx May 8, 2012 at 20:50
Point 1 doesn't count in this question as this is about yes/no, nor is Point 4. May 9, 2012 at 0:34
@TomWij - it does, because the pattern the OP implements will have to be used for all radio buttons on the form for consistency. And you can't guarantee that requirements won't change to make other radio questions necessary - requirements always change in unexpected ways. May 9, 2012 at 8:39
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.
3I agree. I've created hundreds of Yes/No questions for insurance applications and this is the conclusion I came up with as well. The only difference is that in my case I position the radio buttons to the right of the question. But either way works well. May 8, 2012 at 19:57
2Nice mockup, makes it clear what you're talking about May 9, 2012 at 16:41
1Horizontal as we are taught in the western world to read from left to right so that makes the horizontal option seem more natural.– AdriaanJun 1, 2012 at 19:50
Agree with Horizontal alignment is easier to scan. However this may differ in smaller mobile screens.– HasangaNov 30, 2012 at 6:24
1From a UX perspective checkboxes are better suited if you just have 2 oposing options. Nov 9, 2015 at 11:50
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.
Checkboxes are even shorter and more consise. Nov 9, 2015 at 11:51
1@J.T.Houtenbos - True, but checkboxes have a default state, meaning that the user can answer without having to do anything at all. This can heavily weight the responses as illustrated in this organ donor example... danariely.com/2008/05/05/3-main-lessons-of-psychology Feb 14, 2018 at 22:52
that is true. If you need to know for sure someone made a (conscious) choice while filling out the form this is the way to go. Also this way you will know by the blanks if someone skipped a question. Feb 15, 2018 at 13:46
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.
1When the options are longer e.g "Don't display this list item" vertically aligning makes sense. However in Yes no questions, aligning horizontally makes it easier to read.– HasangaNov 30, 2012 at 6:22
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.
I would put the choice that is more important first. If there will be lots of No answers, put Yes first, for example, on a New Patient admission form, the listing of medical conditions (dozens of them, few of which any one person has). Then the user can just scan down and hit Yes a few times, with everything defaulting to No otherwise. I suppose checkboxes are better in situations that No is assumed... Oh well.– user67695Feb 9, 2018 at 14:16
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
1Ha Ha, "Have you ever been in a car accident?" Thumbs Up!– user67695Feb 9, 2018 at 14:20
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.
Since when is there a universal obligation to provide a neutral answer? In some cases it's useful, in others it isn't. May 8, 2012 at 19:25
1I don't think this should be a standard because it really it comes down to the language of question itself. If the question could lead to confusion or ambiguity, fix the question, not the options.– Jeremy ANov 29, 2012 at 20:18
2FWIW, I would use "N/A" or "Does not apply" or something similar rather than "No Answer." I think there is a big potential for confusion using the word "No" here in a Yes/No question format. Also, I would put it after the "Yes" and "No" options, since (unless your questions are not well-written) it will be more likely that the question will be answered "Yes" or "No." But I strongly agree with the above two commenters, and am offering something to consider when a question is well-written and a neutral answer is appropriate. Nov 29, 2012 at 20:29
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.
I'd be interested to see a study done on a vertical/horizontal layout specifically considering Fitt's law. In a horizontal layout - Is it slower to move your mouse a little to the right to click on 'No'? Probably. But in a vertical layout, do users accidentally click on one answer when they meant to click on the other because of the proximity? Does it take longer to home in on the correct choice because the two options are closely stacked vertically? Another thing to ask is, will this ever be put on a mobile device? And how will the decreased area affect the accuracy and speed?– Jeremy ANov 29, 2012 at 20:09
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
1I never thought of a diagonal-ly layout.– user67695Feb 9, 2018 at 14:21
You've been drinking too much! Feb 12, 2018 at 8:07
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.
2Not true for all situations. If you want people to consciously choose between 2 options a radio works better because it forces a choice, a single checkbox as a choice in this context can't be a required field.– WanderNov 8, 2012 at 17:13
@Wander You could force the checkbox to an undesirable option so that the user has to click it to turn it off: "Are you a murderer?" Uncheck.– user67695Feb 9, 2018 at 14:23
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.