22

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?

Improve this question
7
  • 1
    Not sure I understand what you mean -- aren't radio buttons circular? Could you add a screenshot?
    – Andrew Shipe
    May 8, 2012 at 17:42
  • how many makes many? :)
    – sree
    May 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
    – Peter
    May 8, 2012 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, 2012 at 19:22
  • 2
    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, 2012 at 13:23

14 Answers 14

Reset to default
27

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.
Improve this answer
7
  • 5
    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, 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.
    – Jimmy Breck-McKye
    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
    – Benny Skogberg
    May 8, 2012 at 20:50
  • Point 1 doesn't count in this question as this is about yes/no, nor is Point 4.
    – Tamara Wijsman
    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.
    – Jimmy Breck-McKye
    May 9, 2012 at 8:39
38

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

Improve this answer
5
  • 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, 2012 at 19:57
  • 2
    Nice mockup, makes it clear what you're talking about
    – Ben Brocka
    May 9, 2012 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, 2012 at 19:50
  • Agree with Horizontal alignment is easier to scan. However this may differ in smaller mobile screens.
    – Hasanga
    Nov 30, 2012 at 6:24
  • 1
    From a UX perspective checkboxes are better suited if you just have 2 oposing options.
    – J.T. Houtenbos
    Nov 9, 2015 at 11:50
14

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.
Improve this answer
3
  • Checkboxes are even shorter and more consise.
    – J.T. Houtenbos
    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
    – Steve Wortham
    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.
    – J.T. Houtenbos
    Feb 15, 2018 at 13:46
5

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

Improve this answer
1
  • 1
    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, 2012 at 6:22
2

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.

Improve this answer
1
  • 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.
    – user67695
    Feb 9, 2018 at 14:16
2

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.

Improve this answer
2

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

Improve this answer
1
  • 1
    Ha Ha, "Have you ever been in a car accident?" Thumbs Up!
    – user67695
    Feb 9, 2018 at 14:20
1

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.

Improve this answer
3
  • 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, 2012 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, 2012 at 20:18
  • 2
    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, 2012 at 20:29
1

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.

Improve this answer
1
  • 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, 2012 at 20:09
1

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

Improve this answer
1

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

Improve this answer
1

Does it have to be a traditional radio button if it is only a yes/no?

My answer is no.

Does it have to be a traditional radio button if it is only a yes/no?

Improve this answer
2
  • 1
    I never thought of a diagonal-ly layout.
    – user67695
    Feb 9, 2018 at 14:21
  • You've been drinking too much!
    – RobbyReindeer
    Feb 12, 2018 at 8:07
0

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.

Improve this answer
2
  • 2
    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.
    – Wander
    Nov 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.
    – user67695
    Feb 9, 2018 at 14:23
0

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.

Improve this answer
1
  • Why the downvote?
    – rpax
    Jul 4, 2015 at 2:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.