Date, time, duration

Consistent use of dates, times, and duration formats help users reduce cognitive load when going through our app.

Formatting

Dates

Use only approved date formats. Avoid any version of MM/DD/YYYY or DD/MM/YYYY, as it is:

  • Less accessible to read, e.g.: hard to scan, confusing for users utilizing screen readers
  • Can’t be easily translated between countries, e.g.: is the day first or the month?
Do
DateTimeDuration-DoDont-Format-Date-Do
Don’t
DateTimeDuration-DoDont-Format-Date-Dont

 

Times

Use only approved time formats. Avoid military time, 0 hrs, and leading zeros.

Duration + Time

Do
DateTimeDuration-DoDont-Format-Time-Do
Don’t
DateTimeDuration-DoDont-Format-Time-Dont

 

Decimals

Use decimals only when it’s a match problem, such as hours x wage commonly seen in timesheets.

DateTimeDuration-Example-Decimals

 

Time zones

Time zone should always be 2 letters, e.g.: MT, PT, CT, ET

Do
DateTimeDuration-DoDont-TimeZone-Do

 

Don’t
DateTimeDuration-DoDont-TimeZone-Dont

 

Long form vs short form

Use long form if space allows. In addition:

  • Always use long form for full sentences.
    • Exception (if needed): sentences with character limits such as SMS, push notifications or email subject lines
DateTimeDuration-Example-LongvShort

 

Combining different formats

Combine any date, time, and duration format as needed, considering:

  • Time first and date second
  • Combine short forms with short forms / long forms with long forms
  • Exception: Duration (hr, hrs, min, mins) don’t have long form, so you can combine with either short or long.

If in a sentence: combine to create a readable sentence by adding “on” between time and date (or any other connector needed).

E.g: Run payroll by 7:30 pm on Monday, April 27.

As standalone copy, combine by joining with a comma followed by a space. E.g. 7pm, Mon, 27 Apr

DateTimeDuration-Table-CombiningFormats

 

Combining hours and minutes

Combine hours and minutes by putting hours first and minutes after it, leaving a space in between (no comma).

Example: 1 hr 30 mins

 

Windows of days or times: ranges

Combine formats to create a range. Ranges should always be between 2 items with the same format.

  • If formats are long form, join by a hyphen with a space on each side
  • If formats are short form, join by a hyphen with no spaces
DateTimeDuration-Example-Windows1
DateTimeDuration-Example-Window-Group

 

Resources

(internal only)

Enhancements