Logo of UI Challenges
Sign in
Wireframe example for Emoji Reaction Popover
An example interpretation of the prompt
Icon of target

Emoji Reaction Popover

Icon of book open

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.

Icon of book open

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.

You can always choose to receive scheduled challenges. A unique design prompt will be sent to your email daily for the duration you select.

Get design challenge updates in your inbox

New prompts and challenge updates. It’s free.