Haptic UX — The Design Guide for Building Touch Experiences

Designing touch experiences that drive the next generation of interactive products

Let’s explore the world of haptics! We’ll dive into how product designers and technologists can build experiences that leverage our sense of touch.

The field of haptics is one of the fastest growing, yet one of the most understudied fields in user experience. As our everyday device interactions shift from keyboard+mouse to phones, car entertainment systems, and everyday objects, the way we interact and receive feedback from the physical world becomes evermore important.

This guide will give you a basic overview of haptics, their application in UX, and best practices.

In this guide

What are haptics? Building Haptics The Heuristics of Haptics Designing a Haptic Enabled Experience Real-World Examples Take Aways

1. What are haptics?

Haptics falls under the field of kinaesthetic communication, which focuses on tactile contact as a form of communication. Tactile feelings are salient and pervasive. Imagine holding a child for the first time, hugging a friend you haven’t seen in awhile, or feeling your phone vibrate rapidly in your pocket. These sensations generate very real feelings that stick with us.

When applied to digital or IoT interfaces, we can define haptics in a few ways:

Any technology that can create an experience of touch by applying forces, vibrations, or motions to the user (Source).

The use of electronically or mechanically generated movement that a user experiences through the sense of touch as part of an interface (Merriam).

Haptics engage people’s sense of touch to enhance the experience of interacting with onscreen interfaces (Apple).

Synthesizing these definitions together, we can frame the following definition of haptics and apply it to user experience:

Haptic UX harnesses tactile feedback to deliver timely and useful information through the experience of touch.

Some examples of real-world haptics include:

A successful payment on a mobile device which triggers a brief feedback jolt.

An error state when a password is incorrect.

A special gesture that unlocks a feature.

Playing a mobile racing game.

Apple Taptic Engine

2. Building Haptics

Most popular mobile devices have system haptics built into them. These are standard patterns that designers and developers can leverage to enhance experiences. You’ll also see haptics used in other ‘smart’ devices: car infotainment systems, tablets, watches, fitness bands, and VR gloves.

But, let’s remember: the purpose of leveraging haptics is to convey useful information:

Something went right or wrong

Something happened or didn’t happen

Hey! Look at this.

To build a haptic that conveys appropriate information requires us to understand how people interpret vibration patterns — in other words, what are the accepted physical metaphors for success, error, or neutral states?

Haptics are Physical Metaphors

A physical metaphor is essentially how a person interprets the semantic meaning of a physical interaction. These metaphors are learned overtime and typically mirror learned auditory metaphors. Physical vibrations inherently emit sound and our brains try to make sense of those patterns by comparing it to our empirical experiences.

Building a Physical Metaphor

To build a physical metaphor with haptics, we can leverage the interplay of sharpness and intensity to convey information to the user (Apple Haptics).

Sharpness — The perceived rigidity or hardness of the impulse. The more rigid an impulse, the more distinctly it can be felt by the user. The less rigid an impulse, the more subtle the differences between multiple impulses (i.e. more difficult for the user to detect patterns).

Increase the sharpness to convey important semantic pattern feedback, like correctly depositing a check in your bank app.

Reduce the sharpness to convey subtle feedback for continuous experiences, like pressing a gas pedal in a mobile game.

Intensity — The perceived strength or magnitude of the impulse. The more intense an impulse, the stronger the tactile sensation is for the user.

Increase the intensity to provide salient feedback for transient events , like successfully or unsuccessfully paying for an item.

, like successfully or unsuccessfully paying for an item. Decrease the intensity to provide complementary feedback for neutral events, like adding an item to a shopping card or opening an app.

When we deconstruct haptic feedback further, we can adjust the granularity, amplitude, and timbre (pronounced: Tam-br) to connote different semantic meaning for transient and continuous events.

Granularity — The frequency of impulses and their spacing between each other. The more granularity, the more rapid the impulses.

Amplitude — The intensity and magnitude of the impulse. The higher the amplitude, the bigger the impulse.

Timbre — The sharpness / clarity with which impulses can be felt. The higher the sharpness, the more distinctly each impulse can be perceived.

Designers can thereby adjust an impulse’s granularity, amplitude, and timbre to complement both transient and continuous events.

Transient Events — Short-lived taps or vibrations that are coupled with a defined action (ex. clicking a button that yields a quick impulse). For these events, the impulse’s semantic meaning and fine-tuning become much more important.

Continuous Events — Longer-lived vibration patterns that can last multiple seconds or more (ex. a racing game that mimics the roughness of the road or a long celebration animation in a message).

Testing Haptic Patterns

To get a better feel of testing haptic and vibration patterns, here are some helpful resources and apps:

Vibration App — A true vibration spectrum analyzer using the built in accelerometers and gyroscope inside the iPod Touch and the iPhone.

Core Haptics (For Devs) — Compose and play haptic patterns to customize your iOS app’s haptic feedback.

Android Haptics (For Design) — Haptic guidelines to enhance interactions and convey useful information to users through the sense of touch.

Android Haptic Constants (For Devs) — Constants to be used to perform haptic feedback effects on Android devices.

Haptic Feedback Generators (For Devs) — Explore haptic patterns generated by Apple’s Tactic Engine (by Jesus Guerra)

Now, let’s explore the heuristics of haptics.

3. The Heuristics of Haptics

Here are some basic guidelines on when and how to incorporate haptics into your experience.

Use haptics to enhance usability

Haptics should be leveraged to enhance feedback and convey useful information to your users. They should not be leveraged to decorate interactions or provide feedback that is not necessary for the experience. For example, use haptic feedback to indicate a layered or complex gesture, not for normal button press interactions.

