Gallery
See what others have created
clearedbyproduct
@clearedbyproduct
Undo and redo
Design undo and redo controls for an editing or workflow interface where users make a sequence of changes. Show the controls in the toolbar or top app bar, not buried in a menu, and make the icons readable without relying on memory alone.
Model both actions as a pair: undo steps back one change, redo restores the last undone change. Include active, disabled, and recently-used states so the hierarchy is clear at a glance. If one side is unavailable, it should read as unavailable, not just visually quieter.
Show what happens after an action is reversed. Keep the user in place, preserve any selected item or open panel when possible, and make the result obvious with a small confirmation, toast, or inline history cue. The design should feel forgiving, but still precise about what can be recovered and what cannot.
What to deliver
- Place undo and redo controls in the app chrome or editor toolbar.
- Use clear arrow icons with text labels or tooltips.
- Show enabled, disabled, and just-used states for both actions.
- Preserve the user’s current context after undo or redo.
- Add a short history cue when an action is reversible or has been reversed.
In designing the 'Undo and redo' pattern, consider using keyboard shortcuts like 'Ctrl + Z' and 'Ctrl + Y' as secondary access methods. This not only caters to power users but also adds a layer of convenience and speed to the interaction.