Best way to show comparable lengths of time?

Given a table of information (or other list) where the length of time something took is important, what is the best way to show a length of time that can easily range from a few seconds to many hours?

1. The time units should be easily identifiable. You should immediately know that the number is 20 seconds, or 34 minutes, etc...

2. The results should be comparable in a list. I should be able to see that 3 hours is quite a bit bigger than 24 seconds. (So don't write: 2.5 seconds, 3.2 hours).

3. To be displayed on a webpage, so format, size, colour, etc... can all come into play.

See some examples below:

• Is space as limited as your examples suggest? – Matt Obee Feb 23 '15 at 12:41
• Not at all. Examples above we're just to show formatting, this is for a standard webpage. Feel free to comment on colour or size etc.. as well. – Ben Cull Feb 23 '15 at 12:44
• Question edited to show a better example – Ben Cull Feb 23 '15 at 12:49

2 Answers

You could Consider a more graphical approach as this will help you move away from tabular data and allow you to add more details if you wish to do so. This has also the advantage of providing an immediately understandable and comparable view of time units used. opting for a progress bar as in the mockup below, users will be able to get the information they need at a glance.

• The graphical bars is a lot more helpful in determining exactly how much more time one item has compared to another. No need to translate between hours and minutes etc. – nightning Feb 23 '15 at 17:45
• @nightning, In principle I agree, but wasn't sure if there is a requirment for time units to be displayed or the focus was mainly on comparison. – Okavango Feb 23 '15 at 18:03
• According to the question, you need both. It's the 1st and 2nd requirements listed. :) – nightning Feb 23 '15 at 18:06
• Lost in translation :) – Okavango Feb 23 '15 at 18:11
• I like this solution but would suggest placing the hh:mm:ss times in a column next to the the labels (instead of at the end of the bars) for easier scannability. – tohster Feb 23 '15 at 20:44

Suggestion:

``````   Name                      Time (hh:mm:ss)
Test 1                              0:45
Test 2                           1:23:45
``````

Avoid repeating the unit for each value - especially if this is a long list. The cost for casual observers (scroll up and match the unit pattern with the text) is IMO marginal compared to the reduced visual load for frequent users.

If possible, use a fixed-width font for the durations to make positions line up.

Between Option 1 and 4, I'd slightly prefer 1 for less redundant information, though the argument could be made the hh:mm:ss pattern becomes easier to identify.