Displaying post dates: why Twitter forces you to think

Everyone just seems to love the way Twitter displays its post dates: 5 minutes ago, about 9 hours ago, etcetera. It’s one of those examples where everybody just copies everybody without giving it a second thought. And yes, it certainly has a nice tone of voice, and it looks really user-friendly. But it isn’t. It forces you to think.

Fortunately, it’s easy to improve this elapsed time notation. In this post, I’ll explain how to make it work, and I offer a php function that you can just drop into your project.

What does Twitter’s notation look like?

First of all, for those who aren’t familiar with it, Twitter distinguishes 3 different time frames, each with its own formatting:

• Under an hour: Half a minute ago, A minute ago, 5 minutes ago, About half an hour ago
• More than an hour, but less than a day: About 1 hour ago, About 2 hours ago, … , About 13 hours ago, About 14 hours ago, etcetera
• More than a day: the time and date: 10:41, januari 4th

How it should be

Now, let’s compare how Twitter displays its time, and how I think it should be. Check which one you find easier to interpret:

Time notation for Tweet posted monday January 4th, 2010 at 14:15

When viewed on	Twitter’s notation	My notation
the same day 14:16	about a minute ago	about a minute ago
the same day 14:26	10 minutes ago	10 minutes ago
the same day 15:30	about 1 hour ago	about 1 hour ago
the same day 16:30	about 2 hours ago	about 2 hours ago
the same day 21:30	about 7 hours ago	this afternoon 14:15
the next day 10:30	about 20 hours ago	yesterday 14:15
the next day 15:30	2:15 PM Jan 4th, 2010	yesterday 14:15
3 days later	2:15 PM Jan 4th, 2010	monday 14:15
more than 7 days later	2:15 PM Jan 4th, 2010	January 4th, 14:15
more than a year later	2:15 PM Jan 4th, 2010	January 4th, 2010 14:15

Why Twitter’s notation doesn’t work

Twitter’s notation doesn’t work because it doesn’t match the way we think about time. When thinking about things that happend recently, we don’t think in terms of number of hours ago and exact dates. So everytime you come across something like 9 hours ago, you’ll find yourself unconsiously translating this into a format that does mean something to you. To make it really user-friendly, we need to display the time in such a meaningful format.

What we know about time

It all has to do with just how exactly we know what time and date it is. In a normal situation, when you haven’t just checked your watch or the calender, you’l know something like this: “The time is somewhere between 15:45 and 16.15. Today is a tuesday. It’s around the 20th, but I’m not sure wether it’s the 19^th, the 20^th or the 21^st.”

Keeping this level of time-awareness in mind, I have defined 4 different time frames, each with its own appropriate display format:

• Under 3 hours
• More than 3 hours, but less than a day
• More than a day, but less than a week
• More than a week

Under 3 hours

Since you usually do not know the exact time, you think about time relatively: 5 minutes ago, 30 minutes ago, about an hour ago. I’m not sure where this ends, but I think somewhere around 2 hours ago.
Formatting examples: 5 minutes ago, 34 minutes ago, about 1 hour ago, about 2 hours ago.

More than 3 hours, but less than a day

For stuff posted in this time frame, you first think of the part of the day, and then use the exact time to position the post within that part of the day: this morning at 11:30, this morning at 8:41 or last night at 03:18.
Formatting examples: last night 03:18, this morning 8:41, this afternoon 14.10, tonight 21.44.

More than a day, but less than a week

In this time frame, you’re more likely to refer to the days by name, rather than their date: monday, tuesday rather than december 19th, december 20th. A special case is yesterday, which we refer to as yesterday rather than the name of the day. (Some languages have a word for the day before yesterday. If your language has such a word, use it.) The specific part of the day is no longer important.
Formatting examples: yesterday 18.50, tuesday 11.15, wednesday 16.19.

More than a week

When posts get older than a week, you start referring to them with their exact date. (Due to the limited time in which the tweets are viewed, you won’t need to show the year.)
Formatting example: 14.18, december 28th.

Ready to use php function

(Not interested in the technical stuff? Just skip it to read about date formatting for blogs and other services)

If you want to implement this kind of date formatting, you can just use the php function below. (It’s the same function I am using in my own Twitter app, Twimply.)

function get_elapsedtime($time=0) {
	/*
	@param $time: Unix timestamp
	Twitter passes you time like this: Fri Dec 18 23:28:16 +0000 2009
	You can convert that to a timestamp using strtotime()
	*/

	$passed = time() - $time;

	//less than a minute
	if ($passed < 60) {
		return 'less than a minute ago';
	}

	//less than an hour
	$minutes = round($passed / 60);
	if ($minutes < 60)  return $minutes.' minute'.($minutes > 1 ? 's' : '').' ago';

	//less than 3 hours
	$hours = round($passed / 3600);
	if ($hours < 3) return 'about '.$hours.' hour'.($hours > 1 ? 's' : '').' ago';

	//today
	$hour = 3600;
	$oneday = 24*$hour;
	$midnight = strtotime("midnight");
	if ($time > $midnight) {
		$dawn = $midnight + 6*$hour;
		if ($time < $dawn) {
			$part_of_day = 'last night';
		} else if($time < ($midnight + 12*$hour)) {
			$part_of_day = 'this morning';
		} else if($time < ($midnight + 18*$hour)) {
			$part_of_day = 'this afternoon';
		} else {
			$part_of_day = 'tonight';
		}
		return $part_of_day.' '.date('H:i', $time);//Last night 04:12
	}

	//less than a week
	for ($days_ago=1; $days_ago < 7; $days_ago++) {
		$day = $midnight - $oneday*$days_ago;
		if ($time > $day) {
			if ($days_ago == 1) {
				//yesterday
				return 'yesterday '.date('H:i', $time);//Yesterday 15:12
			} else {
				return date('l H:i', $time);//Tuesday 15:12
			}
		}
	}

	//more than a week
	return date('F jS H:i', $time);//like December 2nd 15:12
}

Blogs and other services: different time frames

This post focusses on date formatting for Twitter, but you can also use this kind of formatting on other services, blog posts, or comments. However, you’ll have to reconsider the time frames.

Twitter typically has a very high volume of posts, which are viewed within a relatively short time. A lot of blogs (like mine) publish much less frequently and only have a very limited number of comments. Also, the posts may be viewed over a much longer period. So, you should consider the pattern of posts and traffic to your site, and change the timeframes and formatting accordingly.

This could make you decide to show posts from the last week as last tuesday instead of tuesday, show the post dates but not the post times, etcetera. Just keep in mind how your users think about time…

Does this match the way you think about time?

What do you think? Does this match the way you think about time? Let me know in the comments.