Picking Time

[Eli Cochran]

I certainly wasn't offering this up as a "lets copy this" suggestion;  
just as an interesting touch-point and a great example of how to look  
at a design problem from a different direction.

To the point about accessibility. While the current implementation is  
not accessible, with addition of some arrow key handlers this would be  
very accessible.

- Eli


On Nov 11, 2008, at 10:01 AM, Allison Bloodworth wrote:

> 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 tomorrow.
>
> 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
>
> Thanks!
> Allison
>
> 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
>
>
>
>

. . . . . . . . . . .  .  .   .    .      .         .              .                     .

Eli Cochran
user interaction developer
ETS, UC Berkeley


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