1

I am currently working on digitalizing a form which throughout has a lot of questions where the answer is either "Yes" or "No". My main question is which one is the better UX option: Placing the options side by side or stacked?

My initial thought, and current design, is to place these two options side by side. It's either or, and it feels (to me) more natural to place these side by side. Though that's not a very good argument for why I've decided to do it this way.

Another topic of discussion arises when at a later stage, the user is presented with a question that has a varied number of answers, based on if they answered "Yes" or "No" on the previous questions. I have added two examples below (Keep in mind the questions and answers are re-written to semi-censor the content, but the structure of the questions and the answers are the same as the actual version, so don't mind the quality of the copy):

enter image description here

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

enter image description here

As you can see, based on what the user answers on the first question (and alternatively the second), the "What happened?" question will display varying amount of options. For the sake of consistency in design/structure, these options will be stacked, regardless of how many options are available. My instincts tells me it's more natural to put YES/NO options side by side since the answer is 'either-or', whilst a list of different options that 'accidentally' happen to be two should be stacked.

I don't want to just disregard my instincts because it would be easier if I do, but I also don't want to blindly bulldoze other visual alternatives based only on my instinct.

4 Answers 4

2

I prefer the side-by-side for the yes/no, but if you do put them side-by-side, don't put them in a table that spreads the two columns across the width of the window.

The bad effect can be seen somewhat in the posted image, but I happen to use a 4K monitor, and if that yes/no had tried to fill the whole screen, the two check boxes would be a foot apart. That's awkward to use and annoying to look at.

On the other hand, don't force them so close that the check box that appears between the "yes" and the "no" is visually ambiguous about which word it selects.

You might even try something like:

Question ... ?
    No ◎  ◉ Yes
1
  • I appreciate the feedback! We have set a max width for the content section so the two options will never span the entire width of the screen to which your concern occurs. But one might definitely argue that my current layout is already too wide and that annoyance somewhat evident already.
    – mxds
    Jul 1, 2023 at 6:54
1

I think the biggest problem is that you are conditioning the design structure

You don't clarify in the question if the capture is the final design, if so, it presents an added problem to the simple distribution of the radio buttons: virtual layout axes. This totally conditions the design, it is not surprising that anyone can think the following components should follow this two-column layout, regardless of the content.

enter image description here

If the radio buttons only contain the label Yes or No, the distribution to a column with double subdivision is the most usual and does not condition the following content.

enter image description here

If the radio buttons have another type of content (a phrase), personally I would avoid a type of layout that conditions the total content, something impossible to establish if the 100% of this content is not known from the beginning.

enter image description here

1
  • Thank you for your input! I could not upload an image in this type of reply, so I have edited my original post with updated examples to, hopefully, clear up the stuff you are pointing out. You could argue that the Yes/No questions should be re-worded to be a phrase, but it will always repeat the question in the answer, and I'm not sure that is any better: Did you make this purchase? Yes, I made this purchase No, I did not make this purchase
    – mxds
    Jul 1, 2023 at 6:48
1

Looks like stacked side-by-side works best

Separate the questions and the answers in columns to make them more readable, scannable and usable

Get rid of all the empty space in the buttons and the layout both horizontally and vertically

enter image description here

0

I'm assuming that neither of the yes/no options is selected by default as that would bias (or at least pre-load) the response and therefore not allow for a conditional behaviour for the rest of the form? There's already going to be some element of bias due to which comes first, Yes, or No, but given that your users are being asked for clear facts rather than opinions then I don't think that matters too much here.

Given that some of your answers have two options (Yes/No), and some have two but not of the yes/no type, and some have more than two options and which are all stacked vertically, then I suggest that the two-option yes/no answers are also stacked vertically. This will provide a consistent approach to all questions which will have the following benefits:

  • helps the flow of the form
  • makes it easier for the user to scan down the form
  • brings the short yes/no answers physically closer to the questions
  • results in less eye movement (not so much side to side)
  • still works well on mobile devices where the screen is narrower and the scrolling direction is inherently vertical (although maybe your form is responsive anyway)

If your form consisted entirely of yes/no questions and yes or no always had the same sentiment - like a health check list, then I might put them side-by-side, but not in your case - unless there are other factors not mentioned :)

Here's how it looks vertically stacked:

Form with all answers vertically stacked

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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