The personal website of Chris Coyier

Timers and Minutes

Say you were building the user interface for an oven timer. This timer only had room to display four digits. How do you handle the moment when the user has entered a new time and the timer starts ticking down?

The Models

Say the user entered 00:15 (fifteen minutes) and started the timer. One second after that, the timer is actually at 00:14:59, but we don’t have the room to display all of that. On my particular stove, the display stays at 00:15 all the way until 00:14:01, and at 00:14:00 it changes to 00:14. I’m calling this the pessimistic model, as it shows you there is more time left than there really is 98.3% of the time.

On the stove in my last apartment, the timer also only had four digits, but the behavior was different. At 00:14:59, the timer displayed 00:14. I’m calling this the optimistic model because it is showing less time than there is really left 98.3% of the time (assuming 00:14 == 00:14:00).

An alternative technique might be the modest model. Say the timer changed at the 30-second marks, so 00:14:31 would display 00:15 and 00:14:30 would display 00:14. This feels closer to home as far as matching mathematical rounding, where 0.5 might be rounded up to 1 and 0.49 down to 0 for traditional integer rounding. This is that equivalent only with minutes and seconds. The problem doesn’t get any better though unfortunately, even with this method it is possible for a glance at the clock to be wrong by 59 seconds.

The Post Set

An interesting consideration is what happens the second after the timer is set. The most unsettling is the optimistic model. Just a second after the timer sets, the timer no longer reads what you just entered but shows a minute less instead. Even though I understand at an intellectual level what is happening there, it’s still a bit weird. The pessimistic and modest models don’t have that problem.

A Better Way

In this specific example of only having four digits available, the best way would be to have the timer be aware if there is less than one hour left. In less-than-an-hour mode seconds would tick down on the right and minutes shown on the left. Otherwise, hours on the left and minutes on the right. No explanation of that is needed, which is a good sign for a UI. If over an hour is needed, I think the pessimistic mode is my favorite.