Status Light Guide

Understanding User Interface & User Experience

An Intro to Status Indicators:
Visual Language of Machines

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.

But first, what is a status indicator?

A status indicator is a light used to signify various functions of a device with the end-user. Light can shine through the device and communicate with the user in multiple ways:

Light Pipes

Transmit light from the surface-mount or through LEDs to the display of the device.  

Panel Mount Indicators

LEDs are attached to the control panel of a device visually communicate with the operator on the machine.

Capacitive Touch Sensor Displays

combine graphic interactive control with color identification.  
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.

So, does indicator design really matter?  It’s not all about a sleek design aesthetic with lights that complement a brand’s color palette. Using intuitive indicators facilitates safety and efficiency for end-users.

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.

Humans process visual data better than any other type of information. So why not make the machines and devices that power our world more intuitive to operate through effective indicators?

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!

Case Study

Discover how small PMI design tweaks add up to efficiency.

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. Savvy companies understand how to integrate form and function in ways that we don’t even realize. Apple is a prime example.
From the moment you open up the box with the latest iPhone, you can see how the details have been obsessed over.

  • 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?

Effective product design requires careful consideration when developing a user interface (UI), as well as the user experience (UX).
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

Both are important to the overall success of your design. And when the two work together — where prioritizing a simple experience, then complementing it with a look and feel that add to the delight — you and your end-users win.

User interface (UI) vs. User experience (UX)

Here’s one way to look at it:

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: 

  1. Pick up the bottle
  2. Unscrew the cap
  3. Set the cap down
  4. Flip the bottle upside down with one hand
  5. Smack the hard glass bottle furiously with the other hand
  6. Flip bottle back over
  7. Set the bottle back down
  8. Screw lid back on
  9. 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:

  1. Pick up the bottle
  2. Flip open plastic cap
  3. Squeeze with one same hand
  4. Flip cap shut
  5. Set bottle down
  6. 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

Peter Morville of Semantic Studios created a User Experience Honeycomb to help keep designers and engineers on the right track when developing the UX.
To ensure the best possible user experience, use these seven attributes as your ultimate checklist:
N
Useful: Does the information fulfill an actual need? If not, what’s the point?
N
Usable: Is your experience intuitive to users? There’s nothing more frustrating than an overly complex interface.
N
Desirable: How does the interface make users feel? Design, color and the complete package should evoke positive emotions.
N
Findable: Do users have to work too hard to navigate their way around the interface or panel? If so, keep pushing the design until the ultimate user experience has been determined.
N
Accessible: Can a diverse group of users operate your device? Your interface should work well for people with disabilities.
N
Credible: Do users feel like they can believe what you and your product are telling them?

UCD, For the Win (FTW)

User-centered design (UCD) should be implemented from idea to production. As the name suggests, the user-centered design approach is one where every decision revolves around what’s best for the people who will be operating your product. 

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
At the highest level, the UCD process is comprised of the following steps:

Specify the context of use

teams should collaborate and conduct research to determine the 5 Ws (who, what, when, where and, why) surrounding use of the product.

Develop potential design solutions

hitting it out of the park on the first go-round is unlikely, as the concept will need to be refined and reiterated to create a workable design.

Determine requirements

What will make this product a success? What are the non-negotiables around business or end-user goals?

Test and evaluate solutions

Conduct user testing to see the product in its actual environment and scrutinize every aspect of the design.

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

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

When space is limited, a bi-color or tri-color indicator can communicate multiple functions while using only one indicator footprint on the control panel or interface.  

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

A single color can also be used to effectively communicate multiple functions via the cadence of the illumination. The light can flash or remain solid to indicate pairing with Bluetooth, charging, normal operation, or whatever the designer has in mind.

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:

  1. Time to first click
  2. Time to first correct click
  3. Time to complete task
  4. 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.

status indicator design guide

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

Color + Icon = Ideal Indication

Explore our capacitive touch sensor display that provides a fast and intuitive interface for users and simplifies customers interactions

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 to
meet your requirements or create a custom solution.
Contact Our Experts