Mapping Touchscreens for Touch

Unlike personal computer experiences, which involve many physical
buttons like keyboard keys and mice with scroll wheels, most mobile touch
screen experiences involve interactions with nothing more than flat screens of
glass. While there are few physical buttons, the nature of touch screen
interactions are highly physical because they are explored through human hands.
Subsequently, it’s important that touch screen layouts not only offer generous
touch targets, but also accommodate the ergonomics of fingers and thumbs.

Smartphones and the “Thumb Zone”

One of the great things about smartphones is that they’re designed to fit in
the palm of your hand – often resulting in one-handed use. This means touch
screen interfaces must not only be aesthetically pleasing, they should be
organized for the fingers, especially the thumb. It’s the finger that gets the
workout and the reason why most major interface elements are located at the
bottom of the screen instead of the top.

Interfaces designed for the desktop experience typically follow
the design convention of placing major menu items across the top of the screen.
The reverse is true of mobile experiences. Major menu items of your mobile
experience should reside in “the thumb zone” – the area of the screen that is navigable using just a thumb.

What about Tablets?

While they have many similar characteristics (few physical
buttons, user mostly interacting with a piece of glass) the ergonomic
considerations for tablets are quite different than smartphones, mostly because
one-handed use of a tablet is very difficult. Instead, people use tablets in a variety of
ergonomic configurations. From curling up with it like a book, to holding it
like a clipboard, to propping it up in a kitchen while cooking – the variety of
ways people use tablets make it difficult to recommend a single set of heuristics
about navigation and content placement.

Instead, it’s important to consider how mutual reconfiguration of the user’s body and the device occur during tablet use. This
involves considering the ways a user will likely configure their body when
using a tablet application and placing the the
primary navigation elements accordingly. Here are a few examples:

“Curling Up” Stance

For tablet experiences that encourage the “curling up” user stance, opt for navigation at the top and consider incorporating horizontal gesture controls.

“The Clipboard” Stance

For tablet experiences in which the user will be holding/using the tablet while standing, consider placing the navigation at the top of the screen where it’s easy for the user to see.

“The Multi-tasker” Stance

In tablet experiences where the user will likely be multi-tasking with other objects or devices, their time and attention will be divided. Opt for a “content as the interface” strategy. Try embedding navigation and interaction controls within the content itself and place these controls and navigation in the center portion of the screen.