15

My users need to enter a duration in Days, Hours and Minutes.

Right now I've just implemented this as three fields which is okay and works, but which is not exactly a nice bit of design. The alternative is to just have 1 field and let them type 2 days, 3 hours, 45 minutes or 15 m, or 1d 2h 35m or 90m, or 2 days, etc. That seems like it would need some non-trivial parsing to get really right, and be complex to internationalise.

What are some 'best practice' examples of a web UI component that allows the user to enter a length of time simply?

Please note this is not a DatePicker, but a duration input component.

Dave Sag
  • 13,266
  • 14
  • 86
  • 134
  • 1
    does your context lend itself to any frequently chosen durations? maybe you pair a text field with a drop down, so I can type 90, and choose "minutes"...you can type 1.5, and choose "days"...etc – Robot Woods Feb 07 '13 at 03:51
  • That could be a solution. Maybe an auto-completion that trains the user to input in a specific way. – Dave Sag Feb 07 '13 at 03:55
  • 1
    or just keep an eye on the drop down option picked most often, and have that be the default, so that only some users need to modify it? – Robot Woods Feb 07 '13 at 03:57
  • Your question seems to cover two topics. Technically how to accomplish what you looking to do or is it based on the UI and whats presented to the user? – Tony Feb 07 '13 at 13:44

4 Answers4

6

After considering the feedback here I decided to implement a single form field with a terse input style and some smart parsing. See http://jsfiddle.net/davesag/qgCrk/6/ for the end result. Improvements are of course welcome.

function to_seconds(dd,hh,mm) {
  d = parseInt(dd);
  h = parseInt(hh);
  m = parseInt(mm);
  if (isNaN(d)) d = 0;
  if (isNaN(h)) h = 0;
  if (isNaN(m)) m = 0;

  t = d * 24 * 60 * 60 +
      h * 60 * 60 +
      m * 60;
  return t;
}

// expects 1d 11h 11m, or 1d 11h,
// or 11h 11m, or 11h, or 11m, or 1d
// returns a number of seconds.
function parseDuration(sDuration) {
  if (sDuration == null || sDuration === '') return 0;
  mrx = new RegExp(/([0-9][0-9]?)[ ]?m/);
  hrx = new RegExp(/([0-9][0-9]?)[ ]?h/);
  drx = new RegExp(/([0-9])[ ]?d/);
  days = 0;
  hours = 0;
  minutes = 0;
  if (mrx.test(sDuration)) {
    minutes = mrx.exec(sDuration)[1];
  }
  if (hrx.test(sDuration)) {
    hours = hrx.exec(sDuration)[1];
  }
  if (drx.test(sDuration)) {
    days = drx.exec(sDuration)[1];
  }

  return to_seconds(days, hours, minutes);
}
Dave Sag
  • 13,266
  • 14
  • 86
  • 134
  • A small note: Add * to the day regex if you want the days to exceed 9 like this: new RegExp(/([0-9]*)[ ]?d/); – Arne H. Bitubekk Oct 14 '14 at 14:14
  • If you use "[0-9]+" instead of "[0-9][0-9]?" then you allow inputs of more than double digit days, hours and minutes. Like 222h will also work – DavidDunham Aug 24 '15 at 07:39
3

Things to consider:

  • how broad a range of possible inputs do you expect? e.g. is it likely that one user will enter "10 days" and the other "2 minutes"?

  • do you want efficiency or first-time intuitive behavior? some applications are not directly intuitive, but with training can be more efficient to use than their "easier" counterparts.

  • do your users prefer keyboard or mouse, and how proficient are they? a data entry pro will have different needs/wants than a "two-finger typist".

Of course, there is no one correct solution. Few options:

  • Remember the new (HTML 5) input type="range" and input type="number" available in many browsers. Range often displays as a slider (despite its name, it isn't necessarily used to input a range); number displays as a numeric up/down with specifiable increments. This may ease data entry.

  • 3 drop down lists (one for days, hours, minutes) may be the most foolproof option if you expect a broad range of inputs. This also has complete browser support, doesn't rely on any JavaScript, will be predictable on major mobile devices, etc.

  • If you have common durations (e.g. 90 minutes, 2 hours, 4 hours), you might present a single dropdown with those durations specified and an "advanced" button which allows more granular specification for the exceptional cases.

Tim M.
  • 53,671
  • 14
  • 120
  • 163
  • My users are much more likely to enter x minutes, (up to 90 minutes I'd say), or n hours, x minutes (up to 48 hours I'd say), and rarely y days, n hours, x minutes (more likely either 48 hrs, or 2 days. Never more than 9 days. My users are already typing a bit anyway, so, having thought about it (and your post was very helpful btw as was Robot Woods in comments above, so thanks,) so I'm currently experimenting with a simple input field that autocorrects based on what it can work out from the input. – Dave Sag Feb 08 '13 at 03:18
  • See [this jsfiddle](http://jsfiddle.net/davesag/qgCrk/5/) for an example of what I've come up with so far. – Dave Sag Feb 08 '13 at 03:46
  • 1
    @DaveSag - I like your example, and it's pretty intuitive even for a first-time user. It's similar in nature to functionality offered by http://www.datejs.com/ (see the demo where you can enter date offsets), so there is an existing precedent for this type of UI. – Tim M. Feb 08 '13 at 04:26
  • If you have frequent/regular users, I think they will find it to be an efficient way to enter the data (no keyboard/mouse switching), low number of keystrokes, no mouse travel, completes onblur. – Tim M. Feb 08 '13 at 04:27
0

Have you considered the jQuery Datepicker?

If you don't want to directly select a date, you can tweak it in your context to get a length of time.

Austin Brunkhorst
  • 20,704
  • 6
  • 47
  • 61
  • 1
    Sorry but there is no magic design bullet that will turn a date picker into a duration editor. I have of course already looked at DatePickers and so forth but what I am looking for is a UX solution not a plugin to hack that was chosen simply because you thought `oh he wants something with days in it, I know, a DatePicker.` – Dave Sag Feb 07 '13 at 03:49
  • 1
    I completely understand your situation. You should include that detail in your answer otherwise I was under the assumption that you hadn't already tried to implement it as a duration selector. – Austin Brunkhorst Feb 07 '13 at 03:54
0

Think of what people already know for a date and/or time selection. The behavior pattern has already been set for you. You just need to follow it. Think about what's being done on a mobile device. From there you can leverage the pattern.

Take a look at: http://mobiscroll.com/
It has a ton of features and with some minor tweaking it looks like you could get it to do what you need.

Using something like this from a UX standpoint will also make your app seem more familiar to users as it's a common pattern they already understand.

Tony
  • 227
  • 2
  • 13