All projects

Custom Haptics for mobile apps [[Draft]]

Custom Haptics for mobile apps [[Draft]]

Mobile apps with fully custom feel

Mobile apps with fully custom feel

Author(s)

Michael Rothammer, Thomas Müller

Hapticlabs GmbH

,

2024

Build it yourself

Hapticlabs Studio, react-native-hapticlabs

Hapticlabs Studio, react-native-hapticlabs

Hapticlabs Studio, react-native-hapticlabs

Mobile development has come a long way. Beyond mere functionality, we invest lots of time and effort to build a strong brand, using unique, but cohesive color schemes, beautiful fonts, and bespoke icons. Similarly, certain events and interactions are enhanced through complementary audio cues, again tailored to not only inform, but also be distinctly recognizable as part of this brand.

These efforts eventually pay off substantially: Users immediately recognize the brand across products and domains, facilitating them in building trust and loyalty. An overall cohesive experience additionally signals quality, and can help inform user interactions.

However, one entire human sense is still widely missed out on in terms of branding: Our sense of touch. This is partly because the technology only recently started becoming very widespread. However, practically all modern smartphones feature hardware to output haptic signals. Currently, the most relevant limiting factor is the complexity and novelty of the technology, which can make it difficult to conceive, prototype, and implement meaningful custom haptics.

Haptics are encoded very differently across mobile devices: iPhones use the AHAP format, while some Android phones work with OGG files, with others relying on simple numerical arrays defining timing and intensity of haptic output. Although they all encode haptic signals, they have few things in common, including that they are hard (if at all possible!) to read and even harder to edit or even create from scratch.

We have designed Hapticlabs Studio to overcome these obstacles: It allows you to purely visually edit complex haptic effects while retaining a clear overview of the signal. At any time, you can feel the signal in real-time on your smartphone (no matter if iOS or Android) and even simulate different hardware qualities for Android devices.

Start by defining clearly what your goals are:

  • What emotion should the signal carry (positive / negative / neutral)?

  • What level of importance should the signal carry (info / warning / alert)?

  • What other modalities will accompany the signal (audio / visual / none)?

  • What characteristics should encode your brand in the signal (rhythm, frequency intervals, be creative!)?

Next, you can find starting points and inspiration by describing your signal to Hapticlabs AI, our GenAI assistant. It will propose one or multiple tracks to you. Explore these by playing them back on your mobile device, and find aspects that you find particularly convincing.

