Design question re: Date Picker - displaying dates in next/previous months in current month's grid

Allison Bloodworth abloodworth at berkeley.edu
Sat Feb 14 02:58:08 UTC 2009


Hi everyone,

Thanks so much for your suggestions! In the end to keep things clean  
and simple, we decided to distinguish the non-selectable dates by  
making the day number gray (which is the same as what happens for  
dates in the next/previous months in the same grid) and specifying  
that there is no action on mouse-over, so they aren't (and don't seem)  
clickable.

A user can go back in time beyond they point where they can select  
dates (e.g. open dates which are before due dates), but they won't be  
able to make a selection once they get there. We feel this is the best  
choice because it is possible that someone would want to look at a  
month in the past (or in another non-selectable range) but not make  
any selections, and it would probably be more confusing to have them  
try to select a previous month and year and just have nothing happen.

We also won't prevent users from selecting dates in the past, as  
birthdates are another instance where this would be needed. The  
implementor can always configure what years they would like to show in  
the drop-down in case they need to access years in the past (http://wiki.fluidproject.org/display/fluid/Date+Picker+Storycards#DatePickerStorycards-story9 
).

Erin and I have finished our work for now on the Date Picker, so feel  
free to check out the (for now) finalized documentation here: http://wiki.fluidproject.org/display/fluid/Date+Picker+Design+Overview 
.

Cheers,
Allison

On Feb 5, 2009, at 10:00 AM, Eli Cochran wrote:

> Seems that this use case is something that should be configurable.  
> While in most cases (the default) setting times in the past are  
> illegal, I can think of one case where the past is relevant, using  
> the date picker in a timeline application.
>
> - Eli
>
> On Feb 4, 2009, at 6:31 AM, Justin wrote:
>
>> Would it also make sense, not to allow the user to move backwards  
>> in time, that is prevent them from choosing a month or year that is  
>> before the open date. This won't help with days in the same month  
>> but it may help if they go back a month or year by accident and are  
>> confused because it is all the same colour.
>>
>> - Justin
>> On 4-Feb-09, at 9:11 AM, Anastasia Cheetham wrote:
>>
>>>
>>> On 3-Feb-09, at 2:53 PM, Allison Bloodworth wrote:
>>>
>>>> 3) We haven't come up with a great design solution to strongly  
>>>> distinguish non-selectable dates (e.g. when entering a Due Date  
>>>> for an assignment, dates *before* the Open Date shouldn't be  
>>>> selectable) and dates in the previous month.
>>>
>>> In some date pickers I've seen that distinguish between pickable  
>>> and non-pickable dates (e.g. hotel room availability), the  
>>> distinction is made with green and red coloured backgrounds. I've  
>>> always found that to be pretty obvious, given our existing common  
>>> associations with those colours. They could probably be combined  
>>> with grey vs. black foreground colours for the month distinctions?  
>>> You'd probably have to play with shading, etc., and I do see that  
>>> you already use background colours to distinguish weekdays from  
>>> weekends, but maybe it's an idea to start with?
>>>
>>> -- 
>>> Anastasia Cheetham                   a.cheetham at utoronto.ca
>>> Software Designer, Fluid Project    http://fluidproject.org
>>> Adaptive Technology Resource Centre / University of Toronto
>>>
>>> _______________________________________________________
>>> fluid-work mailing list - fluid-work at fluidproject.org
>>> To unsubscribe, change settings or access archives,
>>> see http://fluidproject.org/mailman/listinfo/fluid-work
>>
>> _______________________________________________________
>> fluid-work mailing list - fluid-work at fluidproject.org
>> To unsubscribe, change settings or access archives,
>> see http://fluidproject.org/mailman/listinfo/fluid-work
>
> . . . . . . . . . . .  .  .   .    .      .         .              .                     .
>
> 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