Picking Time

Colin Clark colin.clark at utoronto.ca
Tue Nov 11 22:42:50 UTC 2008

Hi all,

On 11-Nov-08, at 1:14 PM, Eli Cochran wrote:
> To the point about accessibility. While the current implementation  
> is not accessible, with addition of some arrow key handlers this  
> would be very accessible.

I guess the real answer to this question depends on how you define  
"accessible." Just adding arrow key handlers won't necessarily make  
the user interface more accessible in itself. It's a pretty dynamic  
interface, so we'd also need to think about ways to cue users into the  
changing spatial structure of the widget.

In the current implementation, you can edit the time with the keyboard  
by simply entering it into the form field. This basic interaction  
might suffice for some keyboard-only users, but it might be sub- 
optimal. I guess we'd have to do some testing to know for sure.

That said, I think there's a larger problem with this particular time  
picker. In my hands, it feels jerky and hard to control. I think it  
requires far too much fine motor control for any user, regardless of  
ability. It doesn't take Fitt's Law into account, and the interaction  
suffers as a result.

Put simply, bigger things are easier to it. Closer things are also  
easier to hit. In this example, the targets are too small, and there's  
not enough "squishiness" or forgiveness between cells in the time  
picker. Worse yet, you can't move the mouse diagonally to acquire  
targets that are farther away. This makes it much more likely that  
you'll accidently hit the wrong thing and the whole UI will shift over  

Let me try to illustrate with a little picture:

-------------- next part --------------
A non-text attachment was scrubbed...
Name: TimePickerGesture-Fast.png
Type: image/png
Size: 14532 bytes
Desc: not available
URL: <http://fluidproject.org/pipermail/fluid-work/attachments/20081111/4ec1960e/attachment.png>
-------------- next part --------------

The fastest route from my currently selected hour, 02, to the 45- 
minute target is via a diagonal line. If you try this in the real  
picker, you'll find that it's really easy to accidentally select 03  
and have the whole thing shift over on you. Instead, you have to  
carefully move down and then over to the right:

-------------- next part --------------
A non-text attachment was scrubbed...
Name: TimePickerGestures-Slow.png
Type: image/png
Size: 14016 bytes
Desc: not available
URL: <http://fluidproject.org/pipermail/fluid-work/attachments/20081111/4ec1960e/attachment-0001.png>
-------------- next part --------------

The other issue that comes to mind is that it feels a bit like  
internationalization was bolted on at the end. The field itself will  
display your selection in 24-hr format, but still requires you to  
interact with controls that use am/pm and are 12-hour based. I suspect  
that this particular control wouldn't scale nicely for picking 24-hour  
times natively.

> On Nov 11, 2008, at 10:01 AM, Allison Bloodworth wrote:
>> This time picker could definitely serve as inspiration for any  
>> redesigns. I found a place to play with it: http://haineault.com/media/examples/jquery-utils/demo/ui-timepickr.html 
>>  and am wondering if folks on the list see any accessibility issues  
>> with the design in general before we consider doing something like  
>> this? For instance, since there there isn't a moment that the two  
>> is selected before moving on to the 15 and then the "am" (e.g. they  
>> are all selected after the user rolls over everything) I wasn't  
>> sure if it would be difficult for a screen reader to process.  
>> Perhaps it's supposed to work differently with the keyboard, but  
>> neither Erin nor I could figure out how to use it with the  
>> keyboard. I

It's hard to tell, but I think your link may be out of date, Allison.  
Here's the link to a working demo that was included in the blog post  
Eli sent along initially:


I think there's a lot to be said about this interaction, and it's a  
novel concept. It was fascinating to play around with, but to me, it  
just feels awkward in the end.


Colin Clark
Technical Lead, Fluid Project
Adaptive Technology Resource Centre, University of Toronto

More information about the fluid-work mailing list