4 ms·

CalendarPicker: a new concept for date selection.

41 points by robicch 17y ago

davidedicillo 17y ago
it looks nice, but i don't think it's a good example of UX
IgorPartola 17y ago
Pair that with the jQuery timepickr: http://haineault.com/media/jquery/ui-timepickr/page/ http://haineault.com/media/jquery/ui-timepickr/page/ It's not bad with the year and the month view. I would have the year slide left and right, not just switch because that makes it look like nothing happened at first. The actual date picker is a bit awkward since it's not a traditional calendar. It's a lot easier to figure out whether the 7th of the month is a Tuesday or a Wednesday by seeing which column it's in rather than what is written underneath it. That way you would have a much cleaner view as well.
- robicch 17y ago
  This was my initial inspirator: read the history http://roberto.open-lab.com/2010/03/23/so-hard-to-have-a-date/ http://roberto.open-lab.com/2010/03/23/so-hard-to-have-a-dat...
JeffJenkins 17y ago
I like the idea of letting you jump through multiple months at once, but I think it should show all of the days in the month. If you aren't looking for something in the span initially shown, you're probably looking for something just beyond that. If you start changing the month around it could be anywhere that you want and extra clicks are added to find the right day to select.
- robicch 17y ago
  Interesting point of view. I'll try to see how it react. Thanks
jister 17y ago
>> the next/prev buttons are no fashionable: now you can hide them! So how will the user know that they must use the mouse wheel to navigate pre/next year or months? For me, it's not good usability-wise.
- goodness 17y ago
  Also, I use a laptop with no scroll wheel. There are ways to do scrolling, like clicking both buttons, but it doesn't seem to send all the scroll wheel events. So I can't even find a way to get that version of the calendar to work. An alternative to both might be to use a linear fisheye. It would just need a selection for 31 days at the bottom, 12 months in the middle, and a few years at the top. The thing that you would probably need to change for the fisheye is not scrolling between months from the day row or years from the months row. In some ways, this is a bit more intuitive anyway.
- alkasimi 17y ago
  You probably right, but "can" is not "must" :-)
- Torn 17y ago
  Agreed, it wasn't immediately obvious how to scroll the non-buttoned version.
- stcredzero 17y ago
  If it's responding to sideways scroll, then multitouch users may discover that by themselves. Update: no, it seems to be buggy in Safari and scrolling is soaked up by the browser, so I can't two finger scroll on the calendar.
mavroprovato 17y ago
It's nice, but it really needs keyboard navigation...
- Adamsammy 17y ago
  I want it!
danfitch 17y ago
It is really missing Monday - Friday. Otherwise I like the idea.
est 17y ago
Who else think the wheel direction is inverted?
- wmblaettler 17y ago
  I came here to comment on just that. Wheel-down should increase just as one would scroll down a list on a page that is ordered ascendingly. Of course, I play first person shooters with my mouse y-axis inverted. So maybe I am backwards.
- robicch 17y ago
  :-) LOL..... I made a poll before doing it....
  - est 17y ago
    Hmm, when I first saw the calendar, I think oh cool, there is only one week to choose, the week above and below must be hidden, so it's nature way to navigate to previous week is to scroll up, and scroll down to see the next week. Although it's not scroll by week but by day, but you get the idea.
  - nollidge 17y ago
    How did you do the poll, though? Were they supposed to pick between two live demos, or did you just ask "should scrolling up increase or decrease the value"? In left-to-right languages, I would think most people's intuition is to scroll down to move right and scroll up to move left (with a unidirectional scroll wheel, anyway).
- romland 17y ago
  I have to side with Est, my intuition tells me that it is inverted. I can see why people would want to -say- that up should increase the number, but my initial reaction when landing on the page was that it was inverted. Make it configurable if it isn't. :)
- robicch 17y ago
  I'll add a config parameter to choose scroll direction...
webwright 17y ago
Interesting experiment, but not a win. For a new UI to be a success, it needs to be faster for the user to USE or faster for the user to LEARN. The former is more important for tools with repeat users (like a mail app), the latter is more important for sites with transitory users. You could argue that it could perform okay on the former point IF you ignore the meaningful population of people who use trackpads or mobile devices... But how can you possible argue that ignoring that population is a good idea?
tvon 17y ago
On a related note, drop-down date selection has always driven me nuts. Isn't it easier to type "1977" than to find it in a drop-down? Isn't it easier to type "1 <tab> 17 <tab> 1977" than to select each in a drop-down? Drives me nuts, mostly when clients request the drop-down over the text field...
- Qz 17y ago
  For things like video or website age gates then text entry can be annoying for us heretics who prefer using the mouse to navigate computers rather than keyboard. Any time I have to type something in instead of being able to select with a mouse is a fairly annoying occurrence.
  - tvon 17y ago
    Good point, it makes sense for age verification or any situation where you wouldn't otherwise be using the keyboard. Though what would really be ideal is a text input with a drop-down... might be a good addition to jQuery UI (or similar).
- robbb 17y ago
  I think this component is not intended for replacing a date input field, but for select a date
