Reactor Control Suite

Sometimes the best UI solution is something familiar. We developed this set of controls to align with the physical controls in a nuclear reactor control room.

Controls inspired by real interfaces

LabVIEW's virtual instruments pioneered the idea of a digital representation of a physical interface. We used some simple skeuomorphism to make a set of controls that correspond to a physical interface:

Comparison to a physical control panel

Buttons

The physical buttons in the reactor control room are all red and black mushroom switches, but we found there was a need for standard user interface buttons as well. These buttons all have one of the most important features for a user to know what to click - hover effects. Modeled after Google's Material design guide, the buttons all "raise" themselves up when the user hovers over them. We've packaged:

  • Rounded corner buttons in several widths
  • Button groups (radio buttons) that allow one selection from many options
  • Push buttons in red and black, small and large sizes

Gauges

One important aspect of the control room is quick evaluation of instruments at a glance. Needle gauges provide this in the physical system, so we duplicated them for the virtual instrument. This gauge highlights the containers and shadows that we used throughout the theme to provide a sense of depth. This is also inspired by Material Design's system for representing layers.

Slide switches

While the physical panels in our inspiration used toggle switches instead of slide switches, the slide switch is much more ubiquitous in modern UI/UX design. We decided to use these simple vertical and horizontal sliders for distinct boolean controls in this control package.

LEDs

LEDs in the control suite were designed to look like panel-mounted LEDs with a black plastic retainer.

  • Colorable, but packaged in five colors
  • Small LEDs for simple indicators
  • Large LEDs to add an icon
  • Readily take 28 x 28 pixel icons as decals

Numeric and string controls

We included simple, clean numeric and string controls. They use nine slice scaling to retain the simple rounded corners as they're resized. We added sliders to match the slide switches from above.

A key element from the interfaces we were replacing is the idea of a rotary selection switch. We've bundled these switches into the control suite, with different variants for different quantities of selections.

For larger format text fields, we included a string indicator that scales as a self-contained UI element.