Currently, I have a Server that has many different modules (Audi A1, Audi R8, etc.) with 4 different states (RESET, Monitor, Closing, and On). Each module also contains 6 data points that change over time (such as current MPH, current gas usage, total miles, etc.)

When a module's state is On, the 6 data points change frequently (MPH increases or decreases, total miles go up, current gas usage varies.) When the module goes to Closing from On, the 6 data points stabilize and eventually stops changing (MPH decreases to 0, gas usage stops, total miles stabilizes at one point.) Finally when the module is on Monitor or RESET, the data points do not change at all.

To make it easier for the user to control and visualize the module's state and data, I created a GUI Client that can communicate with the Server over the network. Module information (current state and data points) is communicated constantly from the server to the Client, who then displays the information accordingly. The Client can also communicate user requests to the Server.

The Client has a slider for the user to request a change of state for each particular module on the Server. When the user slides the slider, a network message will be sent off to the Server who will then change the state of the module accordingly.

Different modules at different states

The particular module's new state on the server is then communicated over the network to the Client and is then reflected by the Green colored text on the Client's GUI.

GUI waiting for Server to confirm the state change was a success

In addition to the slider, each module GUI also displays the Server's module's data (not shown in picture, but would appear to the right of the slider.)

The slider GUI was chosen due to the module's state being linear (to go from Monitor to On, you must go to Closing first.)

Each morning, the modules are in the “Monitor” state. The user then has to go to each of the modules in order to turn them all "On". With the addition of more modules (30+), our users requested an easier way to turn all the modules on in the morning and be able to change them all to "Closing" in case of an emergency.

To address this request, I plan on adding a new feature to change all the modules to a certain state (such as turning all of them to "On".) Since the states are linear, I am considering doing the intermediate steps (states in-between module's current state and the new desired state) for the user in the code.

Adding an additional slider to control all the modules would work. However, there isn't any feedback in the all-state-change slider if any of the modules fail to change states. To amend this problem, I'm considering adding a logger GUI that will print the names of any modules that did not change states correctly.

My users are not technical and I was wondering if there is a better way to add an intuitive state changer.


  • Are these states linear? Meaning they have to go from the previous state before the next state? If not, then I'd argue sliders are the wrong UI for this. Can you give us a bit more context...what would the typical process be fore a user wanting/needing to switch a modules state?
    – DA01
    Sep 28, 2015 at 21:33
  • Yes, the states are linear. For a user to switch the state from Monitor to On, the user must click/slide the slider to Closing then to On.
    – Carl Bai
    Sep 28, 2015 at 21:42
  • In that case, how would one switch them to a particular state if they aren't all on the immediately previous state?
    – DA01
    Sep 28, 2015 at 21:56
  • "However, there isn't any feedback in the all-state-change slider if any of the modules fail to change states." Why would this fail? Can you clarify? Sep 28, 2015 at 22:22
  • @PaulDessert In most cases modules will not fail to change states. However, as an edge case I would not want the user to think he/she turned all the modules on when in reality one module may have threw an exception.
    – Carl Bai
    Sep 28, 2015 at 22:35

3 Answers 3


Assuming each module has well defined state, each state can be represented as a level in a vertical slider and pointer slides from one level to next level above or below.

A single slider can represent the state of all modules by showing vertical slider without any pointer but with numbers next to each label indicating how many modules are in that particular state.

User can set the pointer to the desired state for all modules, then the number next to each level updates to indicate success of the changes done.

A red number indicates number of modules that failed to move to the desired state, and green indicates number of modules in desired state.

Next to each level we can list the modules which are in those state.

Refer to the below snapshot to get better understanding

enter image description here

  • Thanks for the response! Would you suggest changing the individual module sliders to vertical ones as well? One thing I forgot to mention before was that each module GUI also displays some information (6 data points) for that module.
    – Carl Bai
    Sep 29, 2015 at 20:20
  • Is this 6 data point different from the 4 states you have mentioned in the diagram? I made this slider vertical just to make space for listing modules in respective state, which is shown to the right side of the slider.
    – Chetan
    Sep 30, 2015 at 6:22
  • The data points are different from the states. The data points are information about the module (something like Current MPH, Current Gas usage, etc.)
    – Carl Bai
    Sep 30, 2015 at 13:19
  • Are the data points different for different modules and how is it related to module state?
    – Chetan
    Oct 1, 2015 at 5:30
  • The data points are usually different for each module. On the "On" state, the data points will change periodically, on the "Closing" state, the numbers will finalize and then stop changing, on the "Monitoring" state, the numbers will not change.
    – Carl Bai
    Oct 1, 2015 at 13:58

I would get rid of the sliders and use a table because it's easier on the eyes.

  • a black point represents the current state
  • if you click at an empty cell you switch to that state
  • a control under the table allows you to easily apply a state to all modules

enter image description here

In order to be more responsive and to provide more information you could also consider using icons and arrows.

enter image description here

This for example could mean that:

  • the A1 module has failed to switch from the RESET to the Monitor state.
  • the R8 module is currently changing to the Monitor state.
  • Great idea! However, currently each module GUI also include module information (not shown in the picture but would appear to the right of each slider.) Module information include 6 data points (numbers) that change once in a while when the program is running. Any ideas on how I could display that information easily with a table?
    – Carl Bai
    Sep 29, 2015 at 19:54
  • What are those data points called?
    – Larivact
    Sep 30, 2015 at 4:30
  • The data points are just information for that particular module (such as current MPH, current gas usage, etc.)
    – Carl Bai
    Sep 30, 2015 at 13:20
  • Just add those as columns to the table. You could have the headers rotated 45 degrees and with a smaller font so that they don't take up so much width.
    – Larivact
    Sep 30, 2015 at 16:11

I would make a change to your slider to be a double slider, with the bottom indicator showing the state the module is in, and the top being the one the user controls to specify what they want. Like this:

enter image description here If you have a similar slider for "All modules", the bottom indicator can show progress through the different states. And if any of the modules fails to make the switch, you can turn that bottom indicator to a red color and turn the bottom indicator of the "All modules" control also to red, as well as give a pop-up window saying there was a problem.

I think the double slider gives a better, more intuitive visual representation of state requested and state achieved and shows better when they do match. You can even turn the bottom indicators all yellow when they are different from what the user requested and are in the process of being changed. Then turn green when they get there or red if they dont

  • I think you may have uploaded the wrong picture. The image appears to be the same as the one in the question.
    – Carl Bai
    Sep 29, 2015 at 20:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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