Monday, December 11, 2017

navigation - Best design for 'undo' in rich web apps?


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




No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...