I develop a dashboard for telecommunications service monitoring. In a couple of tables there is an Outage column, which shows the outage in days. In most cases the outage is longer than 1 day, but sometimes it's less, for example 0.2 days. The users of the dashboard asked me to show the outage in hours in these cases.

Currently the outage is shown right-aligned, with 1 fractional digit precision (for example, 0.1, 0.7, 2.5, 23.4, 128.0 etc.). The table header contains a filter field, so if someone wants to display only outages longer than a week, they type ">7" into the filter field. In my opinion, this is a simple and usable solution, so I'd like to keep the column values in days. Even the users don't want me to change the unit to hours in all cases, only if the outage is <1 day.

My table component is capable of showing strings or even HTML elements in the cells, created based on the value of a field. So at first I changed the displayed string to also show the hours if the outage is <1 day, for example: "0.2 (4.8 hours)". But this ruins the nice right-alignedness of the numbers, and neither me, nor the users really like it. To keep right-alignedness I could change the order like this: "(4.8 hours) 0.2", but this looks funny. I tried to put the "(4.8 hours)" part into a <span> and apply a CSS class to make it gray, which makes it a bit better-looking. I also thought of putting the "0.2" into a <span> and adding a tooltip to it with the text "4.8 hours".

Is there a good solution to this problem?

EDIT: I ended up using a span that shows the outage in "hours:minutes" format. I use smaller, gray font in order not to "disturb" the value given in days.

enter image description here

  • I think a quick sketch or mockup would help clarify the approach you want to take, and to get feedback from the community about the design problem. The question as currently described may not get a very specific answer.
    – Michael Lai
    Mar 21, 2021 at 23:12
  • 1
    @MichaelLai I added a screenshot.
    – kol
    Mar 22, 2021 at 9:17

1 Answer 1


Whenever users ask for something a little weird or a little difficult to design or seemingly just a bad idea from a usability heuristic standpoint, you need to dig deeper into why they want it. Why do they want the outage in hours if less than a day?

For example, maybe it’s simply that sometimes users need hours and sometimes they need days. Maybe planned maintenance involves paper reporting forms which use hours, while customer service updates use days. Generally, planned maintenance is less than a day, but there are exceptions. The solution would be to have two columns, one for each unit:

Column for outage in days to one decimal place, and hours to one decimal place

Users can choose which column to use depending on the case. This has the advantage over your solution in that either units are equally easy to see (no 508 issues), and users can filter using either units.

If I were to guess, I’d say the users simply don’t think in decimal days. What does 0.4 days mean to anyone? But 10 hours has immediate intuitive meaning (e.g., “like a long work day”). That would imply that 2.4 days is also problematic, just less so because often users can focus on the whole number and ignore the fraction with relatively little impact. In that case, the solution is to show the outage in days hours:minutes format:

Column in days hours-colon-minutes

This provides your users with full precision regardless of the magnitude of the outage, which might be useful in some cases. Your filter will need to intelligently interpret criterion strings like “>=2” as “>=2 0:00” and “>=2:00” as “>= 0 2:00”.

Maybe users just think only in whole numbers for this task. They don’t need precision beyond one hour if less than 24 hours, and one day if over. Maybe 2.7 and 3.0 are both “3” as far as the users are concerned, whether talking days or hours, and mentally equating “2 days 16:48 hours with “3 days 0 hours” is just a burden to them. If so, then the solution is rounded days or hours selectively by outage magnitude, and show the units in the cells to avoid ambiguity:

Column with cells like 3 days and 2 hours, those in days are bold

You want some sort of conditional formatting to make it easy to spot and distinguish outage-in-hours from outage-in-days when the sort order isn’t by outage. Font weight and indenting shown above is one way, and indenting addresses your alignment concerns. Your filter needs to parse criteria for “days” and “hrs” (or “d” and “h”) to determine the units. Also filtering should account for users thinking with rounded numbers. If the user enters “3 hrs,” the filter should include all rows between 0 days 2.5 hours and 0 days 3.5 hours.

Return to your users and find out more on how they use outage. From that, a solution will probably be obvious, and maybe it won’t be any of the above.

  • This is brilliant! I especially like the "days hours:mins" formatting. Thanks a lot, I will show your ideas to users.
    – kol
    Mar 22, 2021 at 19:34

Your Answer

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

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