Bre Stachowski THUMB

Bre Stachowski

Sharon West THUMB

Sharon West

Microsoft Teams image 106

Emily Siira

Design

Industrial Design

Interaction Design

Engineering

Electrical & Software Engineering

Human Factors Engineering

Mechanical Engineering

Even when a product’s user interface (UI)&nbsp;is simple, there is much to consider when designing its interface and selecting components. Indeed, sometimes the simplest designs are the most difficult to get right.
In this article, we’ll explore some considerations you’ll need to make when designing a product with touch input and LED output.&nbsp;
Click a link below to jump to that section: 
I. <a href="#assumptions">A Few Assumptions</a> II. <a href="#component">Assessing Your Component Options</a> III. <a href="#aesthetic">Assessing Your Aesthetic and Functional Options</a>
<ul><li><a href="#deadfronting1">Deadfronting with LEDs through opaque resin</a></li><li><a href="#deadfronting2">Deadfronting with clear resin and masking</a><a href="https://cms.delve.com/admin/entries/articles/1126916-development-considerations-for-products-with-an-led-touch-user-interface#indicatorwindows"> </a></li><li><a href="#indicatorwindows">Graphics Next to LED Indicator Windows</a></li><li><a href="#other">Other LED User Interface Options</a></li><li><a href="#icon">Icon Selection</a></li></ul>
IV. <a href="#sealing">Sealing and Integration</a> V. <a href="#electrical">Electrical Considerations</a> VI. <a href="#conclusion">Conclusion</a>
<ul></ul>
<ul></ul>

2024 03 01 LED touch interface INLINE1

From concept to manufacturing, our engineering services can get your products to market.

Services Page: Engineering (Text only)

<h2 id="assumptions">A Few Assumptions</h2>
For the purposes of this discussion, we will assume a few things: 
<ol><li>&nbsp;User needs are well enough understood by the design team that the basics of the interface have been determined. User needs and use scenarios will help inform product layout. If you’re not sure whether a product requires a simpler or more complex user interface, start with an assessment of user needs. Human factors engineers and interaction designers are key team members to help determine the user interface scheme that’s likely best for the product. </li><li>Specifically, we assume that the following have been determined:<ul><li>The product needs to provide visual information</li><li>The product does not need a screen</li><li>The product needs to accept a few inputs from the user</li><li>The product does not need to accept a lot of input from the user</li></ul></li></ol>

2024 03 01 LED touch interface INLINE2

Before Lamplight could add the ambient glow of LED lighting to their signature TIKI torch products, first they needed to learn about the technicalities and possibilities of LED lighting.

Case Study: TIKI Brand® Glowing Torch

<h2 id="component">Assessing Your Component Options</h2>
Once you know that you are aiming for a simple touch-style interface with minimal output elements—a few LEDs, perhaps with icons—you can begin assessing component options.&nbsp;
Component selection is a multidisciplinary effort and often an iterative process to ensure that parts can fit where they are intended, meet the appropriate requirements, and collectively are not exceeding the budget for manufacturing cost, also called COGS (cost of goods sold).
The multidisciplinary effort starts with industrial design. ID will determine the&nbsp;interface size, proportions, and location, then will collaborate closely with interaction design&nbsp;for information layout and streamlining of user interactions. (See the detailed list, below, of questions that ID and IxD teams will address collaboratively.) The mechanical and electrical engineering teams will need to work closely with the industrial design team to ensure components are selected and designed to achieve the desired look and usability of the final product while also meeting technical constraints—for example, fitting within a power budget.

Gray 100

<h3>Component Selection:&nbsp;Collaborative Questions for Industrial Design and Interaction Design</h3>
Below is a list of considerations that the ID and IxD teams will address collaboratively in order to guide the selection of&nbsp;the correct components for the product.
Physical Design and Feedback 
<ul><li>Will the interface mostly accept inputs, mostly display outputs, or a mix of both?</li><li>Will text, numbers, and/or icons displayed need to fluctuate constantly, or does the system have binary “on/off” / “yes/no” indications?</li><li>Will each interaction point or indicator have its own dedicated footprint / location, or will multiple different data be displayed at different times in the same space?</li><li>Are indication LEDs near or aligned with touch points or completely separate from them?</li><li>What portion of the information will need to be permanently vs. temporarily indicated? E.g., a live temperature reading (always) vs. an error state notification (situational)</li><li>Information hierarchy: What is most important for the user to read and/or access, and how should this be visually prioritized?</li></ul>
Interface Functionality and Interaction 
<ul><li>Do icons / text need to be backlit, or can the information be indicated with LEDs next to on-surface graphics (e.g., pad-printed)?</li><li>Do touch points / buttons need to provide tactile feedback? Should this be physical / mechanical (depress) or haptic (vibration)?</li><li>Should a button or LED “react” when an interaction occurs? E.g., auditory feedback (beeping), tactile feedback (clicking), or visual feedback (flashing LED)</li><li>Does the interface require multiple LED colors, a single LED color, or just light illumination? If multi-colored, what do the colors indicate? (Red = error state, etc.)</li><li>How bright does backlighting or LED illumination need to be? In what conditions will the indications need to be viewed? E.g., many LED colors are hardly visible in direct sunlight</li><li>Are light sources directly under the UI panel, or will the design need to accommodate light pipes / direction of light to an alternate surface?</li><li>Does the interface panel need to be fully-sealed for ingress protection and/or cleanability? E.g., individual mechanical buttons vs. membrane keypad</li><li>Does a deadfront, membrane-covered LED array, or another panel type make most sense for all of the factors above?</li></ul>
<ul></ul>

