15

I have a slider in a web page (similar to this one) to control the the duration of how long to keep an item before it is removed:

The range of values goes from 0 to 90, with the value 0 being used to mean 'never' (i.e. never delete the item).

Does it matter that the 'never' option is at what seems to be the "wrong" end of the slider? It feels more intuitive to me (although I can't verbalise why) that dropping the duration to zero means to not delete, but I can also see the logic that "never" is larger than any other duration and so should be at the right-hand end of the slider.

Which is less likely to cause confusion, or is there a better way of doing this?

Are there any examples of this sort of control elsewhere that I can use as an example?

1
  • 6
    For what it’s worth, I equate “delete after 0 days” with “delete immediately”; the fact that 0 is used to mean “never” is an implementation detail.
    – Jon Purdy
    Jan 12, 2013 at 2:53

7 Answers 7

22

The way that you have it now breaks the way that we expect numbers to work. 90 days is greater than 10 days, so the 90 days option is on the right. Never is the equivalent of infinity days, and so it should be the last option on the right.

The far left option on the slider would correspond to never keeping them in the first place - assuming you want that as an option.

As an alternative to the slider, I like using a selector which makes all the options visible from the start. Something like:

enter image description here

1
  • I've gone with this approach in the end. Thinking about it further, the user doesn't need control down to the day level, so having some sensible options to choose from is better. Using buttons for this works better as well. Jan 14, 2013 at 12:09
22

I like JohnGB's answer. It's less fiddly and more visible than the slider.

For the sake of offering an alternative, if you do want to retain the slider, I would consider taking the 'never' option out. It doesn't really fit within the concept of a fixed range that the slider implies. In this version, you would only show the duration slider if "Delete automatically" is selected.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

4
  • 3
    You nailed it. Given the information we have about the problem, your wireframe is the most descriptive to the user. The only note I would add is to make the "delete automatically" slider default to a smart value; a value that is likely to selected by users most of the time.
    – Andrew
    Jan 11, 2013 at 18:46
  • 1
    I agree with this solution. Never is a boolean value, while sliders inherently indicate range. Having a boolean value to one end of a slider is challenging to say the least. The slider indicates a scale, and implementing infinity on a scale is something regular users tend to have difficulties comprehending.
    – kontur
    Jan 11, 2013 at 19:05
  • 1
    ...or you could just have a checkbox, "[ ] delete aromatically after..." instead of the radio-group. Jan 12, 2013 at 13:06
  • One check box that enables the slider.
    – user117
    Jan 12, 2013 at 15:16
17

If you use the slider, stick with it as the sole means of control. Extra controls add too much "tool time" in making the decision and may be confusing.

The solution I propose is to simply reverse the fine concept you have.

Make "Never" at the END of the slider and 1 as the lowest value on the slider.

enter image description here

Set the slider to the default setting or a previously set value. Once that is done, the range of the slider is made clear. If the default is Never then the slider will appear as indicated in the second slider in this image. No problem.

If its a numeric default, like 14 days, it will be set like the first example. and sliding down to one or up to never will be completely apparent.

The responsive label will further clarify the choices. (update it on slide). In this image I updated the label to a structure that conveys the choice in a conversational tone. Go the extra mile to change "days" to "day" when one is selected. That's a peeve of mine.

Finally, consider shortening the slider a bit and perhaps add indicators to help the user understand the range. See the last example in my image.

EDIT:

The button style radio UI is a good alternative but will get bogged down if there are more than a few choices. "Never" should be a choice. The slider makes it easy to choose between several options and can throttled to certain values.

3
  • 2
    What's the user supposed to think the value is midway between 45 and Never? To me it looks like a slider with a crazy asymptotic behavior. Jan 12, 2013 at 0:45
  • I guess. I see the 45 setting as the halfway point. But that's why we test isn't it? Perhaps, it could be 1,45,90 and never.
    – Itumac
    Jan 12, 2013 at 2:25
  • @PeterOlson - I agree that there's a real ambiguity about selection that are far to the right but not quite set on never. See my answer below for a possible solution. Jan 12, 2013 at 12:21
13

Keep the slider, but put the 'never' selection on the right, and notch it so it appears apart from the finite values, as per the mockup below (mind my terrible MS Paint skills):

enter image description here

This way, you can use a single UI control with an obvious model of operation (move the slider right for longer intervals, and vice-versa), but you don't have any ambiguity around a selection close to 'never' but not quite on it (if there wasn't a notch, what would a value between '20' and 'Never' equal?).

2
  • a disadvantage of this solution is that it is not (yet) a standard user interface element. A user will not recognise its meaning right away. In the context of this question its meaning is clear, but out of that context it may be more difficult.
    – iDeveloper
    Jan 18, 2013 at 21:11
  • @iDeveloper - you'd test it, but the labels should still be enough. I would rather use a custom UI element that communicates the correct model than a 'standard' element that has a misleading operation. Jan 19, 2013 at 10:57
7

I like JohnGB's answer but I'd go even further and say that under most circumstances people wouldn't care to specify an exact value. They'd rather have a small handful of easy to understand choices, e.g.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Of course, it totally depends on who the user is and what they are doing. If they really need a specific number of days, I imagine what they really need is a specific date, in which case a date input would be even better.

If you really need a slider though, put never at the right end. The left end is zero, which means "delete now". So maybe in fact the left end should be 1 day.

1
  • "Delete after never" sounds awkward and unidiomatic. Jan 12, 2013 at 0:43
3

You could add a checkbox. When checked, the slider becomes active, meaning automatic deleting is activated. If you uncheck it, no deleting will take place.

2
  • To me this isn't as clear and results in needing 2 controls.
    – boatcoder
    Jan 18, 2013 at 18:25
  • If you dim the slider when the checkbox is unchecked, wouldn't that give enough feedback? It is a pretty common application.
    – iDeveloper
    Jan 18, 2013 at 21:13
3

I would advise against sliders: they are fiddly to use and its difficult to be precise. As joe says, use radio buttons for commonly used values if those make sense to your user, and if you do need precision, let the user enter digits.

2
  • Agree. In this case a precise value is required and it is difficult to enter a precise value with a slider.
    – ripu1581
    Jan 14, 2013 at 4:36
  • Yea, I hate sliders on web apps. Not real fond of them anywhere except as volume controls.
    – boatcoder
    Jan 18, 2013 at 18:25

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.