14

I want to give the user the option to select a numeric value which falls in a range (0-1000), where most multiples of 5 are acceptable.

Usually, for this kind of thing, a slider would be perfect - just implement it in a way where the min is 0 and the max is 1000, and it has a step/snapping behavior of say five: 0,5,10,15,20,25,30,35,40,45,50, etc.

However, I have an issue this time, in which the allowable values do not have a consistent step. The step is typically five, but at 15, 40 and 55 the step is ten: 0,5,10,15,25,30,35,40,50,55,65, etc.

Due to a technical reason, I can't use the slider component I have for this, because it requires the step to be consistent.

Is there some other user-friendly way I could allow the user to easily select a value? There are too many allowable values for it to be practical in a dropdown, and a simple input field doesn't really work well when there are a set list of allowed values.

EDIT: As a lot of people are curious as to the context, this is for an ISP ordering portal. Users need to be able to change the bandwidth/speed of their device in Mbps; however, as per the product design, certain particular speeds are not currently being offered by the business (we explain this to the user on the UI).

10
  • 8
    I'll note that "technical limitations" is a poor reason to avoid using a slider. It's not hard to modify a slider to use inconsistent step. Mind you, you this leads to the UX choice that slider positions are either not proportional to value or the slider steps are uneven. Since you mention technical concerns, I'll note that the former is trivial to implement using off-the-shelf components whereas the latter is not. For reference, musefan's answer uses the former approach.
    – Brian
    Feb 4 at 21:25
  • 1
    I feel letting users enter the numbers is far better UX here than even slider.
    – Mr_Green
    Feb 5 at 16:04
  • 2
    Are users familiar with where the gaps are and why? Feb 5 at 20:41
  • 2
    Would be nice to know specifically what this is for. Perhaps there's an entirely different solution to your problem. We're only seeing through the tiny peep-hole that you've provided us. With as large of a range as 0-1000... it's curious that a handful of seemingly random values are not allowed. Feb 5 at 21:31
  • 1
    You say "any multiple of 5 is acceptable", but then contradict it later in the question. Feb 6 at 9:40

10 Answers 10

23

How about a combination of a slider and a spinner (number stepper)?

enter image description here

How does this work? I am glad you asked...

Your list of values is effectively an array. So rather than the slider having a list of values, it just works on the indices of the array. So if you have 10 values in array, then slider handles values 0-9. This solves your technical issue because the steps are now consistent (1 step).

When the user updates the slider, this will update the number spinner by setting it with the value that matches the index in the array. For example, if the slider is set to "4", then the spinner will be set to "25" as this is the value in the array at the 4th index (0 based).

The number spinner should be implemented to only allow the valid numbers in your array. When the spinner is updated, then the slider value should also be changed to reflect.

I think this approach gives the user an easy way to select valid values. The slider allows for quick selection, and the spinner allows for "fine tuning" if the slider becomes too sensitive (lots of values).


I should also point out one important thing... the numbers you allow seem quite random, at least from the limited information you have provided. I would suggest you review your design to ensure it is clear why some values are not allowed. This will largely depend on your context around the feature, so it isn't something I can advise on, just try to make sure the user understands the reasons for the seemingly random numbers.

6
  • 2
    I'll note that this approach lends itself very well to users typing in the number by hand (round to the nearest valid value after the spinner loses focus). While this is still possible with a combo box using Roger's approach, a slider allows a user to jump between adjacent values when the rounding is in the wrong direction. Whether this advantage is relevant depends your use case. I could see it being relevant if the user's motivation is, "I want the number to be as close to X as possible. It must not go over (under).
    – Brian
    Feb 4 at 21:32
  • 2
    This sounds like horrible UI. I want to select 45; I slide the slider up through 30, 35, 40… to 50!? That’ll leave me fiddling around trying to work out what slider position will select 45 like I wanted.
    – PLL
    Feb 5 at 15:35
  • @PLL: 45 is not a valid value, so you cannot select it. If you slide to 50, you just press down on the spinner and you will see the nearest valid value is 40. There is no need to fiddle around with the slider. It is there purely to allow moving to a value quickly, rather than repeated clicking the up arrow. Also, user has option to just type the value they want straight into the spinner and it will auto-round to the nearest valid value.
    – musefan
    Feb 5 at 15:42
  • 2
    @musefan: sure, I know all that, because I’ve read the question. But a new user arriving at this control doesn’t know it. They see a slider, giving an expectation of a regular scale, and there’s nothing obvious to warn them that this expectation will be broken, or explain why. With a bit of fiddling they can figure it out, but it will be a bit jarring.
    – PLL
    Feb 5 at 16:21
  • 1
    @PLL, hence my paragraph about how important it is to educate the user about the possible values and why they exist. Plus, you are making assumptions that these users wont already know the possible values. They may be domain experts who are already very familiar with the list of available values, and just need an easy way to select those list. Unfortunately the question doesnt provide enough detail around that, but I think it's fair to assume this isn't just some "sign up page" for the general public.
    – musefan
    Feb 5 at 16:25
