During the past days we tried to understand how to put together the best UX for inputing date and time online. While this may sounds easy few thing are to be taken into account:
1) People is used to the calendar methapor for inputing dates
2) Time format differ from Europe vs States
3) In our scenario the starting and finishing date/time just tell you about When of an event and as you can tell it in a single phrase, you should be able to input it on a single line too.
The above image is our solution to the problem and is about a mix of what @brianteeman, @rpijpers and @HilsCheyne also suggested via twitter chat about the topic. Also thanks @epic_bagel for linking me to the 37 signals article about the exploration due-dates in the to-do list in base camp.
A) Date: as in our scenario when people start an event they already know the date for it - thats why we kept the date picker calendar as minal as possible to quicken the process of input your desired date (for example no week, days labels)
B) Time: instead of going trough multiple drop downs, as you see mostly out there, we thought that a masked form (hh:mm) will be the fastest way to input the time, no clicks just type it! This allow to quick input time up to the minute ( if this have to be done through drop downs means a 60 element list just for the minutes ).
C) As not everywhere people use the same time format, we will show to the people in the countries that use the 12h format a drop down to select Am / Pm. All the other visitors won’t see it and are then just free to input the time in the 24h format without having to care about the am-pm.
This solution works really nice in our usecase-scenario and we are pretty happy with the outcome. Thanks to our awesome UI/UX designer @jonnotie to have putted together such an awesome solution and to everyone of you who discussed this on twitter. This quick post is a feedback in that direction.
If you have any thought just get in the loop: @nickbalestra
