Reactions: Not everything in life is Likable
I come to Facebook to share all kinds of things with people I care about — from celebratory posts about practicing yoga for 60 days straight, to mourning the loss of a parent. Those same people who connect with me on my stories also have their own stories to share. Sometimes we just want a simple way to say we really love what they shared, or to express empathy when life takes a turn.
In 2009, Facebook introduced a button that allowed people to give feedback to their friends’ posts. We called it Like, and people liked it a lot. It’s simple and effortless to scroll down your News Feed and tap the little thumb to acknowledge what your friend posted. Sometimes it can be tough to know what to say; or maybe you don’t really have much to say and you just want to let someone know you heard them. That’s what the Like button does so well. It is simple and frictionless.
But, not everything in life is Likable.
It was time to look beyond the Like.
People had told us that they’d like more ways to express themselves on Facebook. About a year ago, Mark brought together a team of people to start thinking seriously about how to make the Like button more expressive. We were excited to start this process — It’s not every day you get the chance to work on such an important piece of a company’s product.
We knew at the onset that this project would be challenging. There were obvious challenges like making the solution work on various platforms and across a host of devices, both old and new. Then there were more challenging aspects to figure out. For instance, we have spent a lot of time refining the Like, Comment, Share buttons so that it’s easy to use and understand. It is a surface that is interacted with a lot, so any change will affect the understandability and usability of millions of people’s actions. We needed to thoughtfully curate any change so it felt like a natural evolution, taking care not to feel abrupt or disrupt everyone on our platform.
There were other questions that would need to be answered: What would the reactions be? How will people understand them globally? How can people best consume Reactions? How can people easily leave a Reaction? These are complex questions to be solved, all while keeping the mechanics of Liking easy.
Like all good design, the process of getting to a simple solution is complex.
It was incredibly important to be empathetic here and it’s why we did so many iterations, and took the amount of time we did. The whole point of expanding reactions is to have a universally understood vocabulary with which anyone can better and more richly express themselves.
We broke the problem down into two distinct pieces and began to work them in parallel:
- What are the reactions we will use beyond Like
- How will people input and consume reactions
For both of these tracks, we came up with key principles that we’d use as a playbook by which we operated. These principles acted as a guide for our team and helped us clarify decisions throughout the life of the project. They wouldn’t explicitly tell us what the final solution was, but they would hint at what it wasn’t and provide a direction for us all to head in.
Principles, combined with insights from empirical research and data, along side the instincts and knowledge gleaned from the talented industry elites here at Facebook was how we’d solve this. As such, the team we created included researchers, content strategists, engineers, and my main design team: Andy Chung, Brandon Walkin and Brian Frick.
The Reactions
Here are the principles that guided us in determining the set of reactions we are rolling out with now:
- Reactions should be universally understood. Reactions should be understood globally, so more people can connect and communicate together.
- Reactions should be widely used and expressive. Reactions should allow people to give feedback in more expressive ways that better align with the varied ways we react to things in real life.
We first needed to consider how many different reactions we should include. This might seem like a pretty straightforward task: Just slap a thumbs down next to the Like button and ship it. It’s not nearly that simple though. People need a much higher degree of sophistication and richness in what choices we provide for their communications. Binary ‘like’ and ‘dislike’ doesn’t properly reflect how we react to the vast array of things we encounter in our real lives.
Even though this wasn’t going to be binary, was this going to be like emoji, where people have hundreds to choose from? Probably not. Amongst other reasons, having hundreds of reactions to choose from could mean each post had dozens of different types of reactions left on it, which would be difficult to consume in News Feed. Additionally, the more reactions we offered, the less likely they would all be universally understood.
For more than a year, we have been conducting international research to explore what types of reactions people might find most appealing. Here are some of the things we looked into:
Top Stickers
We looked in aggregate at top stickers and emojis to get signal on what types of “reactions” people were already using on Facebook.
Most Used Search Terms for Stickers
While less common, we also looked at what terms people searched for when using stickers:
Top short comments
We also took an anonymized global sample of commonly used, short comments. These gave us some of the specific language that people use to express themselves, and helped us understand more fully the context in which people use these types of comments. Here’s an example of some short comments we saw from the U.S.
In addition to analyzing samples, we did international surveys, talked to people, and worked with our internationalization team. From here, we narrowed the set down to a more refined list:
You may have noticed that there are two reactions from that list that aren’t in what we released in this week’s launch: “Confused” and “Yay”. In testing, “Confused” was used so rarely that it didn’t make sense to include it given the cognitive load adding additional reactions has. Each reaction needs to serve a unique purpose for most people, and “Confused” didn’t end up doing that. “Yay” was tough to justify too. It wasn’t as easy to understand or internationalize, and it would often overlap with “Haha” or even “Like”. The system was just better as a whole without these two for now.
The Illustrations
Another crucial component was what reactions should look like. We wanted to create illustrations that were unique to Facebook, but we also wanted them to live gracefully in the ecosystem, and be easily and universally understood. Here was an initial direction:
Our initial illustrations weren’t communicating what they were intended to communicate to when they were seen at a relatively small size. They had served their purpose as placeholders as we designed the system, but it was time to start iterating on these.
The challenges here included figuring out what style would be appropriate to encompass across the set, and still have each individually and clearly express the intended reaction. Overlapping how we expressed the reactions was also something we encountered. The tiniest design tweak to one reaction could make it look too similar to another, or even end up not expressing the reaction at all. “Wow” could start to bump into “Yay” and “Yay” could look like “Haha” just by changing the curve of a smile or the squint of an eye.
We also explored a system both with, and without, labels. Labelling the reactions helped define what the reactions were, and that in turn, helped with internationalization. These needed to be universally understood, so if a friend from Japan reacted to your post, you mutually agree upon what that reaction meant. To understand this, we worked closely with internationalization teams and professionals in the field of non-verbal communication. We ran various research studies and tested early versions in different countries.
Early versions were static and we knew animation would be key in making them more expressive. We worked with an animator to bring the static reactions to life, while designers and engineers figured out how to make these play in a performant manner. Designers used pseudo-code to programmatically animate each reaction. Their work could then be passed on to Engineers to replicate the intended animation with high precision in the final build so they animate buttery-smooth.
When we started incorporating animations, we thought simultaneous animations would be overwhelming to the eye. So at first, we had only one reaction animating at a time (the one your finger was scrubbing over), while the rest of them remained static. While not intended to work this way, we realized during a Zuck review (where you meet with Mark to show progress of a big project like Reactions) that if you quickly scrubbed your finger across all of them they would all animate at once. Mark himself suggested we animate all of them concurrently when the dock is exposed. It turns out we liked this a lot more too. Thanks, Zuck.
The System
Without some predetermined context of principles within which we agreed to operate, we could quickly find ourselves building a complicated system that wouldn’t scale as well as we needed it to. Here are a few principles that guided us:
- Reactions should be an extension of the Like button. Like, Comment, and Share are ubiquitous to Facebook, and adding a fourth option at this point would introduce more complexity.
- Reactions should not make existing behavior more difficult. It was important that we introduced this feature responsibly, in a way that didn’t disrupt the way a billion people already used the product. In other words, we wanted to retain the simplicity and ease of Liking — when you tap on the Like button, you are “liking” the post.
Leaving a reaction
When we started exploring the input mechanism we didn’t know what, or how many, reactions there would be. Some early research said it would probably be somewhere between five and ten. As a stress test, we started by designing an input that could house up to fifteen different reactions, since it would be easier to scale it back than it would be to extend it.
Early concepts and initial attempts like these are purely educational — they teach us what works, but often more importantly, what doesn’t. They reveal gaps, unknowns, and more.
While we felt the above approach did a decent job of allowing a broad range of feedback quickly, it revealed some problems. In other words, it was teaching us about what the solution would need to encompass:
- The UI could be cut off at the top of the screen;
- Despite the large size of the scrubbable area, people would often slide their finger on top of the labels;
- Parsing text labels felt laborious and would make internationalization difficult;
- The line-art styling of the illustrations looked great at larger scale, but proved difficult to parse at small sizes — something we’d need when thinking about how people consume these on News Feed;
- Some people would invoke the scrubber, then lift their finger so they could tap on a reaction, and this would dismiss the input interface;
- Larger numbers of reactions might open up too much redundancy in the set.
We continued to iterate. The first prototypes included a single illustration that would change based your finger’s position over the expression word. This evoked a desire to preview each reaction before making your decision, instead of just being able to see all options at once. It was too cumbersome and time consuming.
Eventually, we dismissed the single illustration concept in favor of the dock model. This approach allowed people to quickly see all of the reactions at once. Parsing facial expressions instead of reading text created a much friendlier and internationally recognizable system. We were able to solve other problems that earlier concepts had as well. For example, this new system adapted to its position on screen, so no longer would it be positioned out of view. We moved the labels of the reactions so your finger never obscured them. Lastly, once the reactions dock was invoked, people could now either scrub or tap on the reactions to choose one.
Consuming Reactions
In a world where we only had to deal with Likes, how you consumed them was pretty straightforward. We just told you how many it had by saying “17 Likes.” It’s a string of text that sits right above the Like, Comment and Share buttons. That string of text is internally called the Bling String. This would need a complete rethink because stating “10 Reactions” didn’t communicate any of the variable sentiments that this feature was designed to provide — Did people generally find this post funny, sad or surprising? The solution needed to let the specific reactions be individually recorded. We also wanted to continue to be able to convey total feedback, just as we did with a total Like count.
Our first approach was an obvious one. We would design the bling string to show each reaction used and include a count of how many times it had been left. This worked fairly well on posts that had just a couple reaction types left on it, but it really fell apart on those that had a ton of engagement — especially public content. It also was difficult to understand the total feedback. The old bling string was simple because it was only conveying one piece of information. As a result, it was easy to scan and understand, or ignore and scroll.
The final solution was to aggregate the top three reactions coupled with a total count. This way, you could understand how the majority of people reacted to a post, as well as understand the total feedback on a post. In addition, we also communicated which of your closest friends reacted to the post, something that was absent on mobile until the introduction of Reactions. You can see all the various reactions people have left by tapping on the bling string from an individual post.
The “final” product
After nearly a year of work and months of testing, we’re really excited to be launching Reactions and learning more about how it’s used around the world. We’re hopeful everyone likes Reactions now that we’re rolling it out more broadly.
As with all software design, nothing is ever done, final, or finished—and Reactions is no exception. We’ll be continuing to learn, iterate and improve upon it, but we’re hopeful this is a step towards a more empathetic Facebook experience.
