selecting time (ranges)
Thursday, October 18th, 2007I consider the date selecting problem in applications as more or less solved.
In the past one had to meticulously enter a date string in a predefined format. Later, date input fields accepted multiple formats and tried to cleverly guess the input.
But nowadays we have little calendar popups where you simply select a month (if not the current one) and then click on a date and you are done. Typically a 2-click action.
Now, when entering time and especially time ranges the situation is still suboptimal.
I used to use Sunbird to integrate and edit all my various iCalendars. When I entered a date the dialog looks as the following:
- Click on the drop-down next to the start time text field
- Click on the start hour
- Click on the start minutes
- Click on the drop-down next to the end time text field
- Click on the end hour
- Click on the end minutes
6 clicks in total, quite tedious and from what I have seen this is standard.
The “best” solution I’ve seen so far was a big table with selectable times listed: 00:00, 00:15, …, 23:45.
96 clickable time points. So in a 2-click action you have set one time point. Disadvantage: table is quite big and ugly.
Most of the time you want to set a time range and typically the time range lies within one day.
Here is my idea of solving this problem (Java applet, play with it!):
With the first click you would start the clock, with the second click you select the start time, then you drag to the end time and when you release the mouse button the time range is set.
Why implement it as a clock and not a linear timeline? A time range from 0-24h with quarter hour subsections is quite big. If you would separate each time point by 3 pixels (incuding the pixel for the line paint) which is the minimum with respect to usability, the component would still use nearly 300 pixels in size.
Feedback is appreciated.