<p>Published on <a href="https://blog.prototypr.io/redesigning-facebook-reactions-8c62fe808198?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Tanmay Joshi <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*c5O1Xt7wYA05n3p_sdlDBw.png"></p>
<h3>Introduction</h3>
<p>Facebook reactions went live on 24 Feb 2016, and from that time onward it’s been a great journey for Facebook. We all just love the reactions and how it fulfills that a single like button was not able to do it. But can there be some design improvements for better user experience?</p>
<p>I tried to make it more usable with the help of Fitts’ law, one of the famous law in human computer interaction.</p>
<h3>Fitts’ Law</h3>
<p><em>“The time required to reach a target is based on the distance from the starting point and the size of the target.”-Fitts’ Law</em></p>
<p>It was coined by Paul Fitts in the 1950s. In simple words, The size of a target and its distance from the user’s current position within the user interface affect user experience.</p>
<p>Recently, Facebook introduced emotions as basic actions to interact with other people’s post/comment. You can choose any of the emotions to interact with a particular post. Initially, there was only one interactive tool, the ‘like’ button, which only conveys one’s emotion that is if person likes a particular post or not.. But humans portray a whole lot range of emotions. So, the Facebook team came together with the whole new concept of putting emotions as the targeted actions. They introduced 6 emotions, which include ‘Like’, ‘Love’, ‘Haha’, ‘Wow’, ‘Sad’ and ‘Angry’. Also, introducing emotions helped Facebook to have a whole lot of useful data of a person, which further helps them shape their personalized ads.</p>
<h3>Current interaction of Facebook</h3>
<p>Facebook gives ‘Like’ as the default button for conveying our liking emotion. If the user feels differently, He/she can <em>long press</em> the like button. All of the emotions will pop out <strong><em>linearly</em></strong> and user can select any emotion by <em>tapping</em> over it.</p>
<h3>Why not all emotions upfront?</h3>
<p><img alt="" src="https://cdn-images-1.medium.com/max/588/1*8vF2QBmtzkLjgKgoh5cxTg.png"></p>
<p>For portraying any emotion other than Liking a post, User has to first long press and then tap on the emotion which means there are two interactive steps (long pressing — tapping). The reason behind this is that the emotions that Facebook suggest are quite heavy emotions. You won’t love anything or everything, neither will you laugh or be sad about anything so easily. Also, since the quantity of content in Facebook is quite high, Facebook wants to keep only the high quality data about the user. So<em> burying emotions</em> inside a long press, helps them filter only the high quality reactions.</p>
<h3>Where’s the problem?</h3>
<p><img alt="" src="https://cdn-images-1.medium.com/max/950/1*2CeVRjgub6cpZGzFYRFxZQ.jpeg">Source: Mashable India (Image: Facebook)</p>
<p>Problem occurs after long pressing the like button.</p>
<p>The distance between the current position of cursor/thumb to an emotion is different for every emotion.</p>
<p>According to Fitts’ Law : The Distance between the current position and targeted position decides the usability index of the targeted action. As the distance increases, the usability index of the target decreases.</p>
<p>This means that the the emotions will be biased as each emotion is having different distance from the current position, i.e., the ‘Like’ button. This will give a whole lot of disadvantage to the business model that they thought will help them grow.</p>
<blockquote><p>“Less data is better than wrong one”</p></blockquote>
<h3>Solution</h3>
<p><img alt="" src="https://cdn-images-1.medium.com/max/800/1*MhyXtAlmqhkVwe8HaXfesA.gif"><a href="https://dribbble.com/shots/3238568-Facebook-Reactions-Every-Emotion-is-Equal">Check out the Dribbble Shot</a></p>
<p>Keeping Fitts’ law in mind, we must ensure that every emotion should be equally important. So, I tried redesigning the interactive tab.</p>
<ol>
<li>I kept ‘Like’ as the default button for interaction.</li>
<li>I made the emotion’s button as the center of attention.</li>
<li>I also kept the long press action for getting into the emotion’s selection.</li>
</ol>
<p>The major change I did is that I made a <em>radical interface</em> which helped me justify Fitts’ law.</p>
<p>The advantage of radical interface was, every emotion will have the same distance from the current position of thumb, which therefore will give unbiased results.</p>
<h3>That’s all folks!</h3>
<p>I implemented the solution for only mobile UI. However same can be implemented for desktop version also. I would also like to mention that this solution is nowhere close to perfect one and there can be other best ways to solve this problem. Your feedback can only help me in making it better.<br />Let me know in comments what you feel about this solution. If you liked what I wrote, Smash that Clap button.</p>
<blockquote><p>“Any product that needs a manual to work is broken.”</p></blockquote>
<blockquote><p>-Elon Musk</p></blockquote>
<p><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=8c62fe808198" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/redesigning-facebook-reactions-8c62fe808198">Redesigning Facebook Reactions</a> was originally published in <a href="https://blog.prototypr.io">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Redesigning Facebook Reactions

Introduction

Top Stories