5

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 :)

2
  • 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, 2013 at 13:17
  • No. It is important to show it all the time as it is critical for the user.
    – Steve
    Apr 15, 2013 at 13:18

3 Answers 3

2

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

Option 1:


02/04
07:00-08:00

Option 2:


02/04/2012
07:00-08:00

Option 3:


02-Apr-13
07:00-08:00

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

2
  • Nice answer, but it would be better if you gave reasoning behind the options.
    – JohnGB
    Apr 15, 2013 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, 2013 at 11:01
1

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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