Graphic Overlay Design Guide for Membrane Switches & User Interfaces

1. The Ultimate Graphic Overlay Design Guide

2. Table of Contents Introduction Butler Technologies, Inc. What is a Graphic Overlay? Material Selection Purpose Environment Material Selection Aesthetics Material Characteristics Table Purpose Color Matching Metallic Effects Embossing & Forming of Features Adhesive Mounting Adhesive Chart Back Panels Lighting 3 3 3 4 4 4 5 5 6 7 8 8 9 12 13 14 15 2

3. Introduction Butler Technologies, Inc. Prototyping and full-scale manufacturing Headquartered in Western Pennsylvania, Butler Technologies, Inc. (BTI) was founded in 1990 as a humble printing brokerage firm and has grown into an innovative printed electronics design firm and manufacturer. As a manufacturing facility, BTI plays a vital role as a developer, helping clients turn ideas and needs into functional product, with our proof- of-concept development, prototyping and R&D activities. Butler Technologies, Inc. is committed to delivering the highest-quality graphic overlays on the market. If your company requires a custom-designed graphic overlay, whether as a standalone product or part of a larger concept, BTI has a solution for you.  If you would like to learn more about our collaborative design process, rigorous quality standards, and competitive pricing, give us a call today. We produce quality graphic overlays and labels for a variety of industries including home healthcare, medical devices, fire & safety equipment, and industrial controls. What is a Graphic Overlay? A graphic overlay is a label or nameplate that acts as the interface between the user and the device. Graphic overlays can be standalone labels or part of a membrane switch. The graphic overlay is the focal point to the user that communicates crucial information about a device or product. Users can interface with the overlay by pushing switches, viewing indicator LEDs, or reading the equipment display. Overlays can be screened or digitally printed to the users’ specifications. Proper design and good user interface should be top of mind when designing a graphic overlay. How does it function? Graphic overlays typically consist of printed letters, symbols, and icons to indicate device functions and direct the user on how to interact with the device. Other features such as tinted displays, LED windows, selective textures, and embossing can enhance the display and make the device easier to use. All these features should be carefully considered to provide the most user-friendly interface possible. 3

4. Material Selection Purpose Graphic overlays are typically fabricated using polyester (PET) or polycarbonate (PC) film, however, a polycarbonate (PC) & Pocan (PBT) blended material provides its own unique set of characteristics borrowing traits from both PET and PC films. Although these three make up the majority of graphic overlay materials, other materials can be used. Product designers can choose from a variety of surface finishes, imaging techniques, and embossed or thermoformed features that provide both aesthetic and functional benefits. When deciding on a material, there are three factors to consider: environment, application, and aesthetic. Environment Some common environmental factors to consider when selecting material include abrasion, chemical exposure, moisture, and UV exposure. Understanding your environmental needs will allow for the proper material to be selected. The material characteristic table can help with choosing the right material for the right environmental characteristics. Application The second factor to consider is how the graphic overlay will be used. There are three types of applications for graphic overlays: decorative, informational, and user interface. A decorative overlay is only used for viewing purposes such as logos, pictures, emblems, designs, or symbols. If your overlay is strictly for decorative purposes, polycarbonate offers unmatched transparency which allows for more vibrant colors compared to polyester at higher thicknesses. An informational overlay provides user instructions, hazard warnings warning labels, and/or LED indications. Informational overlays combine the need for a decorative overlay with environmental considerations, which often affect material selection. For example, a warning label placed on a medical device should be clear and vibrant (decorative factor) but may need to withstand chemical cleaners (environment factor). An overlay designed for user interface will typically contain some type of embossing for buttons, braille, or LED windows. Knowing the specifications required for these features such as embossing height, width, spacing, or backlighting will affect the material selection. For visual embossing such as logos, braille, and LED windows, polycarbonate is the preferred material. For actuated embossing such as buttons, polyester is the preferred material. 4

