[Design Pattern] Sliding Date Picker

Aaron Zeckoski aaronz at vt.edu
Thu Jan 24 18:09:00 UTC 2008


On Jan 24, 2008 5:52 PM, Eli Cochran <eli at media.berkeley.edu> wrote:
> 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.

Nice ideas! Those would nicely take care of those issues. You could
probably get away with just having a little box appear above each
slider which shows the date that it is resting on as well.
How about a way to indicate where today is on the graph (that might
need to be optional but for the use case I have in mind it is
critical)? Also, some kind of indicators of where the weeks are (marks
to show beginning of each week) and months would be beneficial if the
zoom is in close enough to see weeks and months. The use case I am
thinking of here would be mostly to indicate a start and end date
which are likely to be around 2-4 weeks apart.


> 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!)

Yes, it certainly would. Probably not really needed in most cases
since the use case would dictate the zoom level.


> 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).

I like the idea a lot and if there was a way to still provide the
contextual data about weeks and months I think it would be perfect.
The only thing that would be missing for me at that point would be the
ability to specify a third or fourth point (i.e. a date range between
point 1 and 2 and second/third range from point 2 to 3 or 3 to 4).
That might be getting beyond the capability of a timeline but I am
thinking it would be ideal for selecting a set of sequential ranges.

:-)
-AZ



> 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
>
>
>
> _______________________________________________
> 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/]



More information about the fluid-work mailing list