Wednesday, 19 October 2011

Saving Clicks by replacing Radio Buttons

There are many cases where radio buttons are really useful, but they are also often misused.

I'm in space. SPAAACE!

And there are many ways to fail with them. Good placement of radio buttons is very important to make absolutely clear which radio buttons belong to a group. Therefore they shouldn't be placed too far from each other and a spacing to other controls and especially other radio button groups is the key. If you’ve ever seen some radio button floating incoherent in space, or wrongly grouped ones, you know what I'm talking about.

Another popular bad usage of radio buttons is when they provoke unnecessary clicks like in this example when configuring the Server Group Properties of the Microsoft Team Foundation Server 2010:

Team Foundation Server "Group Properties"

Seriously, did you intuitively figured out how the radio buttons behave here?

Another well known example for this is the dialog in Excel when you’re about to delete some cells:

Excel "Delete" dialog

In many cases it would be better to drop some action buttons to avoid some extra clicks.

When you open an Office Document in Microsoft SharePoint 2010 you will get the following dialog:

SharePoint 2010 "Open Document" dialog

The preferred design would look like:

Preferred SharePoint 2010 "Open Document" dialog

Another example of this would be the "Paste Special" dialog from the Windows Live Writer:

Windows Live Writer "Paste Special" dialog

That could look like:

Preferred Windows Live Writer "Paste Special" dialog

Saving clicks is a especially a common task when it comes to touchscreen optimized interfaces. There are already many examples how that can be achieved:

Windows 7 "Copy File" dialogAndroid radio button submenu
posted on Wednesday, 19 October 2011 00:18:13 (GMT Daylight Time, UTC+01:00)  #    Comments [1]