Maybe I just like dates. Or maybe it’s because 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, 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! 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. A friend of mine use to jokingly say that phrase a lot. Finally, someone took the time 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 that, like 7 years ago? That’s 56 dog years, and something like 92 internet years ago. Let’s start with the one 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?
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.
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.
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
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 may yield higher conversions.
Dead Pixels For Next & Previous Dates Are Slowing My Flow
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 pixes 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:
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.