Product Design

Tactile design for mobile apps

person looking at apps page of their Apple Watch, and selecting an app using the touch screen of the watch

Tactile communication (touch) is the most basic and powerful way of interacting with the world around us.

Product designers have many visual tools and methods at their disposal to make great apps: animation, color, negative space… the list goes on. But to consider only the visual design is to ignore other powerful human senses, like touch. Aligning a visual interface with thoughtfully considered haptic feedback can provide users with a deeper understanding of what’s happening in the mobile app.

WillowTree groups tactile interactions for mobile into two primary categories: haptic feedback and informative haptics. Here are some ways these two categories of tactile design enrich your experiences with mobile apps.

Haptic feedback

Lately, apps have been making more frequent use of haptics to provide subtle interaction feedback to users. For example, Twitter uses a subtle ‘tap’ in their iOS app to indicate a pull-to-refresh request was successful. This same ‘tap’ should feel familiar if you’ve ever used iOS 10’s ‘peek and pop’ behavior driven by 3D touch—another example of haptics being used to subtly convey success. Android’s clock provides haptic feedback when moving the minute hand, nodding to the idea of cogs moving behind the watch face—a haptic skeuomorphism.

In these examples, the tap response isn’t critical to the interaction, but it substantiates the feedback (to a greater degree than either visual or audio feedback alone could), further solidifying the relationship between you and the app.

featured-image-tactile-desing-for-mobile-apps

Informative haptics

Informative haptics carry meaning beyond simple feedback after an interaction. In their simplest execution, the pair of buzzes from the last texts we received falls into the informative haptics category: it’s simple to distinguish that buzz from the multiple sequential buzzes we get when receiving a phone call.

The Apple Watch packs even more information into their haptic design for maps and navigation: pairs of taps to indicate left turns, a series of single taps for right turns. Apple’s own WatchOS meditation app, Breathe, guides your breathing for meditation sessions with the smart use of haptics. The vibrations ‘swell’ with your lungs (and the visual on the Watch’s screen), forging a satisfying connection between the app and your body.

WillowTree’s guidelines for tactile design:

  • Overuse of haptics can dilute their significance and annoy users. Use judiciously.
  • Tie haptics in with special or significant primary actions in your app. Examples include:
    • Feedback for adding something to a list
    • Pull-to-refresh confirmation
    • Apple’s HIG recommends using haptics to indicate a goal completion when a user’s hands may be obscuring the screen, such as during a drag-and-drop interaction.
  • In the vast majority of cases, subtle is best. Longer, drawn-out vibrations should be reserved for special use cases (like the Breathe app) or for more prominent, system-level notifications, like phone calls or Amber alerts.
  • Be deliberate with the design of each haptic response. Align with system levels of meaning when available (i.e., don’t reinvent the wheel).
    • Both iOS and WatchOS expose a library of haptic responses, some with standard system-level meanings (e.g., success, failure, warning).
    • Android allows a high level of customization with haptic design, but keep it simple and use sparingly.
apple event

What We're Taking from Apple's 2019 Hardware Event

Yesterday marked Apple’s annual media event, where they announced the next iterations...

Read the article