Jul 11

Written by: RES Blogs
7/11/2011 9:54 AM 

by Morgan Strauss

Ever notice that after all your hard work designing a user interface, it doesn’t look quite like you intended when you put it on a touchscreen? The reason for this is that colors on a touchscreen often “shift” and “band.” That is, the color can be different than intended (shifting), or there are abrupt changes between shades of the same color instead of the smooth transitions you envisioned (banding). The explanation for this is simple: many specific shades of colors can’t be reproduced on a 16-bit touchscreen, so the display has to pick the closest supported color. Luckily, there are a few tricks to overcome these issues.

Touchscreens support more shades of green than red or blue because the human eye is more sensitive to that particular color. You can use this to your advantage by using more green in your drop shadows, background images, or other large areas of gradient color. This will improve banding, but to eliminate it altogether you need to avoid smooth transitions, especially in larger areas such as shadows and images with a lot of flowing colors. Even without the smooth transitions, you will still get some color shifting, but color banding is the bigger concern, and without it your design will be represented more accurately on the touchscreen.

Of course, your design can be marred by forces outside the controller too, particularly by smudges. In much the same way as it is hard to keep black cars looking clean, dark backgrounds on a user interface are more prone to showing smudges on the display’s glass. Using a bright background, especially one with a pattern, can hide those fingerprints. To allow users to clean fingerprints and other dirt off the glass without accidently turning anything on or off when wiping the screen with a cloth, a “clean screen” mode can be implemented. This mode makes the screen simply go black for a predetermined period of time, after which it returns to normal operating mode. This way nothing can be operated during cleaning, and the dark background makes dirt and smudges easier to see. Afterwards, your design is front and center in all of its original luster.

 

 

Morgan Strauss is the president of Guifx, an interface design studio specializing in touchscreen interfaces for home automation and embedded systems. He can be reached at morgan@guifx.com.