UI Date Stamp Best Practices

It always comes the time in any project where information and post need to include a date and time stamp. Based on my experience in different project, I collected a series of Date and Time Stamp standards and best practices that apply to most projects.

Basic Principles

Let timeSince be the time duration between the event and the current moment in time. Note that in some cases due to clock skew or whatever may happen between servers, this time may in some cases be slightly negative. The cases below are evaluated sequentially. For time and date patterns, you can take a look at the Joda Date & Time documentation.

Case Display

TimeSince <1 second = Just now
TimeSince <1 minute = x seconds ago
TimeSince <1 hour = y minutes ago
TimeSince <1 day = z hours ago
TimeSince <2 days = Yesterday at "h:mm TZ"
Else MMM d, YYYY at h:mm "TZ"

Essentially, for times up to 1 day ago, the coarsest non-zero unit of time is used.

Time Zones

Time zones are retrieved using an IP2Geo lookup system, which accounts for Daylight Savings Time, etc. In the event the user’s time zone cannot be properly determined, a default of America/Los_Angeles (long-form) is used (for display, will be PST or PDT).

So here’s an example of the timeline progression on a single post:

Posted 2 minutes ago
Posted 15 hours ago
Posted Yesterday at 6:15PM PDT
Posted on Sep 3, 2013 at 6:15PM PDT

Sorting Information in a timeline

The information is captured in the database in the format HH:MM:SS, and it also has a timeID. Information can then be sorted by the variable seconds on the front end. In the case where a record is entered within the same second, then use the timeID to assist in the sorting of the information.

Use Cases

Creation of an item:
Created on Mar 15, 2013
Creation date does not require a time stamp

Updates in General:
Updated on Mar 15, 2013 at 5:45PM
Time stamps are not mandatory in all update actions and they should be reviewed on a case by case.

Posts:
Posted on Mar 15, 2013 at 5:45PM
Posted by Roger Rabbit on Mar 15, 2013 at 5:45PM
Posts need a time stamp as they will be our key dimension to display the order of the posts.

Messages:
Sent on Mar 15, 2013 at 5:45PM

Adding to a List:
Added on Mar 15, 2013 at 5:45PM

Review your geo-location options with your development team and find out what components can be left out from the time-zone identifier as these tend to confuse users.

There is even more information in an article posted on css-tricks on how to the <time> element can be used and all their forms.