<h2 id="aesthetic">Assessing Your Aesthetic and Functional&nbsp;Options </h2>
Although LED/icon displays may seem simple, they offer a very wide range of aesthetic and functional options. 

One of these is the option to create a&nbsp;deadfront feature. Deadfronting is the ability to make certain windows, icons, or features disappear in the off-state for the purpose of visual and communication clarity and aesthetics.

2024 03 01 LED touch interface INLINE3

<h3 id="deadfronting1">Deadfronting with LEDs through opaque resin</h3>
The visual above shows the Heatworks interface in the off and on states.&nbsp;When the display is “off”, the front face of the device is solid and smooth with only a small indent to indicate a touch point for the user. When the user interacts with that touchpoint or the app, the LEDs are lit and two previously hidden arrows appear which are also capacitative-touch (or "cap-touch") points to raise and lower the temperatures.
How is this deadfront effect&nbsp;achieved and what are the limitations?&nbsp;
The first limitation for this type of deadfront is resin color and PCB proximity. The LEDs that light up this display need to be extremely close to the surface in order to shine through a molded wall section. To achieve light transmission only where you want— without bleed or glow of the light— each LED is inside its own pocket within nominal wall section of the plastic panel with a depth within 0.02-0.025 inches (or&nbsp;0.5 - 0.64 mm)&nbsp;of the front face.

2024 03 01 LED touch interface INLINE4

We recommend making these holes as an adjustable insert in the mold. Small adjustments to that thickness can have a huge brightness impact.

Inline 4

Resin color can also have a significant impact. A pure white resin is usually the best choice for deadfront through a molded wall. Any carbon addition to that resin will have a major impact on brightness. Unfortunately, this also limits the use for this type of deadfront to indoors only, because if you put it in direct sunlight, the display will disappear.

2024 03 01 LED touch interface INLINE6

LumiraDx's <a href="https://www.htworld.co.uk/news/lumiradx-achieves-ce-mark-for-covid-19-antigen-test-on-amira-apco22/" target="_blank">Amira Analyzer,</a> a portable instrument for COVID-19 self-testing, is another example of this deadfront technique.&nbsp;The LumiraDx Amira device wall was created as a solid plastic injection molded part with locally thinned areas to allow light to pass though. The exterior layer was pad printed to align with the LED indicators.

2024 03 01 LED touch interface INLINE7

<h3 id="deadfronting2">Deadfronting with clear resin and&nbsp;masking</h3>
LEDs through an opaque resin is not the only way to achieve the deadfront aesthetic. You can also use a molded clear resin such as polycarbonate and add masking layers on one side.
For example, the <a href="https://pumpsformom.com/product/medela-sonata/" target="_blank">Medela Sonata breast pump</a> is a great benchmark for this clear resin with masking approach.

2024 03 01 LED touch interface INLINE8

Below the Medela Sonata's&nbsp;front interface panel are a PCB, Reverse LCD, and cap touch pads.&nbsp;The top layer is polycarbonate or another clear plastic with a custom graphic layer and masking layer that allow windows of LED light to pass through, depending on the user interaction.
A reverse LCD can be used instead of an array of LEDs like was used the Heatworks project.

2024 03 01 LED touch interface INLINE9b

<h3 id="indicatorwindows">Graphics Next to LED Indicator Windows </h3>
Deadfronting&nbsp;is not the only aesthetic option for an LED-driven display.
While deadfronting offers flexibility for graphic and interaction simplicity in the on and off states, it&nbsp;often requires LEDs to be close to the interaction surface and driven at higher power consumption levels to achieve the brightness required for visibility through an otherwise opaque feature. 
For consumer products that do not require a “hidden” graphic or indicator approach, a much simpler LED interface can be achieved.&nbsp;
Using graphics next to LED indicator windows is a low-cost&nbsp;option to communicate functionality to the user and is often quicker and easier to develop.&nbsp;
Another way to achieve a similar effect with a different aesthetic is to&nbsp;light up the graphics directly, as seen in the&nbsp;work we did on <a href="https://www.delve.com/work/fellowes-branded-air-purifiers" target="_blank">Fellowes' AeraMax air purifiers.</a>

