Displaying states of machines – Overview site

Question

We need to display the state of some machines in our web application. The machines can have about 8 different states.

Our idea is to make a site where the user can see all machines and their state. But we don’t really know how to display the individual machines.

A co-worker had the idea of doing something with color codes. Each machine would be displayed as a rectangle in a different color (which indicates its state). Something like this:

I don’t really like this idea because I think the users can’t remember what each color means, respectively it will take a long time until the users know which color stands for which state.

Do you have any ideas how we could display the machines and their state?

The requirements:

• The site is mainly viewed in desktop browsers. But we also need to support tablets.
• The users should see the state without clicking or hovering the machines
• We need to display 20 to 300 machines on the site. (If possible without paging)

Answer 1

Issues

• You are right about the use of color. Users are unlikely to remember what it means if you have 8 states. It also creates problems for color blind users.

• Using a legend is not great because it forces the eye to dart around the screen. It also doesn't solve the color blind issue.

• 300 items will be difficult to navigate, so careful cell design combined with sorting (e.g. by status, or user-defined) and filtering will help.

---

Suggestions

Improve your cell design.

• Every cell seems to be a machine so you may not need to show the machine caption.
• The number is used to tell the machines apart, so increase the size of the font.
• Use both color and a label to show the machine status. This is current best practice, because it allows for easy reading by color, but also shows status clearly for color-blind or unfamiliar users.
• Simplify the cell design to focus the eye on what's important: fade the outline (this will help reduce the grid illusion effect), and avoid making the entire background colored because it makes the numbers harder to read/scan.
• Use swatches to indicate status, instead of painting the whole background red/green/etc.
• Add sort and filter controls, as noted above.

A resulting design might look something like this (just the cell layout, you'll have to add filters/sort):

This is less dense, easier for the eye to scan, and more communicative of status to a variety of users (new, expert, color-blind, etc).

Hope that helps.

Answer 2

Map of the manufacturing site

You could consider having a map of the manufacturing site with location of machines: This will help provide context and streamline the process of operating the machines. Below is just an example ( limited number of machines). If you want to scale things up you can user architectural plans with more graphical emphasis.

Dashboard overview

The dashboard view will help your users attend to urgent tasks, all other information relating to the state of the machine could be embedded within the map. you could also make use of hover state to show additional information.

Haven't seen tohster answer (was editing) but thats how the dashboard could look like, you could also use the dashboard to highlight areas of concern within the map! Overall this will provide both context and status to machine operations as well as a piriorotised list of tasks.

---

Update: Best of two worlds

This might be beyond the scope of the question and subject to constraints and limitations, but just wanted to share how information about machine status could be coupled with manufacturing site layout:

Answer 3

Consider hiding machines which have no problem. If the goal is to find machine(s) which is (are) not perfectly working, there's no point in displaying 20 green squares and one red square if you only care about the red one. Just display the machines which require some work to fix their problems.

You can also add a dashboard which display only the numbers of machines in the different states. It helps to have an overview of all the machines:

^{download bmml source – Wireframes created with Balsamiq Mockups}

Thanks to the answer from tohster for the inspiration.

Answer 4

One slightly different approach might be some simple grouping, maybe with background colors. So, for example all the "OK" machines are in a group that has a header with the state typed out (with a text description if needed), then the entire group could a subtle background color. This solution might not work depending on how you want to be able to sort the list.

Since you can have up to 200 machines writing out the state on every machine's label would lead to a lot of repetition. Just something to think about.

Answer 5

We need to display 20 up to 300 machines on the site. (If possible without paging)

In one page, save space : go for a list with filter and clever sorting and write down the state to be well understood because as you said people won't remember 8 colors states.