Date of birth pattern:
• No confusion around whether day or month comes first, as month is represented by its name (and not number value).
• Can type in year value without having to scroll through a dropdown or click through a calendar.
• Shifting from dropdown to input field (and mouse to keyboard) might be confusing for some users?
• Placeholder text for the year input field that disappears after a user starts to type. Noting Nelson Norman Group: "Placeholder text within a form field makes it difficult for people to remember what information belongs in a field, and to check for and fix errors. It also poses additional burdens for users with visual and cognitive impairments."
- - -
Here's a link to an audit of existing date patterns used through out Westpac and STG:
Scenarios: credit card expiry, ID expiry date, employment start/end date
A dropdown for day, month and year:
This pattern can be adapted depending on what you're asking for. For example, an expiry date:
This solution is:
- accessible (can be used with a mouse and keyboard)
- responsive (works across all breakpoints: LG, MD, SM, XS)
The only time this might not work:
- Is in a scenario where people are thinking "I want to make the payment next Wednesday"
- For date of birth (because of the mega scroll in the year dropdown).