Date Picker UI Designs That Torture

I like dates. (No, not that kind.) Dates give my task list and projects structure and accountability. I use a date picker at least once; if not more than a dozen times a day. Whether I schedule a phone call, check out a range on my Analytics stats, GWA Batshit Crazy Comic look up flight availability, or set a project milestone date – all of them involve me mouse clicking away and interacting with some calendar widget. And they don’t all work in the same way. Some of you might be thinking, really? You’re gonna focus on a date picker?

Of all the reasons that cause software to suck, isn’t this piece of UI minor? Oh no. Not for me. Not on this blog. Somewhere out there I know there are at least 100 people who would fist pump the air and shout YES! when (and if) they saw this post.  I’ve meticulously put together this rant for these folks. (You know who you are, please say hello.)

Some people. My friend would say this in an exasperated voice when people frustrated him. Finally, here’s a post to point out the annoying things that some people thought were a good choice for interface design. Okay fine, maybe it was the best choice at the time. But when was it a good decision, 7 years ago? That’s 56 dog years, and something like the stone age era in Internet time.

Let’s start with a date UI choice that drives me batshit crazy as of late…

Capsule CRM (I’m Forced to Click) Calendar Widget

(AKA, how many clicks does it take?)

Capsule CRM, you get the honor of being the worse offender of stupid calendar interactions. See this screenshot?

date picker Capsule CRM

Capsule CRM date picker

Notice the label – Birthday. Chances are I’m dealing with a date at least 13 years back, and more like 40 or 50ish. Does Capsule CRM allow me to just type in the date? No, that would be too easy eh? Too obvious? Nay, not for Capsule CRM. It’s more important for them to keep plugging away (for almost a year) at a universal HTML 5 mobile app, while the users have to go click, click, click… I’m forced to click that damn tiny double arrow 50 times if my client was born in 1961! Argh! Well I’m not the type to suffer in silence! For Pete’s sake, not being able to manually type a date isn’t a feature request, it’s a darn bug!

But the kookiness doesn’t stop there. After tweeting and reporting this issue, not one person from Capsule support mentioned the weird hidden interaction when you click on the “Month/Year” in the center. I discovered this feature by accident.

Capsule CRM - date picker mysteryClick on the center month and lo and behold you get this popup to scroll through the years by the decade. Wow, that’s so neat! Look at those OK/Cancel buttons on a form field, yay!

Let’s reinvent the wheel shall we? I’ve never seen anything like this for a date picker. What designer thought up this genius idea and actually spent the time to code this into reality, instead of… I don’t know, just making the damn text input work?

Okay, I’ll stop picking on you Capsule. I love 90% of what you’re doing, and I give those apps I truly want to see succeed, a ridiculously hard time. So take it as an indirect compliment that I’ve directed my laser beam attention onto you. (Edit: Mysteriously, a month after this post they fixed the date picker. Of course.)

 

Travel Booking (I Hate Fitt’s Law) Date Picker UI

(AKA, why is that date disabled?)

I come across a lot of calendar widgets that don’t consider or apply Fitts’ law. Most often widgets that popup are unnecessarily small, or they contain dead pixels.

Extra Small Sizes Don’t Make Calendars Cuter

calendar popup widget CheapTickets

CheapTickets calendar popup

Any reason why calendar widget remain so small on so many of these air or travel booking websites? Take this screen shot crop from  CheapTickets. The size of this widget is no more than 150px in length and width. The numbers and the text are extra small. Those dates look like they’re no more than 8px in font size. Making this popup widget at least 30% bigger would help with ease of use according to Fitts Law. And on another note, why limit yourself to just one month? I’m at the end of April and I’m booking a flight 6 months out. It’s going to take me 6 clicks on that pretty small arrow to get to the date I want. Why not show 2 months or even 6 months at a time like CheapAir?

You might point out that the widget is the same size proportionally to the date field and other form elements behind it. But this isn’t a valid reason IMO. And it also begs the question – why is the most important area of a airfare website taking up a minority share of the screen real estate on the home page? A bigger area with larger fonts will create a better user experience, and better yet it will likely yield higher conversions.

