I am working on an app which requires filtering of distance: < 10km < 25km < 50km < 100km

My options are: 1 row with 4 buttons for each distance option, or a range slider that snaps on increments. I am thinking of increments as 1,2,3,4 , which can just be validated on the back-end, but I'm really trying to look for a better way of selection here.

What are the pros and cons of one over the other?

Thanks in advance

  • 1
    When you say "app" is this going to be on a touchscreen device? With UX context of use is critical. – Jason A. Jun 22 '16 at 8:18

In my opinion using buttons will be more ergonomical or efficient to use. Buttons demand less work from the user, because all the distances will be displayed, and the user won't need to play with the slider to see the different options.

When interacting with the buttons only 1 click will be necessary to complete the action, while the interaction with the slider will demand selecting the slider moving it left and right to see the available options and then positioning it in the right place. That's 1 user interaction for the buttons vs 3 for the slider.

However, I don't know the domain and context of your app and sometimes it would be better to use slider if the context makes it the better option. I'm just telling you that using the 4 buttons will require less cognitive resources than the slider, but that's it. In order to really see which is the better option in your specific case you should do user tests or A/B tests.

  • 1
    I am currently thinking of the same thing, and I am really interested with "buttons demand less work from the user" so , thanks! Will use this one. +1 – Cyval Jun 22 '16 at 8:18
  • 1
    I would suggest that the most significant step of the cognitive load a user needs to bear is that these numbers are a connected range and that they need to select only one. A slider is far more immediate at implying this "connectedness" than four buttons. e.g. 4 buttons = 4 possibly unrelated options - then user needs to read buttons and connect the dots in their mind = cognitive load. – Jason A. Jun 22 '16 at 8:24
  • 1
    Hm, 0 km |–⊣––⊣––––⊣––––––––––| 100 km – Crissov Jun 22 '16 at 12:52
  • 1
    @Crissov Your solution is actually better if the different distances need only one click, like radio buttons. Good stuff. – Kristiyan Lukanov Jun 22 '16 at 12:56
  • @Crissov Your solution is good, however I'm thinking that the user may still need to figure the options, so I also need some labels that will tell the values. Hm.. – Cyval Jun 22 '16 at 23:57

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.