Date selectors – best practice for multiplatform design
You might not think something as simple as a date-selector could be an important issue for your website but, while it might not usually be a deal-breaker, it does have the capacity to irritate and frustrate clients if it is too cumbersome or continually leads to errors. And, if it does cause you to collect inaccurate information you have all the attendant problems of sorting and correcting the data.
So what is the optimum format for this particular feature? The simple answer is that if you are going mobile, there are different solutions for different devices – and even then there might be circumstances where the best outcome is a hybrid.
Multiplatform device access
The prevalence of mobile and tablet access to websites has, no doubt, complicated the issue as what works perfectly well on a laptop or desktop environment might be wholly unsuitable for the small screen of a mobile or the sensitivity of a touch-screen device. There is something of a conflict between usability, space and even accuracy in employing the different methods. Simply providing a box or boxes for the user to type the date themselves is obviously the simplest and most space efficient but it is slow for the inexpert typist and still prone to input error. Many sites provide this option but with pop-up calendars for speed of selection. However, on mobile devices these pop-ups might be problematic, take up a large amount of the screen and the consequent loss of precision can mean capturing inaccurate data or the user having to select several times which can be off-putting.
Use defaults
Defaults are another big issue in date-selector provision. You should at least provide a default to the current date for search-related date input but it is also important that you define the parameters for search in date selection otherwise the user can spend lots of time trying to establish when they can search from and to (that is, if they feel inclined – most likely they will just quit the app). The most effective way of doing this is to provide calendar designs that grey out the unavailable dates thereby making them inaccessible to search.
Mobile scrolling
Dater-pickers for mobile devices generally employ a scrolling calendar which takes up a reasonably small amount of space and provides the maximum flexibility and speed. The problem with all calendar facilities is that if the date is some time away, either in the past or future, it can take a while to scroll or click through to the relevant time-period. This can be avoided by providing a type-in facility which then brings up the relevant calendar screen so the user can check the date, the day of the week on which it falls and so on. A useful finessing of this mechanism is a continuous scroll calendar that overlaps months so you can view from one to the next rather than viewing individual months separately or even side by side.
As always, the criteria for your choice depends on what you are using the date-selector for and the likely nature of your target users. More sophisticated, proficient users will probably be as happy typing in the information themselves as searching and scrolling through lots of calendar screens. If date selection is an important (or the sole) raison-d’etre for your site or app then it is important to make it as accessible, intuitive and simple as you possibly can.
We have a wealth of experience in this, and many other areas. If you would like more information or advice on any website usability issues, why not tap into our extensive knowledge by giving us a call free on 08000 246 247 or dropping us an email at hello@ux247.com.
