blink design library

More Radio Buttons Driving Form Behavior

This example, from Virb, is via Signal vs. Noise. It is a similar idea to what's shown in this previous post, where radio buttons at the top of the page (with strong visual emphasis) drive the form behavior.

In this case, each option has an associated "details" button, which displays help content below:

It's a small detail, but I wanted to see the triangle on the far right move to the "point down" position when the help content is open. This would help indicate that this works as a toggle (clicking again closes the help content) and is a common visual cue found not only on the Web but also in Mac OS X.

Using Radio Buttons to Drive Form Behavior

In a form, it's often handy to ask users an up-front question that will dynamically change what fields are displayed. And, often, radio buttons would seem the ideal control for presenting the options.

The problem is that radio buttons at the top of a form are often overlooked by users, who instead jump right into entering data in the fields.

This form uses a background color to highlight the currently-selected option.  The highlighting helps draw the eye to the radio button selection, making it much less likely to be overlooked.

From: Wetpaint