4

I am designing a web application which consists of several modules, and for some of these modules the user must be able to select how many/which sources of data to display in the module.

I had originally decided to simply use radio buttons, with one radio button for each data source and one radio button for displaying every data source in the module (it is a requirement that the user can show only one or all).

However, the amount of available data sources can vary from 1 to x (x can be very high) depending on the user - and the radio buttons will do a good job if the user only has 3 data sources, but not so much if the user has 20 sources of data available.

I have considered showing radio buttons for user where amount of data sources are < 7, and using a drop down list for > 7 (we can check how many data sources are returned to the user), but I am afraid this can cause some inconsistency if the user for example one day goes from having 6 to 10 sources of data.

Another option could be displaying a radio button for selecting a single data source, with a dropdown list for this option - and a radio button for selecting every available data source.

Any suggestions on the best way of solving this?

2
  • 1
    The latter option you're describing feels sounds like the right approach.
    – Bart
    Oct 30, 2013 at 10:20
  • 1
    I'm not necessarily proposing it, but as a middle-ground option, remember you have the option in HTML of showing a <select> element as a scrollable list using the size attribute, without necessarily having to let the user select multiple items.
    – Kit Grose
    Mar 22, 2015 at 22:45

4 Answers 4

1

A consistent UI is very important. If you do as you described, having radio buttons for <7 and drop down for >=7, then

  • not only will the UI vary if the number of sources changes,
  • but also the UI could vary module to module, making the product more difficult/confusing to use.

If the option to change sources must always be present, then I suggest always using the drop down, for consistency.

If the option does not always need to be present, then I would take this approach:

  • No drop downs or radio buttons
  • Offer to change a source when a new source is added, or when the module is being used for the first time
  • When offering to change the source, display a scrolling list such as: module source selector
0

When possible, the interface should reflect the actual decisions the user has to take. In this case, a user needs to decide whether or not to go with "all" or a "single source", so separating out that decision is a good move as it will be easier for users to understand.

However, you still have an issue of whether or not to show a drop down or radio buttons for the single sources. I would recommend taking an approach similar to what you have described (i.e. over a certain amount use drop down, under a certain amount use radio buttons), but make sure the amount of options you are showing for is based on what the design can handle. 7 may be too many for a phone, but just right for a 960px grid on a desktop/laptop.

Here is more info on drop down usability: http://baymard.com/blog/drop-down-usability

1
  • Thank you for your answer. The app is for desktop/laptop, so I have more space at my disposal.
    – hxw
    Oct 30, 2013 at 13:02
0

Radio buttons are only good for a few standard choices. You have described:

can vary from 1 to x (x can be very high)

A drop down list can handle from one to a few hundred options with ease. If you only have a single value set it to auto populate in the text box for the drop down.

You don't mention a requirement to use radio buttons, only a preference early in design before the number of values was known. Leave Radio Buttons out and jsut go with drop down. Inconsistency can be extremely frustrating.

2
  • I agree that drop down may be the best solution for avoiding consistency issues. But I'll try to dig up some statistics on the amount of data sources our various users have. If the average amount of data sources is less than 7, I think maybe using buttons by default and switching it with drop down lists for users with more than 7 (or less) may be the best approach. Do you have any suggestions for the best solution if the user must be able to select multiple data sources, but not every available data source (check boxes instead of radio buttons)?
    – hxw
    Oct 30, 2013 at 15:40
  • 1
    Is there a reason you can not have multiple select in your drop down? Most systems will allow multiple select with ctrl Oct 30, 2013 at 19:15
0

Limiting the number of options as a determiner for which UI input method to use breaks the logic for these elements.

Drop-down menus can be single or multi-select and if the intent is to limit the user to a single choice you should use radio buttons and set a default selection.

Drop-down menus have issues with long lists of options as well forcing the user to know what they are looking for, scroll forever to locate options and remember all the options before making s selection. There is a new trend to add a search field to drop-down because of these types of issues.

Radio buttons have a lower cognitive load for the user as it allows users to see all options and compare them when making a choice.

The key is to make sure that you layout the options to avoid visual noise.

Its also important to default select an option when using radio buttons.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.