Designing Finger-Friendly Mobile Touch Interfaces

In my last post we looked at organizing the mobile web experience by aligning your mobile experience with real-world needs, placing a greater emphasis on content, placing relevant links at the bottom of the page and showing options applicable to the task at hand. In this post we will look at some considerations for designing intuitive touch interfaces.

Touch Target Sizing

As mentioned earlier in this series, people often interact with mobile devices using “one eyeball and one thumb.” As a result, buttons and touch targets on the mobile experience should be designed at sizes larger than most web designers are usually comfortable with. As Josh Clark notes in his article “Designing for Touch“:

“To designers accustomed to the desktop, controls this big feel both enormous and toylike, but just roll with it. Humongous buttons and gigantic tap targets are not only easy to hit but they’re also easy to see for the occasionally distracted mobile user.”

And it’s true. It can be tempting to compensate for less screen real estate by downsizing but we should actually move towards making things bigger. Just how big? Apple recommends making touch targets 44 x 44 points. Nokia recommends 7 x 7 mm and Windows suggests 9 x 9 mm 1. Taking these recommended touch-target sizes into account doesn’t necessarily mean that every button needs to match these exact dimensions. The touch target itself should be within this range but the visual representation can be 50% to 100% of the actual touch target size.visual guide to touch target placement

Touch Target Placement

Only about â…“ of the screen is effortless for the thumb to reach. This is the area where primary actions should be placed and the main reason why toolbars and navigation are typically placed at the bottom of the screen. Having primary controls at the bottom also negates the fact that fingers will obscure the screen. Actions such as cancel and delete should be placed outside of this area where extra effort is required to complete. Placing actions relative to their purpose will make accidental taps less likely and your mobile experience more enjoyable to use.

Touch Gestures

There is a great amount of consistency in the gestures we can expect people to use on our mobile web experiences. Common across most touch platforms is a set of core touch gestures that form the basis for how people interact with touch screens. But knowing the gestures isn’t enough – we also have to become familiar with how people are using these gestures. The Touch Gesture Reference Guide by Luke Wroblewski includes an overview of these core gestures as well as common uses.

Core touch gestures

Becoming familiar with these core gestures will enable you to not only design according to existing uses but to experiment with what gestures can do.

Replacing Hover Interactions

On mobile devices there is no pointer to position over an interface element – just your fingers. As a result, any actions that rely on mouse hovers in our desktop experience have to be reconsidered for the mobile experience. Some options for translating on-hover menus for the  mobile experience include:

  • Placing the information on screen
  • Showing the information on tap or swipe
  • Moving the content to a separate screen altogether

If all else fails and the information shown within a hover is not critical, don’t be afraid to remove it altogether.

In Conclusion

Place primary controls in the area most easily accessed by thumbs, ensure your tap targets are adequately sized, become familiar with the core touch gestures and how they are typically used and translate on-hover menus for the mobile experience where necessary.

In my next post we will look at best practices for handling inputs on the mobile web experience.

1For more information see Luke Wroblewski’s Touch Target Sizes.

Articles in this series

Part 1: A Brief Introduction to the Mobile Market
Part 2: Embracing the Constraints of Mobile Website Design
Part 3: Capabilities of Designing for the Mobile Experience
Part 4: Organizing the Mobile Web Experience
Part 5: Designing Finger-Friendly Mobile Touch Interfaces
Part 6: Form Design on the Mobile Web Experience
Part 7: Designing Layouts for the Mobile Web Experience