Written by Anthony

Information evolves over time like a living organism. What’s relevant this year might not hold as much weight a few years from now. That’s why it’s important to append timestamps to your content. But if you don’t display your timestamps in the right format users could have trouble using them.

Absolute vs. Relative Timestamps

There are two types of timestamps that most sites use. Relative timestamps display the number of minutes, hours, days, weeks or years ago a post was published. Absolute timestamps display the exact date and time a post was published.

Both formats offer utility in different ways. But when should you use one over the other? And how should you display them? These factors will determine whether your timestamps are usable or not.

Absolute Timestamps

The benefit of absolute timestamps over relative ones is that they offer a precise date and time. But dates and times are hard to interpret because not all users live in the same timezone or country. That’s why it’s important to display your absolute timestamps in a friendly format.

Converting Timezones

A problem with absolute timestamps is that they force users to convert timezones to get their local time. This will frustrate those who don’t live in the same timezone as your server. Users should be able to get the right time without making calculations or errors.

Imagine a user who is attending event and doesn’t notice the change in timezone or makes a mistake converting it. The user would end up missing that event, which could lead to unfortunate consequences. In contexts like these, it’s so important that your absolute timestamps are timezone friendly. The way to do this is to optimize your code so that it detects and displays the user’s local timezone instead of the server’s.

Start by storing your timestamps in UTC on your server. UTC is the universal standard that’s not affected by daylight savings time. To display the user’s local time, you need to have the user’s timezone offset, so that you can add it to your database’s UTC value. You can get user’s timezone offset by auto-detecting them with this Javascript Timezone Function.

Converting 24-hour Clock Times

If you have users around the world, not all them will use the same type of clock. Don’t force them to convert times to the clock they use.

Most english-speaking countries use the 12-hour clock as the dominant written and spoken system of time. Other countries use the 12-hour clock in spoken time and 24-hour clock in written notation. But most people in 24-hour countries are so used to both systems that they have no problem switching between the two (source).

Because of this, you should display your times in 12-hour clock as the default. But if you have many users who prefer the 24-hour clock, you could display the 24-hour time in a link or icon tooltip that opens on mouse hover.

Reading Numeric Date Formats

Time formats aren’t the only issue users face when reading an absolute timestamp. Dates can also give users trouble if they’re displayed in a numeric format.

Different countries interpret numeric dates in a different order. Some put the day number first, some put the month number first and some put the year first. Figuring it out is taxing on the cognitive resources, and can lead to user error.

Avoid confusing users by using a written date format on your timestamp. Write out the month name in full or abbreviated form, but don’t abbreviate the year. An abbreviated year can cause confusion with the day number. You can display formatted dates for different countries with this Javascript Date Library. 

When Not to Use an Absolute Timestamp

You may not have to deal with all these issues if you don’t even need to use an absolute timestamp. Sometimes a relative timestamp is a better fit. 

If your content updates often, or if users need an exact time and date to do a specific task, you should use relative timestamps. Relative timestamps are useful for these cases, but they have display issues of their own.

Relative Timestamps

Accuracy isn’t important with relative timestamps, but immediacy is. When users want to know how long ago a site published a post, they prefer time units in written form. This way they don’t have to mentally calculate dates and times and count back from the present day.

Not only that, but users don’t have to convert time zones with relative timestamps. Content published an hour ago or three hours ago makes no difference to users who only need a general sense of recency.

Adaptive Time Units

The trouble with relative timestamps start when the time unit format doesn’t adapt to duration. Instead, it only displays a small subset of time units.

For example, a site may display relative timestamps in minutes, hours and days. But after days it doesn’t display the time units that follow that. Users can get frustrated trying to calculate number of days in the hundreds.

Your relative timestamp should always adapt to duration and display time units accordingly. After 30 days, it should display months. After 12 months, it should display years.

Precise Time Units

If your site doesn’t display content in order of submission, users won’t be able to tell how far apart they were published. You either need to use absolute timestamps, or include precise time units in your relative timestamps.

Precise time units combine different time units together. Instead of only displaying hours in your relative, you would display hours and the minutes that follow to get a more precise time. This gives users a better sense of the time lapse between posts.

Time Unit Abbreviations

Relative timestamps can sometimes take up more space than you want. If you’re displaying them in a confined area, such as a content card or mobile site, you should use time unit abbreviations.

Use standard abbreviations that users can recognize. For the plural forms, don’t add the letter “s” to an abbreviation, use the same form as the singular (source). Here’s a table of standard abbreviations for every time unit.

Automatic Updating

When first viewing a web page, users get an accurate impression of how old each post is. But a fresh timestamp that reads “2 minutes ago” will no longer hold true the longer the user stays on that page.

This is because most relative timestamps don’t automatically update. Users have to refresh their page to get accurate timestamps. If you want to give users accurate relative timestamps, use this jQuery Plugin for automatic updating.

When to Not Use Relative Timestamps

There are times when relative timestamps aren’t as effective as absolute timestamps. When users need to reference a post, it’s easy to do with absolute timestamps because they display unique times. Posts with relative timestamps are harder to reference because they can display the same times.

Another disadvantage with relative timestamps is that they make time proximity harder to measure. Users won’t be able to view how much time has passed between different post submissions. This is important in contexts such as chat, email and discussions.

Combining Relative and Absolute Timestamps

Each type of timestamp has their benefits. If you don’t want to lose the benefits of one for the other, you can combine them together. This way users can make use of both if they need.

Inline Display

One way of combining them is to display them inline with each other. You can display the absolute timestamp first and put the relative timestamp in parentheses.

Absolute timestamps include a date and time. Displaying both inline with a relative timestamp can take up a lot of space. You can save space by showing what’s relevant in the moment and leaving out what’s implicit.

To save space, display the time first, but exclude it after 24 hours and replace it with the date. To save even more space, exclude the year and display the full date after the current year passes.

Automatic Conversion

Another way is to convert relative timestamps to absolute ones over time. You can do this by setting the absolute timestamp to display over the relative one when the age of a post passes a certain period.

For example, when a post is older than 4 weeks, it’ll display the published date and time. This allows for a graceful self-archiving of content, which is useful for large-scale sites.

Tooltip Timestamps

If you want to display both, but need to conserve space, use tooltip timestamps. When the user hovers their mouse over the relative timestamp, the absolute one will display in the tooltip.

Users won’t know they can view the absolute timestamp on mouse hover if you don’t give them a visual cue. You could use a dotted underline on the timestamp to make it clear. Or you could place a clock icon next to the timestamp that displays the tooltip when they hover over it.

Final Thoughts

Time is a universal concept that transcends cultural barriers. Every user understands time, but not every user will understand your timestamp if it’s not formatted in a friendly way.

The practices and techniques in this article should help you find that friendly format. It’s time to treat timestamps more than just a stamp. They’re an ever-evolving mark of relevancy.