Dead Pixels For Next & Previous Dates Are Slowing My Flow

dead pixels calendar buttons Airbnb

Airbnb small calendar buttons

Here’s a crop of a date picker from AirBnB that is nicely sized. It’s about 50% larger than the above calendar widget example. Looks better already doesn’t it? The numbers are bigger and easier to click on. The shading behind each date is a nice touch. And you’ll notice even the design of the home page makes the “Where are you going?” form field much larger than any element on the page. All good things. But then why the tiny next previous buttons for the month? There’s all this space up there on the corners of the box that isn’t being utilized. Use that space! Dead pixels slow a person down. The acquisition time will be slower, and it is neither purposeful or necessary to slow me down here. This isn’t a reset or delete button.

I bet if we measured mouse clicks on this page there would be an alarming number of missed clicks, where people were trying to hit that next or previous arrow. The red area I’ve drawn can be expanded even further to include some pixels on the left and bottom. Give the clickable area of that button some padding and kaboom! this design is instantly better.

Another example of dead pixels, and one I find most offensive is when dates from the previous of next month are shown but are disabled and not selectable. I know I’ve come across this a half a dozen or so times, but I can’t find an example of this other than Capsule CRM right now. In that first screenshot, notice how the calendar shows dates from the previous  month? Why aren’t those selectable? So what if it is the previous month; why make me click previous just to get to that date when it is right in front of me? I’m so glad Google’s Calendar doesn’t commit the same mistake. But Google, are your teams that disconnected that they can’t agree on some standards for picking dates across all your products?

Mega Sites (I Don’t Have Standards) Calendar Pickers

(AKA, our UX designers don’t talk to each other.)

Sometimes a software or web app company makes so many things and iterates so many times, that they lose sight of common principles and standards. Google has several products that make use of picking dates. And yes, there are situations that call for a completely different design such as when picking a date range in Google Analytics. But then there are some apps where the date pickers have the same functions but completely different designs. Why hasn’t the Googleplex adopted a standard yet? Here are two date pickers from Google:

Google Calendar pick date

Google Calendar pick date


Google Search Date Picker

Google Search Date Picker

This gripe post about calendar widgets shines some light on the criteria I use to pick and choose web apps to feature on this blog. Apps reviewed on this website are few and far in between. If you’re really pressed for a recommendation for some service you need and you don’t see it on here, give me a shout. I might be able to tell you what some of your best options are and what the pros and cons are of each SaaS tool.

Tags: , , , ,

Connect with GWA

If you enjoyed this post, please share your thoughts in the comments, or subscribing to my site.

6 Responses to “Date Picker UI Designs That Torture”

  1. TimeHat August 17, 2011 at 3:00 am #

    Date pickers are my least favorite input control/UI element.  Every time I see one a little part of me dies inside.  Being a web developer, I realize that many of these pickers were probably just cobbled on in a hurry and the developers know they’re not perfect.  (Although that Capsule CRM issue is definitely a bug.)  I think the whole idea of how we use date pickers needs to be reinvented.  At the very least they should have multiple months and larger buttons.

  2. Alfred February 20, 2012 at 11:18 am #

    YES!

    • Pashmina February 20, 2012 at 6:16 pm #

      Great, now where are the other 99? ;)

  3. damyst July 20, 2012 at 6:05 am #

    Second! At this rate you’ll have your 100 in fifty years or so :-)

    I agree with TimeHat that the whole concept of date pickers needs to be reworked. Virtually all of them are modeled on the old printed calendars. Surely there’s a better way to map time onto space on the web?

  4. efusien March 13, 2013 at 7:25 pm #

    Hi,

    Do you propose something for a mobile datepicker ?
    Nowadays we have an HTML5 date picker on recent devices. But it’s not a calendar.
    So… what about datepicker on cell phones ? Not a good way for user experience ?

Leave a Reply