COPPA age verification datepicker

[Jed Sweigard]

Not sure if anyone else has noticed this little UX weirdness, searched the forum with no luck so let's try starting a new topic for it!

I'd be surprised if no one else has noticed this issue. I did some blinde testing with several others in my office (all software designers and developers), and almost all of them had the exact same problem I did.

When COPPA compliance is enabled and a new user begins the registration process, they will first be presented with a birthday verification step. The input disables manual entry at first and defaults to a pretty nice looking datepicker widget popup. The problem is that any changes in the datepicker are ONLY applied after the user clicks on a day. So what if someone clicks the day first before selecting their birth month and year? The input will update with the correct day, but the default month and year (defaults to current month and year). The user will probably think, "oops something went wrong there, the datepicker went away before I was done, let's fix the month and year." This is where the UX totally breaks down. In my tests most people clicked on the input again to launch the datepicker. They next selected the correct month and year and click out of the widget to dismiss it. Now, because the widget ONLY updates the input when a day is clicked, nothing has changed. The natural user expectation is that the input has changed as they make changes in the widget, and nowhere does it indicate that you have to select the day AGAIN in order to apply your changes. Many of my test users didn't notice that the input hadn't updated and accidentally submitted with the current month and year (2016), falsely identifying them as too young to register a member profile without parental consent.

If you look at the attachments, you can see that I've changed the month to October (10) and year (1990) in the second image, but the date still stays as 06/06/2016. It will ONLY update if you click on the day again. Maybe some people will realize what's happening here, but I think (and have tested that thought) that most won't.

Anyway, I think an easy solution here is to simply update the input with each change in the datepicker. So if someone selects the day first, the input won't be confusingly dismissed. Once they've selected month/day/year correctly, they can simply click the "Continue" button or click out of the datepicker anywhere to dismiss first if they so choose. Having the "submit" function tied to ONLY the day without any indication that that's the case is very counterintuitive. Alternatively, you could move the datepicker submit functionality to a "Done" button in the datepicker so that the interaction is more clearly indicated.