User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have been taking a look at this post, but it is not exactly what I am looking for, plus I have hour and minutes and is inside a table.

My current table is this one (bigger image): enter image description here

The problem I have with my table is that these two date columns are the largest on the table and also is not a very fast way to see the ranges of time.

My aim is trying to make this columns smaller if possible or at least, with a better look when the table is resize, and also, make them more simple to read.

Right now, this is how they look when the table is resized:

enter image description here

The datetime columns are critical for the user and should be displayed all the time.

Any help, recommendations or ideas will be appreciated :)

share|improve this question
Can you do away with time on the overview and have the user manually select whenever he wants to see the time? – rk. Apr 15 '13 at 13:17
No. It is important to show it all the time as it is critical for the user. – Steve Apr 15 '13 at 13:18
up vote 2 down vote accepted

Here are couple of options I have come up with...

Option 1:


Option 2:


Option 3:


You can also have different color (May be Light Gray) for Date and different color for time (Black may be)

share|improve this answer
Nice answer, but it would be better if you gave reasoning behind the options. – JohnGB Apr 15 '13 at 14:37
Thanks, i just wanted separation between date and time. We would be able to utilize real estate properly with these options.. – Awesh Apr 18 '13 at 11:01

First of all, decouple the day and time components. Use separate lines for them since you are already using multiple lines in a row.

A couple layouts you can try out:

  • Top row -- Here you can try to align the dates to left and right, to give a continuity feel. The difference between the left and right ones is, in the left one the time is also aligned whereas in the right the time is center aligned.

  • Bottom row -- You can remove the day if it is the same day and make it easier for the user to process the information. You can also grey out the date rather than removing it (right image), but, I feel it might be a distraction since the user is forced to double check(?) what it is in there.


download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer

The underlying problem is the table is massive, I would take a look at responsive data tables. In addition to adding a line break after the date, I would look at dropping less important columns on resize as in the FooTable example.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.