16

As others have noted, we don't know what the actual use case is here. The OP has asked an isolated question out of context of the environment in which it's intended for use, and that's absolutely the wrong way to design an interaction. I highly suspect that this is an X-Y problem in that the question has been posed to solve a secondary problem Y, which is obscuring the real problem X.

We don't have details of whether the data is real or an example. The scenario sounds unusual and probably specific to a particular application. We don't know how sparse or unevenly distributed the data is.

Sliders are notoriously hard to use for accurate number selection, let alone if the mapping from position to number is not linear.

For unevenly distributed semi-sparse data, one alternative is to use a nested or grouped dropdown that splits the possible options into roughly equal ranges for a higher order and lower order. This might be analogous to the way you'd split a long list of alphabetically sorted words into those beginning A to D, E - K, L - R, S - Z, or similar.

enter image description here

In case it's at all relevant, this arrangement also helps the user to see an overview of the available data (or gaps in the data) around the value, something you don't get if you use a slider.

Depending on the sparseness, other ideas might include a bingo-card type panel, but without more information it's all just speculation...

5
  • 17
    Nooooo no no no no! NO! This is a usability nightmare!
    – mishan
    Feb 5 at 9:18
  • 3
    I agree with @mishan that drop downs like this are not fun, but perhaps the same concept could work well by just have 2 lists. You select the range in the first list, which populate the possible values in the second list... it just makes it a little less "fiddly" is all
    – musefan
    Feb 5 at 13:38
  • The gaps in the sequence are only visible once the user has inspected the list, and the missing numbers could be confusing or even encourage entry errors. I would prefer a grayed-out "20", or even a "--" placeholder over the dissonance of reading a list that arbitrarily and silently skips some entries. Compare to the list of available sizes on a shoe shopping site, where the sold-out sizes are disabled. Feb 5 at 16:14
  • @JeremyNottingham: I think that is a fair comment, but I think also we don't know what the target audience is... the users could already be very familiar with the scale. For example, imagine asking a mathematician to select their favourite prime number below 1000. You wouldn't waste their time by "greying out" 832 numbers, would you?
    – musefan
    Feb 5 at 16:30
  • 2
    @musefan Agreed, without knowing more about what these numbers refer to and how the users naturally think about them, I'm just guessing at the best presentation. Feb 5 at 16:58
13

How about a slider connected to a listbox

(please be advised, the following imagery is garish and not for the faint of heart :) )

enter image description here

Or

enter image description here

It allows a coarse selection with a slider and fine-tuning with the listbox.

Bonus points if you make the selected value editable and the change will slide the slider and move to appropriate rounded value in listbox

