UX Patterns
Dates alpha

Overview

Below are tables detailing date/time formats for both past and future. For each table, each row has 3 lines:

  1. The first line is a format with ideal wording. We would use this format when we can control the context/phrasing of the date/time, to ensure proper grammar. When users hover over this first format, a peek would appear with the third format for full detail.
  2. The second line is the format that would display to ensure proper grammar/wording, when we can't control the context/phrasing. For example, it would be used in Custom Fields. When users hover over this second format, a peek would appear with the third format.
  3. The third line is the "Machine Format" that would display for dates listed in tables. This would make table filtering less confusing, since users currently have to filter by exact characters. There would be no peek.

Actions made in the future

If action was made......then date/time would read as...Example
<0 min in the futureIn X seconds
HH:MM AM/PM
MM/DD/YY HH:MM AM/PM
In 5 seconds
1:23 PM
06/02/14 1:23 PM
<1 hr in the futureIn X minutes
HH:MM AM/PM
MM/DD/YY HH:MM AM/PM
In 39 minutes
1:23 PM
06/02/14 1:23 PM
On the same dayToday at XX:XX AM/PM
N/A
MM/DD/YY HH:MM AM/PM
Today at 1:23 PM
N/A
06/02/14 1:23 PM
Yesterday (<1 day ago)Yesterday at XX:XX AM/PM
N/A
MM/DD/YY HH:MM AM/PM
Yesterday at 1:23 PM
N/A
06/02/14 1:23 PM
<3 days agoIn N days at XX:XX AM/PM*
MMM DD YYYY at XX:XX AM/PM*
MM/DD/YY HH:MM AM/PM
In 2 days at 1:23 PM*
Jun 2 2019 at 1:23 PM*
06/02/19 1:23 PM
>3 days agoMMM DD YYYY at XX:XX AM/PM*
N/A
MM/DD/YY HH:MM AM/PM
Jun 2 2019 at 6:54 PM*
N/A
06/02/19 1:23 PM

Actions made in the past

If action was made......then date/time would read as...Example
<0 min agoX seconds ago
HH:MM AM/PM
MM/DD/YY HH:MM AM/PM
5 seconds ago
1:23 PM
06/02/14 1:23 PM
<1 hr agoX minutes ago
HH:MM AM/PM
MM/DD/YY HH:MM AM/PM
39 minutes ago
1:23 PM
06/02/14 1:23 PM
On the same dayToday at XX:XX AM/PM
N/A
MM/DD/YY HH:MM AM/PM
Today at 1:23 PM
N/A
06/02/14 1:23 PM
Yesterday (<1 day ago)Yesterday at XX:XX AM/PM
N/A
MM/DD/YY HH:MM AM/PM
Yesterday at 1:23 PM
N/A
06/02/14 1:23 PM
<3 days agoN days ago at XX:XX AM/PM*
MMM DD YYYY at XX:XX AM/PM*
MM/DD/YY HH:MM AM/PM
2 days ago at 1:23 PM*
Jun 2 2019 at 1:23 PM*
06/02/19 1:23 PM
>3 days agoMMM DD YYYY at XX:XX AM/PM*
N/A
MM/DD/YY HH:MM AM/PM
Jun 2 2019 at 6:54 PM*
N/A
06/02/19 1:23 PM


*only include the detail of "at XX:XXam" when the timestamp is referring to queries.

Viewport is too small to support the width of the time stamp

Time stamps can display as a shortened version, as indicated below. Peek would display with the "Machine Format" (format in the third row of the tables above).

If action was made......then date/time would read as...Example
<1 day in the future/agoHH:MM AM/PM1:23 PM
>3 1 day in the future/agoMM/DD/YY06/02/14

Changelog

  • August 15, 2017 - Promoted to Alpha and added rules around future dates