How can I get a user to input a duration into an HTML5 web form without annoying them?

Question

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.

Solution 1

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);
}

Solution 2

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.

Comments

[Robot Woods]

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

[Dave Sag]

That could be a solution. Maybe an auto-completion that trains the user to input in a specific way.

[Robot Woods]

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?

[Tony]

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?

[Dave Sag]

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.

[Austin Brunkhorst]

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.

[Dave Sag]

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]

See this jsfiddle for an example of what I've come up with so far.

[Tim M.]

@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 datejs.com (see the demo where you can enter date offsets), so there is an existing precedent for this type of UI.

[Tim M.]

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.

[Dave Sag]

Thanks for the feedback Tim.

[Arne H. Bitubekk]

A small note: Add * to the day regex if you want the days to exceed 9 like this: new RegExp(/([0-9]*)[ ]?d/);

[DavidDunham]

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