(In other words the same concept as musefan's answer, but with bells and whistles)


SLIDER WITH CONTINUOUS VALUE RANGE ONLY

If you have a slider that only supports the continuous value range, you can fake this by giving every value in the list an index and selecting this index by the slider.

I.E.:

list of possible values:          [0, 5, 10, 15, 25, 50, ...]
slider sliding through indexes    [0, 1, 2,  3,  4,  5,  ...]
  • if the user selects 50, it is the sixth value in the array, the slider's value is set to 5

  • if the user writes 12 into the "listbox", the nearest appropriate value is selected (10, which is third value in the array, the slider is set to 2)

  • slider is by the user to the .... value 4, 5th value in the listbox (starting from 0) is 25, which is the value selected in listbox

  • this way you can have non-continuous value range represented continuously, not by having them be continuous, but by selecting their position in the list.

5

It is better to go with a simple input field that only accepts numeric values to min and max of 0 and 1000 respectively. i.e Letting the user enter the numbers from the keyboard. Use JavaScript to only allow divisible by 5 numbers. Show proper validation color codes to guide the user.

To make UX better on Mobile and tablet, we can use HTML attributes like inputmode which can show the virtual keyboard with only numbers in it.

Example screenshot:

enter image description here

Example code:

<input 
  type="number"
  inputmode="numeric"
  autocomplete="off"
  max="1000"
  min="0"
/>

Representation in mobile:

enter image description here

3

I like (and have personally implemented) the type of control described in musefan's answer. Such controls have their upsides and downsides, which need to be carefully considered.

Here is an alternative worth presenting:

Would the user be good with the website matching the nearest acceptable value (rounding up or down, depending on which provides better UX)?

If so, this provides an opportunity for the simplest and most obvious UI for this situation: a basic numeric input field.

The user can then input whatever value they desire, and the site can adjust to an appropriate acceptable value.

Depending on the context, this likely will call for a feedback mechanism to inform the user that their value is being adjusted to the nearest valid value. This can be performed using a dynamic text field adjacent to the input box to inform the user of the actual value to be used. If the typical user is highly experienced and knows all the acceptable values, then a simple dialog box or dynamically appearing area can be used to inform the user that an adjustment to their input will be made. This dialog box or dynamic area can also be used to allow the user to specify if they want to round down or up by using intuitive "Round down" and "Round up" buttons.

One of the beauties of these techniques is that they are very easy and cost-efficient to implement, as they do not require designing and developing a custom control.

3

For me the combobox is the control for "a set list of allowed values".

Use a combobox that filters the values based on the typed in value in such a way that the nearest values above and below the input are shown.

That way you dont have a bazzilion things in the drop down except when the user wants to.

If you want to you could combine it with a slider to "explore" possible values.

If you really dont want the drop down make it a list that has a search field above.

2

Just let them type it in and do input validation.

Save yourself a whole lotta headaches.

1

0 to 1000, use a slider with 1001 values (0-1000).

0 to 1000 in steps of 5: use a slider with 201 steps (0-200), multiply value by 5.

0 to 100 in steps of 5 skipping some values: use a slider with X steps (201 minus number of skipped steps).

if they are random as it looks like, keep a list of the skipped steps [20, 45, 60, ...] and then correct the calculated value by this amount.

Below the slider I would also show a label with the selected value and maybe add two buttons for previous and next value for people who are not able to use the slider fine enough. Those should only move the slider and trigger the value calculation. Do not try to calculate the number yourself or you have double the logic.

Also you can make the value clickable to enter a number directly, but that will add extra logic to check if the number is valid. would skip that in the first iteration and only add if really needed by the customer.

Or you can offer an popup that shows all the values at once, like a calendar picker. Should be okay for 200 different values.

Just out of curiosity, what's the use cases for such a logic?

0

Don't have random steps missing. Simply show all steps and then validate that its an allowed value and let the user know if its not. This will prevent the user from getting frustrated when they can't select the value they want (which isn't allowed) on the slider.

This is somewhat equivalent to a text area with a min/max text length. You shouldn't prevent the user from entering too many characters. Rather, its better to just let them know that their input is invalid.

0

Don't use the actual value of the slider as bandwidth, use it as an index into a lookup table of possible bandwidths. Show the user the value from the lookup table, not the actual slider value.

This works well whether you have just 5 options to choose from or 50.

An Alternate Approach

If you do have a lot of bandwidth options to choose from, a slider will be difficult to use as it might take very fine mouse control to navigate options. If this is the case, you might need to step back and look at this from your user's perception of your business offerings.

In your question you say...

this is for an ISP ordering portal. Users need to be able to change the bandwidth/speed of their device in Mbps; however, as per the product design, certain particular speeds are not currently being offered by the business

I'm guessing here, but I imagine you don't have a single package with a ton of different bandwidth options. Instead, you offer your customers different package details for bandwidth options. E.g., "Basic Package", "Medium Package", "Fast Package", "Ultra Fast Package"

But even if if you don't have package options, then give your user a lead-in question at first, such as "Would you like slow, medium, or fast speeds to choose from?"

Either way, their choice helps you bracket the speed range to prompt for, and overall makes for a simpler UX problem. Rather than choosing a bandwidth from every one possible, they only have to choose from the bandwidth options for the given package, which is a smaller selection.

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.