What would be the best way to format a time range?

Question

I have a chart control and a time bound value. The control displays the value aggregated over equal intervals of time. It is important to display the corresponding time range for each aggregated data point. This time range has to be accurate, readable, yet as compact as possible because the available space is limited. The size of intervals can be 15 min, 30 min, 1 hr, 3 hr, 6 hr, 12 hr, 1 d. The readings can start at any moment of time, so the edges of intervals are not aligned or rounded to the time grid. The smallest time unit is 1 minute.

Answer 1

Is there a reason to have a single point which shows the range? I would imagine that this could work better with discrete 'range start' and 'range end' points, like this:

You probably wouldn't need to display the year in this context, as the year will be defined by plot as a whole. You will need to think about time zones, though... you may want to define the time zone being presented somewhere on the page.

One could even image these range start/end indicators functioning as handles, allowing you to dynamically select the range.

Answer 2

If you want it to be compact, only mention values that change over the interval.

Don't mention the year unless the interval includes midnight after New Year's Eve.
Don't mention the month unless the interval includes midnight after the last day of a month.
Don't mention the day unless the interval includes midnight.

Users should be able to gather the other units from other parts of the view, so...

• For instance, I can tell from view elements other than your white-on-black text block that the graph is for July and August.
• I actually can't see that it's for 2013, but you can fix that easily by including that in the top bar with the months.
• I can see that the day is the 22nd in this case, but if you are not already doing so, you would want to make sure that there is always a date sitting at the top of your black line (start point marker), as there is now.

All of this means that the majority of cases will involve mentioning just the time (no date) for the start point, and then you have two choices for filling in the rest of the information, of course.

You could give the start point and just the interval duration, as mentioned by Liviu A, for minimum size. Since what I am suggesting would cut down on the amount of text for the start point, though, you could also specify the end point, and the resultant increase in readability should be worth the slight increase in space. Again, in most cases this will just be a time.

examples: ("2013", "July", and "22" gathered from other elements of the view)

• 6:15PM, 15min
• 6:15PM–6:30PM

a few other choices, if you are serious about compactness:

• ** 6:15–6:30PM (since "PM" is something else that does not change over the interval)
• 6:15–30PM (hour also does not change) (this one might sacrifice readability too much)
• 18:15–18:30 (24-hour time saves space (no AM or PM) and for some users is easier)
• 18:15–30 (most compact, but probably too far)

** sample:

These should be easy changes from your current design.

(Actually, specifying the end point gives an advantage: Since your largest interval is 1 day, a user will know any interval ends on the day after the start point when the end point is an earlier time. This means that if you choose to show the end point, you will really only need times for all cases, and not just most cases.)

Answer 3

I think it's a solution to divide graph area on two zones:

1. Visual analysis zone – for quick grasping points or patterns and selection. There is very quick orientation in this zone as it is visual, not reading zone for rough analytics and picking interesting points.
2. Quantitative analysis zone – for precise analytics. Here is left-to-right in-row eye scanning and reading pattern used. As you can see, there are a lot of space for exact time interval and other values.

The advantages are:

• taking into account specifity of information perception by human (images – quick, reading – slow)
• clean graph area (zone 1)
• placing all values for precize analytics in one area (zone 2) for creating analysis flow
• a plenty of space for an accurate and readable time formatting

Answer 4

One solution would be to display it something like this:

6:24 pm + 3h, Jul 22, 2013

6:12 pm + 15m, Jul 22, 2013 etc

basically just show the start time + the interval's length; i think this way it would be easier for the users to figure out what the interval represents

---- added some more info

depends on what information is important to your users:

• in this case they will need to if they want to know the exact time the interval ended (not sure if this really important for your users)
• in the case where you display start-end time, they will have to solve a little math problem if they want to know what the interval length is

it seems to me that in practice the second case will be harder to do, because as you've mentioned the timestamps aren't starting at fixed intervals

so something like 17:47-18:02 is not as apparent as 17:47 + 15m. Also, this way you get an instant sense of what scale the graph is showing (ie. data at 15minutes intervals, etc).