This article introduces how Ctrip improves user experience through vibration feedback. The article elaborates on the standardized development and scenario-based verification process of vibration feedback in applications, and through standardizing vibration components and data verification, Ctrip has successfully enhanced user operation perception in multiple business scenarios, providing tactile experience solutions for other enterprises to learn from.
The project provides an in-depth analysis of vibration feedback standards in applications and the improvement effect of experience, and provides reusable enterprise-level haptic experience solutions through the dual-track mechanism of “standardized component development + scenario-based data verification”.
01. Background
When it comes to the application of vibration, the first thing that comes to everyone’s mind may be some game products. In gaming products, from the subtle touch of raindrops to the real recoil of weapon shots, haptic feedback greatly enhances the immersion of interactions.
In recent years, with the increasing value of haptic feedback technology in user experience, the application of vibration has extended from immersive scenes in the gaming field to mobile application ecology.
Mainstream manufacturers continue to upgrade vibration hardware and API capabilities, opening up innovation space for developers to experience multi-dimensional sensory experiences. In OTA applications, adding vibration feedback to suitable contacts has been proven to effectively enhance user operation perception. Needless to say, the application of vibration in applications is also an opportunity to improve the experience.
To systematically unlock this potential, Ctrip has launched a vibration standardization project within the group to improve the vibration experience globally: to ensure that the vibration effect is consistent and accurately matched to the application timing. The project is led by the design team, and is promoted by multiple functions, and is implemented through a dual-track parallel task line:
- Standardized component line: The design specification team works with the component technical team to adopt the idea of normalization/componentization. Establish a reusable vibration component library to enable agile calls across business lines and ensure consistent vibration effects.
- Scenario-based verification line: Each business line explores the deployment of contacts based on real user journeys, precipitates best practices through data feedback, and finally achieves accurate application timing.
After 10 years of interaction design, why did I transfer to product manager?
After the real job transfer, I found that many jobs were still beyond my imagination. The work of a product manager is indeed more complicated. Theoretically, the work of a product manager includes all aspects of the product, from market research, user research, data analysis…
View details >
02. Consistency of vibration effect
To apply vibration correctly, we must first understand the meaning of vibration.
Just as in interface design, different colors are used to express different meanings, and different vibrations can also convey different meanings, such as:
- A short, light instantaneous vibration is often used to indicate that an action has taken effect or reached a critical point, and when we perform some check-and-switch operations in the iOS system, this type of vibration feedback will be triggered.
- A short vibration with a low to high amplitude can convey a positive message, which can be used to express the operation result as success, a typical case is when the AppStore successfully performs face ID recognition.
Based on the different meanings of vibration, we have selected the 5 vibration patterns with the most possible applications from Apple’s Interpersonal Design Guide and named them more intuitively, namely:
- Basic operation feedback: An instantaneous vibration that matches an operation to indicate that an action has taken effect or reached a critical point.
- Success tip: The amplitude is from low to high, conveying a positive message and using it to express the result of this operation as a success.
- Warning tip: The amplitude is from high to low, transmitting a negative message to express that this operation triggered a negative warning.
- Error prompt: The amplitude first increases and then decreases, and the frequency is sudden, which is used to express that an error occurred in this operation, and the result is failure.
- New message prompt: A continuous vibration that cooperates with the push of new messages to indicate that the user has received a new message.
In terms of implementation, these standard modes can be quickly invoked in the iOS system. Android does not have the same vibration mode available, so how to break down the barriers between the technology stack is another challenge faced by design and development teams.
To solve this problem, we need to further understand what are the components of vibration?
A vibration typically consists of the following four elements:
- Intensity: indicates the strength of the vibration.
- Duration: Indicates the duration of the vibration.
- Sharpness: Indicates the vibration of the waveform, the vibration of different waveforms can be soft or crisp.
- Interval duration: When a vibration mode consists of multiple vibrations, it is also necessary to design the interval duration between vibrations.
Understanding the components of vibration, we can debug the abstract vibration into a parametric document that implements the same vibration pattern across the technology stack.
Since vibration can be summarized into common modes and parameters, further vibration componentization can be realized, designers only need to add the correct meaning of vibration mode names in the regular interaction description, and the R&D side can directly call the vibration components with the corresponding name to complete the launch of a vibration requirement, fully ensuring the standardization and consistency of the vibration effect of the whole process.
03. The timing of the application of vibration
After knowing how to use the standard vibration effects, we began to explore how to use the right vibration timing.
Through the analysis and summary of competing product cases in the industry, we divide the application direction of vibration into three categories, and promote the implementation of corresponding contacts in each direction to verify the effect:
- Motivate interactive behavior
- Assist in precise control
- Feedback on the results of the operation
The first application direction is to incentivize interactive behavior, we first tried to add a click operation vibration feedback when the user collects/likes, and does not trigger when the user cancels the like/favorite. We hope that this interesting feedback will inspire users to interact more times.
The second application direction is to assist in precise control, we add vibration feedback at some points where the visual feedback effect is not clear enough, such as when the selected date of the drop-down refresh reaches the critical point/calendar, and enhance the user’s perception of the operation effect through vibration accurate feedback timing.
The third application direction is to further enhance the user’s perception of the operation result as a richer feedback on the operation result, we add vibration feedback at important points in the process, such as when the payment is successful or when the page is submitted for error submission.
For core scenarios, we also recycled data. We found that there was a significant data improvement in the contact points of motivating interaction behavior.
At this point, we also have preliminary application guidance on the timing of using the right vibration.
The application of vibration should be considered from the complete process, and should meet the appropriate timing, appropriate frequency, and unified scheme of similar scenarios.
We recommend that in the complete process, priority can be given to the following points: increased vibration, positive interaction points, points with limited visual feedback, and important operational result points.
Beyond the screen, beyond the usual visual feedback, we designers have more areas to explore.
In this project, we have also precipitated a new field of standardization to achieve it, we form a standard process by understanding semantics, clarifying rules, and forming a standard process; Then we explore scenarios, verify data, and summarize practical guidance.
We hope that our experience can provide ideas for designers to upgrade their enterprise-level experience in more fields.
