Table of Contents
About the Project
I often find myself struggling with how to design and develop haptic feedback efficiently. I am unsure of what type of feedback to use and struggle to communicate my vision to others. This project aims to tackle this exact issue and provide a solution that will streamline the process.
The solution is a prototype that includes both an open-source module published as an npm package and a mobile application. The developed package introduces a new method for developing vibrotactile impact patterns in React Native. This approach will help designers and developers alike to create more dynamic and engaging applications. While it may not be groundbreaking, it represents a step forward in React Native development.
With the application, designers can create custom vibrotactile impact patterns, export them, and seamlessly deliver them to the engineers responsible for developing the application. The patterns can be easily integrated into any React Native application that uses the developed npm package
"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
World Wide Web Consortium (W3C) defined an API that allows for a method to access the vibration mechanism of the hosting device. However, at the time of writing, iOS browsers don't implement the API.
expo-haptics, and react-native-custom-haptic-feedback.Both of the packages provide a subset of functionalities the iOS and Android native APIs offer. However, they offer only an intersection of vibrotactile impacts that are felt similarly on both modern Android and iOS smartphones.
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
When it comes to developing fictitious users, two popular methods are user personas and extreme characters. Both techniques involve giving the user a name, age, occupation, and personality traits. However, extreme characters take things a step further by describing a user with an exaggerated personality. Think of it as creating a caricature of a user, where their quirks and tendencies are amplified for effect. It's a fun way to approach user research and can yield some unexpected insights.
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 systtem and the design process. Has to maintain the design system, be aware of how much of it is implemented inside the codebase, and still has to work on other projects and hold design meetings.
- The most senior designer in the company.
- Owns the design system—developed it and is currently maintaining it.
- 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 scenario of a situation all the personas interact in. It describes how would the personas approach a certain task with the technology available today. It consists of a realistic setting, date, time, and context.
The scenario was an interaction between the personas while developing a feature that required vibrotactile feedback. The method helped in visualizing the design problem.
This picture is exaggerated for effect—the scenario is not as long
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 is a method similar to the current scenario method. It is a scenario of a situation that includes all the personas using the designed system. It builds upon the situation from the current scenario and imagines how would the personas interact with the new technology. The method helps identify gaps in the design concept, and to generate new ideas.
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 is comprised of two integral components that work in tandem to provide a seamless experience. The first component is a mobile application that facilitates the creation, modification, and exporting of vibrotactile impact patterns. The second component is a tool that enables the use of exported patterns within a React Native application.
Throughout the project, I developed two prototypes to test the functionality of the tool. The first prototype focused solely on the pattern creation application, while the second prototype was an integrated version of the entire system.
The culmination of the project is the final prototype, which consists of two key components that work seamlessly together to allow users to create custom vibrotactile impact patterns.
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 and is available as an open-source package in the npm database.I also designed and developed a tool that allows for the generation and preview of custom vibrotactile impact patterns. It is an Android and iOS application written in React Native with TypeScript. The application consists of two main parts—the pattern creation tool, and an interactive area with examples of custom vibrotactile patterns.
Conclusion
The mobile application prototype that I developed will be released on the Apple App Store and Google Play Store. This app will enable npm package users to test the package's features and easily develop vibrotactile impact patterns for their mobile applications.
Thank you for reading!
