16

I have always been really dissatisfied with picking a date using the typical dropdown date grid. They force me to squint and concentrate.

The purpose of the date picker I have currently is to pick a day for a job to start. 90% of jobs will start in the next week. It looks something like this:

a busy cat

Does this offer a better user experience than a date grid?

Improve this question
5
  • 1
    Perhaps think about defaulting to next Monday? I'd also ask if this was a mouse of finger driven interface.
    – Guy Schalnat
    Commented Jul 9, 2015 at 17:05
  • 1
    I'm pretty sure this would be a finger driven interface ... 8^)
    – DaveAlger
    Commented Jul 9, 2015 at 21:00
  • 1
    Why not allow typing in the date fields? It is often quicker then using + many times i.e. less keystrokes
    – mmmmmm
    Commented Jul 9, 2015 at 21:08
  • In my opinion they're both horrible because it's way easier to write 22.12.2012 then to scroll endlessly in such UI-Elements. You could simply provide 3 textboxes with "Day", "Month" and "Year"
    – BlueWizard
    Commented Jul 10, 2015 at 9:10
  • This does have the advantage of not being modal.
    – Owen
    Commented Jul 10, 2015 at 11:57

5 Answers 5

Reset to default
20

When it comes to UI/UX, "better or worse" is very subjective. There is, however, a standard for best practices: cater to your product, users, and target devices. What I mean by this in your situation:

  • If your product expects a date in the next week 90% of the time, design your date picker around that.
  • If you users require a larger interface to better use the product, then design your date picker with large buttons or text as you've done.
  • If your target device has a touch screen, buttons may be advantageous over drop-downs which might not be supported.

However, a few warnings:

  1. Requiring the user to push the + or - buttons 15 times to access every possible day of the month isn't ideal UX. This was the reasoning behind drop-downs, and modern smartphone operating systems solved this using spinners. This allows the user to simply slide to their selection, such as iOS's calendar date/time shown below:

iOS Date Spinner

  1. Users on a computer with keyboard and mouse input may just want to type in their own values, or have drop-down functionality to simply scroll to their selection.
Improve this answer
1
  • I would point out that I find this time-selection "spinner/wheel" to also be poor UX. Who needs to set their alarm on minute's precision, so that it would justify 60 options to scroll through in the second wheel?
    – Claudio
    Commented Feb 1, 2021 at 9:13
20

Date selection isn't easy...

This has been a peeve of mine for a long time. I've not found a decent calendar widget.

Generally, I prefer calendars to scrollers because:

  • Using a scroller to select a date far in the future can be a real pain.
  • Calendars provide a lot of valuable context (today's date, day of week, physical distance to the date, etc).

In my view UX designers chronically underestimate the microinteraction complexity of selecting dates. The #1 problem I observe is designers treating the date control like any other control (i.e. it has to be a small widget). To provide proper usability, the control needs:

  • Easy to understand (clear affordance)
  • Easy for novices to use
  • Easy for experts to use with maximum productivity (i.e. selecting a date should be FAST)
  • Large enough to present information clearly and promote usability (don't cram the dates into a small grid, forcing users to squint or struggle with thumb-clicking)

One design...

I've wanted this widget for a while but haven't found a decent implementation with all the features. Maybe someone out there can build one.

1. Use a text box with a large dropdown panel...

enter image description here

  • This provides a clear and simple entry point to the widget (before the dropdown appears), with clear instruction to the user.

2. Provide both text and dropdown calendar panel

enter image description here

This gives users choices with how to enter a date. Experts can keep typing if they know what they want. Novices can use the graphical widget. Users who don't see the date on the dropdown (e.g. because it's too far in the future) can just type it in.

3. The text input should be freeform

...allowing users to enter dates in a variety of formats and shortcuts (e.g. 'tues'):

enter image description here

As always, the right widget depends on the specifics of your form/workflow, style, devices, etc. But I've wanted this kind of freeform widget for a while and all of the dozens of alternatives I've seen in practice have typically fallen short (usually in freeform parsing, but sometimes in the way the textbox synchronizes with the dropdown panel).

Improve this answer
3
  • 1
    Re “One design”, the month name should provide, on click, a drop-down with all month names although it doesn’t look like a dropdown widget, and the year number should be inline-editable as well. The triangles provide horizontal month navigation, but the layout with week rows affords vertical advancement. Also note that some months have dates in 4 weeks only (i.e. 1 February on a Monday, non-leap year), most in 5 and many in 6. For some applications, free-form input should also support dates relative to popular holidays, e.g. “Second Tuesday before Easter 2017”.
    – Crissov
    Commented Jul 9, 2015 at 20:54
  • @Crissov all good suggestions, thanks, with the exception of the month name because i really don't like stacked dropdowns, but that's a personal preference.
    – tohster
    Commented Jul 9, 2015 at 21:39
  • I totally agree with this, it would be great to have a better date picker. There are a few that come close but they all seem to have some kind of issue. Most have poor free-form entry. The one addition for a general purpose picker I would add would be a faster year selector.
    – undefined
    Commented Jul 9, 2015 at 22:40
5

The value of a grid (aka, calendar view) is it adds the context of the day-of-the-week.

If knowing the day-of-the-week is important, than a calendar picker will provide the user with a better experience. Trying to schedule a meeting next week? Knowing the DOTW is important.

Choosing your birthdate? DOTW is irrelevant.

So it depends on the particular type of date we're talking about.

Improve this answer
0

It depends on the context.

Entering credit card information. You just have to choose month and year. Dropdown works best here.

Planning a trip to Hawaai. You should know a date range, weekends, Departure and Arrival. Initially date pickers that display just 1 month at a time were used. Now, a few travel site use date pickers that display 2-3 months at a time.

Entering your birthday in a form - you are so used to your birthdate, just a textbox with date-format might suffice - sometimes browsers just autofill it for you.

Context is what decides which UI element represents a date selection

Improve this answer
-1

Datepicker controls like that of kendo, or make your own, are the ideal UX imo.

As long as you don't take them away from the current context, indicate that its a bubbled popup by having an animation for it popping out to the user. Start it small and transparent to full sized and non-transparent.

Having it automatically start on tomorrow if thats what users usually do, is a pretty good idea.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.