[Design Pattern] Sliding Date Picker

[Eli Cochran]

Aaron,
You are absolutely right that it is a date range picker, and I  
certainly wouldn't apply it for general use.

I agree with all the usability issues that you bring up. I would  
attach the dates to the sliders so that you could just look where  
your mouse is. (OK, I got to mock that up. [enclosed]) And I also  
would make it clear that you can drag the timeline, and scroll off  
the edges.

Not sure about being able to change the time scale. That would be  
totally cool, but tricky to build an intuitive UI around it, there  
would be a lot of subtle math to get the mouse movement to time scale  
correct. (In the early 90s, the Advanced Technology Group at Apple  
designed an interesting timeline controller that changed the time  
scale as you moved the mouse up and down and scrolled the timeline as  
you moved the mouse left and right. It was a pretty impressive  
controller allowing very quick browsing of huge amounts of historical  
data and media. On the web, that would be some serious DHTML!)
-------------- next part --------------
A non-text attachment was scrubbed...
Name: date-slider-e.png
Type: image/png
Size: 3897 bytes
Desc: not available
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20080124/df4c5e7f/attachment.png>
-------------- next part --------------


What excited me about this widget is that someone looked at the  
problem from a different direction, treating temporal data linearly  
instead of in a calendar grid. And perhaps a grid is always better  
since that is how dates are represented all around us everyday. But  
using a calendar grid widget has it's own trickiness. Most calendar  
widgets cram a bunch of controls into a tight space to accommodate  
jumping by weeks, months and years and even then require multiple  
clicks to get the date you want. (Which is why any date-picking UI  
should support both a type-in field and a pop-up picker).

Anyway, I probably should not have used the word, "great", I should  
have said, "interesting".

Thanks for thinking about this Aaron. Insightful comments all around.

- Eli


On Jan 24, 2008, at 12:51 AM, Aaron Zeckoski wrote:

> I would say this is a date range picker and not really a date picker.
> I doubt anyone would want to use this to choose a single date.
>
> I played with this for a minute and I thought it was a little hard to
> use. There are no queues for "today" or for "days of the week". I
> found that I had to pull up my calendar to figure out how to set a
> range from today until friday.
> It was also not obvious how to get the range to shift or how to get
> the range to expand (show more days on it) or contract/zoom in (and
> show less days). Maybe that is not possible.
> Finally, it was a strange disconnect to grab the bar and move it while
> having to look down at the box that indicated what the actual date
> was. I kept missing the bar and then attempting to move the mouse and
> wondering why the date was not changing.
> It also would have been nice to see an indicator of the number of days
> between the 2 dates.
>
> It is really fun and seems like some pretty slick javascript but I
> have doubts as to the ease of use.
>
> Just my thoughts.
> -AZ
>
>
> On Jan 23, 2008 7:53 PM, Eli Cochran <eli at media.berkeley.edu> wrote:
>> Here is a great date picker design pattern. It's worth playing  
>> around with.
>>
>> http://ajaxorized.com/introducing-the-sliding-date-picker/
>>
>>
>>
>>
>>
>> . . . . . . . . . . .  .  .   .    .      .         .              .
>> .
>>
>> Eli Cochran
>> user interaction developer
>> ETS, UC Berkeley
>>
>>
>> _______________________________________________
>> fluid-work mailing list
>> fluid-work at fluidproject.org
>> http://fluidproject.org/mailman/listinfo/fluid-work
>>
>>
>
>
>
> -- 
> Aaron Zeckoski (aaronz at vt.edu)
> Senior Research Engineer - CARET - Cambridge University
> [http://bugs.sakaiproject.org/confluence/display/~aaronz/]
> Sakai Fellow - [http://aaronz-sakai.blogspot.com/]

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

Eli Cochran
user interaction developer
ETS, UC Berkeley