2

I'm using a material design editable numerical value (percentage) with optional horizontal slider.

What is the best way to show a user that picking a certain value either using the slider or field will produce an error?

enter image description here

For example, selecting below 20% on the slider will produce an error. In the case when the user has selected above 20%, is it correct to show the fill colour on the slider up to the selected percentage? Should the area on the slider below 20% be shown as red? Or should the area only be shown as red if a percentage within the area has been selected by the user?

Improve this question
4
  • do you have a mock of what you currently are working on?
    – Mike M
    Aug 21, 2017 at 0:15
  • Are users selecting a start and end range, like flights with a min / max range? Is this for mobile, desktop or both?
    – Mike M
    Aug 21, 2017 at 0:23
  • @MikeM Single value selection and for both.
    – user747372
    Aug 21, 2017 at 0:27
  • 1
    Why wouldn't you just make the leftmost position 20%? Starting at 0 is arbitrary and if it's invalid, there's no obvious reason to show it. Users will understand that 20% is the minimum without the irritating errors, and they'll be better able to set exactly 20% if there's nothing to the left of it.
    – Nathan Christie
    Aug 21, 2017 at 4:13

1 Answer 1

Reset to default
3

Consider the difficulties of sliders, when a single input with some hint text can suffice.

First try a simple input with some hint text and a % suffix that's immutable.

I don't have all the background of your use case, but here's a first attempt based on the info you've provided (my hint text could be better). You can test with users to see the input errors.

mockup

If you must use a slider

There's some work on sliders from the Nielsen Norman Group: Slider Design: Rules of Thumb

Sliders work best when the specific value does not matter to the user, but an approximate value is good enough.

From your mockup, you have a range with input to two decimals. This will be difficult for a user to get that precise. At that point, they'll probably just use the input field for precision.

You also have only one value to input. Sliders are often used specifically for a min and max value, a bounded range:

enter image description here

Even here, the screen on the left is problematic, because the input fields are covered by the users finger on mobile.

Left: The sliders on BrilliantEarth.com place the labels describing the slider increments below the slider track, where they will be obscured by the user’s thumb during the interaction. Right: AirBnB.com correctly displays the slider values above the UI element, so they would remain visible throughout use.

Alternatively, consider a different UI element that allows users to tap or even type to specify their choice rather than relying on press-and-drag gestures.

Baymard also has an article re: Sliders. Form Usability: 5 Requirements for Slider Interfaces:

While testing 18 major e-commerce sites for our study on e-commerce filtering, one of the form interfaces that proved most problematic to the test subjects were sliders.

Improve this answer
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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