A visual brand language is composed of layers of visual considerations, including colors, materials, finishes, form, and icons and colors in the graphic user interface. Using VBL, we created a line of air purifiers designed to showcase and strengthen Fellowes’s longstanding brand values.

Case Study: Fellowes AeraMax Air Purifiers

2024 03 01 LED touch interface INLINE10

<h3 id="other">Other LED User Interface Options</h3>
Every example above achieves a flush, parting-line-free interface. This is a benefit when it comes to cleaning and even achieving an IP-rating (ingress protection).&nbsp;
However, this only brushes the surface of LED use for user interface. The list of options is long and spans several product types.&nbsp;
On the much lower cost and simple side of things is the use of either off-the-shelf or custom lightpipes pressed into a panel to indicate something to the user (on/off function, error state, connectivity, etc.) 
On a more complex level, the use of LEDs in combination with diffusing rings can communicate more complex processes and states (loading, errors, etc.). Achieving a LED ring free of hotspots often takes a greater deal of ray tracing studies and material testing.

2024 03 01 LED touch interface INLINE11

<h3 id="icon">Icon Selection&nbsp;</h3>
LEDs alone are typically not enough to communicate function when several interaction options exist. Instead they are typically placed near carefully selected icons.&nbsp;
Choosing the best icon thickness, size, and shape often takes a few rounds of user interaction studies. The following ID/usability factors may come into play when making and testing these graphics choices.

<h3>Factors to Consider When Selecting Graphics/Icons </h3>
<ul><li>Viewing distance to interface. For example, larger or bolder text or shapes are needed when the UI is further from eyes.</li><li>Visual capability of user demographic. For&nbsp;example, aging individuals may need larger and bolder text for legibility.</li><li>Information density and clarity.&nbsp;Text and icons should not be crowded. Less text and fewer and/or simpler iconography is often better for clarity.</li><li>Font legibility. The chosen text font should be&nbsp;legible for each word needed, at multiple sizes, and from a distance.</li><li>Icon interpretation. Icons should follow existing user experience (UX) standards and/or the user should be able to discern the meaning intuitively.&nbsp;&nbsp;</li><li>Color and contrast. The color of printed text/icons should be legible against the color of the surface on which it is applied.</li><li>Surface graphic vs. Molded/debossed/embossed graphic.&nbsp;Consider whether&nbsp;text or icons might need tactile emphasis, for example, for&nbsp;low-light environments (when not LED-backlit), or situations in which pad-printing is likely to wear away over time.</li><li>Proximity to LED indicators.&nbsp;The location of printed graphics should make sense in relation to their associated LEDs.</li></ul>

Even for a relatively simple concept like three speed settings, there are&nbsp;many options for conveying information to the user.&nbsp;Formative testing to compare usability and minimization of user errors is a helpful—and in some cases required—way to ensure the product has the best possible iconography for the intended use.

2024 03 01 LED touch interface INLINE12b

These graphics can be added in a number of ways.&nbsp;Some of the most common methods:
<ul><li>They can be molded directly into the parts (lowest cost solution) as texture vs. smooth, or as embossed or debossed shape.</li><li>They can be pad or screen printed on the outer surface.</li><li>They can be added as a back printing operation below a clear resin (for the best wear resistance).</li></ul>
Pad printing is something we use fairly often because it ultimately offers great color match and placement tolerances. However, choosing the right color resin and best artwork (icon or text size and shape) can be challenging. At Delve, we often recommend using rub-on graphics during the prototype phases to settle on a design before investing in equipment to apply those graphics at the production level. 
<h2 id="sealing">Sealing and Integration</h2>
As we have touched on in passing, one of the great things about these “simpler” displays is that it is easy to achieve a surface free of parting lines to create a seamless (and sealed) face.&nbsp; Applying graphics relative to lighting or touch sensors through a sealed surface can be achieved in a variety of ways: 
A. Allow LEDs to shine directly through the housing
<ul><li>Mold in clear resin and mask the graphics</li><li>Use of pad printing and screen printing to add icons and graphics where needed </li><li>Use of diffused resins vs. optically clear </li><li>Solid white plastic, molded with deep pockets so the LEDs show through a solid white wall</li></ul>
B. Use light pipes to allow light to shine through only where you want it 
<ul><li>Co-mold lightpipe channels (lightpipes allow more flexible placement of the LEDs further away from the surface)</li><li>Press fit off-the-shelf or custom lightpipes through a panel. While these are not by default sealed, they can still provide protection to electronics by spacing or orienting them away from potential liquid ingress points, and can be very cost effective</li></ul>
C. Use an additional part to handle both light transmission and user input
<ul><li>Clear plastic membrane back-printed with icons or deadfront features</li></ul>
<h2 id="electrical">Electrical Considerations</h2>
Input
Adding touch input behind a deadfront display is straightforward. Capacitive sensing, or “cap touch,” features can be integrated directly on the front PCB face around the LED components as shown in the image below.

