Which input control is recommended for a large value range?

Question

I'm working on a web app that allows the user to enter a timing value in a range from 0s to 1s with a step of 200ns (yes, nanoseconds).

I tried that with an input of type range (slider) but that's not working very well. My problem is that I have to decide what unit to use. If I go for µs I have to show values from 0 to 1,000,000µs with steps of 0.2µs which does not look very good. Also there's the issue that it's obviously impossible to slide from 500.0 to 500.2 as there are too many steps available on too few graphical space...

So I'm thinking about sth. like using four input boxes, one for every scaled unit:

[s] [ms] [µs] [ns]

What do you think? Are there better ways to accomplish what I'm trying to do? What about dropdowns or a single input field that has to be parsed?

Answer 1

I've taken the time to draw some wireframed examples that might help you decide on how to design your time-picker control. Below you can see 3 screenshots which show (IMAGE 1) a time-picker control for all units, an increment button, decrement button, numeric input field and unit picker dropdown (if needed.)

IMAGE 2: The idea is that you set it up so that your increment/decrement buttons raise the value differently for each unit. So the + next to seconds would raise it for +1s, the + next to ms would raise it +500ms, etc.

Hope this helps you solve your problem.

Answer 2

Another option is a logarithmic slider, like this:

^{download bmml source – Wireframes created with Balsamiq Mockups}

This is appropriate when the value can span multiple orders of magnitude, but the number of significant figures is low. It will not allow the user to select between, say, 500 ms and 501 ms, so I suspect it might not be what you need. It may be useful to solve similar problems not requiring full precision, or you could consider combining it with a multi-unit text input like the one McKnight suggested.

Answer 3

Using many input controls with different measurments is rather not optimal, because user will spend time to decide, which one fits to him.

You may trim and move x100ns outside edit:

^{download bmml source – Wireframes created with Balsamiq Mockups}

If odd value is entered, after leaving focus it is corrected to odd (lesser or bigger).

Also in similar cases for digital equipment we use custom input views on touch displays — both as in calculator and with +/- buttons (Reset, Delete, 0, Min and Max values are also included). As I understand, it is specific subject matter in your case, with professional users, so you may also add even slider to improve value entering or modify it specifically for your case.

^{download bmml source}

Answer 4

I don't know how easy this would be to do in Javascript, nor whether it would be appropriate for your particular application. In an app I've worked on, our design team solved this by having a slider and a specialized text field. The slider covers the typical range of the parameter, but the text field allows a much larger range, and you can click and drag left or right to go beyond the range of the slider.

So, for example, you might have a parameter where the typical range is 0-100, but the allowable range is [-1000,+1000] (or even infinite!). Using the slider would only allow entry of 0-100 in increments of 1. The user could single click the text field and drag left or right to go outside that range, or they could double-click to enter an exact value within the larger range.

The downside to this approach is that if the user isn't aware of this functionality, they will assume the slider covers the entire range. The upside is that the slider is a good UI element that people understand and it works for the part of the range that 90% of users need, but users are not limited by it.

Answer 5

Really interesting problem. Hopefully this solution is self-explanatory.

^{download bmml source – Wireframes created with Balsamiq Mockups}

EDIT

It wasn't self-explanatory.

The range at any given time is one of:

• 0us -> 1us
• 1us -> 10us
• 10us -> 100us
• 100us -> 1ms
• 1ms -> 10ms
• 10ms -> 100ms
• 100ms -> 1s

Clicking on "shorter" or "longer" alters that scale, and moves the triangular slider to one end of the scale or the other, as appropriate.

You can manually type a value in the edit box, or use the up/down arrows for precise control. The units reflect the current choice of scale, and aren't editable.

For reinforcement of the current scale, the currently selected time unit is shown in alternative units outside the box.