Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 14 down vote favorite
7

Currently looking at a longish form with a lot of yes/no options presented as radio buttons. Is there any evidence that displaying radio buttons either vertically or horizontally is preferable?

share|improve this question
1  
Not sure I understand what you mean -- aren't radio buttons circular? Could you add a screenshot? – Andrew Shipe May 8 '12 at 17:42
how many makes many? :) – sree May 8 '12 at 17:46
Andrew: I mean stacking them vertically as here google.co.uk/… or horizontally with the yes/no side by side – Peter May 8 '12 at 17:50
1  
From 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 Attrill May 8 '12 at 19:22
1  
I 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. – JeffH Nov 8 '12 at 13:23
show 2 more comments

12 Answers

up vote 17 down vote accepted

I'm not a fan of horizontal layouts for radio buttons for four big reasons:

  1. 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.
  2. 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.
  3. 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)
  4. 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.
share|improve this answer
3  
In 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. – Steve Wortham May 8 '12 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. – Jimmy Breck-McKye May 8 '12 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 – Benny Skogberg May 8 '12 at 20:50
Point 1 doesn't count in this question as this is about yes/no, nor is Point 4. – Tom Wijsman May 9 '12 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. – Jimmy Breck-McKye May 9 '12 at 8:39
show 1 more comment
up vote 25 down vote

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.

enter image description here

share|improve this answer
3  
I 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. – Steve Wortham May 8 '12 at 19:57
2  
Nice mockup, makes it clear what you're talking about – Ben Brocka♦ May 9 '12 at 16:41
1  
Horizontal as we are taught in the western world to read from left to right so that makes the horizontal option seem more natural. – Adriaan Jun 1 '12 at 19:50
Agree with Horizontal alignment is easier to scan. However this may differ in smaller mobile screens. – Hasanga Nov 30 '12 at 6:24
up vote 9 down vote

I agree with Anna Rouben's answer. However, my layout is slightly different... enter image description here

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

  1. Horizontal Radio Buttons are preferred when the options are short and concise and are guaranteed to fit on the line without wrapping.
  2. I'm right aligning each question in a table cell to make it easier to associate the question with its corresponding Yes/No response.
  3. 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.
share|improve this answer
up vote 4 down vote

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.

Source: http://msdn.microsoft.com/en-us/library/windows/desktop/aa511488.aspx

share|improve this answer
When 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. – Hasanga Nov 30 '12 at 6:22
up vote 2 down vote

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.

share|improve this answer
up vote 1 down vote

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.

share|improve this answer
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 A Nov 29 '12 at 20:09
up vote 1 down vote

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.

share|improve this answer
up vote 0 down vote

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.

share|improve this answer
Since when is there a universal obligation to provide a neutral answer? In some cases it's useful, in others it isn't. – Vitaly Mijiritsky May 8 '12 at 19:25
1  
I 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 A Nov 29 '12 at 20:18
1  
FWIW, 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. – Kimberly A. Nov 29 '12 at 20:29
up vote 0 down vote

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.

share|improve this answer
Not 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. – Captain Nov 8 '12 at 17:13
up vote 0 down vote

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

share|improve this answer
up vote 0 down vote

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

share|improve this answer
up vote -1 down vote

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.

share|improve this answer

Your Answer

 
discard

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.