How do you React?

Let’s find out!

Hello everyone! Sorry it has been so long since my last post- a semester ended, I went to a wedding out of state, work schedule changed, and now a new one has begun. To ease back into the swing of things, I thought it would be a perfect time to once again do a Reverse Engineer post about some professional work, complete with my own draw-overs! Today, I will be analyzing the Facebook Reaction emojis.

About the Reaction Emojis

Facebook unrolled these set of emojis in February 2016, in response to user request. Up until that point, the only way to interact with any post was to either “Like” by hitting a thumbs-up icon, or to create a thread on the post with a comment. Many users were wanting more options. What if users wanted to react, and not comment, to something sad? Clearly the then thumbs-up icon would be inappropriate for the post, and presented a problem for users. Facebook met this challenge and developed six additional emotion icons for users to use to react to posts. The user would either touch and hold the “Like” button, or click and hover their mouse over it, and all seven emojis would pop up, each with its own little animation and one word description, and then the user would select the emoji that they wanted for the post. After the selection, the emoji would no longer be animated and would sit where the like button was, along with the accompanying one word.

Now to break it down

The Reaction Emojis are a set of icons that follow specific rules that help to identify them as being part of the same system. They are pretty basic rules, but having followed them, the emojis are of professional quality.

Shape

Each of the emoji icons are bound within the same shape, outlined in red in the draw-over. Regardless of whether that icon was an silhouetted shape or a face, each of the seven emojis are contained within the same sized  circle.

The Silhouettes

There are two distinct icons in this set; the “Like” and “Love” emojis. These two icons are bound in a same sized circle, and then they are silhouetted on a solid background color. The icon themselves are also relatively the same size within the circle and are centered.

The Face Emojis

The remaining five icons are all faces that display an emotion. Once again, each emotion is contained within the same sized circle. The sad emoji is the only exception. It has an added element (the tear drop) that creates a variation in the established pattern, but if it were removed, the emotion would still be contained within the circle and be still easily recognized as part of the same system.

Color Pallete

Across the seven emojis, there is a consistent color pallete that helps to tie all of the icons together. In the draw over, I created swatches of the four colors that Facebook implemented in the system. As can be seen, these colors are implemented across all of the emojis.

Some Final Thoughts

Something really interesting to note is the “Like” icon. The  original “Like” icon did not change with the update, and at first glance, the new reaction emojis can feel slightly out of place with it. But because of the icon set’s rules that we just outlined, we can see that they all actually fit together. Facebook created circular shaped icons, created another single silhouetted icon to match the design with the “Love” emoji, and the tear drop on the “Sad” emoji is the exact same blue. Each of the icons are bound together as part of the same system. Well done Facebook!