From Like to
High-Five
This is a case study project that helps me sort out some interesting innovative social interaction effects with the emerging increasing demand for 3d interactions on either screen or in mixed reality scenario.
Role / User Research, 3d Animation
Time / 2021, 4 weeks
Contributor / DongNan, Xuefei Yang
Project Overview
How to make more innovations in product functions to reflect the design value has always been a topic of concern for designers, especially in many products in the industry. How to make breakthroughs in the perfect basic framework and functions, and how to tackle users' interactive demands and explore more interactive behaviors potentials are big challenges for designers.
I took time to analyze and design this brand new high-five function from three aspects: the mining of early interactive behavior, the polishing of emotional visual experience, and the upgrade of interesting gameplay, which may provide some cool ideas and different design approaches.
What is interaction
Let's start with interactions in real-life scenarios.
Human interaction is ubiquitous, it is a necessary part of our lives and the cornerstone of the entire human society. Essentially, the problem that social products solve is the problem of interaction between people. So how to define interaction, we can get a glimpse of it from daily life scenes.
Acquaintances are prone to conversations
​First, let's take a look at an example of interaction in our daily life:
This is a very common case of friends interaction. We can see that it is easy for acquaintances to start conversations and continue to interact. But if the same topic occurs between people who are not very familiar, it may be a different scene:
In Example 2, since A and B are not familiar with each other, A has no further interaction with B's reply, and the conversation ends accordingly. We can further reason, in fact, in this case, no matter what the cause becomes, as long as A does not respond to B's feedback, then the interaction between A and B will be terminated with a high probability.
Initiate conversation
respond
respond
Initiate conversation
respond
stopped
interaction between close friends
interaction between not closed friends
This is because good interactive behavior must be the mutual behavior of two (or more) parties. Once the feedback is interrupted for some reason, the interaction will not be sustainable. From this, it can be concluded that:
Interaction is essentially a feedback chain consisting of a series of feedbacks (interactions)
interaction chain
Initiate conversation
respond
respond
respond
Feedback quality
But the feedback chain alone is not enough. In social scenarios, we often hope that the feedback chain is long enough so that the two sides of the interaction can warm up their feelings. In Example 2, there is actually a very short feedback chain, and A and B only interact for one round. A does not continue to respond to B's feedback because B's feedback is of low quality. Just imagine, when A says hello to B, if B's reply is "Good morning, you are wearing a real spirit today!", will A respond to B's feedback? I think it probably will. It can be seen that:
The length of the feedback chain depends on the quality of each feedback (interaction).
There are many characteristics of high-quality feedback, three of which are particularly important
interaction duration depends on interaction quality
3 factors of feedback quality
Directivity
Moderation
Instancy
1 Directivity in the feedback chain
The interactive behavior in our daily life generally starts with a "handshake mechanism". This handshake mechanism can be explicit (calling out the other party's address directly, it can be a name, nickname, or a relational title), or sometimes it can be implicit (look at each other, exchange of topics, etc.). This handshake mechanism helps both parties to establish an interactive scene, allowing both parties to reach a consensus on "starting communication", so that the receiver of the information is ready to listen and reply. This is the directionality in the interaction.
Any interaction occurs between two or more definite objects, so in a good interaction, directionality is particularly important - no one will respond to other people's self-talk. In the process of interaction, the interactive behavior with unclear direction is low-quality, and it is not easy to obtain further feedback, such as unified reply in the comment area, group New Year greetings, speeches by leaders on stage, etc. On the other hand, interactions with clear directions are of high quality, and it is easier to get feedback, such as @ someone in a group chat, emails addressed to a certain person instead of a mail group, and eye-to-eye when chatting with multiple people.
group message: weak directivity
@specific person: strong directivity
2 Moderate interactive behavior
The moderation of interactive behavior includes two aspects: information moderation and behavior moderation.
On the one hand, since the interactive behavior is essentially the information transfer process, the information quality of each feedback will directly affect the overall quality of the feedback. Good feedback should convey moderate information, so that the receiver can easily receive and process the transmitted information, and minimize the feedback threshold of the receiver.
On the other hand, the act of conveying information should also be moderate. In life, on different occasions, we will choose different behaviors to express the same meaning. For example, on more formal occasions, we will choose to shake hands as a greeting, while meeting with family members after a long absence may be a warm hug.
3 Instancy of feedback
Interactive behavior is dependent on a certain context, and when the context disappears, the interaction will stop. In the interactive scene of social products, the interactive context generally weakens with the passage of time until it disappears, so the quality of the feedback also gradually attenuates with the passage of time. Feedback behavior occurs before disappearing, so immediate feedback is very important.
3 Likes to high fives interactive exploration
With the above theoretical basis, let's analyze the interactive behavior in Qzone.
The interaction methods in Qzone can be classified into three categories: comments, reposts, and likes. Among them, comments and retweets can generate a complete feedback chain. For comments, users can continue to provide feedback through comments, likes, etc.; for forwarded content, users can also make further comments, forwards, and likes. For the like behavior, the feedback chain ends abruptly here, and users cannot give direct feedback on the like behavior.
complete interaction feedback loop
no interaction feedback
comment
share
like
Choice of interactive scenarios
Since we want to design a directional interactive behavior, we must do it in a scene that can receive likes. So we first traversed all the scenes in the master mode where we can see other people complimenting us.
a. friends activities
other
key scenarios
b. profile page
c. notification list
b. like list
​However, in the above scenarios, not all of them are suitable for the feedback behavior of liking. According to the user's behavioral purpose, we can divide the above scenarios into two categories: key behavioral paths around the like behavior (Figure c. Notification list, Figure d. Like list), and other scenarios that do not take likes as the core goal ( Figure a. Friends Activities, Figure b. Profile Page). Obviously, we should take the key behavioral path around the like behavior as the main interaction scenario. And all feedback on likes is directly attached to the like behavior itself, so that the feedback behavior has a clear direction.
Moderate semantics and interactions
As mentioned above, moderate interaction includes two aspects: “information moderate” and “behavior moderate”. When it is implemented in the product, it is to define the “semantics” and “interaction behavior” of interactive behavior.
Regarding the semantic expression of the like feedback behavior, we listed many alternatives from real social scenarios, and then divided the action into four quadrants based on the emotional level and maturity of the action, and classified this series of actions.
activities in social scenarios
intense
light
young
classic
kiss
wink
la bise
pinky swear
chest bump
hug
salute
shake hand
wave
peace sign
high five
Since the emotion conveyed by the act of liking is relatively lightweight, we prefer to choose a lightweight emotional expression as the feedback for liking; at the same time, since the user group of Qzone is mainly young users, we also need to choose to fit the semantics of young users' senses. Therefore, we initially selected the two concepts of "high five" and "peace sign" in the lower-left corner of the quadrant diagram. Considering that "high five" has more obvious directivity than "peace sign", it is determined that "high five" is the final landing plan.
lightweight emotion
& positive meaning
& commonly used
peace sign
high five
"high five" has more obvious directivity than "peace sign"
At the same time, because the like behavior itself is a very lightweight behavior, we also use the lightest interaction operation as its feedback, which only requires one click.
timely access to feedback
Every time a user receives feedback on a like, they will receive a message reminder that is the same as the like, and let the user know the first time through push, homepage new message reminder, red dot, etc. In the message box list, each like and reply becomes a separate message, which allows users to view and give feedback in the most intuitive way.
​
In summary, we have determined the interaction framework of the entire feedback chain:
interaction framework
Multi-channel message reach
core path for
positive interaction
visualize "high five"
target on instancy designs
target on directive designs
target on moderate designs
4 Emotional visual experience polishing
High-five visual design is a continuous cycle of problem discovery to the solution. At the heart of this process is the approach that drives the escalation of the solution through emotional design.
​
The high-five action itself has rich emotions, and the emotional design method can maximize the release of emotions, so in the visual design stage, we use emotional design as a method to promote the gradual improvement of the plan, and finally establish users and products. , The emotional connection between users, deepens the user's recognition and resonance of the function and brings a more interesting experience.
​
Emotional design to express the function of high five needs to solve two problems:
1. How to evoke the user's high-five memory in the real scene;
2. How to conform to the basic tonality of the space user group.
​
Arouse the user's high-five memory in real life
At the beginning of the design, we used the form of a flat icon to express the high five. Although it can meet the basic functional requirements, it is lacking in visual experience. We have tried a variety of richer visual expressions to arouse the user's resonance for the action of high five.
In the process of design deliberation, we have gone through three stages, looking for better design solutions in the cycle of constantly discovering and solving problems:
phase I
phase II
phase III
static
motion design
animating
3d render
define >> solve
Arouse the user's high-five memory in real life
Step 1 | Static display to dynamic shaping
We constructed the basic shape of the high-five icon with the superimposed style of the two palms. In order to enhance the user's semantic perception of "high five", the dynamic lines commonly used in comics are used, so that the user can intuitively feel that this is a dynamic interactive behavior, rather than simply lighting the icon unilaterally, so as to strengthen the user's understanding of High-five awareness of this interactive behavior.
Design Phase I
define problems
Hard to notice high 5 movements
iteration
Add lines to enhance impression
Step 2 | 2D animation interpretation
However, such dynamic expression still has limitations. The expression of dynamic lines is not universal, and there is no guarantee that users can understand the meaning. So we used a more intuitive animation in the second design iteration to help users understand and make it echo the action in real life.
Design Phase II
define problems
Hardly to express positive impression
iteration
Add motion graphics for additional notice
Step 3 | 3D representation
After solving the problem of semantic expression, we encountered a new challenge. Due to the small display range of the entire animation, it is not ideal in terms of visual expression. So in the third design phase, we solved the above problems by zooming in on the animation and experimenting with 3D representations. At the same time, the 3D expression technique can also convey more information through light, shadow, and texture, which is more intuitive and easy to understand, and has a strong sense of substitution.
Design Phase III
define problems
Maybe the graphics is too small
final iteration
Enlarge graphics and add 3d animation
In line with the basic tonality of the space user group
Most of the mainstream users of the space are young people. In order to match the basic tonality of the user group, it is necessary to create a "young" and "interesting" 3D high-five animation. To this end, we use "3D", "young", and "fun" as keywords to collect reference materials to build an emotional version.
1 Interesting and lightweight texture
As mentioned above, the high-five feedback behavior is a lightweight interaction. In order to avoid the unnecessary heavy feeling of the 3D expression technique that is too realistic, and also to increase the interest of the animation, we choose the cartoon palm shape for modeling. ; In the choice of materials, we prefer clay materials to weaken the highlights and make the visual experience lighter.
color
texture
modeling
vivid color scheme
lightweight & less contrast
cute style
2 Elastic curve makes animation more vivid
The high-five action in real life is a decelerating movement, but in order to highlight the momentum of the high-five and enhance the fun, we used a non-realistic elastic curve to create this animation to enhance the fun of the animation.
3 Fireworks enhance the atmosphere
In the subsequent product iterative optimization process, we have introduced the infinite high-five gameplay, and users can give back likes indefinitely. This causes the animation to be played repeatedly, which will speed up the user's aesthetic fatigue of the animation. Therefore, in order to match the upgrade of the product gameplay, the animation design was also iterated, and different display eggs were designed based on the number of high-fives. After the high-five reaches a certain number of times, there will be ribbons and fireworks popping out, which will enhance the enthusiastic atmosphere of multiple high-fives. At the same time, it brings more fun and surprises to users.
In the design process of the high-five function, we constantly seek better solutions in the cycle of finding and solving problems, and gradually make a high-five icon less than 100 pixels better, in order to arouse users' awareness of reality The memory of high fives establishes an emotional connection with the user.
In addition, the animation design is constantly scrutinized through interesting visual expression methods, so that young users of Qzone can not only establish a psychological connection but also perceive the interesting tonality in line with their own labels at the presentation layer.
5 Gamified Design Extensions
In addition to the ribbon fireworks mentioned above, in the process of upgrading the high-five gameplay, we have also expanded more content:
​
Surprise users
As the number of repeated high-fives between users increases, the particle effect will be continuously upgraded, and a rich entry effect will be added; and when the number of key high-fives is reached, the number of high-fives will be displayed, and the user's sense of achievement will be stimulated to produce more high-five behavior.
less times
more times
simple
cool
Personalized extension
In order to enrich the choice of palm styles and provide users with more diverse experiences, we have designed more palm forms together with the value-added team, and introduced some IP images to make high-fives more resonant with users and more interesting.
6 The End
The function of high five has gone through a long period of time from early exploration to launch and the second iteration, and the whole project is also a very rewarding process for designers.
Innovation can also be a process from 1 to N
Innovation is not all innovation from scratch from 0 to 1, especially for products with mature functions and framework systems, it is not appropriate to blindly pursue innovation to change users' cognition and habits. Dig and think, find suitable solutions and polish the details to create surprises for users, and innovation can also achieve the effect of four or two thousand pounds.
Polish the details to create surprises
After exploring and digging out a good idea, polishing the details is equally important. We have come up with various high-five effect solutions to find a balance between surprising users and lightweight operations. We have been paying attention to users since the launch of this function. From the feedback of users, it is found that surprise upgrades can be made. Starting from one point, the continuous expansion of this point is made more detailed and closed-loop.
Inspired from life, design the life
A very important reason why the high-five function has such good data and user recognition is that the behavior itself corresponds to the scene in real life, so users can quickly understand and operate, which is in line with the user The cognition of the real scene, so the learning cost is relatively low. When we are designing, we use the life scene to mine products, which can achieve the effect of getting twice the result with half the effort.