Trends on Tuesday: 5 Tips for Designing Touch Interactions

Josh Clark, one of the pioneers of touch Web design, and author of Tapworthy and Designing for Touch, published an excellent article on A List Apart analyzing How We Hold Our Gadgets that has a wealth of data and graphics about this interesting and emerging design challenge. Below are 5 notable lessons from the post:

1. Portrait (vertical) orientation dominates over landscape (horizontal) usage with a 60-40 split. This is often driven by the app or content experience and will probably continue to grow more divided as many applications now aren’t even offering landscape orientations anymore—including Facebook, Flipboard, Instagram, Pandora, even Netflix (on Android, however, along with video playback, Netflix’s library browsing mode can still be viewed horizontally). Landscape is largely dominated by video games and video and photo viewing.

Real world take away: Depending on your content and user needs, you might not have to build a horizontal version of your application, which could save design, development and testing time. (Sorry, websites creators. You can always be turned sideways, but design and development priority should be making sure the portrait version is bullet-proof.)

2. Most people use the phone with one hand and have thumb-driven touch actions. Forty-nine percent of research subjects used a single hand and thumb to interact with their devices. The next most popular was 36% holding with one hand and then using an index finger to navigate.

Real world take away: Make sure your most valuable (and used) navigation elements are near the bottom of the window within easy reach of thumbs. Think of how Facebook puts all of it’s core navigation at the bottom of the interface.

3. Mind your meat pointers and safe zones for touch interaction. When designing apps and mobile-optimized websites, it’s crucial to consider the human anatomy for touch interfaces to make navigation and the user experience effortless. Clark deftly points this out with an amazing visualization quote, comparing touch interactions to the simplicity and preciseness of mouse-driven interactions:

“We also, of course, often reach into the middle of the screen; as screen size grows, our hands field ever more surface. However, unlike a mouse cursor, which sweeps effortlessly across a screen’s sprawl, our fingers are weighed down by this thing called an arm. This meat pointer goes all the way up to the shoulder, and hefting it around the screen demands effort. An interface shouldn’t be a physical workout. Group frequent controls within easy reach of thumbs. Nobody ever broke a sweat twiddling their thumbs.”

Real world take away: Seriously, put your most important- and frequently-used content at the bottom of the phone near the thumbs and make tap areas large and easy to hit, since users don’t have the precise control of a mouse device and instead have a big, floppy meat stick pointer in their arm.

4. Phablet users have many varied techniques, but thumbs still rule, driving 60% of touch interactions. Phablet users switch grips much more frequently than smaller phone users, often using more than one hand, but thumbs still drive the majority of the interactions over index fingers. By using their thumbs predominately, almost half the screen is difficult to reach for users.

Real world take away: Navigation and frequently-used features are even more crucial to be placed at the bottom of the screen on phablets. An adaptive design that customizes for these screen sizes might be something to consider, depending on your user needs.

5. Touch interactions on laptops and hybrids are a whole other ballgame. In the article, Clark illustrates how touch laptop and hybrids throw a wrench into some of the more defined standards that mobile devices generally share, depending if someone is using their thumb or index finger. The optimal touch areas are almost mirror images of each other: Thumb users prefer the lower corners and index finger users prefer the middle and upper part of the screen.

Real world take away: There’s no easy solution here. Do user research on how your audience uses your content, look at the analytics on what devices are used and optimize your experience for those users.

Check out the U.S. Web Design Standards and the Mobile User Experience Guidelines and Recommendations for more practices for good design. Join the MobileGov Community of Practice to help build anytime, anywhere government.

Disclaimer: References above are for illustrative purposes and do not imply endorsement by the General Services Administration (GSA).