Implement Haptic feedback using Feedback Generators in iOS app

Photo by freestocks on Unsplash

What is Haptic feedback?

The word Haptic means something relating to the sense of touch.

To add an extra dimension to the user experience of your app you can use the haptic feedback to provide a tactile response like vibration or sense of pressure on tap of any UI element that reinforces actions or events.

While many system-provided interface elements (for example, pickers, switches, and sliders) automatically provide haptic feedback, you can use feedback generators to add your own feedback to custom views and controls.

Playing haptics can engage people’s sense of touch & bring their familiarity with the physical world.

How it works?

Haptic feedback generates predefined vibration using a Taptic engine, a piece of hardware embedded in the device

It is important to note that haptic feedback is not available on every iphone since not every device has a taptic engine. As a developer we do not need to worry about this, the system handles this gracefully. If the device doesn’t have a taptic engine, nothing happens.

If you want to include sound along with the haptic feedback, you need to manually play the sound and sync it with the haptics.

How to integrate?

With the help of the UIFeedbackGenerator class you can easily integrate haptic feedback in your app. It is available in UIKit from iOS 10 and above versions. UIFeedbackGenerator is an abstract superclass for all feedback generators.

From Apple Docs: https://developer.apple.com/documentation/uikit/uifeedbackgenerator

Don’t subclass or create instances of this class yourself. Instead, instantiate one of the provided concrete subclasses

Types of feedback along with examples:

a. UINotificationFeedbackGenerator

It lets you generate feedback based on three system events: error, success and warning.

Consider the Naukri App where we display a list of jobs and the user can save or bookmark a job. On clicking the save button if the application is not able to process the user’s request, then we might want to show an error to the user using this feedback.

Another example can be the pull-to-refresh feature where we can trigger the success haptic feedback when UI is successfully refreshed.

@objc func saveJobButtonClicked(sender: CustomSwitch){
        print("saveJobButton Clicked")
        
        let notificationFeedback = UINotificationFeedbackGenerator()
        notificationFeedback.notificationOccurred(.success)
    }

b. UIImpactFeedbackGenerator

It is used to indicate that physical impact has occurred. For example, you might trigger impact feedback when a user interface object collides with something or snaps into place.

It lets you generate light, medium, and heavy effects to provide a “physical metaphor that complements the visual experience.”

let impactFeedback = UIImpactFeedbackGenerator(style: .light) 
impactFeedback.impactOccurred()

c. UISelectionFeedbackGenerator

Use selection feedback generators to indicate a change in selection.

For example a checkbox button or an alert switch to enable or disable some events.

@objc func toggleButtonClicked(sender: CustomSwitch){
        print("toggleButton clicked")
        
        let selectionFeedback = UISelectionFeedbackGenerator()
        selectionFeedback.selectionChanged()
    }

Step by step process

To use a feedback generator, following steps are required:

a. Instantiating the generator

To create feedback, you must first instantiate one of the UIFeedbackGenerator class’s concrete subclasses (UIImpactFeedbackGenerator, UISelectionFeedbackGenerator, or UINotificationFeedbackGenerator).

// Initialize Selection Feedback Generator
let feedbackGenerator = UISelectionFeedbackGenerator()

b. Preparing the generator (optional)

feedbackGenerator.prepare()

Preparing the generator can reduce latency when triggering feedback. This is particularly important when trying to match feedback to sound or visual cues.

Calling the generator’s prepare() method puts the Taptic Engine in a prepared state. To preserve power, the Taptic Engine stays in this state for only a short period of time (on the order of seconds), or until you next trigger feedback.

c. Triggering feedback

Each feedback generator subclass has a unique triggering method. To trigger feedback, call the appropriate method: impactOccurred(), selectionChanged(), or notificationOccurred(_:).

feedbackGenerator.selectionChanged()

Note that calling these methods doesn’t play haptics directly. Instead, it informs the system of the event. The system then determines whether to play the haptics based on the device, the application’s state, the amount of battery power remaining, and other factors.

d. Releasing the generator (optional)

If you no longer need a prepared generator, remove all references to the generator object and let the system deallocate it. This lets the Taptic Engine return to its idle state.

feedbackGenerator = nil

Few important guidelines from Apple

• Use of haptics should be consistent throughout the app.
• Always use feedback for its intended purpose. Don’t select a haptic because of the way it feels.
• The source of the feedback must be clear to the user. For example, the feedback must match a visual change in the user interface, or must be in response to a user action. Feedback should never come as a surprise.
• Avoid overusing haptics. Overuse can cause confusion and diminish the feedback’s significance.
• Make haptics optional. Let people turn off or mute haptics if they wish, and make sure people can still enjoy your app without them.

For additional guidance on when and how to use feedback generators, you can check Human Interface Guidelines.

You can try and feel all possible haptics here: https://developer.apple.com/design/human-interface-guidelines/patterns/playing-haptics

Thank you so much for reading…!

References:

Apple Developer Documentation

Playing haptics