5. Material Selection Aesthetics: The last factor to consider is the desired aesthetic for the graphic overlay. Many customers require a certain look or texture to their overlay. Since polyester and polycarbonate can achieve most aesthetic requirements, the two previous factors of environment and application need to be considered in parallel to select the proper material. Whether it is a display with a brushed metal look or a graphic requiring a gloss finish texture, there are many aesthetic options to choose from to achieve the desired result. Examples of aesthetic features: •Velvet of Fine Velvet – A finish that can closely resemble the textured finish on a molded enclosure. Reduces the gloss level and provides abrasion resistance. •High Gloss – Highly reflective. Ideal for cosmetic effects but not recommended for reading LCD displays under high levels of overhead light. •Hardcoat – Available in high-gloss, velvet or fine velvet texture, anti-glare, brushed, and matte finishes. Provides added abrasion and chemical resistance. •Anti-Glare – Glare reduction. Ideal for clear windows over top of LCD displays. •Matte – Very low reflection. Military applications are common. •Brushed – When printed with silver ink backgrounds, can provide the look of brushed metal (stainless steel or aluminum). Can mimic a metal nameplate. •Weatherable – A hardcoat finish that provides resistance to the damage caused by exposure to UV light. Prolongs the appearance of graphic overlays used in outdoor applications. Conclusion: There are many aspects to consider when selecting material for graphic overlays. The most important thing to remember is the more information that can be provided regarding environment, application, and aesthetics, the better suited our design team will be in choosing the optimal overlay material. 5

6. Material Selection Chart Actuation Life Outdoor Use Applications Embossable Gauges for Texturable Resistance Resistance Chemical Common Abrasion Selective Materials OVerlays Graphic *Fair chemical resistance to household cleaners **Resistant to gasoline & household cleaners Topside • • • Velvet Texture Polycarbonate Good (50K+) 0.007” / 0.010” Poor* Very Good Good (50K+) Fine-Velvet Texture Polycarbonate 0.007” / 0.010” Poor* Very Good • Good (50K+) Gloss Hardcoat Polycarbonate 0.007” / 0.010” Very Good Very Good • Gloss Weatherable Hardcoat Polycarbonate Not Ideal Good (50K+) 0.007” / 0.010” Very Good Very Good (LED Windows Only) • • • • Anti-Glare Good (50K+) 0.007” / 0.010” Very Good Very Good Hardcoat Polycarbonate Matte Good (50K+) 0.007” / 0.010” Very Good Very Good Hardcoat Polycarbonate • Not Ideal Good (50K+) Weatherable Matte Hardcoat Polycarbonate Very Good Very Good 0.007” / 0.010” (LED Windows Only) • Velvet Texture Hardcoat Polyester 0.006” / 0.008” / 0.010” Window Clearing & Gloss Effects Excellent (1M+) Excellent Excellent • Weatherable Velvet Texture Hardcoat Polyester Not Ideal Excellent (1M+) 0.006” / 0.008” Excellent Excellent (LED Windows Only) • Fine-Velvet Texture Hardcoat Polyester 0.006” / 0.007” 0.008” / 0.010” Window Clearing & Gloss Effects Excellent (1M+) Excellent Excellent • Weatherable Fine-Velvet Texture Hardcoat Polyester Not Ideal Excellent (1M+) 0.008” Excellent Excellent (LED Windows Only) • • Gloss Excellent (1M+) 0.007” / 0.010” Excellent Excellent Hardcoat Polyester • Weatherable Gloss Hardcoat Polyester Not Ideal Excellent (1M+) 0.007” Excellent Excellent (LED Windows Only) • • • • • • • Anti-Glare Hardcoat Polyester Excellent (1M+) 0.007” / 0.010” Excellent Excellent Matte Excellent (1M+) 0.007” Excellent Excellent Hardcoat Polyester Brushed (S.S.) Texture Hardcoat Polyester Window Clearing & Gloss Effects Excellent (1M+) 0.006” / 0.008” Excellent Excellent Very Good (100K+) Fine Velvet Texture Blend 0.007” / 0.010” Good* Excellent • Very Good (100K+) Weatherable Velvet Texture Blend 0.007” / 0.010” Good** Very Good 6

