2

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 Oct 28 '15 at 21:42
1

You could use a button group, like this one:

enter image description here

|improve this answer|||||
0

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.

|improve this answer|||||
0

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!

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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