8

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?

1
  • 1
    Are these tasks being "completed" or "deleted"? These are conceptually different in todo apps, and the undo UI should probably be different too. Completion implies the tasks was actually done and should be logged as such, while deletion is akin to a cancelation--no log required. Similar to deletion vs archiving of gmail messages, perhaps. Todo app Things (culturedcode.com/things) handles this distinction elegantly. Feb 3, 2013 at 23:22

5 Answers 5

7

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

gmail undo

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

5
  • 1
    It looks a bit crude. I always thought the popup is awkwardly positioned and it's not really predictable when it goes away. But as it is Google this is a pretty strong argument.
    – Mikle
    Feb 2, 2013 at 22:15
  • I think it is not meant to be too prominent. If you want to quickly undo, you can, but otherwise your trash is still there if you want to retrieve it latero n.
    – Rich
    Feb 3, 2013 at 2:07
  • @Mikle in gmail you can undo the most recent action only (there is no undo stack) so this popup should look "fragile" thus showing that you can undo only until next undoable action will happen. Personally, I like the position and decoration: it's visible, not disturbing and always (and it's more important) located at the same place. Feb 3, 2013 at 2:39
  • I ended up choosing this option. I'm not sure it is the right solution, but it seems the most popular one. I'm not sure there is even a right solution to this question, but this will do. Thanks @alexeypegov.
    – Mikle
    Feb 3, 2013 at 21:49
  • @Mikle look at checkvist.com, they have the similar behaviour except that they have two separate actions: one for closing a task and one for removing it (and undo for both). Feb 4, 2013 at 6:06
13

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

enter image description here

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.
1
  • 1
    This isn't really the same thing - Amazon wants to sell you the item so from its usability standpoint it wants to entice you to undo. In my example the undo is for exceptional cases only and should be more subtle IMHO.
    – Mikle
    Feb 13, 2013 at 17:12
4

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.

enter image description here

1
  • This is broadly what I'd post. The only thing I'd add is that it'd be nice to visually express the movement from one list to another - possibly a transition towards the side of the 'done' tab. Feb 2, 2013 at 22:42
3

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.

0

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.

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.