7. Imaging & Decorating Options Purpose The colored images and effects on the graphic overlay are applied using either a screen or digital printing process, or a combination of both. The graphics are printed on the sub- surface (or 2nd surface) so the thickness of the material protects the graphics from normal wear or damage. Screen Printing vs. Digitally Printing Screen printing (see Fig. 1) takes on a more industrial look with areas of solid colors (PMS spot colors). Digital printing (see Fig. 2) allows for photo-quality graphics. Digital printing will also be utilized when an overlay requires variable information or graphics (ex. serial numbers). When true metallic colors are required, the overlays must be screen printed. The digital printing of parts can result in reduced costs and lead times due to multiple colors being applied at one time. Screen printing is typically more cost-effective for large production runs. Fig. 1 Fig. 2 Tinted Display and LED Windows Windows may be clear or printed with a transparent color to help conceal the LCD/LED display or indicator LEDs when they are not lit. Windows can also be tinted to filter or allow certain wavelengths of light to pass. LED windows can also be deadfronted—icons that appear invisible until lit from behind (ex. car’s turn signal icon). Selective Texturing and Window Clearing Screen-printed ultraviolet (UV) hardcoats can be selectively applied to the top surface of the overlay to provide: • A matte, textured background with gloss or anti-glare windows. • Contrasting matte/textured part background with high-gloss graphical elements such as buttons, logos, etc. When pre-textured material is used for the graphic overlay, a window clearing agent can be applied to make the display window transparent. 7

8. Imagine & Decorating Options Color Matching Within the printing industry, there are several color matching systems used to communicate color requirements. However, the most popular system in the membrane switch industry is the Pantone Matching System (PMS). Pantone Formula Guide and Pantone Color Bridge color swatch books are easily accessible and affordable. These swatch books differ slightly from book to book and fade with time, so they must be replaced annually. Colors are also matched using RGB values or other color matching systems such as the Munsell Color System or Federal Standard No. 595a. Screen Printing Colors The most common PMS color swatch book for matching screen- printed colors is the Formula Guide – Solid Coated. The color swatches in the book are designated with a numeric value followed by a “C” to indicate the Solid Coated book (ex. 286 C). Digital Printing Colors For digital printing, the most common PMS color swatch book is the Color Bridge – Coated. This swatch book shows the screen- printed spot color side-by-side with the CMYK process/digitally printed color. The process/digital color swatches in this book are designated with a numeric value followed by a “CP” to indicate coated & process color (ex. 354 CP). You will notice that there is a difference between a screen- printed spot color and its equivalent digitally printed CMYK/ process color. In the example to the left, PMS 354 C is compared to PMS 354 CP. NOTE: It is easier to color match a digitally printed color with a screen-printed spot color than matching a screen-printed color with a digitally printed CMYK/process color. Butler Technologies matches colors within the acceptable industry standard Delta-E measurements using a spectrophotometer and computerized color-matching system that includes an ink recipe archive. Metallic Effects: Metallic effects such as brushed, polished, antiqued, hammered or satin are textures given to the top layer of a graphic overlay to enhance the desired look and feel. Butler Technologies can print these textures through our screen- printing methods. 8

9. Embossing & Thermoforming Embossing & Forming of Features Graphical elements on the surface of the overlay (such as buttons, LEDs windows, and logos) can be embossed or formed to produce three-dimensional features that enhance the aesthetics and function of the membrane switch. In this section, the different types of embossing & forming will be discussed. Embossing of Buttons There are three basic styles of embossing for membrane switch buttons: Pillow, Rim, and Dome. • Pillow (a.k.a. plateau or pad emboss): The entire shape of the key is raised and the top is flat. • Rim (a.k.a. rail or perimeter emboss): A raised border around the perimeter of the button. • Dome: The entire button is raised in a spherical shape. NOTE: This will require a more costly emboss tool. Design Factors for Embossing Height: Typical emboss height of a button is 1.0x material thickness for a PET overlay and 1.5x for a PC overlay. Width: The recommended width of a rim emboss is between 0.040” and 0.050” depending on material thickness. Radius: The recommended minimum corner radius is 0.032”. Square corners will crack the overlay material. Spacing: Minimum spacing of 0.187” between an embossed button/feature and (a) another embossed button/feature, (b) an internal cutout, or (c) the edge of the membrane switch overlay. Pillow Emboss Rim Emboss Dome Emboss 9

