I'm working on a web based application, so it will be used on desktop and mobile devices. The problem is, that I'm looking for the best way to make a user set their ratings to a goal (a baseline and a goal value). There are multiple solutions here, but it's important that the scale may vary from 1-5, 1-6, 1-10, etc...

Here is what I'm thinking about: (the screens only representing the type of rating, they are not the final designs)

enter image description here

I prefer the type 01, but with that the user can't see what the scale is. With type 02, if there is a larger scale (1-10), the numbers will have a lot smaller space and will be harder to select.

Is anybody have a better solution for this? Is there any other application with a similar UX?

3 Answers 3


If the scale is going to vary then you are right to be concerned about screen space. The slider (type 3) just won't be good enough if you change it to a higher number (i.e. 1-10). Even in your screenshots, 5 values on the slider is already starting to look busy. So discard that completely.

Type 2 could work, but do not adjust the size of the buttons. Instead you could design it to wrap onto multiple lines as required. Thus keeping the button sizes large enough to be accurately clicked with ease.

Personally I prefer Type 1 though because it's nice and simple and doesn't overload the screen with lots of buttons. Type 1 also handles a large amount of options much better, the other 2 options are going to quickly cause problems if you start having options more than 10.

If your only concern with Type 1 is that the user cannot immediately see the range, then you can just add this to the labels. Either add "(1 - 10)" next to both baseline and goal.

It might be sufficient to just have it written once though, if you have a description label above the settings. For example, "On a scale of 1-10, set your baseline and goal" (or whatever text suits your application function).

Note, everything I have said is based on the mobile layout. In the user has a large screen then you can make all 3 designs work equally well. So perhaps you might consider only using Type 1 for mobile devices and something else for desktop.

  • Thank you for the answer! :) You speak from the bottom of my heart, that's exactly what I was thinking. I will make a small adjustment to type 01 to give it a label, and maybe that's it :) I'm planning to make some usability tests so I hope this solution will be ok :)
    – leone510es
    Commented Jun 22, 2020 at 10:11

enter image description here

Adding some buttons for fine control so larger values can be handled efficiently.

  • It's an interesting idea, but with values as high as 500 it would probably be simpler to just let the user type the number in a box.
    – musefan
    Commented Jun 22, 2020 at 10:40
  • Right, I am trying to show that, with slider, the user can see the min-max limit without having extra space for blocks.
    – Codesigner
    Commented Jun 22, 2020 at 10:45
  • Yeah I get that, like I said it's an interesting idea for how to make a slider work for large ranges. I wasn't trying to suggest it is a bad idea.
    – musefan
    Commented Jun 22, 2020 at 12:51

The problem with Type 1 and Type 3 is that they necessitate default values. The problem with that is:

  • Default values might bias the user into selecting them ("3 is good enough, I'll leave it there")
  • Default values provide a value, and you might want to let your user skip the question without setting a value

Type 2 does allow you to show a scale without setting a value. There are a couple of ways to design for larger scales; one that's commonly used on small viewports is to make it stack vertically, like this example from SurveySparrow:

Stacked buttons that have the numbers 1 - 10 on them, plus a traditional NPS scale on a wider screen

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.