Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
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. –  Sam Pierce Lolla Feb 3 '13 at 23:22
add comment

5 Answers 5

up vote 6 down vote accepted

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.

share|improve this answer
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 '13 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 '13 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. –  alexeypegov Feb 3 '13 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 '13 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). –  alexeypegov Feb 4 '13 at 6:06
add comment

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.

share|improve this answer
add comment

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

share|improve this answer
    
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. –  Jimmy Breck-McKye Feb 2 '13 at 22:42
add comment

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.
share|improve this answer
    
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 '13 at 17:12
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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