9

I'm wondering what is the best UI pattern to allow users to 'undo' an action in a rich web application?

Background:
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:

Goodbye Back Button: Rich web apps, a need for Undo, and rethinking what the Back button should be for and what it should do. - a must read.

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

enter image description here

  • 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

enter image description here

  • 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

enter image description here

  • 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


----- Others??
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??

Improve this question
6
  • 1
    I would also like to know how to implement it to support multiple undos. If I delete one mail then one more in Google Mail, the undo will only work for the last deleted mail (afaik)...
    – Henrik Ekblom
    Aug 8, 2014 at 23:02
  • I think the answer to this question is highly contextual--meaning that how you implement an undo or undo-like feature will depend entirely on what you need to undo. For example, with email or file examples, the pattern would typically be retrieving the object from 'trash' or 'deleted' repositories.
    – DA01
    Aug 8, 2014 at 23:16
  • 1
    Also, I don't think that's a very good article at all. It's based on some misconceptions. One, a web app shouldn't disrupt the back button. They often do, but that's do to bad software development--not any inherit limitation with the concept of a back button. Another is assuming 'back' is always an 'oops' decision. That's not true at all. For example, often a user goes back because they are done with whatever they were looking for and now are ready to go look for something else.
    – DA01
    Aug 8, 2014 at 23:19
  • @DA01 I have a feeling you scanned through the article rather quickly - he most definitely doesn't suggest Back is always an 'oops' decision, in fact, he says Back serves both as an 'oops' as well as an 'ok' action.
    – M.A.X
    Aug 9, 2014 at 1:29
  • Even changes to grid view and back can be more usable with Back button. It is simple and reliable vs searching around where the heck the right icon sits.
    – Dmitri Zaitsev
    Aug 22, 2014 at 5:04

1 Answer 1

Reset to default
2

The solution will be to look at how desktop apps do undo processes. Desktop software does undo and redo very well in many cases.

Say I open a Word document, or a photoshop file, and I make some edits. At any given point I can use the undo or redo functions to move backwards and forwards through a sequence of snapshot states taken by the application as I performed my edits.

Depending on the software, the undo snapshot trigger will occur on different application events, such as selecting a tool, applying an edit, typing, drawing etc. The frequency of the snapshots will depend software itself and possibly on system power / memory etc.

It's important to note that this process is independent of the state of saved data. I can move about freely in this history, edit as I please and decide to save the state of the content at any given time. I must explicitly choose to save the state of the UI to data storage. The software may well also autosave, allowing me to recover from a crash. If it's really good when I recover from that crash I'll still have my undo history!

It is likely, though I don't know for sure, that differences are recorded rather than entire copies, much in the way that version control software works (VCS is also very good at undo and redo).

You just have to mimic this. You could take snapshots of page state with javascript, autosave these (locally or remotely) allowing the user to move about in the undo history retrieving state, bind it all to the expected keys and buttons in your app and also provide a solid 'save' function that would permanently update the data. This last thing would be the sort of thing you'd trigger a warning for on page close (like a desktop app).

You can also use the history api to take more control of the back button function, making it move back in a more finegrained fashion thoough AJAX updates etc.

Have a look at Google Docs, they implement undo, redo, save and autosave in a web app well. They basically follow the desktop model.

Improve this answer
1
  • Google docs (while editing a file) provide the same desktop style undo as MS Office. Outside of a given file (Google Drive), they use the same Undo pattern as gmail (pop-up). I added the pattern to the original post.
    – M.A.X
    Aug 9, 2014 at 1:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.