How to display duration (HH:MM) so it isn't confused with clock time

  • I have a table in my application that shows dates along its x-axis, and different statuses along its y-axis. The table keeps track of how much time an employee spent in a given work status (on duty, off duty, etc) for the given day in hours:minutes. I've included a rough sketch below:

    enter image description here

    My worry is that some users may get confused and think that this time represents something different, such as the time at which this state occurred (i.e. went on duty at 6:00, went off-duty at 18:00). Is there a better way to represent this time to be more clear of what it is representing, or is this just something that users will have to learn on their own using my software over time?

    What is the resolution of your durations? "4.5h" would be hard to mistake for half past four, but the numbers are awkward if you need more precision than 15 minutes.

    @UlrichSchwarz There are users who cannot comprehend decimal numbers used for this purpose. Some users when presented with a number of hours written as 4.25 will persistently claim it says 4 hours and 25 minutes, regardless of how many times they have been told it is a decimal number and not hours and minutes.

    Simple: Just never display a duration shorter than 24 hours. :)

    @reirab Employees might get a little depressed (and confused) if they see they've been on duty for 25 hours in one day. Actually... could happen with daylight savings!

    @RhinoFeeder It can also happen when you're crossing time zones, especially if you're traveling from Asia or Oceania to the Americas. I've had 38 hour days before while traveling.

    @kapserd given that it's not uncommon to see times wrongly displayed that way the user doesn't deserve *all* the blame. But ¼, ½, and ¾ are all available in unicode and unambiguous.

    How about subdividing the boxes with a faint grey line, so it looks sort of like 4 | 00. You just want to make it slightly different from the very familiar 4:00. Optionally add small headers, h|m || h|m || h|m...

  • tohster

    tohster Correct answer

    6 years ago

    You are right to ask this question. It really depends on who your users are.

    In labor-intensive environments, users are often very familiar with the HH:MM notation for duration, so it's OK to use that format. But, I agree that even for those environments easy to get it confused with time.

    Is there a better way?

    Let's start with the existing solution. The benefits of HH:MM are:

    • It's universally recognized as a time format
    • It's scannable, i.e. when you have lots of data in a grid, the HH:MM aligns nicely so it's easy to scan.

    With this in mind, here are two approaches. You could label the existing table to remind users that it's showing duration rather than time. Or you could adopt a different notation to indicate that it's duration:

    enter image description here

    The notation on the left is popular these days, and preserves some (but not all) the scannability while denoting duration more clearly. The approach on the right keeps the cleanliness of the HH:MM notation, and sets user context elegantly by utilizing the top-left corner (which is the visual entry-point to the table anyway).

    +1 for the LEFT EXAMPLE. The right one will still cause issues, since people need to figure out there is a label in the upper left hand corner. Users just don't look for content labels there.

    Left example, not the one on the right.

    An advantage of the left approach is that it makes clear that the duration is in fact hours and minutes; saying that the duration of a video presentation is 1:45 may be less clear than saying that it's 1h30m or 1m30s.

    In left example, the hour should stand out more than the minutes.

    I like the left example a ton, and actually can see that being used generally for "duration" throughout the application. This will train the user well to recognize "hh:mm" as a clock-based time (went on-duty at 3:45), and "xxh xxm" as a duration of time.

    @RhinoFeeder exactly. As a progressive designer the left example is my preference too. I felt obligated to include the right hand example because there are many industrial environments where users are accustomed to the `HH:MM` format (e.g. that may be what appears on their time cards or pay slips)...so I'd be remiss to leave it out.

    I like the left solution, however, it has some internationalization issues in languages that occasionally write *times* in a format like *8h00*.

    @O.R.Mapper: Would adding an `m` fix that? I think enough languages use "m" for minutes that most people would be able to figure out what "1h23m", "1m23s", and "1h23m45s" meant even if their own language's word for "hours" started with an "S", "o", or some other letter.

    @supercat: I'm not sure, as it's not about those languages' word for "hours" starting with the same letter as the word for "o'clock" in such languages. The issue is that in languages such as French or Spanish, times of the day are literally expressed by saying something like "5 hours 30". Thus, indicating "5 hours" (abbreviated or not) is already ambiguous in these languages to start with, because it may both mean "5 o'clock" or "(a duration of) 5 hours". I am not sure to what extent explicitly adding "minutes" after the minutes number would make any change here.

    @supercat: See, for example, this example in Portuguese: "Sábado dia 26 de Janeiro, **abertura** do Secretariado no local da prova **das 10h às 12h30m** e das 14h às 18h." (highlight by myself) The bolded part translates to "opening (...) from 10 o'clock till 12:30".

    @O.R.Mapper: Okay; I knew French used 12h30 as notation for 12:30, but didn't know that some languages also add the "m". Still, even if "h/m/s" notation doesn't totally eliminate ambiguity with time-of-day in all languages, adding the "m" helps for many, and as noted will allow even German or Spanish speakers to guess that the "m" is minutes (and "h" is presumably the next larger unit, i.e. hours)

    @supercat: Sure, "h" is commonly understood both in Spanish (due to the word for "hours", "horas") and in German (as "Stunde" is commonly abbreviated as "h", "s" already being taken by "Sekunde" ("second"), and "Std." falling out of fashion). If anything, it's the "m" that might be somewhat confusing, as at least in German, minutes are almost always abbreviated as "min" (to avoid confusion with "m" for "metres").

    @O.R.Mapper as with most internationalization design, it will be case-specific. If this is an international app, then the real tradeoff is the likely confusion over the `HH:MM` format weighed against the localized confusion over `12h 30m` format. Locale-specific masks/formats can help. There is no right or wrong answer here, it will be a reasoned tradeoff informed by proper testing and estimation. You were right to bring this up for future designers to consider.

    For scanneability I would use CSS pseudo element after or before, to put the `h` and the `m`

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM

Tags used