More often than not, designing your cool new product relies on some new widget - but you’re not sure if you should design your own or buy one from a supplier. Six tests offer a straightforward framework for deciding whether you should design or buy that component.

Download Promo: Should You Design or Buy?

2024 03 01 LED touch interface INLINE13c

Output
Discrete LED driven displays have several advantages from an electrical engineering perspective. One of the top benefits is the multi-sourcing options that exist for discrete LED components, so switching vendors is not as big of a concern as in other display technologies that can go obsolete and require redesigns of surrounding parts, like housings or bezels. 
Other benefits include: 
<ul><li>Low MCU burden (standalone capacitive touch with interrupt, no multiplexing) </li><li>Minimal software development effort </li><li>Depending on the final design, it only takes about a week of effort for printed circuit board activities such as schematic capture, board layout, and documentation</li></ul>
<h2 id="conclusion">Conclusion</h2>
They sky is the limit when it comes to creative integration of LEDs for user interaction purposes. LEDs can be paired next to or below icons to communicate states, they can shine through opaque or clear resins, they can be placed under softgoods or elastomers, and they can even disappear in the off states. 
As we saw in several of the&nbsp;examples above, any place where light will shine through a housing—through a light pipe, through a membrane graphic overlay, or through a thin layer of the housing itself—the intensity of the light and translucency of the material will impact the transmission and the consistency of the light that the user sees. For complex challenges like ensuring consistent lighting across the output surface of a light-pipe, ray-tracing programs can help with development, but for most lighting indicators, there’s no substitute for good old-fashioned prototyping.&nbsp; 
While this type of user interface type may appear simple at first glance, the options are many and the levels of complexity within this category can have a large range of development times. Good planning, working with the right stakeholders and advisors, and being sure to include all disciplines of engineers and designers, can help identify and realize the best possible interface for your product within the product’s target cost. Ian Adam,&nbsp;Ashley Jeong, Pradyuman Kodavatiganti and&nbsp;Daniel Marq contributed to this article.

Services Page: Engineering

Learn more about&nbsp;<a href="https://www.delve.com/services/engineering" target="_blank">Product Development Engineering Services from Delve​.</a>

SEO Text: Engineering Services

Newsletter Signup: Digital-Physical Product Development (icon visual)

2024 03 01 LED touch interface HERO

Sometimes the simplest designs are the most difficult to get right. Here's how we approach the design of a low-information-density user interface.

Medical Devices

Consumer Products

Home

Insights

Developing a Product with an LED and Touch User Interface

Breadcrumbs

A full-service product design and strategic innovation consultancy.

Delve

Sometimes the simplest designs are the most difficult to get right. Here's how we approach the design of a low-information-density user interface.

description

generator

kSwNn6qD4B-4HloWnWMUBWQNpBx2_mPi3nMqgsh6ato

google-site-verification

design, low-information-density, designs, difficult, approach, user, simplest, right, here's, interface

keywords

https://cms.delve.com/assets/images/_1200x630_crop_center-center_82_none/2024-03-01-LED-touch-interface_HERO.jpg?mtime=1709220480

https://linkedin.com/company/delvedesign/

https://www.delve.com/insights/development-considerations-for-products-with-an-led-touch-user-interface

referrer

robots

twitter:card

twitter:creator

twitter:description

https://cms.delve.com/assets/images/_800x418_crop_center-center_82_none/2024-03-01-LED-touch-interface_HERO.jpg?mtime=1709220480

twitter:image

twitter:image:alt

twitter:image:height

twitter:image:width

twitter:site

twitter:title

{"title":{"title":"Developing a Product with an LED and Touch User Interface | Delve"}}

Get Technical

Privacy Policy

FCOI Policy

Services

Case Studies

Testimonials

What We Do

About Us

Our People

Join Our Team

Careers

Newsroom

Who We Are

Boston

Madison

Philadelphia

San Francisco

Our Studios

Partner with Delve

Contact Us

Contact

Vamsee Pamula, Founder &amp; President, Baebies

Read informative articles from Delve's team of experts. Discover innovative strategies and insights about product design, engineering, and development.

Delve Insights: Product Innovation & Development Blog

innovation, product, design, advice, development

https://cms.delve.com/assets/images/_1200x630_crop_center-center_82_none/Delve_titlecard.png?mtime=1654035558

https://cms.delve.com/assets/images/_800x418_crop_center-center_82_none/Delve_titlecard.png?mtime=1654035558

Developing a Product with an LED and Touch User Interface

Developing a Product with an LED and Touch User Interface

Related Insights