Table of Contents
About the Project
Designing haptic feedback in React Native is slow: it is hard to pick the right feedback, and harder still to describe it to others. This project is a prototype that speeds that up.
It pairs an open-source npm module with a mobile app. The module adds a practical way to build vibrotactile impact patterns in React Native. Designers compose patterns in the app, export them, and hand them to engineers. Any React Native app that uses the package can play those patterns.
"Haptics" vs "Vibrotactile Feedback"
Although the project focuses on vibrotactile feedback, the industry often uses the terms ”haptic feedback”, or simply ”haptics” to refer to the term. However, the terms are not precise as haptic feedback includes any feedback involving the sense of touch. For easier understanding, and to respect the external consistency, I use the industry terms for the created prototype and its documentation.
Existing Vibration APIs
The W3C defines a Vibration API for accessing the device motor. At the time of writing, iOS browsers do not implement it.
expo-haptics, and react-native-custom-haptic-feedback.Both wrap only part of the native APIs. In practice they expose a shared subset: impacts that feel comparable on current Android and iOS devices.
Design Process
The design process consisted of four phases, each aiming to answer one of the following questions:
- Who is the user?
- What is possible?
- What should it be?
- Does it work?
Who is the user?
Interviews
To gain insight into the world of vibrotactile feedback, I conducted interviews with four talented product designers. While two of them had experience designing vibrotactile interfaces, the other two brought a fresh perspective to the table.
It was useful to hear from the interviewees who hadn't worked on haptic design before. They described instances when they came across applications that utilized it, and as product designers, they made a point to archive interesting interactions and UI elements for inspiration.
The designers with experience in vibrotactile feedback had a wealth of knowledge to share. They explained the challenges they faced when trying to communicate their desired vibrotactile pattern to developers. In some cases, they would attempt to mimic the patterns with sounds, while others turned to documentation as a last resort.
The table below is a list of breakdowns, workarounds, and user innovations found during the interviews.
User Personas and an Extreme Character
Two common ways to sketch users are personas and extreme characters. Both get a name, age, job, and traits. Extreme characters exaggerate one angle on purpose, like a caricature. That exaggeration can surface edge cases normal personas miss.
Emilie
, 33
Senior Front End developer
- React Native expert.
- Knows the code base very well, and is familiar with its limitations.
- Has never worked with vibrotactile feedback in a React Native application, but is aware what is possible.
Martin
, 27
Junior Product designer
- Familiar with the design system, but often needs to design components and screens that the design system does not support.
- Works on one product at the time.
- Not familiar with development
- Has never designed for vibrotactile feedback
Nathalie
, 38
Senior Product designer
- Extreme: In charge of many aspects of the design system and the design process. She maintains the design system, tracks how much of it ships in code, and still runs other projects and design meetings.
- The most senior designer in the company.
- Owns the design system: she built it and keeps it current.
- Used to work as a front-end developer, but switched to design 10 years ago.
- Has limited experience working with vibrotactile feedback.
Current scenario
The current scenario is a short story all three personas share. It shows how they would handle one task with today’s tools: setting, time, and context stay realistic.
It follows the same three people shipping a feature that needs vibrotactile feedback. The story made the friction concrete.
Exaggerated for effect; the real scenario is shorter.
User Profile
Analyzing the results of the completed methods, I defined a user profile. The user profile represents future users of the designed system.
The system's users work on a product that requires fast delivery of new features (e.g. a startup). They work on the user interface of a mobile application written in React Native. The allocated time they spend developing a feature rarely accounts for the development of non-visual interfaces. With limited time, they need a solution for developing vibrotactile feedback that doesn't require extensive research of the technology.
What is Possible?
Brainstorming
Design Dimensions and Design Space
The key ideas generated through the brainstorming sessions, or found through user research have certain attributes or dimensions. For example, increasing the font size helps with the accessibility of the system, while creating a custom palette improves its personalization. The defined design dimensions are arranged into a design space.
Defining a design space helps visualize the key ideas, and observe which area they focus on. It helps find gaps they don't fill. Moreover, ideas can be shifted in any direction in the design space to help discover how they change in the context of another dimension.
I categorized the ideas with the help of the design dimensions and design space. The design space is shown in the image below. Shifting ideas along the dimensions of the design space resulted in more ideas.
Design Concept
The methods resulted in a design concept that would be worked on during the next two phases of the design process.
The system will be a tool that allows designers to design vibrotactile impact patterns. Vibrotactile impact patterns are sets of vibrotactile impacts with various strengths with short pauses between each impact. The tool allows choosing the impact strength, and the length of the pause between each impact. The created pattern can be exported and pasted into the application code.
What Should it Be?
Future Scenario
The future scenario uses the same cast and situation as the current one, but adds the new tool. It shows how they would work with the prototype and where the concept still breaks.
The scenario I created used the situation from the current scenario as the basis. The only change I added was the new fictitious tool imagined from the design concept. The future scenario highlighted potential breakdowns.
Prototype
The tool has two parts: a mobile app to author patterns, and a way to run those patterns inside React Native.
I built two prototypes along the way: first the editor only, then the full loop.
Does it Work?
Improvements
After showcasing the prototype to the team of designers, I received valuable feedback that allowed me to identify areas of improvement for the tool.
-
I noticed that not all of the patterns created were production-ready. While patterns can be saved by pasting them inside the application code, this can be time-consuming and not efficient during the early stages of design. As a result, I plan to update the tool to allow designers to save created patterns for future reference.
-
Another issue that the team pointed out was the inability to compare created vibrotactile patterns. Since only one pattern can be created at a time, the participants found it difficult to compare them effectively. To solve this problem, I plan to add a feature to the tool that allows designers to compare saved patterns side-by-side.
-
Lastly, while the tool relies on the universal clipboard to copy and paste strings between iOS and macOS devices, it was pointed out that this process could be improved. To address this issue, I plan to implement a feature that helps with easier exporting of the created patterns.
Implementation
The available packages for React Native only support pre-determined vibrotactile impact patterns such as success, warning, and danger notifications, and do not allow for the creation of custom patterns. The pattern of impacts and pauses is determined by the operating system of the device the pattern is played on.
react-native-custom-haptics on npm.I also shipped a React Native (TypeScript) app for Android and iOS to sketch and preview patterns. It has the editor and a playground of sample patterns.
Conclusion
The companion app will ship on the App Store and Play Store so people can try the package and author patterns without wiring everything by hand.
Thank you for reading!
