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.

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

Answer 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.