[META] [PARENT] The UX of datetime/daterange/timestamp fields, widgets & Formatters is consistent

Created on 25 July 2017, over 7 years ago
Updated 20 August 2024, 3 months ago

Problem/Motivation

Date field elements have:

  • Complicated configuration
  • Inconsistent behaviour between similar elements
  • Poor layout
  • Restrictive default values
  • Unhelpful labels or descriptions
  • Useless error messages
  • too tight or too loose validation

Goal/s

To have a consistent user experience when working with the date and time related elements (Widgets and Formatters)/

Background

  • Each date and time related field belongs to a core module.
  • Date fields are added to bundles/nodes/entities to hold data
  • Widgets are used for inputting/updating this data. These are configured on the form display settings of the bundle
  • Formatters are used for showing the held data on a range of displays.

Proposed resolution

This is an epic and very long term plan. There are quite a few ways to categorise the tickets. Firstly by UX categories. Then by the sub-components of the date related core modules.

Remaining tasks

  • Define the best practices and the Drupal way of doing each of these UX goals, Add them to the usability guide
  • Assess each best pratice on each sub component doing a usability study
  • Create tickets for each of the changes needed on the relevant module and tag those tickets with "Usability", the component, the sub component and the UX category.
  • FIX THE BUGS!!

Drupal Form element UX best practices

UX categories

Streamlined Configuration

Formatting dates using the PHP method is non-intuitive.

Datetime module

Daterange module

Field/s
Widgets
Formatters

Timestamp module

Field/s
Widgets
Formatters

Consistent Behaviour

There are slight differences between the datetime and timestamp widgets, but from the user's perspective the there shouldn't be.
Which format should we go with?

Datetime module

Daterange module

Field/s
Widgets
Formatters

Timestamp module

Field/s
Widgets
Formatters

Clear Layout

Datetime module

Daterange module

Field/s
Widgets
Formatters

Timestamp module

Field/s
Widgets
Formatters

Default Values

Datetime module

Daterange module

Field/s
Widgets
Formatters

Timestamp module

Field/s
Widgets
Formatters

Helpful Labels and description

problems When on a browser that doesn't use the HTML5 inputs, there is no clear indication of what field is what, especially w/o the polyfill, b/c the labels are invisible

Datetime module

Daterange module

Field/s
Widgets
Formatters

Timestamp module

Field/s
Widgets
Formatters

Useful error messages

Error Messages

"Error messages aren't great" - In some cases these are just plain wrong. E.g. the date might be dd/mm/yyyy and the error message tells you to put you yyyy-mm-dd.

  • The user should see a message that tells them what went wrong and what they can do next to fix the problem
  • The messages should be consistent across the widgets.

Datetime module

Daterange module

Field/s
Widgets
Formatters

Timestamp module

Field/s
Widgets
Formatters

Validation

Datetime module

Daterange module

Field/s
Widgets
The date range widget should leverage client side validation to help prevent end is less than start
Formatters

Timestamp module

Field/s
Widgets
Formatters

🌱 Plan
Status

Active

Version

11.0 🔥

Component
Datetime 

Last updated about 14 hours ago

Created by

🇺🇸United States mpdonadio Philadelphia/PA/USA (UTC-5)

Live updates comments and jobs are added and updated live.
  • Usability

    Makes Drupal easier to use. Preferred over UX, D7UX, etc.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024