←back to thread

Pikaday: A friendly guide to front-end date pickers

(pikaday.dbushell.com)
286 points mnemonet | 6 comments | 11 Nov 25 14:58 UTC | HN request time: 0.001s | source | bottom
Show context
abanana ◴[11 Nov 25 21:59 UTC] No.45893468[source]▶
A few years ago I wrote a mobile app for use by patients of local doctors' surgeries. This meant a higher-than-average proportion of older, less tech-savvy users.

There was a flood of complaints about the OS-native date pickers, along the lines of: "There's no way to set the year! To get to my birth year, I had to tap the previous-month arrow 720 times!" (It seems people actually did this.)

This is what happens in the real world when Flat Design takes over UI controls. On both iOS and Android (a few years back, I don't know whether they've been improved now), the year just looked like a heading. Nothing whatsoever suggested it was a tappable UI element.

Now that mobile OS UI decisions are seemingly led entirely by aesthetics, instead of being run by a seasoned UX researcher like Don Norman, using an OS-native datepicker leaves the usability of our apps entirely at the mercy of what they choose to mess up next.

I used Pikaday on a few websites years ago. We're told these tools are now obsolete - I wish that were true.

(Changing the app to use textbox-dropdown-textbox for date-monthname-year - this is in the UK - stopped any further such complaints.)

replies(5): >>45893504 #>>45893624 #>>45899065 #>>45902020 #>>45903234 #
1. HugoTea ◴[12 Nov 25 11:56 UTC] No.45899065[source]▶
The Gov.uk design team published research around data entry for dates https://designnotes.blog.gov.uk/2013/12/05/asking-for-a-date... Ultimately they found the best experience was three text boxes, day, month and year. They also have this "pattern" for helping with implementation https://design-system.service.gov.uk/patterns/dates/
replies(2): >>45899603 #>>45902613 #
2. abanana ◴[12 Nov 25 12:59 UTC] No.45899603[source]▶
They don't appear to have tested a dropdown for the month name, with text boxes for date and year. I've read elsewhere in UX research that the month name should be preferred, for clarity, over entering another number. So it's unfortunate that that page's research isn't complete ("we will continue our testing") and doesn't appear to have ever been followed up.
replies(3): >>45899937 #>>45902022 #>>45902283 #
3. joelanman ◴[12 Nov 25 13:34 UTC] No.45899937[source]▶
(I worked on this pattern) Our guidance is to accept both names and numbers in the back end so people can enter either. In our testing, text inputs (with a numeric keyboard on mobile) is better than selects. Some people struggle with using selects, we don't see those issues in text inputs. That guidance maybe be about people not knowing the order of the inputs (DD MM YY, MM DD YY) but our pattern is clearly labeled for each input so we don't get that issue.

We did continue our testing which resulted in the pattern in the design system which is linked.

4. HugoTea ◴[12 Nov 25 16:20 UTC] No.45902022[source]▶
They did some research elsewhere on dropdowns and found a lot of users do not realise they can scroll through the list and would get confused, might be why they ruled out dropdowns entirely for date pickers.
5. komali2 ◴[12 Nov 25 16:40 UTC] No.45902283[source]▶
I'm always confused by the anglocentrism of these kinds of ux "standards" because for example in mandarin we call days (三號）, weekdays （星期二 / 禮拜二）, months （二十月）, and years by numbers... And in Japanese they have similar I believe but also have non numbers for weekdays. I imagine other languages have similar flukes, wouldn't be surprised if there was one out there that had special words for the first couple days of the month or something.
6. bob1029 ◴[12 Nov 25 17:03 UTC] No.45902613[source]▶
> Ultimately they found the best experience was three text boxes, day, month and year

This is what we found was most acceptable for our banking users. They were coming from terminal interfaces. This is a UI/UX flow that we just had to go with. We experimented with fancy date pickers (i.e., <input type='date'>) and it lasted about a month before we were forced to refactor. We kept a date picker icon (exempt from tab order) for novice / younger employees who prefer the tap-tap-tap bs.

If you are replacing a mainframe app with something on the web, the least you can do is make a half-ass attempt to keep the # of physical fields the same and place them in the same tab order. This can make or break your pitch in a competitive B2B SaaS environment. We sold to the users, not to the business. The users then sold to the business for us. You cannot get end users to help sell for you if they don't like the UX. They know they'll have to live with it every day if they successfully advocate for it.