TC Design

Dates/time

Owned by Dan Larmour
Last updated: Nov 14, 2024 by Dan Larmour
1 min read

Problem

Enable users to view date and time information in a way that reduces the amount of thinking and effort, and minimizes the chance for errors and frustration.

Solution

Display date and time data in a natural way when possible, as opposed to forcing users to use unfamiliar formats. Use short and long date formats consistently.

Where screen space permits, display dates that allow users to read the information in a natural way:

  • Wed. September 30, 2016

  • Dim. 30 septembre 2016

When screen space is limited, display date abbreviations in ISO format:

  • YYYY-MM-DD

  • AAAA-MM-JJ

If time is necessary based on the context, then it’s to be added in the HH:MM with short form time zone appended to facilitate sorting and comparison:

  • YYYY-MM-DD HH:MM EST

Use when

  • Use short formats when screen space is limited or sorting is required, e.g. complex tables and input fields.

  • Use long formats when space permits, e.g. in sentences and page instructions.

Capitalization

In English, the day of the week and the month name are always capitalized.

  • Wed. September 28, 2016

  • User last logged in on Wed. September 28, 2016.

In French, the day of the week and the month name are only capitalized if they appear at the start of a statement.

  • Mecr. 28 septembre 2016

  • Septembre 2016

  • Dernière ouverture de session le merc. 28 septembre 2016.

TC Design