2

I have a section in a webapp where the user can select from a series of values, which are displayed in ascending order (to perform an unspecified function). The user can select among any of these values. The screenshot below is an example of an acceptable input.

Is there a better way to display these values? At first glance, it doesn't really convey that the values are in ascending order.

i.e.

  • Should I arrange them from left to right instead of top down?
  • Should I put all options in a single horizontal or vertical line?
  • Is there a better solution than using checkboxes as shown below?

enter image description here

4
  • Can values increase by 25, 90, and 95 percent at the same time? Is this for a large screen environment, or should it also work on small screen/touch devices? Oct 6 at 9:12
  • Is the user required to select among these discrete values or can they select any value in a given range?
    – ikartik90
    Oct 6 at 9:17
  • @greenforest I believe what the OP implies by increasing values is that the values are in an ascending order.
    – ikartik90
    Oct 6 at 9:19
  • The screenshot is exactly what is intended. The user can select any one or multiple of those inputs, which are percentage values arranged in ascending order.
    – c143013
    Oct 8 at 2:51
5

The problem I see using checkboxes is that while it allows choice selection, it does not offer a visual representation of:

  • The type of action being performed
  • The value increasing
  • The start / end location of the selected values

There is a Moodle plugin that allows to select steps in an intuitive and visual way within a progress bar:

enter image description here

With an adaptation of this idea, a quantity bar can be made with the possibility of selecting / deselecting each of its steps:

enter image description here

1
  • 1
    Really like your take on this. While I have designed this n number of times, I've honestly never given it much thought. I was gonna post the same answer but held back to see what others come up with.
    – ikartik90
    Oct 7 at 13:51
0

Should I arrange them left to right instead of top down?

The right answer depends on the user's feedback and should come out from an A/B testing or usability testing result, if possible. Typically in the mobile device, we're used to for both horizontal and vertical direction, but that's also dependent on the real-state that is present there along with other contents. Typically, the user is more flexible in changing the value with the horizontal view, but that's not a rule too. If the value changes happen with the favorable interaction zone for users, you can use one of the choices.

Should I put all options on a single horizontal or vertical line?

If you mean Slider, you should choose that since it is largely used in the other designs and gives a kinda proper view for changing values.

Is there a better solution than using checkboxes like this?

Slider can be a better solution and not checkboxes, since checkboxes are typically used for checking multiple values. If you're determined to use checkboxes, then I'd recommend using Radio buttons since they restrict the user from choosing multiple values.

0

Best practice would suggest you avoid more than one row or column as it creates too much cognitive load for the user.

Re the answer above, neither sliders nor radio buttons allow for multiple selections. If you need users to select multiple values from the list then checkboxes is the correct design convention.

0

What about multi select chips?

Choice chips are a compact alternative to checkboxes, it allows users to select multiple options, they are best used for one to two short words or numbers. It also provides clear visual input to users depending on each state to indicate what has been selected

enter image description here

1
  • Please give a bit more detail in your answer. You've made a suggestion but you haven't explained why this is a better option than the one in the question.
    – JonW
    Oct 18 at 15:25

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.