10. Embossing & Thermoforming Design Notes for Embossing Greater emboss heights, than listed above, can be achieved but are not recommended for membrane switch buttons. Excessive emboss heights increase the risk of material failure and the cracking or discoloration of the hardcoat. If button heights need to be greater than listed above, a thermoforming or hydroforming process will need to be utilized, which has higher processing and tooling costs. Embossed areas that are backlit must be taken into consideration during the design phase due to the thinning of material or ink that is not normally visible with non-backlit applications. Emboss widths or spacings less than stated above are possible but this tends to distort the surrounding material and excessively stresses the material, which could result in fracture. The minimum spacing between embossed buttons allows for an adequate amount of graphic adhesive and space between the dome cavities in the underlying spacer layer. Embossing of LED Windows Typically, LED windows need to be embossed in the graphic overlay to account for the height of the LEDs mounted to the circuit layer underneath. The embossed windows will have a similar profile as the pillow embossed button but with a greater height. LED windows can be embossed to a height of 2.5x material thickness due to lack of flexing like buttons. 10

11. Embossing & Thermoforming Hydroforming & Thermoforming of Buttons & Features Both hydroforming and thermoforming are different methods that can be used to produce more complex and higher (2x to 3x material thickness) shapes and dome-shaped buttons in the graphic overlay. Tooling for these processes is more costly than standard embossing. Examples of formed features include multi-level buttons, buttons with braille, raised logos, and dome- shaped buttons with tactile feedback. Multi-Layer Emboss Typical Sizes of Hydroformed Buttons in Graphic Overlays Overlay Materials 0.006” PET 0.007” PET 0.008” PET 0.010” PET 0.007” PC 0.010” PC Max Dome ø 0.488” 0.488” 0.488” 0.488” 0.423” 0.480” Max Dome Height 0.031” 0.033” 0.030” 0.032” 0.024” 0.032” Min Dome ø 0.340” 0.340” 0.340” 0.340” 0.340” 0.340” Min Dome Height 0.016” 0.016” 0.013” 0.015” 0.015” 0.015” 11

12. Mounting Adhesive Adhesive High vs. Low Surface Energy: After considering material, imaging, and decoration, the next thing to consider is the surface that the adhesive will adhere to. There are two main adhesive types: High Surface Energy (HSE) or Low Surface Energy (LSE). HSE describes a surface that has high energy molecules for an adhesive to adhere to. This typically is a flat, smooth surface that allows the adhesive to have flush contact with the surface. Some examples include ABS plastic, polyester, acrylic, or polyurethane. LSE describes a surface that does not have high energy molecules for the adhesive to adhere to. This surface could have large pores, grains, or points of non-contact with the surface. Some examples include wood, cement, powder paint, polyethylene, or nylon. Standard thickness for adhesives is 0.002” and 0.005”. For surfaces that are considered smooth or HSE, 0.002” thick adhesive is sufficient for standard applications. For surfaces that are considered rough or LSE, you will need to increase the material thickness to 0.005” or switch to an 0.002” LSE adhesive. If an application requires curved surface mounting, utilizing LSE adhesives is best for maintaining consistent contact. Note that mounting an overlay to a curved surface may cause adhesion complications. It is imperative that the selection of adhesives is accurate to ensure the overlay remains in place for the length of its lifecycle. If there is an incorrect selection of the adhesive, the overlay could be permanently fixed or prematurely dislodged to the surface. 12

13. Mounting Adhesive Chart Metal and Glass High Surface Energy (HSE) Plastics Low Surface Energy (LSE) Plastics Substrate Dynes/cm Substrate Dynes/cm Substrate Dynes/cm Copper 1103 Kapton® [polyimide (PI)] 50 Polyvinyl Acetate (PVA) 37 Stainless Steel 700-1100 Phenolic 47 Polystyrene (PS) 36 Aluminum 840 Nylon [polyamide (PA)] 46 Acetal (or polyacetal) 36 Zinc 753 Alkyd Enamel (oil-based paint) 45 Delrin 36 Tin 526 Polyester (PET) 43 Powder Coat Paints 36* Lead 458 Epoxy Paint 43 Ethylene Vinyl Acetate (EVA) 33 Glass 250-500 Polyurethane (PU) / PU Paint 43 Polyethylene (PE) 31 ABS (acrylonitrite butadiene styrene) 42 Polypropylene (PP) 29 Polycarbonate (PC) 42 Tedlar 28 Polyvinyl Chloride (PVC) 39 Teflon 18 38 Noryl® Acrylic [polymethyl methacrylate (PMMA)] 38 Polane® Paint (PU-based) 38 *Typical value for powder coat paint. In general, powder coat paints have a broad range of surface energy, usually in the LSE range. NOTE: The surface energy values are provided as a guide only. The values may vary depending on the substrate formulation. Adhesive Selector Metal and Glass High Surface Energy (HSE) Plastics Low Surface Energy (LSE) Plastics Gauge Adhesive Type Gauge Adhesive Type Gauge Adhesive Type .002" 3M 200MP series .002" 3M 200MP series .002" 3M 300LSE series .005" 3M 200MP series .005" 3M 200MP series .0035" 3M 300LSE series .005" 3M 300 High Strength series NOTE: Equivalent adhesives can be substituted 13

