28

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?

  • 1
    You could align the UI with the source of the timing, i.e. where they got this numbers from. Anyway, you need to conduct the research of how the users represent these values (it's possible most of them expess it using some unit). For power users single input field is okay. – Alexey Kolchenko Nov 24 '14 at 12:59
36

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.

Single unit picker example Stacked time-picker control with all units Horizontal time-picker example, almost the same as above

  • Thank you! I like the first approach, simple and powerful :) – Fidel90 Nov 25 '14 at 6:00
  • 7
    What makes the first approach annoying is that you can't enter the number followed by the desired unit, since that'd trigger a conversion. I have my doubts that the automatic conversion is a good idea. – CodesInChaos Nov 25 '14 at 11:55
  • @CodesInChaos when I think about what you are saying you are most probably right. The automatic conversion can always be an extra option somewhere in the settings. – McKnight Nov 25 '14 at 12:16
  • I'm not a fan of settings, since which variant you need should be determined locally. I'd rather add a "Convert" button next to the input. Or perhaps add some pseudo items to the combobox for the conversion, so you can choose "ns" or "Convert to ns" where the latter triggers a javascript conversion and then switches to the normal "ns" value as selected. – CodesInChaos Nov 25 '14 at 12:21
  • 1
    having boxes for each magnitude seems a little ambiguous. Is the total delay the sum of each box, or am I only supposed to pick one? If I increase 999usec by 1 usec, will it increment the ms field? Likewise if I type .100 usec, does that change the nsec field by 100 nsec? – Johnny Nov 26 '14 at 1:51
16

Another option is a logarithmic slider, like this:

mockup

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.

  • 1
    I was going to recommend this too. One could assume that someone who is dealing with microsecond precision understands logarithms, plus if you are dealing with a 5 second delay, I'm not sure how important microseconds are at that precision. – user31914 Nov 26 '14 at 3:54
  • 2
    IMHO the user doesn't need to understand logarithms - it's very intuitive. I'm sure I've seen this approach in some very non-technical apps and it's worked great. (But may not be appropriate here.) – Steve Bennett Nov 26 '14 at 4:20
6

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:

mockup

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.

mockup

download bmml source

3

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.

  • 1
    Thanks, but I guess our users need the slider to cover the whole range. Anyway nice idea ;) – Fidel90 Nov 25 '14 at 6:01
2

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

mockup

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.

  • Must say I don't find it self-explanatory. Will the longer range be [1ms .. 1.9ms]? Or [1ms..2ms]? [1ms..1/10th s]? – phresnel Nov 26 '14 at 13:59
  • Hopefully this comment is self-explanatory. – eidsonator Nov 26 '14 at 15:19

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.