4

I am building a form with two settings that have two choices each. The two settings are completely independent; the choice for one setting is unrelated to the choice in the other. The design calls for using radio buttons for these choices, and presenting each setting on its own row. The design could align the buttons in the second column:

2x2 grid of buttons

...or intentionally break the alignment:

two rows of buttons

The first is more aesthetically pleasing, but the alignment and proximity of the second column can make the options appear to be related or even exclusive. This problem is exacerbated the farther the proximity with the first column is removed:

two columns of buttons

My engineering side says that the alignment should be removed, as there is no common attribute to the second 'column'. However, the following image is presented as an argument where alignment of unrelated items improves the design and approachability of a form, and I find the argument has merit:

What metric or guideline should be used to determine when alignment is beneficial to UX vs. detrimental?

3 Answers 3

5

See the Gestalt principle of Proximity: If the choices of horizontal radio set appear aligned too far apart, they can start to form 'groups' as columns instead of rows.

There's not necessarily a hard metric, but the general principal of proximity is:

The principle of proximity states that things that are close together appear to be more related than things that are spaced farther apart.

enter image description here

Here's a super wonky paper from 1923: Laws of Organization in Perceptual Forms. Not hugely readable, but gives context for how long these principles have been studied.

Your example

Since you have only two choices, it might not be as confusing.

However, to my eyes (my opinion), I find myself looking at the right hand choices as a column of vertical radio buttons, then readjust when I look left, back at the label.

Since it seems you control the labels, perhaps you can still fake alignment, but adjust them closer together, so then horizontal choices are closer. Try it out with users and go with what wins. Task completion without mistakes is king.

3

For improved usability, whitespace between labels and radio buttons should be reduced. (Source)

enter image description here

1

I think in this situation it would be better to use comboboxes:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

This makes the association between the labels and options very clear and makes it really easy to see which options are currently selected.

The downside is that changing an option now requires two clicks instead of one.

Your Answer

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

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