Emoji Reactions bugs and improvements
In this issue, I would like to highlight some findings during my pass to the new Emoji Reactions feature introduced with the MR !77 (merged), which includes some iOS bugs and some design and UX suggestions that we can consider for future releases.
Emojis are not being rendered in iOS (Bug)
The emojis introduced by the Emoji Reactions feature are not being rendered when you choose a reaction in iOS.The original like icon is changing its state, and the emoji icon above is being presented as a circle no matter which emoji you choose.When you remove your emoji selection by pressing the Like button, the circle representing the pass emoji doesn't disappear.
Update: I tested this issue in an iPhone 8 with iOS 13.3.1 and found that the bug does not exist. The problem was that I didn't rebuild the backend after updating the branch, so some changes didn't take place.
Emoji reactions confusing UX (Design/UX)
I find the current Design/UX of the emoji reactions a little bit confusing and inconsistent.
- When I choose a reaction, the base icon changes its style entirely, and it shouldn't.
- Both emojis are presented in different sizes creating a visual inconsistency and duplication.
- The Like text is not indicative of the broad selection of emotions and reactions introduced by this feature.
Proposed design
- Use a more standard icon to represent an emotional reaction like the heart icon or maybe an smile icon.
- Remove the text Like to eliminate the Facebook reference and connotation of the word.
- Keeping the style of the icon even after selecting an Emoji. It will also allow the possibility of choosing many different reactions for a single post or comment.
Emoji stacking can get out of hand (Design)
When a post or comment has more than one reaction represented with the same emoji, these are rendered one after another without space between them. It can get out of hand very quickly if the post is popular enough.
Proposed design
- Introduce blank space between emojis to provide visual separation.
- Add a reaction counter when a particular reaction is present more than once.
- Set a limit of displayed reactions to avoid emoji overcrowding.
- Use an ellipsis button to indicate there are more reactions and make it actionable.
- Display a floating view with the list of reactions and its authors when the user presses the ellipsis button (refer to the Emoji Reactions floating view proposal for a design idea.
Emoji Reactions floating view (Design)
The design of the current Emoji Reactions selection view looks a little bit off from the overall application design, making it looks like an external feature or element, not well integrated.
With this in mind, I would like to propose a redesign to introduce the following improvements:
- Larger height to provide visual access to more reactions at the same time and reduce the need of scrolling.
- Horizontal separation between the edge of the screen and the view borders to accentuate the idea of working over a floating view.
- Rounded corners (for the view and scroll bar) for a softer feeling and consistent design with other floating elements like the Compose button.
Note: this design can be used for other floating views across the application.
