VSTO & .NET & Excel

September 9, 2009

Goodbye Radio Buttons!

Filed under: .NET & Excel, COM Add-ins, UI Design, VSTO & Excel — Tags: — Dennis M Wallentin @ 12:20 pm

For years I have been using the Radio Button control in many of my solutions (where it has been appropriated). When using the control it was usually together with the Group Box control. The following screen shot shows a common approach when using these two controls together and where users are supposed to select one of the three options. Typically one of the Radio Buttons is also pre-checked when the Windows Form is loaded.

RadioButtons

When designing the UI and consider to use Radio Buttons the question we should raise is; when is the number of items relevant to the end users? My answer is when the users are about to make a selection, not before and not after that decision point. After the decision has been made the selected item should be viewed. 

This lead to a new standpoint, at least to me, when designing UI; instead of a group of Radio Button controls we replace them with a Combo Box control as the following screen shot show:

Comboboxes

When the Windows Form is loaded we have the same option as with Radio Buttons; to have one (or more) item(s) selected or to have no no item pre-selected. When the users have made their decisions the selected item is showed in the control. Consequently,  the UI gets cleaner and the Windows form may even be down sized. Of course, the same discussion can be applied to the List Box control.

All in all, for all my future projects I will simple drop the Radion Button control and instead use the Combo Box control. Do You agree?

Kind regards,
Dennis

Advertisements

