5

Radio buttons always seem to precede the label and not the other way around.

Is there any reason for this?

Don't user first read the label before selecting a radio button?

Does this have to do with affordance?

Which pattern is more user-friendly?

enter image description here

  • 2
    Even back to multiple choice test on paper it was worked that way. In the second my eyes need to move a greater distance. Yes we read the text first but the circle in my mind does not encumber that. – paparazzo Dec 5 '14 at 17:26
8

From a pure user standpoint, I see two reasons to do so.

1. Radio buttons double as bulletin points

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The left version of this list looks much more organized because it looks like a list, whereas on the right side there are three rows of text, with buttons at the end.

In your example images, this is not a problem, because you highlight every choice with it's own personal blue box, thereby separating them visually by other means.

2. Spacing and whitespace

The above mockup already shows the problem a little bit. If the options are not equally long textwise, the right-aligned radio buttons can be displaced pretty far from the option they represent. This gets considerably worse if the UI element is much larger than the options. I used a bounding box to reflect the element width, but maybe there's just no other UI element to put there, and/or the width of the whole thing is determined by something else.

For example, if you think of he above boxes as an app you use in portrait mode, when you turn the phone by 90°, it might looks something like this:

mockup

download bmml source

The top one is largely unaffected. The extra whitespace might not be beautiful, but it's not terrible, as it only adds to the existing whitespace and doesn't look particularly unnatural due to a ragged left edge.

The middle one has whitespace in front and after the text, and the buttons look misplaced, somewhere near the center of the box.

The bottom one lacks any visual connection between the buttons and the text in my opinion. Without any other guiding lines, this is awful.

I think the key here is that the text is left-aligned anyway, so adding one more column of left-aligned stuff to it doesn't change much. Adding an aligned column to a ragged edge can look strange, and adding it to the next aligned column (the right border) can displace it too far.

Why I think it can work for other UI elements

I just remembered my own phone has checkboxes and switches right-aligned in the settings (but not radio buttons!). The main difference here seems to be that the settings are clearly separated by another part of the UI, which is a thin line between them. This line also guides the eye between text and switch. Note that putting a line in between two options of a radio button array may disconnect them visually from another.

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.