Undo
Also known as: Memento, Multi-Level Undo, Global Undo.
People tend to make mistakes when interacting with applications. Making one mistake can throw away hours of work. Therefore users should be have an option to easily undo their actions and get their work back.
Source: http://www.rememberthemilk.com/
Remember The Milk lets people undo their actions. Immediately after the user has edited an item, an info message with an undo link is shown at the top of the page.
What problem does the pattern solve?
- Whenever there is an opportunity to lose work, the program should allow undo actions.
- The more costly it is to lose data, the more important it is to provide undo.
- Never use a warning when you mean undo.
When to use it?
- Whenever there is an opportunity to lose work, the program should allow undo actions.
- The more costly it is to lose data, the more important it is to provide undo.
- Never use a warning when you mean undo.
How to use it?
- Start by deciding which operations need to be undoable, and creating an undo stack.
- After an undoable action, show and highlight info text for undo at the top of the page (tell the user what he just did) and provide an undo link/button with it.
Why to use it?
- Undo increases user’s feeling of being in control. They feel more confident when they know that mistakes are not permanent.
- Software that allows you to undo is software you can trust.
- We all make mistakes, for example, end up clicking “OK” on the “Are you sure you want to quit” dialog. We don’t pay attention to what we click because we have clicked “OK” for so many times. Therefore, instead of warnings/confirmations popups, provide undo function.
Sources
This pattern is inspired by Aza Raskin’s article “Never Use a Warning When you Mean Undo”.
Useful links
- Multi-Level Undo - UI Patterns and Techniques
- Undo Made Easy with Ajax (Part 2): Time-Sensitive Actions - Humanized Weblog
- Undo Made Easy with Ajax (Part 1.5) - Humanized Weblog
- Undo Made Easy with Ajax (Part 1) - Humanized Weblog
- The importance of Undo - Boagworld
- Design Pattern for Undo Engine - Stack Overflow
- No undo? Redo! - In usability we trust
- Just Undo It: Designing To Recover From Mistakes - Design vs Art Blog
- Undo — Not Confirmation — End of Discussion -justaddwater.dk
- Global Undo - User Interface Design Patterns
- Undo Tutorial - Fluid Project Wiki
- Never Use a Warning When you Mean Undo - A List Apart Articles
- Undo - Quince UX Pattern
- How to write a simple undo system for your app - Javascript Kata
- jQuery undo plugin jQuery undo plugin - MLNTN
- Plugins/Undo - jQuery JavaScript Library
Code snippets
- No code snippets yet.
Example Images (3 examples)
Undo you actions
Source: http://flickr.com/Flickr allows users to undo their actions by showing an undo dialog in an Overlay after an action.
Creative Commons
Comments
Leave a comment