Status Light Guide
Understanding User Interface & User ExperienceAn Intro to Status Indicators:
Visual Language of Machines
Status Indicator Menu
At first glance, it may appear that a status indicator simply tells you whether a device is on or off. But for most devices in the smart home and modern workplace, there’s so much more than meets the eye when it comes to status indication. The devices we use every day are becoming more sophisticated, meaning additional functions must be communicated with end-users in ways that don’t make them think too hard.
That’s where the human-machine interface comes in.
What is a Human-Machine Interface (HMI)?
A human-machine interface is a device component that leverages hardware and software, empowering end-users (humans) to operate and communicate with machines and equipment.
HMIs can be developed for one piece of machinery alone, or a collection of complex devices that must all work together under one control system architecture commonly referred to as supervisory control and data acquisition (SCADA).
Other terms can also be used interchangeably with HMI, including:
- Control panel
- MMI – man-machine interface
- OIT – operator interface terminal
- Operator panel
- UI – user interface
“While HMIs can be referred to in many terms, they should all have a singular focus: effectively communicating with the end-user for safe operation.”
Whether it’s the wireless keyboard on your desk or the control panel on an automated food processing line, HMIs enable us to control and communicate with just about every electronic device you can think of (and probably some you can’t).
It’s not all about convenience either, poor HMI design has been linked to billions in lost productivity, abnormal readings, and even fatalities. Therefore, getting the HMI design right is critical.
There are several decisions that should go into developing the interface, including visual language and design. The sooner HMI specifications are mapped out, the fewer trade-offs designers will have to make once the device footprint and other constraints have been established.
From monitoring safe pH levels at a water treatment plant to a beacon signal on an airplane control panel, operators rely on intuitive, fast communication with their machines constantly. And status indicators on the HMIs are how they do it.
But first, what is a status indicator?
Light Pipes
Rods made of plastic or glass, light pipes transmit light from the surface-mount or through LEDs to the display of the device.
Panel Mount Indicators
LEDs attached to the control panel of a device, panel mount indicators (PMIs) visually communicate with the operator on the machine.
Capacitive Touch Sensor Displays
Combining graphic interactive control with color identification, capacitive touch sensors enable intuitive indication.
No matter how the light is shining through on the back end, what the end-users see determines how well (or poorly) they engage with the device. From the printer indicating that you’re out of magenta ink to your car’s dashboard notifying you that it’s time for an oil change, engaging with electronic status indicators has become second nature in many ways.
Does indicator design really matter?
It’s not all about a sleek design aesthetic with lights that complement a brand’s color palette. Using properly designed indicators facilitates safety and efficiency for end-users, and the heart of HMI design.
In fact, EU-OSHA, the European Union’s occupational safety organization, has deemed the human-machine interface as an emerging risk. Here are a couple of reasons why:
- Complexity of new technologies and processes associated with the HMI, which lead to increased mental and emotional strain of end-users
- Poor HMI design – when controls are too complex or require high forces to operate, errors are made, and workers can even hurt themselves
All of these issues are good evidence that indicator design does more than matter…. It’s everything!
Which Industries Use Status Indicators?
The short answer? All of them! Even the phone in your pocket uses some form of status indicator. Let’s take a closer look at how real-world applications have different demands that could impact HMI design and types of status indicators used in a device.
Industrial
For industrial applications, effective status indication can be crucial for operator safety. The more intuitive the better, as overly complex or clunky communication can impact job performance.
Industrial indicators must also withstand dirt, oil, dust, vibration, heat, and humidity in most cases. And daytime visibility is also a key consideration that impacts success on industrial devices, including:
Machinery
Portable Machines
Commercial Sanitation
Power Equipment
Medical Monitors and Equipment
Similar to industrial applications, medical indicators must be able to withstand moisture from harsh cleaning supplies, blood and often be portable and viewed from various angles.
Medical monitors often use various types of indicators – text, numbers, colors – to clearly communicate numbers and diagnostic readings quickly and accurately. And medical equipment must be well-designed, whether it’s a life-saving device or something used to help maintain patient comfort during treatment. In many cases, seconds count, so proper design is essential for devices including:
Patient Comfort and Care
Training Devices for RNs and Doctors
Dental and Medical Machinery
Non-Surgical / Aesthetic Treatments
IoT
IoT, or the Internet of Things, is a growing industry. As our worlds become more interconnected and automated, consumer and industrial IoT devices must communicate with end-users in seamless, intuitive ways. These ways can be as simple as touchscreens and touch displays, or as complex as tablets and eventually wearables. More and more IoT technologies are being implemented across industrial processes, too, known as the Industrial Internet of Things, or IIoT.
Homes, wearables, warehouses, semiconductors, and everything in between will grow in the IIoT movement. When devices are small and contain few, if any words, light is the language end-users use to maintain safe operation. Examples include:
Smart Home Devices
Connected Classrooms
Food
Effective status indication in food equipment and devices is something we can all support. Not only does HMI design impact food safety and quality, it can also help signal major safety hazards, such as overheating or even poor ventilation or ensuring the dishes used at a restaurant are thoroughly sanitized. Of course, protection from moisture and heat are also key design considerations, as well as visibility across a busy kitchen. Examples include:
Commercial Grills
Smart Pizza Warmers
Entertainment
How boring our lives would be without the HMI-powered devices we use for entertainment. Whether it’s the sound equipment at an outdoor concert or the phone that stores your game ticket, industry professionals and consumers use status indication more than they realize in everyday life.
Requirements for HMIs and their status indicators can vary depending on the application, size of the device, and even where it will be used. Examples include:
Sound Equipment
Theater In-Seat Call Button
To discover which indicators are right for the job at hand, check out our application brochures.
A Brief History of HMI Indicator Technologies
How did we get here? The HMI industry has come a long way in the last 40+ years, as devices became more advanced along with the lighting technology that helped power them.
1980s
In the pioneering days of information systems, machines used push buttons, dials, and panel gauges to control individual pieces of equipment. Developing HMI controls required extensive programming knowledge to make computer software link with the display unit. HMI Design 1.0 was in full swing, yet programming these interfaces was complex, time-consuming, and expensive.
Then, proprietary MMIs (man-machine interfaces) became available for control rooms, and proprietary OITs (operator interface terminals) for on-machine control. Specialized HMI design software (HMI Design 2.0) made programming and configuring HMIs simpler to some degree, but it was still pretty involved to set up an HMI with the appropriate tags.
1990s
PCs come on the scene and change the game. Microsoft and others introduced operating systems and software independent of the platform. Then HMIs evolved from hardware to software focus, as HMI Design 3.0 took shape. Then, in the late 90s, ethernet technology was introduced, removing the boundaries of connectivity.
2000s
Technological advances moved faster, including touchscreen technologies and LED LCD panels. HMI design pushed forward, using touchscreens and tech driven by applications, including those used in hazardous areas.
2010s
HMIs became more prevalent in the consumer market thanks to VR gaming consoles, smartphones, and other multi-touch devices. HMI screens that end-users can customize for maximum efficiencies became popular.
2020 and beyond
Modern HMI design will continue to become more intuitive, as wearables, sensory technology, AI, and predictive analytics work together to enhance interactions between human and machine.
Selecting the Right Status Indicator
Status indicators are created using either light pipes or PMIs. There are a few considerations that could dictate which indicator type to use. For example, if an HMI is fairly simple with a few indicators, a PMI would make more sense. But if the interface has several indicators on it, using light pipes would be preferred for budgetary reasons.
Once you’ve determined PMIs are the way to go, choosing the right panel mount indicator for your application and device will require determining many factors, including:
Size
How much room do you have on the panel for your indicator? Some indicators are housed on thicker HMI panels and need to be more robust, while others are very limited in their footprint.
Color
Color choice can impact reaction times, how intuitive an indicator is, as well as branding.
Working environment
When temperature, humidity, moisture, and vibration are part of the job, special considerations like IP protection should come into play.
Lens
The shape and type of lens can change the amount of daytime or nighttime visibility, and determine the indicator’s viewing angle.
Power
How much power does your indicator need? Some may be surprised to discover that not all LEDs are low-voltage. VCC offers indicators ranging from 2V all the way to 220VAC – ideal for industrial operations. For example, VCC retrofit an industrial dishwasher with a status indicator from neon to LED technology. Because 125VAC and 250VAC LEDs were available, the upgrade was a snap.
Constraints
The device’s design and layout of the HMI must be factored in when choosing the right indicator for the application.
What Does Effective Design Look Like?
Your design should include less text and more visual communication for many reasons, as our Director of Product Development & Marketing explains in this recent RegalixTV interview:
The Case for Visuals vs. Text
When the feedback from a machine is visual, the operator can act more quickly while using it, since 90% of the information our brains process is visual.
Our brains process visuals faster than text, so using them instead of words whenever possible can ramp up the visual communication. Also, using icons and even numbers where appropriate eliminates language barriers.
Research from MIT proves it only takes 13 milliseconds for a brain to process an image. Think about how much faster your reaction time could be if a machine needed to be turned off while overheating!
Importance of Good User Interface Design
The importance of a user-friendly interface cannot be understated. Conventional wisdom, “form follows function,” still applies in the modern age. It may be tempting to start with the aesthetics, but engineers should remember to keep their end-user in mind and how the device will actually be used when designing the interface.
Think good design is a “nice-to-have?” Think again! Problems in development can be 10x more expensive to correct than when found during the design process. And 100x more expensive to fix after a product has been released!
Savvy companies understand how to integrate form and function in ways that we don’t even realize. Apple is a prime example.
- Everything has its place, there’s no excess packaging or plastic.
- There’s no slipping or sliding around in an oversized box.
- Once you turn on the device to set it up, the process remains intuitive.
These seemingly added bonuses are essential to ease of use and brand loyalty.
On the flip side, have you ever used a device that was so difficult and impractical you wanted to throw it across the room? That’s the opposite of what you should be going for. Designed properly, a user interface is easy to navigate with little to no instruction.
The goal of any device design should be to make the end-users’ interactions as simple and efficient as possible. Smart products have gotten this right while still allowing for an aesthetically pleasing design. Well-designed products, meaning those that offer a friendly user experience:
- Work better/are more successful
- Make end-users feel good about using them
- Drive brand loyalty
It all comes down to the overall design of the product. Have the user interface (UI) and user experience (UX) been carefully considered?
What’s the difference between UX and UI?
While the two are used interchangeably, they are quite different…
designing the look, feel and functionality of your product
creating a positive experience with your product
User interface (UI) vs. User experience (UX)
The UI example shows how the ketchup bottle will look while it isn’t in use. For an end-user who needs to use the product, the process looks like this:
- Pick up the bottle
- Unscrew the cap
- Set the cap down
- Flip the bottle upside down with one hand
- Smack the hard glass bottle furiously with the other hand
- Flip bottle back over
- Set the bottle back down
- Screw lid back on
- Eat fries (that may be cold by now)
The UX example was designed with the end-user in mind — how the product really gets used. By redesigning the bottle around how the product is actually used, three steps have been completely eliminated:
- Pick up the bottle
- Flip open plastic cap
- Squeeze with one same hand
- Flip cap shut
- Set bottle down
- Enjoy piping hot fries!
User experience design requires a deep understanding of who will be interacting with your product. What are their needs? Desires? Values? Limitations? Expectations?
It will likely take collaboration from multiple team members to define who the end-user is and what they need.
7 Attributes = 1 Awesome UX
UCD, For the Win (FTW)
UCD is an iterative process that requires input and evaluation from multiple stakeholders. All of this effort on the front end ultimately leads to better results, including:
- End products more in line with users’ needs and expectations
- Safer products due to multiple task-specific tests that mimic human errors
- Collaboration between users and designers creates empathy and leads to better products that don’t compromise privacy
- Varied user tests drive greater accessibility for a wider audience of diverse cultures
Specify the context of use
Develop potential design solutions
Determine requirements
Test and evaluate solutions
Fast Tips for a Friendly User Experience
Feeling a little overwhelmed about the importance of a user-centered interface? Here are some high-level tips to get your UX and UI ideas flowing:
- Put yourself in the user’s shoes
- Do one better and conduct usability testing
- Focus on the user’s needs
- Never assume how a product will be used
- Simplify, simplify, simplify
Understanding Status Indicator Design:
Human-Machine Indicators
At home, we use status indicators to operate the devices we use to make our lives easier every day. Yet, in certain industries and applications, effective visual indication is also a safety issue. The faster an operator is alerted to a warning or issue, the better their reaction time will be to resolving it.
But not all status indicators communicate in the same way (or even the same colors).
Machine to Human Interface: Dialogue By Design
There are several ways engineers and designers can establish visual communication for a specific device using LED status indicators. Of course, user-centric design should always be a priority.
Multiple Single-Color Indicators
Depending on the space available and range of status states that need to be communicated, it may make more sense to have a single indicator for each separate status notification.
For example, this MIG welder uses separate single-color LED status indicator lights to communicate critical status updates:
Blue – auto-set, or good to go, Yellow – overheating warning
One Indicator, Multiple Colors
To streamline the HMI panel, VCC created a bi-color solution for this power grid monitoring panel. Red and green lights in the same indicator are used to communicate status.
One Indicator, Multiple Modes
For smart devices used in IoT applications, tiny LEDs are hidden behind a front panel and only show when the status needs to be communicated. The smaller the device, the more thoughtful the HMI should be. Many devices use a combination of indicator communication styles to indicate multiple functions.
Here’s how one smart product, the Whistle pet tracker, uses color and cadence to communicate a variety of functions:
- Pulsing blue (slow) – during set up, while the device is connecting to Bluetooth
- Blinking blue (fast) – while the app is open near the Whistle tracker or during a family trip, transferring data via Bluetooth
- Blinking red or amber/orange – tracker’s battery is very low and needs to be charged
- Solid amber/orange – tracker is charging
- Solid green – tracker is fully charged
- Blinking green – tracker is updating location (during Track or Locate)
How To Determine Your Ideal HMI Design
So, how do you determine which visual language to use in your status indicator?
Keeping the end-user in mind, consider:
- Size and space limitations of the device – how much room do you have to work with? Smaller footprints may dictate the multiple indicators vs. one decision for you.
- How and where the device will be used – is the device portable? Will it be used outside where daytime visibility is a concern? How about the viewing angle? Will the end-user need to see the controls from standing, bending or elevated angles?
- Review the visual languages of other devices used in your industry – do other common devices used in tandem with yours have a similar communication style? Do they blink while in use, or stay solid? Look for patterns that could make your product that much more intuitive for the end-user.
- User experience – what will make the most intuitive experience? One indicator with multiple colors? Separate indicators for each function? A combo of the two?
- Building on what your end-users already know – thanks to traffic signals, we’ve been programmed to know what red, yellow and green lights symbolize: go, yield, and stop. Why not use red to signal an alarm or green to give the all-clear instead of requiring users to learn a new visual language? Here are some common colors and what they mean
- Your brand’s look and feel – indicators can enhance your brand’s identity, but aesthetics should always take a secondary role to the user-centric design of your product.
- Placement of the indicator – similar to size and space limitations, are there ways to make it even easier to see and use your device? For example, Amazon’s Alexa includes a circular light around the edge of the product in addition to a standard indicator.
Of course, the budget will also come into play when considering options as you design industrial human-machine interfaces. Fortunately, there are solutions available through human-machine interface manufacturers to help engineers and designers balance optimal UX with production costs that won’t break the bank.
Visual Indicators Provide Invaluable Efficiency
As we previously mentioned, using colors instead of text to communicate the status of a device leads to faster reaction times and better user experience.
Yet, visual indicators can also help differentiate between objects that otherwise look similar. We see them everywhere in daily life, from a typo that’s underlined in your Google Doc to a green light telling you there’s one more parking space left in the public garage.
But, what happens when the visual vocabulary of your device incorporates color and imagery to communicate status? According to one study by Nielsen Norman Group, the ideal UX includes a combination of icons and color to communicate.
The study found users are 37% faster at finding the correct items on a web page list when color and visual indicators are used.
Research was also conducted to compare results for:
- Text only
- Color only
- Icon only
- Color + icon
By monitoring user behavior on various web pages that featured the four indicator types, the study logged four key metrics:
- Time to first click
- Time to first correct click
- Time to complete task
- Rate of success (how many clicks were correct out of the 3 possible)
The results? Text-only indication was the worst performer by far in all categories, while the combination of icon and color proved the most effective.
What if your design doesn’t permit icon and color for whatever reason? The results of this study can help you prioritize how to best communicate status in your device. (Hint: use text-only as a last resort.)
Guidelines for Display Interface Design
User interfaces are the key component for the successful operation of a device, whether it’s a software application or tangible machine. Hardware interfaces can be found in a slew of household products, from toasters and microwaves to thermostats.
And hardware interface design (HID) can make or break a product. HID is a cross-disciplinary field that connects the physical connection between people and technology to optimize interactions.
Designing hardware interfaces should follow the same user-centric design principles used in software design. For best results, remember to:
- Empathize with the end-users
- Present all necessary information for a single decision process visible at the same time
- Involve the end-user in design decisions (conduct usability testing)
- Design for error tolerance — humans will make mistakes
- Avoid TMI (too much information)
- Prioritize practicality over product looks
User Interface Design for Hardware
Effective UI design is all about anticipating the needs of the end-user. Then making sure the interface design facilitates those actions through intuitive, easy to access steps. UI brings together concepts from:
- Visual design
- Information architecture
- Interaction design
Highly functional does not equal intuitive. For example, take a look at your microwave. Does it really need all of those buttons?
As you can see below, it took a while for the interface to evolve to meet the needs of the user. And in most cases, it still hasn’t, meaning some microwave designers should see above for user-centered design best practices.
What other products around your home or office could use a revamp in the interface design? This exercise can help you be more empathetic to the end-users of whatever product or device you are designing.
Can your device be correctly operated with little to no training or onboarding? That’s the ultimate goal in HMI design, whether it’s a microwave or a medical device. Contrary to instinct, sometimes the latest and greatest tech isn’t the best solution for your interface. By empathizing with the multiple groups and sub-groups who may use your product, you can ensure your interface is intuitive.
Other human-machine interface design tips include:
Design for error tolerance since humans make up the “H” in HMI. The interface design should provide real-time feedback to call out an error, as well as provide time and actions to help reverse or rectify the situation.
Ensure tasks require some level of active involvement from the operator while minimizing repetitive or passive actions.
Make safety-critical steps incremental instead of having them all take place on the same screen or at once.
Clearly differentiate between the error messages involved with overriding safety-critical and non-safety-critical actions.
We cannot stress the importance of good user interface design enough. If you’re ready to explore how various status indicators work and design considerations for each, check out the following resources from VCC:
Light Pipe Design Guide
PCB Assembly Guide
Custom
Solutions
Need help on which indicator
to use for your device?
Our experienced team can help determine the right standard product tomeet your requirements or create a custom solution. Contact Our Experts
Panel Mount Indicator
LED Watertight PMI Build Your Own Indicator Neon Incandescent More
Circuit Board Indicators
LEDs
Latest Products
Check all the Latest Products
Custom Wire Harness
Custom Solutions
Custom Design Capabilities
Technical Resources
Product VideosBrochuresCustom SolutionsNewsCase StudiesFAQsGlossaryVideo Webinar
Purchasing
Product
Videos
Learn more about our products
The Latest
Contact
Contact Us
Call Us 1.800.522.5546
