I'm creating an interface for users to create and define a hot drink.
I have a check box for add milk and another for add sugar. If the user confirms this selection I would like to allow them to select between a little, some and plenty.
I have tried using a range control, as well as adding additional radio buttons but both options looked terrible. Is there a good example interface that provides a solid User Experience for this situation?
You could use a button group, like this one:
There are two questions to ask yourself:
If sugar/milk are sensitive actions, or something the user won't choose frequently, it is your best option to make the user explicitly say they want to add sugar before asking them how much. This could be done using a checkbox, that when clicked, makes a select box appear asking for further details. He checkbox gives the user quick control over enabling and disabling, while the select box lets the user make an adjustment. The select box should only be visible when the user has enabled the check box (unless it's grayed out).
If the user is going to very frequently choose a value for this, and particularly if there is no uncharged, radio buttons are your best bet (four radio buttons, the options being none, few, some, and plenty). A combo box can be used if you need to conserve screen real estate.
As an alternative to a combo box or radio buttons, you could also consider a slider.
My approach would be similar to Cosmic's. I would prefer the additional option of the select box fading in once the box is checked. Below is how it would look with selects disabled until a box is checked: adds a lot of information that won't be used. So I'd follow this pattern but hide the select until the box is checked.
Didn't want to do a duplicate answer but wanted to provide a visual!
