The purpose of user experience design is to focus solely on how an interface behaves. This is traditionally more important than the actual design because a pretty-looking website is useless if nobody can use it. Thus UX has become a field unto itself with areas of focus derived from usability and case studies.
The absolute best user experience is often streamlined and versatile. Designers should create something that visitors instinctively know how to use.
Although some page elements behave in a fairly obvious manner(hyperlinks, buttons) there are others which are not-so-obvious. One such example is the date picker interface found in many web forms. The following tips should expound various options for building date pickers which are simple enough to use, yet detailed enough to function properly.
Basic UX Design Principles
Creating a great user experience is about having a direct focus on the goals of an interface. What are users trying to accomplish? What are the simplest methods for users to accomplish these goals?
UX design follows general principles which revolve around the user. Traditional art like paintings are made to be consumed and appreciated. However digital art, and specifically interfaces, are made to be used. A website isn’t just some pretty design – it’s an interactive page full of information, buttons, links, and other elements.
Related: 28 Articles on Usability and UX Design
Once you understand a website’s direction you can clearly map out the user experience goals. These goals might be increasing signups, gaining newsletter subscribers, or just holding retention of new readers.
In the realm of form fields there are dozens of various interface solutions. Datepickers are a particular segment of form elements which are often conflated with confusing, bloated UX design. But there are a few different options to choose from and each one tends to work best on different types of websites.
Select Menu Dropdowns
The first and most natural choice is the dropdown select menu. This is created using the HTML <select> tag and internal option values. The user clicks on the select menu and a small dropdown appears with various choices.
Select menus are great because you can predefine all of the traditional date options. Instead of using just one single dropdown it’s better to create 3 separate dropdowns for the month, date, and year, respectively.
This way users can choose between all of the traditional options without needing extra fancy CSS. Select menus have been supported in browsers for over a decade going way back to Internet Explorer 5.5+.
Mobile users can also quickly interact with select menus without so much as a minor tussle. When it comes to form input fields, touchscreen devices often render UX a little differently. But there’s no question that select menus always work perfectly as expected regardless of the web browser or operating system.
Manual Text Fields
Another meat-and-potatoes option would be to stick with generic input fields. Instead of users choosing from dropdown menus they would instead enter dates into text fields.
This can get a little trickier because instead of having pre-filled options you’re relying on users to understand the input requirements. For example, using the select menu it’s possible to create months with the full name(ie: January, February, etc). But with text fields it’s better to have users enter the 2-digit month number instead(ie: 01 = Jan, 02 = Feb, etc).
Almost everyone who understands how to use a computer should recognize a series of date-based text fields. You can use placeholder text formatted in the style of MM/DD/YYYY so users know what to expect. The only problem would come with older users who are unfamiliar with this technology.
Manual text fields are probably the simplest and most basic choice for web developers who want to leave more freedom to the user.
A select menu is generally superior in the context of UX because options are limited to exactly what you need. But either of these two methods are great for simple websites that just need a quick input field.
Free jQuery Plugins
Alternatively developers might opt to go the fancy route of JavaScript date pickers. And on that note the open source jQuery library is perhaps one of the greatest modern gifts to frontend developers.
jQuery can be used to enhance input fields of all kinds from contact forms to signup pages. Thankfully you can also find a handful of plugins to create impressive datepicker fields.
pickadate.js
Most web developers would agree that pickadate.js is a fantastic choice for any type of website. The plugin doesn’t require a lot of code and it’s really easy to setup.
And while it’s great that pickadate is smooth for the developer, it’s even smoother for the user. It’s a completely responsive mobile-friendly date picker which runs on all browsers and operating systems. As long as JavaScript is enabled this datepicker runs at full capacity.
If you’re just getting started with date picker plugins I would highly recommend pickadate.js. It comes with a fantastic theme right out of the box and it barely requires any customization. And for developers who like extensibility there is an API on which to write your own functions or additional libraries.
jQuery UI Datepicker
Another really popular free plugin is the jQuery UI Datepicker. This is actually part of the overarching jQuery UI library which is a free open source add-on to jQuery. The library includes tons of free widgets, animations, and even a lovely date picker.
Admittedly the jQuery UI default theme is very… bland. It works, and it works well, but it doesn’t look great without some customization. If you go with jQuery UI it’s guaranteed to support almost every browser with ease. But you’ll also want to make time to restyle the date picker interface so that it matches your own website.
jQueryMobile Datebox
Lastly we come to a full mobile solution named jQM DateBox. This plugin is built on the jQuery Mobile library which is another add-on to classic jQuery.
This mobile plugin has a user experience which behaves almost like native date pickers.
Android and iOS devices have a few different interfaces for selecting dates which are coded into the operating system. The jQM DateBox replicates some of these features using HTML/CSS/JavaScript.
Although the plugin is meant to be used in a mobile webapp, it still runs great in a modern website layout. It’s entirely possible to create a full website reliant on this date picker plugin for all users. Although pickadate.js might be a better alternative for more complex layouts, it’s good to know there are various options for designers in need of a usable datepicker solution.
Closing
There is no absolute right or wrong choice when it comes to date input fields. Very few websites actually have a need for a date picker so it’s not something that will be required on every project. But every web designer should know about the various options when it comes to building these more complex interfaces, and more specifically how to focus on interface design from a user experience perspective.
