Articles

Touchscreen interfaces are familiar to most people living in industrialized nations. We see them on ATMs at banks and shops, check-in kiosks at airports, check-out kiosks at big box retailers, and even in the cars we drive. (Technically speaking, many PDAs have touchscreens as well, but since most are intended to be used with a stylus, they are beyond the scope of this article.)

You might think that designing user interfaces (UIs) for touchscreens is very similar to making interfaces for more typical graphical input devices (GIDs, meaning mice, trackballs, and the like). I've discovered that a multitude of subtle design issues appear when users start stabbing at a screen with their fleshy digits, and this article aims to expose some of the bigger potential pitfalls.

This article is not a primer on human factors, and is not based on Real Science; it's simply a summary of my own research and experiences designing touchscreen interfaces. Let's take a quick look at how information architecture, interaction design, and visual design are affected when we get all touchy-feely.

Start the Presses!

Touchscreens are used by pressing them with one's finger (any physical appendage will do, but alternatives may be embarrassing). The most visually obvious requirement for touchscreen UIs is the size of the interaction objects on screen. Buttons and pressable widgetry need to be supersized to accommodate the diameter of a human fingertip, making them two or three times the size of normal buttons.

However, scaling buttons up to finger-pressable size is not the only consideration. Not everyone has good eye-hand coordination, so some margin of error needs to be accounted for. Many users prefer to use the flat of their finger, which results in a tall, oblong hit area, often reducing accuracy. The user's viewing angle of the touchscreen can skew where they place their finger (usually high or low, more than side to side). CRTs tend to incur a wider degree of inaccuracy than LCD or TFT screens, due to their curvature and the slight depth of the actual pixels from the touchable surface of the screen itself.

Imagine a user at an airport, running late, seeing a long line at the security checkpoint, and having just carried a lot of heavy bags to the skycap outside. The user is breathing heavy, stressed, and in a hurry. How accurately are they going to be controlling their fingers in such a circumstance? Their hands are, most likely, going to be bobbing up and down with the rise and fall of their deep breaths. Similar use cases can be seen in the restaurant industry, where touchscreens are a standard means of order taking and billing. This margin of error needs to be accounted for when determining the size of interaction objects.

This is the kind of consideration one needs to make in determining how large touchscreen buttons should be...and, in my experience, no touchscreen button is too big. I think the easiest-to-use touchscreen button is an entire screen that says Press Anywhere to Begin!

And a final note for placing touchscreens: the optimal placement for touchscreens is between elbow height and shoudler height, which ranges between 100cm and 150cm while standing for most American men and women, according to recent ergonomic studies.

Real Estate

You can see where this is going: with huge buttons comes major constraints on screen real estate. Real estate is, of course, ultimately based on hardware. Not all touchscreen have desktop-equivalent resolutions (e.g., 800x600 pixels and higher). This makes real estate all the more precious.

While this may not be an issue for an ATM, which usually has less than eight choices per screen, it can pose a huge issue for complex applications. Nesting or sequencing options to preserve screen real estate usually means providing some sort of navigation and/or breadcrumb system, which itself needs screen real estate...sometimes, if such navigation needs to be clickable, a lot of it.

Balance button inventories with screen size, and to make sure that any progressive disclosure of information doesn't make the user lose his or her place in their goal or task. (Note that any reliance on a stylus will greatly reduce the need for oversized buttons, since the tip of the stylus is tiny compared to a fingertip.)

Rollover No More

Hover states, rollovers, mouseovers...all these Web and desktop standards for interactive user feedback are nonexistent in touchscreen interfaces, because there is no persistent cursor onscreen to trigger such events. This presents a challenge with supplying the user feedback on their actions.

Most touchscreen hardware is set, by default, to emit a sound when the screen is pressed, providing some aural feedback that the user's screen-press was received. However, many touchscreen UIs could be greatly improved with an indication that a button press was successful, distinctly different from the system simply registering a screen press. If a user's finger misses an intended pressable target and no aural or visual feedback is given at all, he or she can be left wondering if the hardware is malfunctioning or if they are not pressing carefully enough.

