input - Approaches for setting a time period

In a GUI application I have a setting for a time interval. In this case, it's a refresh period, but the same issue comes up when you set how early you want a calendar reminder, how long to snooze an alarm, how long to keep old messages, &c.

There seem to be three accepted patterns for doing this:

1. A list of preset intervals. There are often technical advantages to doing it this way (you can coalesce different events with the same interval, allowing the processing system to handle several events at once). It's also very simple to understand, but it doesn't allow the user to specify an arbitrary time interval.


2. Use a text input for entering some numbers, alongside a mechanism for selecting the units, such as in this example from Google Calendar. This allows entering any interval, but it's hard to enter compound intervals (e.g. a month and two days). It's also inconvenient to make changes across unit boundaries, such as changing from 13 days to two weeks.


3. Use a slider. This is simple to understand: unlike the text-based approaches, it's easy to see the rough magnitude at a glance. It can be very tricky to enter a time precisely, especially through a touch-screen interface. I've only ever seen this used with a linear (as opposed to logarithmic) range, which means it works badly if the input can range from a second to a week.

There are also combinations of the above approaches, such as a slider with an editable text field next to it, or a text field that lets you enter free-form text such as "1 week". Are there any other accepted patterns for setting a time interval graphically? I'm especially looking for something that allows precise data entry over a wide range of input values, and I don't think any of the approaches I've listed are good enough.

Answer

I thought so little of the existing methods that I decided to make a new one for a touchscreen interface, consisting of concentric dials. It's used as a "custom..." item in a list of preset intervals (because there are technical reasons for preferring certain intervals). It looks like this:

In the resized screen shot it's quite hard to see the unit labels, but they're "days", "hours", "minutes". The user drags any dial to rotate it, and at the end of a drag, the dial smoothly settles at a tick mark. (That is, you can't drag it to be in between two ticks.) Dragging across 0 increments or decrements the next dial smoothly. The user can also double-tap a dial to spin it to that point automatically. Catching the dial (by touching) while it's spinning interrupts the animation and allows a drag.

The innermost dial (for days) has a "cut-out". When numbers go behind the cut-out they're replaced. From the state shown in the screen shot, if you rotate anti-clockwise, 3 comes out from the cut-out; or if you rotate clockwise, 11 comes out from the cut-out. This means that the range of times isn't limited by the numbers on that dial: the maximum value could be arbitrarily high (but is limited to 30 days in my use case).

I was worried that it might be a little too hard to read off the current value, but this is mitigated in use by the enclosing screen (in the background here) displaying the current value in written form (in the user's language). I also made an experiment with having the read-off point for the dial on the right instead of the bottom, so the numbers would read left-to-right, but it looked very unnatural to have the numbers rotated that way. So far, the response from my trial group of users has been encouraging, and I'm waiting to learn how it performs "in the wild".