I’ve noticed that, for some reason, few people choose radio buttons when selecting a style for their choice fields. I like radio buttons, however, and I use them whenever I think the situation is right. The main reason few people like to use them, I think, is because they take up so much vertical space on the screen, creating the dreaded “empty space” issue for what goes next to them. Let’s take a look:
See the space behind the red arrow in this illustration? That’s the empty space next to the radio buttons that can’t be used. However, in this example, the radio buttons work because this isn’t a data entry screen where blank space would be a bad thing. Instead, it’s a form that allows user to filter results in a View. I like the radio buttons here because the user can see all the choices for Fruit at all times. Also, all people intuitively understand how to make the choice they want by clicking the button next to their selection. And, it also works well here because there are only four choices for fruit. If the user is to be presented with, say, ten choices, then obviously radio buttons would take up too much vertical space. Let’s look at another situation that works well with radio buttons:
This example shows a multi-line text box next to radio buttons and I really like how well it uses the available space. I was able to narrow the width of the text box to just the right amount to get it snug up against the radio buttons on the same horizontal plane and it looks really good. Keep in mind that radio buttons aren’t just for choice fields. They work equally well for multiple choice fields, as well, and I want to point out something interesting about that. Here’s a similar scenario to that shown above:
Notice anything different? If you look closely, you will see that the radio buttons in this illustration are more square than round. And selecting choices here results in a checkmark rather than a circle inside the buttons. This is great, because it signals at a glance to the discerning user that this is a multiple choice type of radio button. If you have a lot of choices and you still want to use radio buttons, there is another method you can use. Take a look at this choice field with eight options to pick from:
To get this effect, create your choice field in the usual way and then resize it so that its width exceeds its height. Your selections will stretch across the screen. Note that in this example there is no empty space – only selections for the user to make. And finally, here’s a variant of the same idea:
In the example shown above, I have placed a sizable type of field on each side of my radio button field: an image field on the left and a formula field on the right. (In this instance, the formula simply displays some text.) I was careful to make both of these fields about the same height as my choice field; all three fields fit nicely together in this scenario with no wasted space. Check out the possibilities for radio buttons next time you design a form and you, like me, may end up using them more often as time goes on.