This paper describes the process of Facebook team developing Like button for more than a year, from qualitative and quantitative analysis to adaptation method research and experience optimization thinking. The in-depth study is worth learning.
I regularly open Facebook to share with friends I care about everything going on in my life — from celebrating my 60 straight days of yoga to attending a funeral for a loved one. And the friends WHO contacted me when I was going through it also had their own stories to share. Sometimes we just want a simple way to show that we really love what they share, or to offer comfort when another friend’s life is at a turning point.
In 2009,Facebook introduced a button that allowed people to give feedback on content posted by their friends. We asked him to like it and everyone loved it. All you have to do is swipe through your feed and click on the thumbnail below your friend’s post to “like” it. Because some words are hard to say; Or maybe you really don’t have anything to say, but you really want someone to know that you saw the message. That’s why likes are so popular. Simple, no friction.
But not everything in life can be upvoted.
It’s time to think beyond the likes
Users give us feedback about how they want to express themselves more. Almost a year ago,Mark led a team to start thinking about how to make the Like button more emotional. We’re very excited about this project — it’s not every day you get to work on such an important project for your company.
We knew the challenge of the project from the start. The obvious one is to solve the problem of adapting to different platforms and old and new devices. Many challenges remain undiscovered. For example, we spent a lot of time polishing the like, comment, and Share buttons to make them easy to use and understand. There is so much interaction on the interface that even a small change can affect the understandable and usable behavior of hundreds of millions of users. We need to be thoughtful about every change, make it feel like a natural evolution, and avoid making it feel awkward and confusing.
There are other questions to answer: what should feedback look like? How can people around the world understand them? How to maximize consumption feedback? How to make it easy for people to leave their feedback? These are complex problems to solve, and solving these problems will make the “like” process easier.
Like all good design, the process of arriving at a simple solution is complex.
Review images
It’s extremely important to bring emotion into this, and that’s why we spend a lot of time and effort experimenting. The whole point of expanding the impact of feedback is to find a global vocabulary that enables anyone to better and richer express themselves.
We split the problem into two pieces and started working in parallel.
1. What kind of feedback can we use besides likes?
2. How people habitually input and consume feedback.
In these two parallel tracks, we find a playbook of key principles to follow. This guideline serves as a direction for our team so that we can make clear decisions throughout the project. They don’t tell us exactly what the final solution will be, but they give us an indication of what the solution won’t be and give us a direction in which to go.
The combination of principle with research and data-driven insight, intuition and the knowledge of the talented and hard-working elite at Facebook is fundamental to how we solve this problem. In this way, we created a team of researchers, content planners, engineers, and my main design team :Andy Chung, Brandon Walkin, and Brian Frick.
Feedback mechanism
Here are some of the principles that guide the decisions we now make to create a range of feedback mechanisms:
1. Feedback should be accessible. Feedback should be understood by people all over the world so that more people can connect with each other.
2. Feedback should be widely used and expressive. Feedback should be more emotional and better if it is coupled with a variety of approaches we use in our daily lives.
We first need to consider how many different types of feedback we should include. This might seem LIKE an easy task: just place another thumbs-down button next to the LIKE button and post. It’s really not that simple. In the choices we give them to communicate, people’s needs are more confused and rich. The binary choices of Like and Dislike don’t adequately express how we react to the vast array of things we encounter in real life.
Binary choices don’t work, but what about Emoji? Choose from hundreds of expressions. Also, having hundreds of choices means that each post leaves dozens of different kinds of feedback, which is hard to consume in a message stream. In addition, the more options we offer, the less likely they are to be recognized.
We spent over a year doing international research to explore the types of feedback that people find most attractive. Here are some of the findings:
Top Stickers
We looked for stickers and emoji, the most commonly used forms of feedback on Facebook.
Review images
The most common search term for sticker
While not universal enough, we’ve found which words people search for when they want to use sticker:
Review images
Shortest comment
We also tested this with an unspoken example of a short comment – a particular language that people use to express themselves – that helped us understand more fully the habit of people commenting in this way. Here are some examples of short comments we’ve seen from the U.S. market.
Review images
In addition to analyzing examples, we also do international surveys, user interviews, and work with international teams. From there, we’ve extracted a condensed list of words:
Review images
You may have noticed that there are two pieces of feedback in the list: “Confused” and “Yay” are not in our release this week. After testing, “Confused” is not used so often that it cannot contain cognitive load beyond its own feedback. Each feedback needs to provide a unique purpose for the vast majority of users, but ‘Confused’ can’t do it.” “Yay” is also hard to define. It’s hard to understand and internationalize and often overlaps with the meaning of “haha” or even “like.” And so far the system without those two words has worked just fine.
Another important part is what the feedback should look like. We wanted to create a unique form of illustration that was unique to Facebook, but we also wanted them to survive in the ecosystem more elegantly, easily and popularly understood. Here’s a rough draft:
Review images
Our initial diagram cannot achieve the purpose of communication if it is displayed in a relatively small size. They exist as placeholders in our system, but it’s time to iterate on them.
The challenge is to choose which form of feedback will be popular in a set of diagrams and must have their own unique form of feedback that clearly conveys intentions.
What happens to us and how we express our feelings overlap. Making a tiny design of an interaction can make designs similar to each other and even end up with no clear feedback.” Wow might be similar to “Yay,” which is Haha with a change of mouth and a slanting of the eyes.
Review images
We also developed a system that includes both tagged and untagged. Tags define what the action is for feedback and help achieve international awareness. Since these things need to be understood in a popular way, if a Japanese friend gives you feedback on your post, you will understand the feedback accordingly. To better fulfill this requirement, we work closely with our international team and experts in the field of non-verbal communication. We do all kinds of studies and early testing in different countries.
Earlier versions were static, and we know that kinetic effects are key to making them more emotional. We work with an animator to bring static actions to life, and designers and engineers will know how to make those actions more decorous. Designers use pseudocode to animate feedback. Their work is handed over to engineers, who reproduce the preconceived motions in the final development with a high degree of precision, making the motion as smooth as butter.
Review images
When we started adding motion effects, we thought that motion would cover the eyes. So at the beginning, we only have one motion,(finger slide motion), and the rest are left static. We don’t want to do this, but when Zuck reviews it, it only moves once when he swipes his finger across the feedback. Mark suggests that whenever we appear on the screen, our emoticons move at the same time. The end result is that we actually like it a lot more, thanks to Zuck.
We were able to build a complete system quickly, but not as well as we needed to, except for a few general things we agreed on earlier. Here are some guidelines:
1. Feedback should be an extension of the LIke button. Like, comment, and share are routine interactions on Facebook, and adding a fourth option at this point would add more complexity.
2. Feedback should not make existing actions harder. It is important that we introduce this feature with a sense of responsibility that it should not easily disrupt a product with a billion users. In other words, we want to keep it simple and easy to connect to – you “liking” this post.
Leave a feedback
We started exploring the input mechanism but we didn’t really know what kind of feedback we needed or how much feedback we needed. Some early studies put the number at between five and ten. In one stress test, we designed an extension to 15 different feedback inputs, although it was easier to reduce them than to increase them.
Review images
Early concepts and initial attempts like these are entirely educational — they teach us what works, but more importantly, what doesn’t. They expose gaps, ignorance and more.
Although we feel that some of the above approaches achieve the goal of producing a quick and decent response, it does reveal a lot of problems. In other words, teach us what solutions are more important to focus on:
- In addition to large areas that can be slid, people should slide on the sliding TAB bar.
- Linear images look good on a large screen but are hard to read at a small size — we need to think about how people consume this information in the information stream.
- Some people turn up a Popup containing emoticons and tap with their fingers for feedback, undoing the input screen.
We continue to build iterations. The first prototype draws a graphic pattern that changes depending on where your finger is in selecting emoticons. This will arouse your desire to anticipate every action before you decide, rather than knowing all the options at once. Because that’s actually a very heavy and time-consuming task.
Review images
Finally, we removed the concept of a single figure in the dock bar model. This approach allows people to quickly see all the feedback at the same time, creating a more user-friendly and internationally-recognisable system by parsing facial expressions rather than reading text. We can resolve other issues once the direction of principle is established. This new system, for example, has placement on the screen, so images don’t go off the screen. We adjusted the position of the feedback TAB so that your finger doesn’t get in the way of the content. Finally, once the docking bar is invoked, people can swipe or click to select a desired feedback.
Consumption feedback
Anyway, with all the likes and stuff we’re dealing with, the way you consume them should be fairly straightforward. We only use “17 likes” to tell you how many likes you have. That’s an emoji string next to like,comment and share. The string is actually called “string” shiny expression. But this solution is the need to repeatedly consideration because the established 10 feedback could not meet with all any changeable ideas and fluent communication, so the product feature is to prove – people think this post or interesting, or sad or surprise. We also want to convey full feedback, just like we keep track of the total number of likes.
The first is obvious. We designed a shiny emoji string to represent each feedback, including counting the number of times it was clicked. This works well for some types of posts, but it doesn’t work well for some conventions — especially public ones. And it’s very difficult to understand all of it. The flash emoji string is very succinct because it simply conveys a series of messages. It can be easily browsed and understood or ignored and scrolled.
Review images
The way we initially presented all the feedback made the interface too complex
Review images
Many of the solutions explored didn’t work
Review images
The final shiny emoji string design
The final solution is to aggregate the three most-used feedbacks together with the total. This way, you can understand the total number of people responding to a post and understand the total feedback. In addition, we can also communicate with your closest friends through feedback mechanisms. You can see all kinds of feedback from people clicking on a shiny emoji string under their personal posts.
The “final” product
After almost a year of work and months of testing, we were excited to develop this feedback mechanism and learn more about how feedback works in everyday life in the process. We hope everyone enjoys the feedback mechanism now.
As with all software design, nothing is done, final or finished — and feedback mechanisms are no exception. We’ll continue to learn, repeat and improve on what we have now, but we hope this is an important step toward a more emotional design experience for Facebook.