I'm wondering what is the best UI pattern to allow users to 'undo' an action in a rich web application?
Before you say 'just use the Back button', please read this article which does a great job summarizing why 'back' is not 'undo' and never should be:
This is how I see the distinction between Undo and Back:
- Back: All about reverting navigation; i.e. retracing movement through content/pages
- Undo: Undo is used to help the user revert changes to the actual state of content. For example, undo a delete/move/copy/edit an object.
- Not covered by either: Changes to the 'view mode' of the app are easily recoverable and hence don't need an undo. One such example would be changing the view of a page from list to grid view or changing the sort of a table from ascending to descending. Also actions on objects that don't change the state of the object shouldn't be included in the undo stack, things such as sharing an object, exporting an object, etc
'Undo' UI patterns:
Web browsers have had a 'Back' button since the start, but none currently provide an 'undo' button unfortunately. This means 'undo' needs to be available via the app UI itself.
Just for reference, the below suggestions reference this question. The two most common patterns I've seen are:
----- Google's single-action undo
- pro: Message can be very contextual based on the action
- pro: The undo action is only visible once it is relevant and doesn't take up any unnecessary space until it is useful
- con: only a single undo is possible
- con: overlay pattern might conflict with the underlying UI (hide buttons, links, etc)
----- In-context undo
- pro: Deleted items are replaced with an undo command where the item used to be, which keeps the users' context intact
- con: requires animation to be visible
- con: only useful for situations where the objected that received the action remains on the screen (won't work for a deleted email that is totally removed from the inbox list)
----- Google docs undo
- Inside an open doc, Google mimics the desktop apps and provides an undo/redo button as part of the toolbar
- Outside a given file, Google Drive in general uses the same Undo pattern as Gmail (1 step back undo available for delete/rename/move of a file
I haven't really seen a global undo button done well in a web app. Also haven't seen a lot of Undo functionality done well on mobile. Any other suggestions/thoughts/ideas??