jsonscripter 17y ago
It needs some easing and transitions to let the user know what's happening. Maemo has a similar date picker, by the way. It's vertically, and the scrolling is more intuitive partially due to this fact.

41 points by robicch 17y ago

it looks nice, but i don't think it's a good example of UX

Pair that with the jQuery timepickr: http://haineault.com/media/jquery/ui-timepickr/page/ http://haineault.com/media/jquery/ui-timepickr/page/ It's not bad with the year and the month view. I would have the year slide left and right, not just switch because that makes it look like nothing happened at first. The actual date picker is a bit awkward since it's not a traditional calendar. It's a lot easier to figure out whether the 7th of the month is a Tuesday or a Wednesday by seeing which column it's in rather than what is written underneath it. That way you would have a much cleaner view as well.

robicch 17y ago
This was my initial inspirator: read the history http://roberto.open-lab.com/2010/03/23/so-hard-to-have-a-date/ http://roberto.open-lab.com/2010/03/23/so-hard-to-have-a-dat...

JeffJenkins 17y ago

I like the idea of letting you jump through multiple months at once, but I think it should show all of the days in the month. If you aren't looking for something in the span initially shown, you're probably looking for something just beyond that. If you start changing the month around it could be anywhere that you want and extra clicks are added to find the right day to select.

robicch 17y ago
Interesting point of view. I'll try to see how it react. Thanks

jister 17y ago

>> the next/prev buttons are no fashionable: now you can hide them! So how will the user know that they must use the mouse wheel to navigate pre/next year or months? For me, it's not good usability-wise.

goodness 17y ago
Also, I use a laptop with no scroll wheel. There are ways to do scrolling, like clicking both buttons, but it doesn't seem to send all the scroll wheel events. So I can't even find a way to get that version of the calendar to work. An alternative to both might be to use a linear fisheye. It would just need a selection for 31 days at the bottom, 12 months in the middle, and a few years at the top. The thing that you would probably need to change for the fisheye is not scrolling between months from the day row or years from the months row. In some ways, this is a bit more intuitive anyway.
alkasimi 17y ago
You probably right, but "can" is not "must" :-)
Torn 17y ago
Agreed, it wasn't immediately obvious how to scroll the non-buttoned version.
stcredzero 17y ago
If it's responding to sideways scroll, then multitouch users may discover that by themselves. Update: no, it seems to be buggy in Safari and scrolling is soaked up by the browser, so I can't two finger scroll on the calendar.

mavroprovato 17y ago

It's nice, but it really needs keyboard navigation...

Adamsammy 17y ago
I want it!

danfitch 17y ago

It is really missing Monday - Friday. Otherwise I like the idea.

est 17y ago

Who else think the wheel direction is inverted?

wmblaettler 17y ago
I came here to comment on just that. Wheel-down should increase just as one would scroll down a list on a page that is ordered ascendingly. Of course, I play first person shooters with my mouse y-axis inverted. So maybe I am backwards.
robicch 17y ago
:-) LOL..... I made a poll before doing it....
- est 17y ago
  Hmm, when I first saw the calendar, I think oh cool, there is only one week to choose, the week above and below must be hidden, so it's nature way to navigate to previous week is to scroll up, and scroll down to see the next week. Although it's not scroll by week but by day, but you get the idea.
- nollidge 17y ago
  How did you do the poll, though? Were they supposed to pick between two live demos, or did you just ask "should scrolling up increase or decrease the value"? In left-to-right languages, I would think most people's intuition is to scroll down to move right and scroll up to move left (with a unidirectional scroll wheel, anyway).
romland 17y ago
I have to side with Est, my intuition tells me that it is inverted. I can see why people would want to -say- that up should increase the number, but my initial reaction when landing on the page was that it was inverted. Make it configurable if it isn't. :)
robicch 17y ago
I'll add a config parameter to choose scroll direction...

webwright 17y ago

Interesting experiment, but not a win. For a new UI to be a success, it needs to be faster for the user to USE or faster for the user to LEARN. The former is more important for tools with repeat users (like a mail app), the latter is more important for sites with transitory users. You could argue that it could perform okay on the former point IF you ignore the meaningful population of people who use trackpads or mobile devices... But how can you possible argue that ignoring that population is a good idea?

tvon 17y ago

On a related note, drop-down date selection has always driven me nuts. Isn't it easier to type "1977" than to find it in a drop-down? Isn't it easier to type "1 <tab> 17 <tab> 1977" than to select each in a drop-down? Drives me nuts, mostly when clients request the drop-down over the text field...

Qz 17y ago
For things like video or website age gates then text entry can be annoying for us heretics who prefer using the mouse to navigate computers rather than keyboard. Any time I have to type something in instead of being able to select with a mouse is a fairly annoying occurrence.
- tvon 17y ago
  Good point, it makes sense for age verification or any situation where you wouldn't otherwise be using the keyboard. Though what would really be ideal is a text input with a drop-down... might be a good addition to jQuery UI (or similar).
robbb 17y ago
I think this component is not intended for replacing a date input field, but for select a date

jsonscripter 17y ago

It needs some easing and transitions to let the user know what's happening. Maemo has a similar date picker, by the way. It's vertically, and the scrolling is more intuitive partially due to this fact.