Build a clear cause and effect feedback loop

Haptics should reinforce a clear cause and effect relationship. A haptic impulse should be immediately timed with a specific action. The more lag, the more disconnected the experience becomes. For example, when I click “Deposit Check”, then I should immediately get a neutral impulse that affirms my selection. There should be no delay.

Haptics should serve as complementary, not primary, feedback

Do not rely on haptics alone to convey feedback to your users. Many devices also allow users to toggle haptics on or off, so it is imperative that primary feedback be visual or a compilation of multiple feedback mechanisms. For example, when my check is successfully deposited, then I should see a clear visual success state, complemented by a haptic and/or auditory cue.

Use haptics purposefully and sparingly

Be very intentional with when and where you incorporate haptics in your app. Haptics can be distracting, confusing, and disruptive if used too frequently. They should be used when there is a clear purpose with a user benefit. For example, triggering a haptic impulse for every button press in an app would be distracting and mitigate the effectiveness of the haptic.

Be consistent by leveraging system defaults

When designing for standard app experiences, harness the OS haptic system defaults. Your users will be accustomed to system haptic patterns, especially those with semantic meanings: success, failure, or neutral feedback. There will be special use cases, especially with mobile games, where you can leverage custom haptics to enhance the experience.

Mitigate unintentional impacts

When a device triggers a haptic feedback response, it will vibrate. This vibration may disrupt other experiences, like trying to focus a camera or typing in an input field. Be cognizant of how the haptics of your app will interact with other app or device experiences.

Maintain battery life

When a device triggers a haptic feedback response, it will vibrate. This vibration consumes battery, especially when coupled with an intense mobile game that leverages haptics often. Allow the user to toggle haptics off or reduce the frequency of haptic feedback to help prolong battery life.

4. Designing a Haptic Enabled Experience

Here are some steps to determine when and how to incorporate haptics into your experience.

A. Identify a salient user need — Ensure that the use case you’re examining addresses a salient user need. This should be a critical task that solves an important user problem.

Ex. Depositing a check on a mobile banking app.

B. Deconstruct the user behavior — Conduct a behavioral analysis of the individual actions that a user takes to complete the behavior. What does the user need to do to successfully complete the task? What must they know? What actions must they take?

Ex. When depositing a check on a mobile banking app, I need to (1) open the app, (2) click a button to deposit, (3) click to take a photo, (4) add the $ amount, (5) take the photo, (6) confirm the photo, (7) confirm the deposit.

C. Identify the different states of feedback — Throughout the process, identify what important and useful information the app must convey to the user. What feedback does the user need to move to the next step?

Ex. When the photo of the check is successfully uploaded, then I expect some sort of visual or auditory confirmation that it was a success.

D. Analyze the haptic need — Ask the question: will adding haptics provide useful, intentional, and relevant information for the user? What information are you looking to convey? What other forms of feedback will the user get for the same action? (Audio, visual, touch)

Ex. When the deposit photo is taken and being uploaded to the app, I am taken through multiple screens (camera and app screens), which makes it difficult to know when the check upload is complete. Due to the visual disjointedness, a haptic could provide supplemental validation that the action was successful.

E. Select & test the haptic — After identifying the use case for a haptic, conduct an A/B test to see if the addition of the haptic aids usability. Harnessing our haptic heuristics, select a semantically-aligned haptic that complements the user action without being disruptive or unnecessary.

Ex. When a check photo is successfully uploaded, I feel a small vibration in my phone, which complements a visual checkmark on the screen. This makes me feel more confident that the photo was successfully uploaded.

5. Real-World Examples

Haptics to indicate directionality without users having to look.

In this example, Liam Tucker demonstrates the use of haptic feedback to indicate a major directional turn — either to prompt the user for attention or provide a feedback impulse that can indicate right or left.

Haptics to provide feedback for car infotainment systems.

When people are driving, they have to divert their attention to multiple things at once: the road, passengers, radio, and other ancillary noises. Hence, it is difficult to know when an action is successful on a car touchscreen. Haptics can provide feedback that the action has been successfully registered by the system, rather than relying on visual or auditory cues alone.

Cadillac Cue System — Haptic Feedback

Haptics to indicate the activation of hidden features

Nuanced gestures and hidden affordances are particularly difficult to accurately convey to your users. Haptics can help provide feedback that a hidden feature has been successfully activated.

iPhone hidden feature to unlock a scroll

Haptics for immersive VR gaming

With more advanced tactile accessories, VR gaming feedback systems are evolving to incorporate force and torque cues to augment the reality of tactile feedback.

VR Controller Force and Torque Mechanics

Haptics for accessibility

For those who have visual or auditory impairments, haptics can serve as the primary mechanism for feedback. In this example, a haptic pattern is used to indicate that the user must turn right ahead.

Haptics can also be leveraged when screens are positioned away from the eye line. For example, placing your watch on a credit card scanner to use Apple Pay, whereby the haptic will indicate a successful transaction.

CBC.ca

6. Take Aways

The purpose of haptic UX is to harness tactile feedback to deliver timely and useful information through the experience of touch.

Haptic feedback should be relevant, timely, semantic, and complementary. It should solve a salient user problem and be used judiciously to avoid distracting and annoying the user.

Haptic UX is becoming an essential capability for building more immersive and usable experiences. IoT technologies, touch screens, VR gloves, and wearables are increasingly harnessing haptics to elevate touch experiences to elucidate our visually cluttered and loud world.

The next generation of experiences, especially voice user experiences, will require product teams to create a language of touch — a way for us to enhance tactile experiences by evoking emotion and complex comprehension.