Published on <a href="http://ift.tt/2tAUJCi">| Prototyping: From UX to Front End &mdash; Medium</a> Sarai Rosenberg 
Have you ever stepped into an elevator and pressed a button — then pressed it again because you’re not sure it worked? One of my most delightful discoveries in moving to the Bay Area was finding crosswalks whose buttons provide both auditory and haptic feedback when pressed.
Every successful social media website offers features for users to engage with what they see: likes, loves, comments, and reactions, from Facebook and Twitter to LinkedIn and Slack.
In writing this article, I researched tools for color-blind users and narration tools for blind users (see resources below). I was surprised to find that many social media features are difficult or impossible to distinguish for color-blind users, but I was pleased to find many features relatively easy to navigate with a screen reader (much more so than MS Word!).
<img alt="" src="http://ift.tt/2sDf5gL">
<h3>Twitter 💖</h3>
Two years ago, Twitter added its now iconic heart animation:
<blockquote>
Here&#8217;s the new heart animation, frame by frame
 — <a href="https://twitter.com/_cingraham/status/661566169283981312">@_cingraham</a>
</blockquote>
This animation is an enticing and clear indication of an interaction. The heart changes from a grey or dark blue-grey into a red icon, while a circle expands then becomes sparkles. The animation makes the interaction feel more meaningful to the user and provides feedback that the user has, indeed, pressed the button.
From the perspective of active feedback, Twitter’s UI is successful, but after clicking the heart, color is the only distinguishing feature on a favorited Tweet. Twitter user @jasonbaldridge points out that when you expand details on a tweet in the Android app, he can’t tell whether he’s favorited a tweet, as shown below with a Protanopia color filter (red/green color blindness):
<img alt="" src="http://ift.tt/2tALeCX"><a href="https://twitter.com/jasonbaldridge/status/861276096209104896">Tweet from Jason Baldridge</a> with <a href="http://colororacle.org/">Protanopia filter applied by Color Oracle</a>, showing that the red heart is not visible to users with Protanopia (red/green color blindness).
Adjusting colors (particularly brightness) can help with protanopia, deuteranopia, or tritanopia, but ideally, we shouldn’t rely on colors to distinguish interface features. The approach I recommend is to incorporate appealing, distinctive colors with distinctive shapes and text changes to help all users with visual impairment:
<img alt="" src="http://ift.tt/2sD2F8R">Three models of Twitter’s interaction bar: the first with a grey “like” heart icon, the second with a red heart icon after being “liked”, and my suggestion for a UI revision includes a red heart icon with a gradient and a subtle wave emanating from the edges to be visually distinctive regardless of color.
While writing this, Twitter updated their UI, and the new graphics fix this problem!
<img alt="" src="http://ift.tt/2tBbqO6"><img alt="" src="http://ift.tt/2sDf5gL">
<h3>Facebook 👍</h3>
Facebook launched comments, likes, and “I like your comment” in 2008, 2009, and 2010, respectively. These features rapidly became the most popular features on Facebook.
In 2016, the like feature evolved into a reaction feature, where a user could add one of six reactions (Like, Love, Haha, Wow, Sad, Angry), with their respective emoji. In May 2017, Facebook expanded reactions to comments.
With both of these reaction features, Facebook revised their UI to include the six reactions when hovering over or pressing the like button:
<img alt="" src="http://ift.tt/2sDaDPf">Facebook’s six emoji reactions above Like, Comment, or Share, followed by an indication of how many users reacted. The “Like” link and icon change to reflect your reaction.
While reactions other than “like” are visually distinctive, as shown above, the “like” reaction alone is now only distinguished by color. The brightness is distinctive to color-blind users, a screen reader does not clearly distinguish these. (In contrast, a screen reader on Twitter reads out “Liked” if you liked a post.) The reaction count below updates in both the web and mobile app to indicate “You and 3 others” if you react.
<img alt="" src="http://ift.tt/2tBboWu">The “like” of a post is only distinguished by color and by the text below, “You and 3 others” instead of “3”.
Before reactions, Facebook’s UI clearly distinguished that a user pressed “Like” by changing the text to read “Unlike”. The reaction UI identified only the type of reaction (e.g., for “Like” the text simply reads “Like”, changing only slightly in color), but the web interface was updated within days to include boldface to further distinguish a comment that was “liked” from one that was not:
<img alt="" src="http://ift.tt/2sD2E4N">
While the text “Like” is not distinctive, the colors are mildly distinctive to most color-blind users, along with the bold font change:
<img alt="" src="http://ift.tt/2tB1dkF">Image compares unfiltered to deuteranopia filter of Facebook comments with Likes and Loves. The light blue “Like” (clicked) remains only slightly different from the dark blue “Like” text (unclicked), while the red “Love” is distinguishable from the dark blue “Like” by both text and color.
A more distinctive UI change would serve Facebook users well here: by adding the reaction emoji to the left of the “Like” button, users can easily distinguish their reaction when skimming through comments:
<img alt="" src="http://ift.tt/2sD52IS">Image displays a series of Facebook comments, some of which have “Like”, “Love”, and “Haha” reactions. The “Like” reaction is not easily distinguishable from comments that are not liked. The right side of the image displays a suggested UI where “Like” becomes “Unlike” and the “Like”, “Love”, and “Haha” reactions are shown to the right of the Reply button. “Unlike” is visually distinctive when skimming comments.<img alt="" src="http://ift.tt/2sDf5gL">
<h3>Resources</h3>
<ul>
<li><a href="http://ift.tt/2loVsDk">NV Access</a> (Windows) is a screen reader for blind and vision impaired people, which can also convert text into braille if the user has a braille display.</li>
<li><a href="http://ift.tt/2o70NT0">Toptotal Color Blind Filter</a> is a tool to preview web pages with Deuteranopia, Protanopia, Tritanopia, or Greyscale filters.</li>
<li><a href="http://colororacle.org/">Color Oracle</a> (Linux, Mac, Windows) is a color blind simulator to apply a full screen filter to your display.</li>
</ul>
<img alt="" src="http://ift.tt/2tANmuL">
<h4>About the author</h4>
Sarai Rosenberg is a brilliant &amp; successful TPM with bias for action and strong UX and process improvement skills, with experience in SaaS agile SDLC and cloud security. Hire her?
If you enjoyed this, please click the heart below to recommend it, and please share!
<img src="http://ift.tt/2sDf7oT" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2tARKd1">UI of Likes on Social Media</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

UI of Likes on Social Media

Top Stories