To align radio buttons in columns or not

Question

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:

...or intentionally break the alignment:

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:

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?

Answer 1

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.

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.

Answer 2

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

Answer 3

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

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