Picker

Interfaces can exist in two states: informing and interacting. It’s clear with the first one, but interaction though is quite interesting and complicated. Tools that are usually helpful in this engagement are inputs, dropdowns, and pickers. Let’s dig into some details with the last one. 

Picker is a tool for choosing the right date in those forms where it is necessary. There are several kinds of pickers.

‍

Calendar

The most common is the calendar picker. It is an obvious and quite familiar way to select a date which transfers the experience from a real world with paper calendars to the interface of your device. However, this instrument can be a bit uncomfortable if a user should scroll the calendar pages too long to select a period that is far from today. 

‍

Text Inputs

Aside from the calendar, there is text input. It is most often to appear in the DD/MM/YY format (or MM/DD/YY, depending on the culture preferences). This kind of date picker may complement the calendar to make the selection process faster so users both typing dates and get a calendar list with a suitable date range. 

‍

Dropdowns

Another option for the picker is dropdown selection. This tool usually works separate for day, month and year selection. The problem with this one can reveal itself when a user needs to scroll a lot to get the applicable result. Similar solution for mobile interfaces is a scroll bar.

Timeline is not so common to use but worth considering. This instrument is often used in desktop versions and is efficient when a user needs to select a date range for further interaction. 

While making a picker design don’t forget to make default states. For instance, default date selection should always be “today” as it is the date which user is most likely to select. In any other case you can add a help text that would allow the user to understand the date format.

‍

Tips & Tricks

1. Try to always highlight today’s date in the calendar. This will let the user navigate efficiently.
2. Mark the previous and next month dates on the calendar page with different color or transparency to make it distinguishable from the current month, or just make an empty space.
3. Prevent the user from picking the wrong date: make it unavailable, but not the same color as the previous month dates.
4. Sometimes today/yesterday/last 7 days/last month tips can be used along with a calendar option to make the selection process more efficient.
5. Don’t forget about the errors: the main recommendation here is using red color to highlight the problem and add an error icon with a tooltip explanation on a hover-over.
   

Now you know how to work with pickers! There are lots of common options you can use for the selection of a single date or a date range, as well as an unlimited amount of creative pickers you can develop and implement in your design. Don’t limit yourself and enhance your projects with awesome design!