Based on these signals, you can start editing away. Check out this cheat sheet:

  • too strong - reduce intensity

  • too weak - increase intensity

  • too mechanical - reduce frequency

  • too rumbly or too organic - increase frequency

  • too hard - add intensity fade-ins and / or fade-outs, choose sine waveform

  • too soft - remove intensity fade-ins / fade-outs, choose square / sawtooth waveform

  • too loud (audibly) - choose sine waveform, try a different frequency (you might have hit the actuator's natural frequency)

  • too negative - try to include increasing intervals of frequency and intensity

  • too positive - try to include decreasing intervals of frequency and intensity

  • too important - decrease intensity

  • not important enough - increase intensity

  • accompanied by audio - add another track with an Audio Block and combine your haptic and Audio tracks to a stereo track to prototype their alignment.

Tune each block of your track to align with your defined goals. Make sure to test your adjustments individually after each adjustment. If you change too many parameters at once, it might be difficult to tell which one led to the changes in the outcome.

Once you arrive at a track that you feel like it achieves your goals, you can consider repeating the process to create another, alternative track (or even multiple). That is relevant because the next step in the process is user testing.

User testing is very important for haptic design in general, because haptics perception is very subjective: Some users might perceive the same haptic signal as more positive or more negative than you did while developing it, or associate it with a different meaning. Through user testing, you can validate your design and collect valuable feedback.

Here it pays off to have multiple tracks prepared: You can ask users how they feel different or which one aligns more closely with your goals (A/B testing). This can give you strong insights leading you closer to a result that aligns objectively with your goals (or at least from the majority's perspective).

After the user testing, it's back to the drawing board (Hapticlabs Studio): Take all the feedback you collected during the testing, and make according changes to your signals. This marks the beginning of a new iteration, which will lead to an updated set of tracks to again evaluate in user testing, and eventually, you will find a set of tracks that closely capture your design intent. Then you're ready for deployment.

For deployment, Android and iOS are very different. In the classical approach, you'd have to write three cases of code plus an OGG file for Android, and an AHAP file and its associated code for iOS. With Hapticlabs, we tried to make it as straightforward as possible: We built-in exporters for iOS and Android, and we created an open-source npm package to integrate your signals with a single statement of code in your react-native application.

And that's it. Your custom haptics are ready to ship and your customers are going to love it. What are your experiences with deploying custom haptics? Let us know on LinkedIn, X, or by shooting us a mail at mail@hapticlabs.io?

Mobile development has come a long way. Beyond mere functionality, we invest lots of time and effort to build a strong brand, using unique, but cohesive color schemes, beautiful fonts, and bespoke icons. Similarly, certain events and interactions are enhanced through complementary audio cues, again tailored to not only inform, but also be distinctly recognizable as part of this brand.

These efforts eventually pay off substantially: Users immediately recognize the brand across products and domains, facilitating them in building trust and loyalty. An overall cohesive experience additionally signals quality, and can help inform user interactions.

However, one entire human sense is still widely missed out on in terms of branding: Our sense of touch. This is partly because the technology only recently started becoming very widespread. However, practically all modern smartphones feature hardware to output haptic signals. Currently, the most relevant limiting factor is the complexity and novelty of the technology, which can make it difficult to conceive, prototype, and implement meaningful custom haptics.

Haptics are encoded very differently across mobile devices: iPhones use the AHAP format, while some Android phones work with OGG files, with others relying on simple numerical arrays defining timing and intensity of haptic output. Although they all encode haptic signals, they have few things in common, including that they are hard (if at all possible!) to read and even harder to edit or even create from scratch.

We have designed Hapticlabs Studio to overcome these obstacles: It allows you to purely visually edit complex haptic effects while retaining a clear overview of the signal. At any time, you can feel the signal in real-time on your smartphone (no matter if iOS or Android) and even simulate different hardware qualities for Android devices.

Start by defining clearly what your goals are:

  • What emotion should the signal carry (positive / negative / neutral)?

  • What level of importance should the signal carry (info / warning / alert)?

  • What other modalities will accompany the signal (audio / visual / none)?

  • What characteristics should encode your brand in the signal (rhythm, frequency intervals, be creative!)?

Next, you can find starting points and inspiration by describing your signal to Hapticlabs AI, our GenAI assistant. It will propose one or multiple tracks to you. Explore these by playing them back on your mobile device, and find aspects that you find particularly convincing.

Based on these signals, you can start editing away. Check out this cheat sheet:

  • too strong - reduce intensity

  • too weak - increase intensity

  • too mechanical - reduce frequency

  • too rumbly or too organic - increase frequency

  • too hard - add intensity fade-ins and / or fade-outs, choose sine waveform

  • too soft - remove intensity fade-ins / fade-outs, choose square / sawtooth waveform

  • too loud (audibly) - choose sine waveform, try a different frequency (you might have hit the actuator's natural frequency)

  • too negative - try to include increasing intervals of frequency and intensity

  • too positive - try to include decreasing intervals of frequency and intensity

  • too important - decrease intensity

  • not important enough - increase intensity

  • accompanied by audio - add another track with an Audio Block and combine your haptic and Audio tracks to a stereo track to prototype their alignment.

Tune each block of your track to align with your defined goals. Make sure to test your adjustments individually after each adjustment. If you change too many parameters at once, it might be difficult to tell which one led to the changes in the outcome.

Once you arrive at a track that you feel like it achieves your goals, you can consider repeating the process to create another, alternative track (or even multiple). That is relevant because the next step in the process is user testing.

User testing is very important for haptic design in general, because haptics perception is very subjective: Some users might perceive the same haptic signal as more positive or more negative than you did while developing it, or associate it with a different meaning. Through user testing, you can validate your design and collect valuable feedback.

Here it pays off to have multiple tracks prepared: You can ask users how they feel different or which one aligns more closely with your goals (A/B testing). This can give you strong insights leading you closer to a result that aligns objectively with your goals (or at least from the majority's perspective).

After the user testing, it's back to the drawing board (Hapticlabs Studio): Take all the feedback you collected during the testing, and make according changes to your signals. This marks the beginning of a new iteration, which will lead to an updated set of tracks to again evaluate in user testing, and eventually, you will find a set of tracks that closely capture your design intent. Then you're ready for deployment.

For deployment, Android and iOS are very different. In the classical approach, you'd have to write three cases of code plus an OGG file for Android, and an AHAP file and its associated code for iOS. With Hapticlabs, we tried to make it as straightforward as possible: We built-in exporters for iOS and Android, and we created an open-source npm package to integrate your signals with a single statement of code in your react-native application.

And that's it. Your custom haptics are ready to ship and your customers are going to love it. What are your experiences with deploying custom haptics? Let us know on LinkedIn, X, or by shooting us a mail at mail@hapticlabs.io?

Mobile development has come a long way. Beyond mere functionality, we invest lots of time and effort to build a strong brand, using unique, but cohesive color schemes, beautiful fonts, and bespoke icons. Similarly, certain events and interactions are enhanced through complementary audio cues, again tailored to not only inform, but also be distinctly recognizable as part of this brand.

These efforts eventually pay off substantially: Users immediately recognize the brand across products and domains, facilitating them in building trust and loyalty. An overall cohesive experience additionally signals quality, and can help inform user interactions.

However, one entire human sense is still widely missed out on in terms of branding: Our sense of touch. This is partly because the technology only recently started becoming very widespread. However, practically all modern smartphones feature hardware to output haptic signals. Currently, the most relevant limiting factor is the complexity and novelty of the technology, which can make it difficult to conceive, prototype, and implement meaningful custom haptics.

Haptics are encoded very differently across mobile devices: iPhones use the AHAP format, while some Android phones work with OGG files, with others relying on simple numerical arrays defining timing and intensity of haptic output. Although they all encode haptic signals, they have few things in common, including that they are hard (if at all possible!) to read and even harder to edit or even create from scratch.

We have designed Hapticlabs Studio to overcome these obstacles: It allows you to purely visually edit complex haptic effects while retaining a clear overview of the signal. At any time, you can feel the signal in real-time on your smartphone (no matter if iOS or Android) and even simulate different hardware qualities for Android devices.

Start by defining clearly what your goals are:

  • What emotion should the signal carry (positive / negative / neutral)?

  • What level of importance should the signal carry (info / warning / alert)?

  • What other modalities will accompany the signal (audio / visual / none)?

  • What characteristics should encode your brand in the signal (rhythm, frequency intervals, be creative!)?

Next, you can find starting points and inspiration by describing your signal to Hapticlabs AI, our GenAI assistant. It will propose one or multiple tracks to you. Explore these by playing them back on your mobile device, and find aspects that you find particularly convincing.

Based on these signals, you can start editing away. Check out this cheat sheet:

  • too strong - reduce intensity

  • too weak - increase intensity

  • too mechanical - reduce frequency

  • too rumbly or too organic - increase frequency

  • too hard - add intensity fade-ins and / or fade-outs, choose sine waveform

  • too soft - remove intensity fade-ins / fade-outs, choose square / sawtooth waveform

  • too loud (audibly) - choose sine waveform, try a different frequency (you might have hit the actuator's natural frequency)

  • too negative - try to include increasing intervals of frequency and intensity

  • too positive - try to include decreasing intervals of frequency and intensity

  • too important - decrease intensity

  • not important enough - increase intensity

  • accompanied by audio - add another track with an Audio Block and combine your haptic and Audio tracks to a stereo track to prototype their alignment.

Tune each block of your track to align with your defined goals. Make sure to test your adjustments individually after each adjustment. If you change too many parameters at once, it might be difficult to tell which one led to the changes in the outcome.

Once you arrive at a track that you feel like it achieves your goals, you can consider repeating the process to create another, alternative track (or even multiple). That is relevant because the next step in the process is user testing.

User testing is very important for haptic design in general, because haptics perception is very subjective: Some users might perceive the same haptic signal as more positive or more negative than you did while developing it, or associate it with a different meaning. Through user testing, you can validate your design and collect valuable feedback.

Here it pays off to have multiple tracks prepared: You can ask users how they feel different or which one aligns more closely with your goals (A/B testing). This can give you strong insights leading you closer to a result that aligns objectively with your goals (or at least from the majority's perspective).

After the user testing, it's back to the drawing board (Hapticlabs Studio): Take all the feedback you collected during the testing, and make according changes to your signals. This marks the beginning of a new iteration, which will lead to an updated set of tracks to again evaluate in user testing, and eventually, you will find a set of tracks that closely capture your design intent. Then you're ready for deployment.

For deployment, Android and iOS are very different. In the classical approach, you'd have to write three cases of code plus an OGG file for Android, and an AHAP file and its associated code for iOS. With Hapticlabs, we tried to make it as straightforward as possible: We built-in exporters for iOS and Android, and we created an open-source npm package to integrate your signals with a single statement of code in your react-native application.

And that's it. Your custom haptics are ready to ship and your customers are going to love it. What are your experiences with deploying custom haptics? Let us know on LinkedIn, X, or by shooting us a mail at mail@hapticlabs.io?

© Hapticlabs 2024

Stay in the loop

Join our mailing list for occasional newsletters and the latest updates.

© Hapticlabs 2024

Stay in the loop

Join our mailing list for occasional newsletters and the latest updates.

© Hapticlabs 2024

Stay in the loop

Join our mailing list for occasional newsletters and the latest updates.