14. Back Panels Back Panels If the assembly warrants, Butler Technologies can source and apply a graphic overlay to a rigid metal or plastic back panel (a.k.a sub-panel). The function of the back panel is to act as a rigid backing for actuating switches if the device’s enclosure is not rigid. It can also act as a mounting system for internal components such as circuit boards and LCD (Liquid Crystal Display) or LED displays. Back panels are typically fabricated from aluminum but can also be fabricated from acrylic or polycarbonate. The aluminum can be left unfinished or produced with an anodized or painted finish. Mounting hardware can be designed into the back panel to accommodate a variety of mounting needs. 14

15. Lighting Lighting Adding lighting to your membrane switch can be as simple as embedding indicator LEDs to provide feedback to the user or through use of more sophisticated technologies that provide backlighting to graphics and buttons. In this section, the various options will be discussed. Indicator LEDs Indicator LEDs are used to indicate a particular function is engaged (ex. Power On), status, or warnings. Top-fire LEDs are mounted to the circuit layer and direct their output upwards (90⁰ to the circuit layer). The internal membrane switch layers have corresponding openings to permit the light to pass upwards to the graphic overlay. The graphic overlay would have clear, textured, tinted or translucent colored windows (flat or embossed) to make the LED output visible. Options for indicator LEDs include mono-color, bi-color, RGB, and several others. Typical indicator LEDs are yellow/amber, red, or green in color, however, blue and white are also common. LED windows that are embossed provide a wider viewing area of a lit indicator LED. Metal Domes for Backlighting Metal domes have been developed with the holes in the center to permit the passage of light from the circuit- mounted LEDs. Using metal domes in this configuration generally allows for crisp tactile feedback. One disadvantage of this technique is the hotspot created in the backlit image (as shown below in the green backlit power button). If the membrane switch design permits, the distance between the backlit graphic and the LED can be increased to diminish or eliminate the severity of the hotspot. 15

16. Lighting Light Guide Film (LGF) Technology Another common method for backlighting graphics and buttons is through the use of Light Guide Film (LGF) technology. In this method, backlighting is generated through use of side- fire LEDs (typically white) and an optical film that has been patterned by various methods. The pattern gathers the light that is traveling horizontally through the optical film and directs it upwards through translucent graphics. Backlit graphic overlay. Notice the patterned LGF “dots” are visible in the rim embossed POWER button and the non-embossed LASER button because there is minimal space between the button graphics and LGF. The ARROW buttons are pillow embossed that allows for space between the graphics and LGF. Circuit layer with the embedded side-fire white LEDs and patterned Light Guide Film panels. Powered circuit with illuminated Light Guide Film. Patterned “dots” are visible and directing light towards the viewer. Fiber Optics Fiber optic panels are ideal for applications that require uniform lighting over large areas. In recent years, Light Guide Film Technology has superseded fiber optics as the primary choice for backlighting. However, fiber optic technology still has its place in membrane switch constructions. Besides offering uniform lighting, fiber optic technology offers several other advantages including a low- profile construction, long life (10K to 100K hours), and the ability to operate in a wide range of environmental conditions. Depending on the overall construction, fiber optic panels can reduce the tactile feedback response of a membrane switch. EL Lamps Electroluminescent (EL) lamps are another solution for applications that require uniform lighting over large areas. EL lamps generate light when the printed phosphor inks are excited by AC current. Therefore, they require an alternating current source or a DC to AC power inverter so they are not appropriate for all membrane switch applications. 16