Design Openbook

Match the Completion Signal to the Task

How big should the completion feedback be for different tasks in an app? Scale it to the task: a checkmark draw for one to-do, a badge for a daily goal, a success screen for payment or sign-up, and confetti only for rare milestones.

The signal for finishing should match the size of the task. Fireworks for a small task turn into noise quickly.

Terms and previews

Tap a preview to pause it; tap again to play.

  1. Checkmark draw

    The check mark is drawn as a line

  2. Strikethrough

    A line is drawn through the to-do text

  3. Badge unlock

    A new badge pops out as it is earned

  4. Success screen

    A full screen that announces the result

  5. Confetti

    Colored paper bursts out

How to use it

  • One to-do gets a checkmark draw, a daily goal gets a badge, and payment, sign-up or finishing a first project gets a success screen. Confetti is only for things that happen a few times a year.
  • Put a next-step button on the success screen. Celebrating and leaving a dead end is not enough.
  • Use haptics once, only for big completions. If it buzzes every time, users turn it off.

Prompts to copy

3-level completion feedback

Build completion feedback for a to-do app in 3 levels.
1. One item checked: Checkmark draw 200ms + Strikethrough on the text.
2. All of today's tasks done: a small Badge unlock appears at the top.
3. 7 days in a row: Success screen + one Confetti burst + an [Add tomorrow's tasks] button.
The smaller the step, the quieter it should be.

Source posts: @uxwoodytips

All cards (27)