Date field help please

input
accessibility
date

#1

I am designing a date field and have a few questions.

I would like the field to be a ‘date’ type input field with a calendar picker. This allows users to either type or use the mouse to pick a date, however, it allows for lots of error, which we also need to design for.

Somebody else has suggested a date picker only, but I know these are not very accessibility friendly.

Someone else has suggested 3 drop downs (day, month, year) and also a date picker.

Is there a standard/best approach for date fields?


#2

Ciao @jacquidow

As a user I want to be able to react on the field typing the value or clicking/tapping on a specific icon to open the date picker.
According the w3c this is the way how a date picker should look like:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_date

In this way you can fulfill needs for keyboard users and mobile/mouse users.
Regarding the date format, it’s not my cup of tea, but I believe that you can manage errors, in terms of date format, with server side validation.

Some cool (IMO) examples: https://material.angularjs.org/latest/demo/datepicker


#3

We used this during some usability testing and it completely failed! The users couldn’t interact with it and gave up!

We have resorted to something similar to these:

And we are going to expand on the accepted formats over time.


#4

what happened?


#5

The input field has a number of different interactions, you can type, use some up/down arrows, or us the calendar control.

Our users stopped looking along the control as soon as they saw the up/down arrows and tried to input the date using these!

Needless to say after a few clicks they became very frustrated and once we were satisfied that they weren’t going to try any other interaction with the control we ended up telling them that they could type. We discussed with them afterwards and they said that the up and down arrows confused them and they thought they couldn’t type because of them.

It was certainly very interesting.


#6

The UK government has developed a series of principle and design patterns called GDA that have proved to be really helpful.
The specific rules suggested for date field are available here

https://www.gov.uk/service-manual/design/dates.

A nice discussion about date field that seems to be relevant is here.

Personally I think that a full calendar in which you could pick the day without any distraction could be a good fit.

I found illuminating the job done by foolproof for easyjet’s booking process. :slight_smile:


#7

I fully agree because in this context the main focus is on where and when.
In an other context, like a subscription form, where you have to enter your birth date, I believe, it’s better to provide the chance to write the value. Think about users born in the 50’s


#8

We simplified the control and during the usability test was natural for users to interact with it.
Our scenario was about a payment form with a submit date field, maybe this made the difference.

:slight_smile:


#9

Here is a screenshot of part of the screen where we are using this date picker (although it will be a consistent control across our numerous applications)

Here is an extract from part of the validation documentation we have put together for this project:

Date field

  • User will be able to pick date using a calendar
  • User will be able to manually input a date
  • Restricted to 10 characters
  • Only able to input numbers & / symbol
  • Placeholder text: DD/MM/YYYY
  • Inline error message if any of the above are not met: ‘Please enter a valid date. Date must be in the format: DD/MM/YYYY’

Term start date

  • Inline further information text should be present - ‘This is the first day of the term when pupils will be in school’
  • If the date entered is not greater than the current date, the academic year start date & any term dates (prior to this An inline error message will be displayed - ’Date must be between the academic year start and end date’ or ‘Date must not be in the past’ or ‘Date must be after the [summer] term end date’
  • For any other error (such as the date not existing) we need a generic inline error message - ‘This is an invalid date’

I wanted the user to be able to be a lot more relaxed about the way they input the data (1/1/16 or 1.1.16 or 1-1-16 or 01-01-2016 or 1.1.2016 etc etc) But we are being told this will take too long to develop.

The other problem is whatever control we use needs to comply to AA accessibility rating! :slight_smile:


#10

@jacquidow
well done!

Due to the lack of knowledge about the task I can’t understand why the second line is not aligned on the left and widgets have grey backgrounds.
Just my curiosity :slight_smile:


#11

The second row of date fields are the start and end date for the half term holiday. These fields are currently in a disabled state. Ticking the ‘add a half term holiday’ will enable the these fields. The layout needs a bit of tweaking to make this clearer though :slight_smile:


#12

I see.
Again, I don’t have the full view of the page.
Why do not hide the second row and make it visible only if the user clicks/taps on the check?


#13

That is one of the designs we have :slight_smile:


#14

Sorry for the late…Dopamino You’re right (hai assolutamente ragione), the easyjet example was more on the principle rather than on a specific case.
The isolation to avoid distraction, the form that is basically a very well-known format that doesn’t need explanation (a generic calendar) the aesthetic elegance of the solution that force the user to do something but in a way so nice that the user doesn’t feel forced, the little details that help the user sparing cognitive effort (nice focus, auto-exclusion of invalid values, isolation etc…).

Unfortunately I didn’t have all the information to give suggestion of possible solution, I focused more on possible well practices…

But, again, you’re totally right, that form for a date of birth (expecially for “differently young people” would be a nightmare… :slight_smile:


#15

Apart from that, I have a stupid question. Are the “first day” and " last day" fixed within a small range of day for all the classes?
A different approach that is not compliant with the VD, just for brainstorming.

I was wondering if it was possible to choose the year, once selected the year the system will show only the possible starting of ending dates - for example, if in 2016 schools opened within the 9 and the 15 of September, you’ll have to choose only within 7 values.
Of course this would be impossible for a a normal date picker.

Again, if the date is not in the range you could choose a calendar view.
If you please I’ll submit a sketch as soon as I can


#16

One I like using is Air New Zealand’s https://www.airnewzealand.co.nz/. It smoothly uses a combination of things - the ability to type the date, or use a date picker, which has a dropdown for the years allows you to scroll through the months. The months are also big, so easy to read and select days.


#17

Can you get it built so the / in between the numbers appear automatically? Makes it easier for a user.


#18

Not sure how this would work with screen reader software, but it is one of the ideas we have suggested :slight_smile: