Status Light GuideUnderstanding User Interface & User Experience
An Intro to Status Indicators:
Visual Language of Machines
But first, what is a status indicator?
Panel Mount Indicators
Capacitive Touch Sensor Displays
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.
The Case for Visuals vs. Text
Our brains process visuals 60,000 times 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
- 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
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:
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
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.)
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: