25

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:

Site

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)
  • One idea you can mess with is to section them off into groups. Danger section goes first and has a list of all the machines, next goes warning, etc... A definite must for your project is some sort of filtering mechanism. Good luck! – MonkeyZeus Mar 11 '15 at 12:50
  • If you're looking for inspiration, here is an example using VMware. (I only know this product by name and found this image) – A.L Mar 11 '15 at 15:38
30

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):

console

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.

  • 1
    I really like you example. It’s clean and the user has a text to identify the state. I’ll show this to my co-workers. Thank you very much! – user1320170 Mar 11 '15 at 9:39
  • Especially Grouping will do a great deal to improve UI. If you can collapse all machines with the same state into one group (like a folder) and I would probably group all machines with state "OK" by default. Then you have 1 folder reading "OK"(150) indicating it contains 150 machines with state OK - and the others individually – Falco Mar 11 '15 at 12:05
  • Adding to this answer, you could also provide a filter! – Majo0od Mar 11 '15 at 13:45
  • 1
    I think this answer combined with a simplified map layout of the building would be a sure winner! – Lee Harrison Mar 11 '15 at 14:31
  • 1
    Personally, I see remembering which of the 300 machines is which being a much bigger problem than the encoding of 8 differently coloured labels. (Was it machine 187 in warning every day this week? Or was it 178? Or have they been alternating?) I think this is a good answer, but for a large number of machines, still leaves something to be desired. – CoatedMoose Mar 11 '15 at 20:55
10

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.

enter image description here

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:

enter image description here

  • 1
    The map is a good idea. I've seen it work (in a 2d format) for monitoring status in a lean manufacturing factory where activities are cell based. – tohster Mar 11 '15 at 9:28
  • 1
    To be honest I haven't seen it either but thought its a good solution to explore in conjunction with a dashboard. Control room technology offers good examples here though far more sophisticated :) As for the downsides I guess using interaction design and smart transitions could help. – Okavango Mar 11 '15 at 9:37
  • There should be a lot of research out there somewhere on control room design: The Three Mile Island Nuclear Accident which got close to irradiating a large chunk of the North East of the USA was partly caused by poor interface design. Control room accidents can have very big consequences...en.wikipedia.org/wiki/Three_Mile_Island_accident – PhillipW Mar 11 '15 at 9:43
  • 1
    I like your idea of showing the machines on a map. Unfortunately we don’t have any maps, nor does our application know where the machines are located. We are already working on a dashboard. One of the elements in the dashboard will be a diagram showing the current states of the machines. When the user clicks this diagram, the overview page will open. – user1320170 Mar 11 '15 at 9:47
  • @user1320170 I understand, these are technical constraints that one has to work with:) I would argue though that having a map created in the future allows the solution to scale up in the sens of taking into account other manufacturing aspects, for example: space management. by all means Good Luck :) – Okavango Mar 11 '15 at 10:09
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:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Thanks to the answer from tohster for the inspiration.

0

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.

  • Can you add an illustration? – A.L Mar 11 '15 at 18:19
0

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.

  • We already have made a list view, where we show the states as labels. See image: s11.postimg.org/b94j4qphf/Untitled.png (not finished yet). – user1320170 Mar 11 '15 at 9:41
  • @user1320170 are these washing machines? We had the same problem and just used a simple list like this on your image. – Michael Malura Mar 12 '15 at 8:10
  • @Michael Malura No these are not washing machines. – user1320170 Mar 12 '15 at 8:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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