Haptic Teardown #1 — Volume Slider

Welcome to a series of 3 min reads where I tear down the best haptic feedback patterns and why it is so important. To maximize your learning the teardowns will be focused on features you can test on your phone.

Thuyrannosaurus
Bootcamp
4 min readNov 5, 2020

--

Cover image with an image with the iPhone Volume slider

It’s fascinating that we get these subtle haptics all day long, but still, they are quite hard to recall. You definitely notice them, but they don’t stand out. Why is that? Are they unimportant? Is it bad design? Is it unnecessary fancy tech that no one really cares about?

An extra level of feedback

Haptics is never something you really experience on its own. It’s always contextual, always supporting another action. Such actions like when you tap a button or complete a shopping order. Or you’ve filled in the wrong password and the system is notifying you that you’ve made a mistake. That’s what haptics are really good at. Notifying you of something that happened on your screen. Why is that is important? Well, it’s about giving people a confirmation of their actions.

In the physical world, when you press a button, you clearly understand that you’ve tapped it because you physically pressed the button and it shifted. Maybe it even made a click sound. This is something we have all known since we were infants.

A button on top of a physical alarm clock is being pressed

However, with digital buttons, you don’t get that same sensation or feedback when you tap a flat button. That’s why we might utilise concepts like animation, sound effects, and haptics to give the illusion that the button is pressed. This is why we don’t really remember them that well. They are secondary to the action and are there to enhance the experience.

An animation of an animated button being pressed down

The iOS Volume Slider

A GIF of a piece of Tuna sushi

Lets’s Dive in! To maximize learning, I recommend that you test out the volume slider while reading. And for those extracurricular kids, I encourage you to try out the haptics in question in the iOS app Haptique to feel the haptics individually and to really get to know them.

Imagine one of those premium pieces of sushi that Jiro from “Jiro Dreams of Sushi carefully prepares. Fresh tuna and rice. It consists of only two main ingredients. But yet, it can taste so much, so clean and so delicious. To me, this is how I see the volume slider haptic pattern. Premium and delightful. It only consists of a Selection haptic and a Soft haptic. Two very subtle and small ingredients that together create a great and highly functional experience.

  1. Hold in the volume up button on the side of your iPhone until it reaches the top.
  2. Now do the same with the volume down button.
  3. Repeat these a couple more times, but look away from your phone while doing it.

Did you feel it? A lot of small haptics leading up to the top, and then another slightly more intense haptic?

An illustration of the two haptics that are being used

This is Apple giving you some physical feedback on what is happening on screen. For each increment you increase the volume with, you feel a tiny haptic, but at the end you get a more powerful one, indicating you can’t go further in this direction. It’s small and subtle, but so efficient. And as you’ve already found out, you don’t even need to look at the screen to understand this.

Animation teardown of the haptic pattern of the volume slider
I’ve made this illustrational GIF so that you can see what is actually going on every time you adjust the volume.

3 Key takeaways

  • Haptics are super subtle little vibrations that are there to enhance the interaction.
  • Haptics are one of many tools we can use to give the user confiramtion.
  • The volume slider is fairly simple, but very effective.

Resources:
- Apple Human Interface Guidelines
- Download
Haptique — A guide to haptic feedback

Next Haptic Teardown: FaceID + Silent Switch

I’ll tackle the FaceID failure haptic and the silent switch in the upcoming Haptic Teardown. Comment below if you have suggestions for patterns you want me to tear down?

--

--

Thuyrannosaurus
Bootcamp

Ambitious product designer based in Oslo • Working with apps since 2009 • Writing about my curiosities, UX, UI and Micro interactions. Currently at FINN.no