15

On a dashboard I'm displaying 'cards' representing operating statuses of factory machines (the data is retrieved from a database), management can use the dashboard section to identify the number of machines in each corresponding status. I hope this provides context.

Anyway, I'm trying to decide which is the best / most appropriate way of displaying the statuses. Should I hide the cards if the number is = zero or should I use a placeholder card for every status and put zero in the placeholder?

Option 1: if the count of statuses is 0, show the card with a 0: enter image description here

Option 2: if the count of statuses is 0, hide the card: enter image description here

Please try and ignore the quality of the images pasted and the color differences.

Improve this question
1
  • 1
    Site24x7 has a page that list only the problems, like a server offline. If it's empty, it means that everything works. If users have to identify the issues, I suggest to add a page that show only the issues.
    – A.L
    Jun 14, 2022 at 15:06

3 Answers 3

Reset to default
50

Use Option 1, because a constantly changing display of visible and invisible cards will be more work to understand, but also because "0" is valid and important information.

You might want the cards with non-zero values to have more visual importance than those that are zero. Maybe the statuses with zero items are visually lighter:

Array of status cards with zero values on a lighter background

Improve this answer
2
  • 4
    I wonder whether this method of highlighting is correct. Wouldn't it be more appropriate to use highlighting to draw attention to aberrant states? For example, while Alarm should highlight if it is non-zero, isn't zero Ready machines likely to be the problem state?
    – Jack Aidley
    Jun 14, 2022 at 12:24
  • 3
    There's probably more design nuance that could be worked out with individual statuses.
    – Izquierdo
    Jun 14, 2022 at 13:28
16

Definitely fixed placeholders!

First, hiding elements is usually not the preferred behavior. There are cases when it makes sense, like when there's not much screen real estate to work with, but a hidden element is more likely to cause confusion. When a user is looking for an item specifically, it is better to show the element disabled in some way so the user isn't wasting time trying to figure out where it went.

Second, looking at the particular use case, I ask myself if having labels with "0" are important, and I think the answer is a definite yes. If there are no machines running, I want to know that clearly. If I want to quickly check whether there are machines in an alarm state, I can quickly look for the proper label and see, ok, 0. If I see there are five cards instead of six, I know one of my states is at 0, but I need to do some mental work to determine, which of the six is not here? Much easier to scan for a 0 and then see which card it's applied to.

Improve this answer
1

Agreed with @izquierdo on "You might want the cards with non-zero values to have more visual importance than those that are zero. Maybe the statuses with zero items are visually lighter"

But, I'd ghost the buttons and make them monotone/light greys. This way, you're not drawing unnecessary attention, but your still providing the user with useful info.

Improve this answer
2
  • 2
    A disabled state communicates something different from an empty state, though.
    – Izquierdo
    Jun 15, 2022 at 13:34
  • 1
    That's a good point @Izquierdo. I guess the point would be to make it a bit more greyscale, as opposed to ghosting the button :)
    – Andy
    Jun 17, 2022 at 7:28

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.