Illuminating pressed buttons is also a useful method of providing feedback to touchscreen users. In my experience, a slight pause showing a post-press illuminated button state helps give the user confidence that the system is interpreting their commands properly.

Dragging is a Drag

While it's possible to use click-and-drag mechanisms on touchscreens, they are often not as usable as they are on GID-driven interfaces. They require constant finger pressure, and perturbations or grime on the screen can foul such operations. What's more, the user can easily obscure important parts of the UI while they move their hand, potentially obscuring critical lines of sight to functionality.

This suggests that scrolling is best avoided on touchscreens; pagination controls are often more usable and more predictable.

Text Input

Many touchscreen UIs require the input of personal information. This is most effectively done with two methods:

• Card swiping, using a mag strip as a reservoir of data to eliminate manual data entry
• Onscreen numerical keypads, for such data as account numbers, PINs, and confirmation codes.

However, sometimes it's impossible to get around needing to input a full range of alphanumeric data manually. Enter the on-screen QWERTY-style keyboard.

On-screen keyboards have horrible error rates, and are often hard to fit on some screens due to low pixel dimensions. A UI designer is at the mercy of the QWERTY keyboard layout for the purposes of familiarity and usability (design conservatism strikes again!), needing to lay out a minimum of three rows of ten keys each; if your keys are 50px square and you've got 5px of negative space around every key, this becomes a 555x170 chunk of screen space.

Virtual Versus Physical Controls

Several common devices use both touchscreen (soft) and physical (hard) buttons, creating multiple loci of attention to accomplish a single task.

ATMs are a classic example, since most of them still retain physical keypads for PIN entry. While this is fairly standard, and therefore moderately usable through user familiarity, as ATM machines are upgraded to touchscreens, they often retain hard buttons on the sides of the screen.

At one time the screen was used to show what these hard buttons did from screen to screen, as their funtionality varied based on the screen context, but more than once I've encountered these labels being, themselves, pressable. To each his own, and multiple paths towards the same goal are usually not bad, but this kind of repetition less than an inch from each other seems odd to me.

Splitting the user's attention between multiple control surfaces can be detrimental to usability and efficiency...unless that is part of the user experience, as with the Nintendo DS, yet another touchscreen device.

Technology Issues

While it's technically not a touchscreen, try moving the scroll wheel or click wheel on an iPod with something other than your finger, like a pencil eraser or a spoon. Does it move? No. It's expecting the slight amount of electrical charge in your skin: these devices are basically flat capacitance sensors. They might function with very thin gloves on, but anything that isolates the slight electrical charge from your finger will prevent you from using a device with such an interface.

Capacitance sensing is a very common technology used in touchscreens today. Alternative technologies include infrared, surface wave, resistive sensing, and others. A touchscreen's sensor type could be an issue if hardware will be used with gloves (in cold or inclement environments). If a touchscreen is capacitance sensitive, this precludes the use of a nonconductive stylus (pens and pencils are common substitutes) by anyone who's concerned with germs or dirty surfaces (worse yet, a spermatophobe or verminophobe), who will not want to touch the device at all. It's also worth noting that long fingernails are not reliable, either; women with long or fake fingernails can have serious problems accurately pressing the right buttons on cramped touchscreens...this is not a generalization, I've seen this happen!

Just be aware of the technology being used, your potential users, and environmental concerns, and make sure these three factors don't mutually exclude each other.

Conclusion

While the general point-and-click metaphor of desktop and Web interface development still applies to touchscreen interfaces, touchscreens are definitely unique interface devices that require some fresh thinking. Screen inventories require significant simplification, screen real estate is more of a premium than usual, and above all, it's those users' grubby little paws that present the greatest interaction design challenges.