How can I display lots of controls that are contained within expanders?

Question

I'm currently building and Dashboard system for a factory and there is a control panel to control all the displays in the factory and to decide which detail(KPI type) to be displayed. Following is the wire frame design of the control panel

1. The two main functions in the control panel

2. The buttons to on/off each KPI in the display

3. Username

4. Extender(each production have 7 sub displays and those can be viewed by opening the extender)

I'm not happy with the current layout. When the extender is opened we display too much information on the panel. And I'm wondering how to improve user experience in control panel. Is there some other representation I could use to improve?

Answer 1

When I design dashboards, the first thing I try to ask myself is whether the information can provide me with a way to make some decision. If you still need to do a lot of analysis and calculation after looking at the information, then the first step is to look at how to make the information easier to interpret. The fact that you seem to have so many items and categories suggests to me that something needs to be summarized or grouped together better, because right now this is having an impact on your design, and ultimately on how the user will be able to understand the information.

Answer 2

My recommendation would be to create different pages for the different displays.

This will reduce information on each page and make it faster for users to find things and complete tasks.

The second design highlights items that are 'on' in contrast to items that are off. The page may require scrolling but this is acceptable to users as long as they are aware that there is more content 'below the fold'. This option is better than trying to fit everything on the page at once.

I've assumed that modules are only available if the KPI is 'on'.

Don't am for 'reducing clicks' as many studies have shown that reducing clicks does not increase user success or satisfaction (UIE studies).

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

^{download bmml source}

Answer 3

If the decision for enabling or disabling has to be made for each KPI and for each display individually, then whether you like or not, you will end up with such a matrix. In this case, it is ok to display all options at once, because this supports the human pattern recognition ability. What do I mean by this?

I think the user is likely to have some "pattern" in mind. For example:

I want to enable KPI3 in all displays

I want to enable KPI1 - KPI4 in production display 2

Maybe some KPIs have a similar meaning and therefore are likely to be disabled/enabled together...

So what you can do is to enhance the application of such patterns. Possible measures are:

• add the possibility to select an arbitrary group of items and disable/enable them at once
• add the possibility to select a connected group of items and disable/enable them at once
• add the possibility to enable/disable a whole line (a whole production display)
• add the possibility to enable/disable a whole column at once