Picking Time

Allison Bloodworth abloodworth at berkeley.edu
Tue Nov 11 18:01:01 UTC 2008

Thanks very much for the link Eli! Yesterday we just did a round of  
paper prototype testing with users on potential designs for the date  
and time picker. We expect to make some changes based on the testing,  
but will be posting the storyboards we used in the tests today or  

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


On Nov 11, 2008, at 8:01 AM, Eli Cochran wrote:

> Interesting blog posting by John Resig this morning talking about a  
> time picker that I've mentioned before and also the delightful  
> jQuery Themeroller.
> - Eli
> Begin forwarded message:
>> Date: November 11, 2008 2:07:52 AM PST
>> Subject: Picking Time
>> Source: John Resig
>> Author: John Resig
>> It's not often that new user interface conventions are born - or  
>> popularized. Even less so within the realm of web development. I'd  
>> argue that Sparklines and Lightbox are two of the best examples of  
>> UI conventions that were popularized on the web.
>> Recently Maxime Haineault announced a simple jQuery plugin for  
>> inputting a new time of day called jQuery.timepickr.js. Its  
>> principles are very similar to jQuery itself: Get users to input  
>> the time as simply as possible with as little input as possible.
>> To achieve this he made a "two click" time picker. The first click  
>> is within the time field. This activates the display and allows the  
>> user to choose the time - all of which is done by moving the mouse  
>> over the times that you desire. The final click is anywhere -  
>> filling in the time that was chosen. It's hard to explain, you  
>> simply have to try it.
>> One thing that you'll notice using it is that it's fast. Very fast.  
>> I'd argue much faster than clicking into the input area, moving to  
>> the keyboard for entering the time, typing the time, then moving  
>> back to mouse.
>> But not only is it faster, but it's also quite intuitive - which is  
>> rather rare for something that utilizes a completely new user  
>> interface convention.
>> A nice extra point is that the input is completely styled using the  
>> jQuery UI style conventions - which means that you'll be able to  
>> customize it completely with the jQuery UI Themeroller.
>> I love the Themeroller and use it all the time to customize UI  
>> controls. It beats the pants off of any other UI customization tool  
>> that I've seen. Definitely give it a whirl. Consistently styling  
>> JavaScript user interface components can be incredibly annoying,  
>> but the Themeroller helps to make it sane - which is just perfect.
>> Read more…
> . . . . . . . . . . .  .  .   .    .      .         .              .                     .
> Eli Cochran
> user interaction developer
> ETS, UC Berkeley
> _______________________________________________________
> fluid-work mailing list - fluid-work at fluidproject.org
> To unsubscribe, change settings or access archives,
> see http://fluidproject.org/mailman/listinfo/fluid-work

Allison Bloodworth
Senior User Interaction Designer
Educational Technology Services
University of California, Berkeley
(415) 377-8243
abloodworth at berkeley.edu

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://fluidproject.org/pipermail/fluid-work/attachments/20081111/bcbadf67/attachment.html>

More information about the fluid-work mailing list