20 Comments »

  1. Can’t agree.

    With a group of radio buttons, the user can see at a glance what the choices are.

    With a combobox (actually a dropdown list – you don’t want the combo i.e. the editable textbox aspect of it) the user needs to click the control to discover the choices. I don’t believe in making my users do unnecessary work, however trivial.

    Comment by Rob Bruce — September 9, 2009 @ 1:42 pm

  2. I have a contrary opinion. Nothing new there.

    It is very helpful for a user to see more than just the selected option. If you have only three items, use a listbox. It’s more compact than the radio buttons, and shows more than an unextended dropdown.

    Here is an example of how reducing visual clutter reduces usability. In Excel 2003 and previous versions, in the Format Axis dialogs, there were option buttons for the various tick label and tick mark options. They were all always visible. And although the options were known in advance, it is easier for the user to consider his selection when he does not have to drop down the list of options beforehand.

    In fact, Microsoft implemented this design choice even when their published guidelines for Windows Vista Application Development suggests using a listbox rather than a combobox.

    Comment by Jon Peltier — September 9, 2009 @ 1:48 pm

  3. Agree? Mostly yes, occasionally no. There’s a case: Yes/No. OK, that could be a checkbox. How about Portrait/Landscape? Is there much room for extension there?

    I’d say the rule-of-thumb would be more that we’d use a combo or drop-down list where (a) the list is longer than 3 or 4 items or (b) the list may extend at a later date.

    Comment by mikewoodhouse — September 9, 2009 @ 2:42 pm

  4. I agree mostly. Another positive to your p.o.v. is that the combo list can be made to be maintainable by normal users in Excel (that’s the only place I do development).

    A negative is it takes an extra mouse click to deal with a combo box. But then, most users don’t know they don’t have to click right in the circle so that click is a really slow one.

    Also, the radio buttons will expose the choices better, but at the expense of a cluttered screen.

    Overall, I agree with you, but as a user, sometimes I just like using the radio buttons better.

    Comment by Omar — September 9, 2009 @ 3:19 pm

  5. Mike –

    Yes/No: Use a checkbox for the Yes case. Two clicks for a two-option selection is worse than two clicks for a long dropdown list.

    Omar –

    If users can maintain a dropdown, they can maintain a listbox. I agree though that option buttons sometimes seem nicer, but a listbox is nice if you want to allow multiple selections.

    Comment by Jon Peltier — September 9, 2009 @ 6:01 pm

  6. My personal rule: if more than 3 choices use a listbox.

    As a user I like to see my choices at a glance.

    With a listbox, you need two mouse clicks vs one with a radio button.

    Comment by Abdu — September 9, 2009 @ 6:07 pm

  7. Abdu –

    If the listbox has enough rows, it only takes one click. The dropdown takes 2 minimum.

    Comment by Jon Peltier — September 9, 2009 @ 7:27 pm

  8. In our shop we’ve created a custom control, succinctly named, RadioComboHybrid. 🙂

    Example:
    Pass in a list of 12 items and, by default, it lists the first three as radio buttons and creates a forth radio button with an uneditable combobox that contains items 4 to 12. From a usability perspective; user sees four options, pick one, move one. User doesn’t see their choice, “oh, the forth one has more options”, pick from the dropdown and move on.

    RadioComboHybrid lets the developer choose how many radio buttons to create before using the combobox and which items from the list should be presented first. We’ve found the experience is great for our users.

    Comment by Jeremy Gollehon — September 9, 2009 @ 7:48 pm

  9. I see 2 perspectives here. As a user, the less click, the better; that’s the plus of the radio buttons. On the other hand, they become hard to follow when there is more than 2 or 3 items.
    As a developer, radio buttons take more UI space, and are not flexible. If I happen to realize that instead of 3, I have 4 items, I need to re-do my UI and its layout, whereas a combobox is agnostic to the number of items. So if I am sure the items will hold only 2 or 3 items, forever (an enum in .NET would be a good case) I might use a radio button. If the contents come from a list/collection, I will strongly lean towards a combo box.
    As an aside, I believe that the radio button is gone from WPF – but I can’t swear to that. It would make sense, though, because from a conceptual standpoint it’s not much more than a list of check boxes.

    Comment by Mathias — September 9, 2009 @ 8:03 pm

  10. Thanks for the reminder to think about the options and pick the best one for the task and user.

    Studies/information/guidlines/personal rules are all important – but I think considering the best possible choice for the app/control/users/specs at hand is often not a matter of following the rules…

    Comment by cmiles — September 9, 2009 @ 9:02 pm

  11. Looks like you’ve dug up a hornets nest here, Dennis! 😀

    I think I agree with all the comments here. With 2 or 3 options, I think a set of radio buttons can be very effective. Maybe 4 on a rare occasion.

    But if one needs to save space, I think a drop-down list can be very effective.

    Mathias, the Radio Button is not gone from WPF, by the way, heres’ a tutorial/discussion: http://www.c-sharpcorner.com/UploadFile/mahesh/WPFRadioButton08262008215502PM/WPFRadioButton.aspx

    — Mike

    Comment by Mike Rosenblum — September 9, 2009 @ 11:26 pm

  12. One important aspect of (a small list of) radio buttons is that they are obviously mutually-exclusive and it is easy to affix or provide help at the button level for anyone who is puzzled about what the selections mean.

    For a list, I find I often want to multi-select and it is not obvious when I can and cannot do that or that my effort has resulted in an earlier selection being dropped.

    Comment by orcmid — September 9, 2009 @ 11:54 pm

  13. Um, on a drop-down-list that closes when a selection is made, my observation about multi-select is not that applicable.

    Comment by orcmid — September 9, 2009 @ 11:56 pm

  14. The advantage of the dropdown, as Mike points out, is that they take up less space than other approaches. When I get to this point, I usually try to save space instead by removing other controls, simplifying the dialog, etc.

    Comment by Jon Peltier — September 10, 2009 @ 3:17 am

  15. Interesting discussion.

    I think at the end of the day it all comes down to the project in place. Each project has its own domain and often a decision like this depends on the project specific items to make you decide to use radios/combos/listboxes or something else.

    So I tend not to use the generic rule of using this or that but decide when the time is right 😉

    Comment by Maarten van Stam — September 10, 2009 @ 10:13 am

  16. Hi Guys,

    First of all, thanks for taking the time to comment the post. It’s good to see that UI design questions are attractive to discuss.

    One of the cornerstones in my UI design is to fully support the keyboard. So when the Combo box control gets the focus via the Tab button they can auto complete the wanted item by hitting the first letter from the keyboard.

    If end users constantly need to be reminded about the options then either the options themselves are wrong designed or the users are not familiar with the business they work with.

    Jeremy:
    I would like to see the control myself. If possible for You, please send an e-mail to me or PM me at PED site.

    Jon:
    I’m not surprised that we disagree as it by now is by design 😉

    cmiles:
    If we define best practice as something that the vaste majority of developers agree on then we should at least pay attention to it.

    Mike:
    As You already know; I don’t mind to stick out with to discuss subjects like this one 🙂

    Once again, thanks for all of Your input.

    Kind regards,
    Dennis

    Comment by Dennis Wallentin — September 10, 2009 @ 10:13 am

  17. Dennis –

    You’re right, this was a good topic. Lots of debate without rancor.

    About showing all of the options: cognitive scientists have shown that humans can hold only about seven items in short-term memory, and the process of retrieval of items from long-term to short-term memory takes time and risks distractions. Showing the options all together puts them as a single item into short-term memory using vision, which is faster and more accurate than long-to-short-term memory transfer.

    When dialogs, charts, and other graphical elements fail, it is often due to a lack of understanding of human cognition.

    Comment by Jon Peltier — September 10, 2009 @ 1:34 pm

  18. Hey Dennis,

    > As You already know; I don’t mind to stick out with to discuss subjects like this one

    LOL, indeed not! Keep it coming….

    Comment by Mike Rosenblum — September 10, 2009 @ 2:17 pm

  19. Jon,

    What You say is something that I have associated with charts only but never to list items. Thanks for pointing it out in this context.

    Kind regards,
    Dennis

    Comment by Dennis Wallentin — September 10, 2009 @ 6:03 pm

  20. orcmid:
    (Excel vba …) If you set the listbox liststyle to fmListStyleOption, even that becomes perfectly clear to the user. The listbox will either show radiobuttons if the list is set to single select, or it will show checkboxes if set to extend or multi-select.

    Comment by Jan Karel Pieterse — September 22, 2009 @ 12:59 pm


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: