How to format input for accurate time?

Question

A user needs to input an accurate elapsed time measurement, to a mobile device (web browser), just like a sports time, after recording the time on a separate stopwatch, like this one.

We need the minutes, seconds and hundredths, so I was thinking of three separate inputs next to each other that all bring up the number keypad (on iOS etc), but when I got to the hundreths I was stumped: If a user types '9', is that nine hundreths or 0.9 seconds?

This is my best attempt so far:

What is the best way I can make this clear? I can display the final number below but I want them the best experience and correcting themselves is less than optimal.

Answer 1

For mobile device I would vote for single input with validation since it is much faster and easier to enter time alltogther rather that switching between inputs for tracking runner time

Input is heavely validated to make sure user match desired format: __:__:__.____ This process of entering time will happen over and over again so runner and coach will get used to it quite fast.

Put some UX magic for different formats (if user is somewhat ok not to entr milliseconds):

• 12:10 -> minutes and seconds
• 12:12.123 -> minutes and seconds and millis
• 1:12:10 -> hours minutes and seconds
• 1:12:12.123 -> hours minutes and seconds and millis

You can go much further to actually replace the stopwatch by your web app: Two big buttons: START and LAP. Time will remain accurate till milliseconds and it will not be required to enter it at all.

Answer 2

The widget name that I would call this is a duration picker. I found one implementation and another here, but it appears both only go as precisely as seconds, not subsecond.

I would still consider using the best duration picker you can find for your platform, so you can use existing work to make it battle tested, accessible, render correctly in all browsers, etc. and then add your hundredths picker after that widget just the way you already have. If they type 9 and the selection is left-padded as 09, I think that will be clear that it's 9/100ths.

Answer 3

Hundredths of a second?

So it's neccessary have 3 inputs:

• minutes
• seconds
• hundredths of a second

In the image you shared, at first glance it's not clear that the 3rd input = hundredths of seconds. It should be clearly communicated.

1 s = 100 cs, so if user writes 9 does it mean 9/100 or 90/100 ? Maybe the placeholder should be 100? - it may be worth limiting the hundredth of a second to a scale of 10?

IOS standard have something like this: