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: enter image description here

  • Is space as limited as your examples suggest?
    – Matt Obee
    Feb 23, 2015 at 12:41
  • 1
    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, 2015 at 12:44
  • Question edited to show a better example
    – Ben Cull
    Feb 23, 2015 at 12:49

2 Answers 2


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.

enter image description here

  • 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, 2015 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, 2015 at 18:03
  • According to the question, you need both. It's the 1st and 2nd requirements listed. :)
    – nightning
    Feb 23, 2015 at 18:06
  • Lost in translation :)
    – Okavango
    Feb 23, 2015 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, 2015 at 20:44


   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.

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.