How to gather a memorable date

[kelliedesigner]

As a user of the design system
I want to know how to gather data which includes a memorable date
So that there is a consistent experience across sites

Description

Relates to #65 and #67

Website audit:

Links and resources

https://www.gov.uk/service-manual/design/dates
http://coop-design-manual.herokuapp.com/styles/forms/form-patterns.html#date-birth
https://www.w3.org/WAI/tutorials/forms/instructions/#providing-instructions-within-labels

Acceptance criteria

• memorable date (for example, date of birth or marriage)

Document solutions to following concerns:

• Inputs the date is made up of
• Ease of entry, rules on what alternatives of data to accept
• Error messaging and validation
• Focus
• avoiding auto tabbing
• use of calendar controls
• Triggering device numeric keyboards
• How to display dates and date ranges

[kelliedesigner]

Key findings from gov.uk

The way you should ask users for dates depends on the types of date you’re asking for.

Memorable dates

• To ask for memorable dates, like dates of birth, use text fields for users to complete.
• Use 3 fields as it’ll be easier for you to validate each part rather than trying to review a single field.
• Don’t automatically tab users between fields because this can clash with normal keyboard controls and confuse people.
• Calendar controls (visual calendars which can be used to select dates) aren’t particularly useful for known dates and some users struggle to select date boxes.

Triggering the iPhone numeric keyboard
To trigger the numeric keyboard on iPhones, add a pattern attribute to the input element like this: pattern="[0-9]*"

[kelliedesigner]

Key findings from Coop

• Allow users to enter the date as flexibly as possible, for example, allowing 'Jan' as well as '1', or '01' for a month input.
• Use the length of the text input field to indicate the format. If research shows that more clarification is needed, use hint text (static text that sits outside of the text entry field) rather than placeholder text (text that sits within the text entry field).
• Do not auto tab between fields — this can be unnerving for some users and can make it difficult to edit mistakes.

[kelliedesigner]

Key findings from NN

• Add labels and separate the fields to make it clear which fields are for the month, day, and year (this is particularly beneficial to avoid major problems of cultural expectation of date formatting)
• Typing the date is the most basic option for date input, yet in many cases it is the most efficient one, especially when the date is further away in the past (e.g., birthdate) or future. We recommend that you allow users to type the date even if other input methods are available.
• Do not require users to enter special characters to format dates.
  Whatever format users chose for entering the date (dashes, spaces, slashes, dots between the month, day, and year components), their input should be recognized.
• Leftmost zeros should not affect the date.
• Report errors appropriately.
• Remove illogical date options.