What is the best method to undo an action?

Question

Imagine for the sake of simplicity I have a web app to-do list, where each item is a line and has a check mark near it. When the user clicks the check mark, the task is then "done" and the line fades out of view. Unfortunately, sometimes users check the wrong task. I want to add undo functionality. I've thought of three methods, and I can't decide between them:

1. Undo button.
2. Instead of fading out, leave the item but strike through it and convert the check mark to "restore" button.
3. When a user clicks the check mark pop a confirm dialog (modal or otherwise).

I've seen all three options used in various configuration (for example stack overflow uses 3 for the "flag" action, Trello uses a sort of undo button - it keeps a log of actions you can undo etc.). Is one of the options preferable? Is there a better option?

Answer 1

I like the google mail behaviour. It shows an undo popup:

Strike through (and a "Clear completed tasks" action) is a good (and common) solution for todo lists too.

Answer 2

I like how Amazon handles deletion of items from a wishlist:

Edit: A little explanation...

• Deleted items are replaced with an undo command where the item used to be, which keeps the users' context intact (unlike Google's notify bar or a global "undo" button on the other side of the screen).
• It is no confirmation box, modal or otherwise, to get in the user's way. This would be useful for destructive deletes without an undo, but not for common, "lightweight" tasks. Never use a warning when you mean "undo".
• Subtle animation gives the user the intuitive sense of an item visibly "disappearing" and "reappearing"--again, in the spot it used to be.

Answer 3

I would argue that it's a question of the current view. By that I mean that you should have at least 2 different views. Namely:
1) Incomplete / ToDo
2) Complete / Done

Then marking a task as done merely moves it away from the Incomplete / ToDo view. So then in the complete / Done view, you simply show the item with a check mark next to it, and strike through the text. If someone accidentally marks an item as done, they then just have to uncheck it from the Complete / Done view.

Answer 4

Whichever method you finally use, keep in mind the opposite case, i.e. when the user does really want to mark the task as completed: which of the methods would imply less confusion/annoyance to a user really wanting to mark that task as "Done"? The answer to this question is the answer to your question.

Answer 5

The sort of "action complete" / "undo action" notifications used by Google and Amazon that have been mentioned before are necessary because the former state before the action took place is no longer visible. For example, an email has been moved out of the inbox and into the bin. Therefore, the reverse of that action to undo it is not possible in the current view.

If the result of the action is still visible and therefore "undo-able" with the same action, one could argue that any additional notification is unnecessary. If you decide to strikethrough the item rather than make it fade out, the user will know (or at least be willing to experiment) that clicking it again should uncheck the box and reverse the strikethrough. Therefore, I'd recommend the strikethrough over the fade out (with an option to show/hide all completed items?) as this would be the simplest interaction with the least onscreen clutter.