Skip to main content

Experience Design

Design Insights for Creating Touchscreen Interfaces

The thing you figure out fairly quickly when designing for a touchscreen device, like an iPad, is that most of the usability rules you studiously absorbed for the last 10-15 years have been flipped on their heads. The surgical precision of the point-and-click mouse is replaced by stubby-finger pinching, tapping, and swiping. Where once there were fairly clear definitions for clickable links, buttons, and general interface predictability, now almost anything goes—and generally does.
The rise of touchscreens has paved the way for a new interaction design paradigm. Functionality is sometimes overtly rendered, sometimes implied, and sometimes denoted by nothing at all. The range of “gestures” to activate interaction can be as simple as a single finger tap or swipe to something as complex as a four finger tap, grab and swipe (with a twist!). Such gestures offer unique opportunities for fun, intuitive and natural interactions. Still, with great power comes great responsibility.
The thing I have found most challenging designing for the iPad is that there are so many different variations of tablets, smartphones, and touchscreen devices that, at this point, it’s impossible to know what’s actually a standard—beyond, maybe, tap, pinch, and swipe. Moreover, where in most digital solutions the designer is trained to render interaction as implicitly as possible, the situation is very different on a touchscreen device. Screen real estate requires focus on discreet pieces of content so that it may be presented simply and clearly. The days of ostentatious slab-chiseled three-dimensional kiosk buttons (with a marble texture!) have long passed. Now, with simple gestures and subtle directions, a user can reveal information palettes, advance to adjoining screens, or zoom in for greater detail. The elegance and simplicity is quite breathtaking yet daunting when we consider the variety of users.
So what is a designer to do? For me, it’s all about keeping it simple and knowing my enemy—the finger! That’s right, finger, I’m looking at you. With the challenges the finger presents, here are three high-level considerations when designing for a touchscreen device.

  1. Spacing and hierarchy. You will learn quickly that placing clickable targets in close proximity can cause issues when trying to initiate a variety of disparate interactions. In other words, keep that “delete” button far from that “save” button—it’s just way too easy for users to slide, miss or tap the wrong thing. Targets need to be sizable and distinct.
  2. You can’t have everything everywhere. Any good design is about a given moment of relationship between colors, imagery, form, and hierarchy. Within each state, or screen of your app, a user will generally have a couple interactive choices, some of which are primary, some secondary, others tertiary. Resist the urge to have everything everywhere. Once again, screen real estate is at a premium. In the web world, we use a prominent global navs and other navigation devices to jump in and out of places. In the Pad world, focus is king—the image, the text or the interaction of the moment should be rendered and the rest should be pushed down or packed away. This may require distilling additional navigation into palettes that can be called upon to slide in or expand upon touch. There are many ways one can render these additional user paths. The key is not to clutter your screen with too many choices that can distract, detract, or drive users way from the immediate task.
  3. Be consistent. With most digital interactions, you want to set up your paradigm and consistently carry it through the entire experience. Every function or navigational element does not need to be immediately recognizable for exactly what it is, nor is that even possible. If a simple tap or a swipe can quickly reveal a function, you have just taught your users something. Now, as they move through the experience, they have that knowledge. A designer should build upon that, creating enough stability and predictability in the interface that functions will be revealed in similarly subtle but meaningful ways.
Perficient Author

More from this Author

Categories
Follow Us