Feedback Button UI Patterns
There is no single "right" way to ask a user whether a chatbot response was good. This MicroSim shows four common patterns side by side. Each panel is live, so you can click the controls and watch the state transitions instead of just reading about them.
Interactive Demo
You can embed this MicroSim in your own page with the following iframe:
1 | |
Overview
The four patterns trade simplicity against the richness of the data they capture:
- Minimal — bare thumbs-up / thumbs-down icons in neutral gray that turn green or red when clicked. Fastest to use, lowest data richness.
- Labeled — the same thumbs paired with "Helpful" / "Not helpful" text in button pills. The labels remove ambiguity and improve accessibility.
- Follow-up — a thumbs-down triggers progressive disclosure: a short menu of reasons ("Wrong answer", "Too vague", "Harmful/unsafe", "Other") plus a free-text box. This pattern captures the most actionable feedback.
- Emoji scale — five reactions from sad to celebration give a graded measure of satisfaction rather than a binary signal.
Try clicking thumbs-down in the follow-up panel to reveal the reason menu, then choose "Other" to expose the free-text field, and finally Submit.
Lesson Plan
- Compare: Have students rank the four patterns by how much useful data each one produces, then by how much effort each asks of the user.
- Explore: Click through every state in each panel and list the visual cues that confirm a click was registered.
- Discuss: Why does roughly 80% of actionable insight come from the follow-up question rather than the thumb itself?
- Apply: Have students choose the best pattern for a high-stakes medical chatbot versus a casual entertainment bot, and justify the choice.