
Emoji Reaction Popover
Design the reaction popover that appears after a long-press on a chat message or post comment in a mobile app. It sits on top of the live conversation, anchored to the pressed item, and should feel like a quick, in-place response rather than a separate mode.
The popover needs to show a small set of emoji reactions with clear tap targets, plus enough context so the user knows exactly which message is being reacted to. Keep the relationship between finger, message, and reaction choices obvious while the overlay is open.
Think through how the popover avoids covering the message content it refers to, especially near the top or bottom of the screen. The layout should adapt to available space without losing the sense of proximity to the original message.
This is a gesture-driven moment, so the UI has to teach itself fast. The user should understand that a long-press opened it, what each emoji does, and how to dismiss it without committing a reaction.
Use the pressed message as a visual anchor: offset the popover so it never feels detached, and keep the selected emoji large enough to hit with one thumb without moving off the message.
Better at UI design with every challenge
Select complexity and generate challenge.
Pick a platform.
Get design challenge updates in your inbox
New prompts and challenge updates. It’s free.