How to display data behind a data point in a matrix?

Question

I'm trying to design an internal tool for software testing purposes. We have a system that consists of a number of servers. To verify that the system as a whole is stable we monitor different parameters of the system, such as memory, CPU, offline, backups etc.

Today we are doing such checks manually, meaning logging in to this system, checking different parts of it, to see if it is OK or not. This takes a lot of time, so the thoughts of this tool is to quickly see that all parts have been checked and for us to know where the problems are, so we can focus on them, rather on checking things that already are OK.

I've started with this wireframe matrix:

Green means everything is good and we don't need to dig into that area this time. Red on the other hand means a problem of some kind. For instance, the memory column will get a red dot if the system memory is increasing for many days (memory leak), but also if the memory is above a threshold it will be indicated as red.

To my question: How can I make it easy for the user to see why a certain server and area is marked red? Should I use tool tips when hoovering, or clicking the indication to show a new page with more information? Are there other solutions that I'm not thinking about?

Answer 1

Actually, it depends on how long the explanation/description for each problem.

For a short explanation (one or two rows of texts), simply show tooltip containing all explanation when hovering on the area.

However, if it has a lot of explanation you will still need a tooltip to contain a brief explanation alongside a button to direct user to the explanation page. Some experienced users might understand the problem without actually reading a whole explanation from the page.

For an easy example, you can make it like this

Answer 2

I know that seeing a bank of greens is a cognitive assurance that everything is OK, however it can lead to an overload of information where the user scans the information but doesn't really see the difference between the reds and the greens.

My suggestion would be to change it to a top level indicator where the user can drill down into the information, for example at the top you could have a 100% service level.

If that service level drops on any point on any server the percent could reflect the lowered state and you could produce cards for the failed items. That way the user is presented with pertinent information.

(apologies for quality of example, no design tools at the moment)

Answer 3

Check this question for the difference between Tooltip and Popover.

A tooltip clarifies. It either gives information about what happens or implies interacting with the element (clicking for example), or it gives a short description of what is the element.

A popover gives content. Content from the element that could be interacted with. It doesn't need to appear/disappear when the user hovers over the element.

---

If the information is "not too much" and the user would prefer staying in the table, showing the content in a popover could be a good idea. Two options:

1. You could use a tooltip that indicates the element it is referring to (as it can become bit complex to follow the row and column), and an explanation of what happens on click.

   • Tooltip on hover: "Problem in FB4 Memory. Click to see more details."

   • Popover on click: Contains content and can contain links or buttons. Dismissed on click.

2. Show a Popover directly on hover. In this case the Popover disappears on mouse-out.

   • Popover on hover: Contains relevant content but there shouldn't be anything the user can interact with, as it "disappears" when the cursor leaves the element (not the popover).

Answer 4

Two observations:

1. Why do you need to show green (bad color choice for colorblind) if the server is OK? Can't you deduce it is OK if there are no problems? In other words, servers that are OK do not require action, so if the purpose of this view is to identify whether action is required, an OK signal is just noise. Problems will stand out more if white space is used more effectively.
2. Why hide the reason? Seems like that is the most important information the user can derive from this view. If you only note problems, you can state the problem simply with a brief status or a code if users are familiar with the codes. Then there's no need to hover or click into details.

Answer 5

If there's common errors, you could display what the error is instead of making the user dig deeper. The quick sketch I created shows how you draw attention to the errors while still showing the status of the others.