How to display date and time
I want to present the date in a web page where users leave items that will be picked up by other users (the purpose of the site is not important).
I was thinking of representing the date in the following formats:
- Today, 14h00
- January 12, 13h56
- May 6, 18h23
- 2011-12-12, 7h34
Are these options intuitive? What would be the ideal way to display the date (datetime) here?
In what country are your users? Where will the date be displayed: next to each item or once per page?
What and **where** are the users? Do you need to show elapsed time or absolute time or both? Is the year significant, in the sense data could span a year? What else could be the factors? My first impression was that you just wanted to display 'current time'. But it could be much more.
What thought processes is the user likely to carry out in relation to viewing the date? Why is the date important and how will the date of an item influence their future actions on the site?
Upvoted all above comments; a lot more details are needed to be able to answer this question.
Usability wise, I would suggest to go for "01 August 2012", don't let the user guess if 04 in 04/05/2012 refers to day or month..
When it comes to date formats you should know who is going to read your page. If you are targeting only people from the U.S. than you are OK using Middle Endian, starting with Month(mm/dd/yyyy), but if you are designing for a world-wide crowd than you should spell out the name of the month. That is what I use on my website. Also in USA people do not like military time(like 18:23) and prefer "a.m." and "p.m."
After you figure that out comes the part fun part.
I like to display my data like this depending on the time that has past:
- 1h32 ago. (less than 24h ago)
- yesterday at 4:23p.m. (less than 48h ago)
- May 6, 18:23 (less than 365 day ago)
- 2011-12-23, 7:34a.m. (I use this for format for my archives ago)
If it is important how long ago you could still include it after the date with a different form the date color like so:
- yesterday at 4:23p.m. [1 day, 3h and 43min ago]
- May 6, 18:23 [12 days, 13h and 3min ago]
Standards are great, but they are not made for a good UX. Think about it - do you thing in 1988 the scientists working on ISO 8601 even thought about web UX? :D
Whatever you do just make sure you display the date and time in a way that no one will have to wonder what is that..
mm/dd/yyyy is not "imperial standard". It tends to be used in the US, whereas dd/mm/yyyy tends to be used in the UK (which creates an ambiguity 132 days of the year). If you use either format, clearly indicate on the page which one you're using.
I am sorry everyone, I mat to say Middle Endian not imerial. Good catch @KeithThompson.
If you want to design for good UX you should not have to "indicate on the page which one you're using"! Every time you make a user think about something you are failing at good UX.
If you choose a single format, you'll inevitably anger users who don't like it. If you let users choose a format, you'll inevitably anger users who don't want to be bothered. Is there a good solution (other than training everyone in the world to use ISO 8601; I'm working on that)?
I do not think if I look at a page that is made to serve USA users and I am from Europe I will get angry as long it is clear for me what is the month and what is the day. If one gets angry over something like that.. one should see anger management professional! :D Again, if you are making someone to learn ("training everyone in the world to use ISO 8601") something only to be able to read a properly the data and time of a article that is a BAD UX. Do not get me wrong that I do not like standers; I love standards - just not where they could cause confusion. :)
The proposed standard for date and time is ISO 8601: 2012-01-15 03:05Z
This representation is far from being natural language, and thus not good user experience. Recommendations:
- Find your audience's localization. If they are from the U.S.
January 12, 2012 at 1:56 pmis probably the right way.
- Use relative or more ambiguous notations, as used in natural language:
yesterday at 1:35 pmor
an hour ago. This makes for a good natural interface.
- Use the
<abbr>date pattern to additionally use the ISO 8601 notation, like many sites do (Facebook, Twitter, SE). This is good for machine-machine communication that translates to better user experience in the long run; also the user can see the exact time stamp by hovering the date.
- Find your audience's localization. If they are from the U.S.
In case it is location-agnostic, I suggest you go in for UTC, else both UTC and local time. From experience, I can say that the UTC time on ux.SE (displayed at the bottom of the panel when we hover on our ID in the status bar at the top) has saved my day many times from confusion.
Today/ yesterday have absolutely no relevance when users are spread across the globe. I wonder how these are still persisting in UX designs.
Keep off the nn/nn or nn-nn formats for month/day. Utter confusion prevails between month and day (you know what I mean).
Elapsed time is useful, depending on the context, again when not mixed up with today/ yesterday.
I could edit to add more points if you elaborate the question.
Today/yesterday is acceptable if the date is localised to the user viewing the data, which it often is in services like eg. Google Calendar.
For people constantly on the move, localization has no relevance. It was a revolutionary concept not long ago, but people are far more mobile now, I mean across time-zones!
I'd like to suggest something close to ISO 8601 format, where the date is represented as
YYYY-MM-DDand the time as
It's unambiguous (you never see anyone using
YYYY-DD-MM, it sorts correctly, and it doesn't depend on local month names.
Depending on your audience, this might be the ideal solution. But a lot of users are going to prefer a less ideal format.
If you use either
MM/DD/YYYY(US style) or
DD/MM/YYYY(UK style), clearly indicate on the page which one you're using; otherwise the date will be ambiguous 132 days of each year. But most US users will intensely dislike the UK format, and vice versa. And typical US users will dislike a 24-hour timestamp, preferring an AM or PM indicator.
"14h00" is not a common format in the US; "14:00" is much more common, and "2:00pm" is even more common.
Spelling out the month name avoids ambiguity and makes the order less important.
If practical, consider allowing the user to choose a time format.
It all depends on the customer here. For us the customer is a Indian cab driver. So the format that I think will work for us is
- Today, in 4h 50m
- Yesterday, 4:30pm
- Tomorrow, 8:30am
- FRI, 12 (jan), 6:30am
The format mentioned by @NaoiseGgolden is for the school college educated crowd. Cabbies dont have time to read that much, they see tomorrow and read no further.
Best way to make sure everyone understands the date is by displaying the full notation of the date, the month name, and the year, like 26th December 2012.
If you want it to be more useful to your users, you may add how much time has passed since the item was posted, like 20 mins ago or 1 week ago for the recent items. You can even make it a link to all the times created around that time, such as showing everything that was created one month ago.
@kris : well its not universal when your site is in english and its obvious that all people would have known the months .. that gets to wider audience.
I quite like facebook's method of displaying time in
x seconds ago,
x minutes ago,
x hours agoand
Yesterday at time,
Sunday at timeetc. I think this is a nice way especially when there are benefits in displaying time in a relative format. This should be relatively standard across most languages and regions.
But overuse of this would obviously lead to problems, so you probably don't want to display something like
6 weeks ago, instead start display the full date and time after 3 or 4 days since the event.
At the same time, for entries that require a time, a date or both, you should display the localized format of that date time.
Depending on what language you are building this in, most should have a hook to the ICU library which provides patterns of date, time and datetimes for most locales.
For example, PHP provides the DateFormatter which can format a date, time or datetime quite easily.