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?

  • 2
    I would avoid Yes/No, and just go with 4 radios: None. Little. Some. Plenty. If this looks bad, then it's probably a visual design issue.
    – Jung Lee
    Commented Oct 28, 2015 at 21:42

3 Answers 3


You could use a button group, like this one:

enter image description here


There are two questions to ask yourself:

  1. Is adding sugar/milk an up charge, or in any way an action that should only be chosen of the user is very certain?
  2. How often will users select this option?

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.

enter image description here

Didn't want to do a duplicate answer but wanted to provide a visual!

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.