Archive for April, 2009

Aside

When designing for touchscreens, size matters

The latest and hottest touchscreen devices, such as Crestron’s TPS-6L/X, RTI’s T3-V and the Apple iPhone, feature ultra-high-resolution screens.  They look fantastic and they allow a level of detail on a small screen that wasn’t possible before.  Along with greater color depth and translucent PNG support, these new screens allow programmers to really get creative with their designs.  However, as Uncle Ben said, “with great power comes great responsibility”.  The “responsibility” of the programmer in this case, is to take into account the size that objects will be once they are downloaded onto the touchscreen.  After all, “high-resolution” is just a fancier way of saying “really small pixels”; much smaller than the pixels of most computer monitors and the touch panels that we’ve been used to in years past.   So, a 40 x 40 pixel button that has always worked fine on a 15-inch, 800 x 600 px touch panel, will be really small and difficult to use on a 5.7-inch, 640 x 480 px device like the TPS-6X.  Here are a few guidelines to follow when designing for these new, higher-resolution devices:

Avoid having any “pressable” objects on a panel that are smaller than 1/2-inch in diameter.  Objects that are not interactive however, such as digital gauges and text fields, can be made smaller as long as they are still readable.  Higher resolution screens allow the use of much smaller font sizes while still retaining clarity.

All pixels are not created equal.  DPI will determine the size of objects once they appear on the touch panel.
All pixels are not created equal. DPI will determine the size of objects once they appear on the touch panel.

If you know the physical dimensions of the touchscreen you are designing for, you can create document presets in Photoshop after calculating the dpi (pixels per inch) of the panel.  This will allow you to set your rulers to inches and see exactly how big your graphics will be once they’re on the panel.

While it may be possible to fit all of the controls for a device on one page, keep in mind how it will look on the panel itself.  This is generally acceptable on 8-inch or larger panels, but on a smaller screen it can look confusing and overwhelming.

While this may look okay at first glance, the objects on the page are actually too close together and will be quite small once loaded on the panel.
While this may look okay at first glance, the objects on the page are actually too close together and will be quite small once loaded on the panel.
Dividing the control between two pages allows the buttons to be much larger and easier to operate.  It also reduces the number of controls that are visible at one time, so it wont be as overwhelming to the user.
Dividing the controls between two pages allows the buttons to be much larger and easier to operate. It also reduces the number of controls that are visible at one time, so it won’t be as overwhelming to the user.

When using translucent objects, assure that they can be easily seen.  Placing semi-transparent buttons over a busy background image can look cluttered and can make some objects hard to see.  This can usually be remedied by creating a translucent “overlay” frame or border to go between the buttons and the background image.  This technique also makes the interface appear more organized by “grouping” the controls together.

With frame/border
With frame/border
Without frame/border
Without frame/border

Keep in mind what fingers are most likely to be used when operating the panel.  An in-wall panel might be operated primarily by the user’s index finger, while the wireless, hand-held version of the same panel could be operated with the thumbs which would require larger buttons.

In addition to the tips mentioned above, the most important step in the process of creating any interface design is downloading and testing on the device you are designing for.  This may seem like common sense, but it is surprising how often this step is rushed or in some cases, completely ignored.  I’m sure many of you can recall times when you’ve been troubleshooting someone else’s system and you say to yourself, “man, did they even test this thing at all?”  Fonts may render incorrectly, colors may be too dark or too light, dithering may become too obvious, and objects that are off the screen by one pixel won’t even download to the panel.  Every element of a touchscreen project can appear differently on the panel than it does on your computer screen; so keep the device handy while doing your designing and test extensively.