20InteractionTechnique--Undo

1 .1 © 2014 - Brad Myers Brad Myers 05-899A/05-499A: Interaction Techniques Spring, 2014 Lecture 20: Past to Future: Various Undo Models, Interaction Histories, and Macro Recording

2 .Announcements Final Projects proposal due today OK to collaborate among groups Topic for “ Artificial Intelligence (AI) in Interfaces”? Hayden Demerson’s answer on Quora based on class material “ Who started the trend of using the hamburger icon (☰) as a menu button ?” http://www.quora.com/User-Interfaces/Who-started-the-trend-of-using-the-hamburger-icon-% E2%98%B0-as-a-menu-button “Likes” of the All the Widgets video on Vimeo https:// vimeo.com/61556918 © 2014 - Brad Myers 2

3 .Early Undo Single previous action could be undone Bravo: 1974 Butler Lampson, Charles Simonyi and colleagues in Simonyi went to Microsoft and created Microsoft Word First WYSIWYG text editing Single level undo for most commands Undo again would “undo the undo” = “redo” Some commands could not be undone Could not undo if “moved the selection” Could repeat the previous command with ESC, using the current selection Uses the same arguments as previous time Example: “insert abc ” multiple times © 2014 - Brad Myers 3 history-computer.com/Library/AltoUsersHandbook.pdf ‎

4 .Early Undo Single previous action could be undone Bravo: 1974 Butler Lampson, Charles Simonyi and colleagues in Simonyi went to Microsoft and created Microsoft Word First WYSIWYG text editing Single level undo for most commands Undo again would “undo the undo” = “redo” Some commands could not be undone Could not undo if “moved the selection” Could repeat the previous command with ESC, using the current selection Uses the same arguments as previous time Example: “insert abc ” multiple times © 2014 - Brad Myers 3 history-computer.com/Library/AltoUsersHandbook.pdf ‎

5 .Shortcuts & Issues NY Times (quoted by Wikipedia) says shortcut ^Z was selected “by programmers at the research center Xerox PARC” http://www.nytimes.com/2009/09/20/magazine/20FOB-onlanguage-t.html?_ r=0 Larry Tesler says that is incorrect Redo shortcut ^Y in Macintosh ^-SHIFT-Z in some other systems Design Issue: how big a unit? Often typing coalesced into a single operation Multiple backspaces may or may not be Newer: “intelligent” single operations may be divided into multiple undoable operations E.g., Auto-correct in Word © 2014 - Brad Myers 5

6 .Original Macintosh First system to require Undo everywhere Single-level undo originally “ Multi-level undo commands were introduced in the 1980s” -- Wikipedia But I don’t know exactly which version of Mac OS © 2014 - Brad Myers 6

7 .Linear Multi-Level Undo Model © 2014 - Brad Myers 7 X 1 2 3 4 Linear multi-level model All operations are in a history list Can undo backwards Undone operations are put into a redo list Can then redo forwards But once a new command is executed, anything in the redo list is discarded , so there is always only a linear history May have a limited size of the history list Important modifications Used to stop and commands that were not undoable, like save Now, just skips them in undo stack Contents of the clipboard are not affected by Undo E.g., copy is not undone; cut just undoes the delete Many operations are not generally put into the undo stack Selections, scrolling, rearranging windows, ….

8 .© 2014 - Brad Myers 8 ^Z goes backwards as usual ^G (abort) causes ^Z to change direction and start going forwards (redo) ^G again goes backwards New commands appended to the end, so previous states are still reachable Doesn’t delete non-redone commands Emac’s Linear Undo Model

9 .Kurlander’s Graphics Histories Kurlander , D. and Feiner, S. Editable Graphical Histories. Proc. 1988 IEEE Workshop on Visual Languages. (Pittsburgh, Oct. 10-12, 1988 ). 127-134.  http://ieeexplore.ieee.org/stamp/stamp.jsp?tp=&arnumber=18020&isnumber=662 Video (2:42) Before and after scenes for each operation Can undo back to any point Can then change things and redo the operations afterwards Called the “script” model of undo/redo © 2014 - Brad Myers 9

10 .Hierarchical or Tree-Based Undo © 2014 - Brad Myers 10 1 2 3 4 Keep the entire history of all edits User can return to any previous state of the system In theory, but navigation is difficult Emacs : Cubitt , T. “Undo-Tree package ”: undo- tree.el version 0.6.4 , http ://www.dr-qubit.org/emacs.php Visualizes as a tall tree with unlabeled nodes

11 .Selective Undo Selective Undo – let the user select which operation(s) to undo While leaving later operations intact “Script” model – pretend the operation never happened Can undo all operations to that point, remove the command, then redo all the subsequent commands “Rewrite history” But what if it was a “create” and later operations were “change color”? Not allowed to selectively undo the create? Or later operations are ignored? Many other examples of intertwined operations Not always clear what the user would want Can also support “insert” operation into history Undo back to that point, do the new operation, then redo all subsequent operations Also can be unclear what it means in many situations If create an object, do future operations include it? © 2014 - Brad Myers 11 1 2

12 .Direct Selective Undo Thomas Berlage . 1994 . A selective undo mechanism for graphical user interfaces based on command objects.  ACM Trans. Comput .-Hum. Interact.  1, 3 (September 1994), 269-294. http :// doi.acm.org/10.1145/196699.196721 The “Gina” system introduced “ direct selective undo” Generally add the inverse of the operation to the end of the history Then the selective undo can be undone by the regular undo Undo of change color when there is a later change color Can be disabled if selective undo does not make sense in the current context E.g., undo change color for an object that has been deleted Clearer for users – decide what “inverse” means based on user expectations Change color – change it back © 2014 - Brad Myers 12 1 2 1 2

13 .Direct Selective Undo Thomas Berlage . 1994 . A selective undo mechanism for graphical user interfaces based on command objects.  ACM Trans. Comput .-Hum. Interact.  1, 3 (September 1994), 269-294. http :// doi.acm.org/10.1145/196699.196721 The “Gina” system introduced “ direct selective undo” Generally add the inverse of the operation to the end of the history Then the selective undo can be undone by the regular undo Undo of change color when there is a later change color Can be disabled if selective undo does not make sense in the current context E.g., undo change color for an object that has been deleted Clearer for users – decide what “inverse” means based on user expectations Change color – change it back © 2014 - Brad Myers 12 1 2 1 2

14 .Direct Selective Undo Thomas Berlage . 1994 . A selective undo mechanism for graphical user interfaces based on command objects.  ACM Trans. Comput .-Hum. Interact.  1, 3 (September 1994), 269-294. http :// doi.acm.org/10.1145/196699.196721 The “Gina” system introduced “ direct selective undo” Generally add the inverse of the operation to the end of the history Then the selective undo can be undone by the regular undo Undo of change color when there is a later change color Can be disabled if selective undo does not make sense in the current context E.g., undo change color for an object that has been deleted Clearer for users – decide what “inverse” means based on user expectations Change color – change it back © 2014 - Brad Myers 12 1 2 1 2

15 .Direct Selective Undo Thomas Berlage . 1994 . A selective undo mechanism for graphical user interfaces based on command objects.  ACM Trans. Comput .-Hum. Interact.  1, 3 (September 1994), 269-294. http :// doi.acm.org/10.1145/196699.196721 The “Gina” system introduced “ direct selective undo” Generally add the inverse of the operation to the end of the history Then the selective undo can be undone by the regular undo Undo of change color when there is a later change color Can be disabled if selective undo does not make sense in the current context E.g., undo change color for an object that has been deleted Clearer for users – decide what “inverse” means based on user expectations Change color – change it back © 2014 - Brad Myers 12 1 2 1 2

16 .Direct Selective Undo Thomas Berlage . 1994 . A selective undo mechanism for graphical user interfaces based on command objects.  ACM Trans. Comput .-Hum. Interact.  1, 3 (September 1994), 269-294. http :// doi.acm.org/10.1145/196699.196721 The “Gina” system introduced “ direct selective undo” Generally add the inverse of the operation to the end of the history Then the selective undo can be undone by the regular undo Undo of change color when there is a later change color Can be disabled if selective undo does not make sense in the current context E.g., undo change color for an object that has been deleted Clearer for users – decide what “inverse” means based on user expectations Change color – change it back © 2014 - Brad Myers 12 1 2 1 2

17 .Multi-User Undo Gregory D. Abowd and Alan J. Dix. 1992. Giving undo attention.  Interact. Comput .  4, 3 (December 1992 ), 317-342. http://dx.doi.org/10.1016/0953-5438(92)90021-7 or pdf Multiple users editing at the same time Independent of synchronization issues When user A undoes something, what does it mean? Local: That person’s last operation? Global: Globally the last operation? Abowd proposes global when there is a single cursor (or single selection), but local if multiple cursors (selections) Local undo requires some form of selective undo Can interfere with the other user’s current edits What does GoogleDoc do? © 2014 - Brad Myers 17 1

18 .Multi-User Undo Gregory D. Abowd and Alan J. Dix. 1992. Giving undo attention.  Interact. Comput .  4, 3 (December 1992 ), 317-342. http://dx.doi.org/10.1016/0953-5438(92)90021-7 or pdf Multiple users editing at the same time Independent of synchronization issues When user A undoes something, what does it mean? Local: That person’s last operation? Global: Globally the last operation? Abowd proposes global when there is a single cursor (or single selection), but local if multiple cursors (selections) Local undo requires some form of selective undo Can interfere with the other user’s current edits What does GoogleDoc do? © 2014 - Brad Myers 17 1

19 .Azurite, cont. How find and select what to undo? Timeline visualization of history Select area of code and explore its history interactively Or search backwards through time © 2014 - Brad Myers 19

20 .Adobe PhotoShop History pane displays previous operations ^Z – one-level undo that toggles undo/redo Also Shift- ^Z, Alt-^Z - linear undo forwards and backwards Redo list erased on new operations “History brush” Select point in past and brush area – returns to the way it was in the past Can’t “skip” operations Is selective by region , but not by time Summer project – add real selective undo © 2014 - Brad Myers 20

21 .Adobe PhotoShop History pane displays previous operations ^Z – one-level undo that toggles undo/redo Also Shift- ^Z, Alt-^Z - linear undo forwards and backwards Redo list erased on new operations “History brush” Select point in past and brush area – returns to the way it was in the past Can’t “skip” operations Is selective by region , but not by time Summer project – add real selective undo © 2014 - Brad Myers 20

22 .Adobe PhotoShop History pane displays previous operations ^Z – one-level undo that toggles undo/redo Also Shift- ^Z, Alt-^Z - linear undo forwards and backwards Redo list erased on new operations “History brush” Select point in past and brush area – returns to the way it was in the past Can’t “skip” operations Is selective by region , but not by time Summer project – add real selective undo © 2014 - Brad Myers 20

23 .Adobe PhotoShop History pane displays previous operations ^Z – one-level undo that toggles undo/redo Also Shift- ^Z, Alt-^Z - linear undo forwards and backwards Redo list erased on new operations “History brush” Select point in past and brush area – returns to the way it was in the past Can’t “skip” operations Is selective by region , but not by time Summer project – add real selective undo © 2014 - Brad Myers 20

24 .Adobe PhotoShop History pane displays previous operations ^Z – one-level undo that toggles undo/redo Also Shift- ^Z, Alt-^Z - linear undo forwards and backwards Redo list erased on new operations “History brush” Select point in past and brush area – returns to the way it was in the past Can’t “skip” operations Is selective by region , but not by time Summer project – add real selective undo © 2014 - Brad Myers 20

25 .Adobe PhotoShop History pane displays previous operations ^Z – one-level undo that toggles undo/redo Also Shift- ^Z, Alt-^Z - linear undo forwards and backwards Redo list erased on new operations “History brush” Select point in past and brush area – returns to the way it was in the past Can’t “skip” operations Is selective by region , but not by time Summer project – add real selective undo © 2014 - Brad Myers 20

26 .Adobe PhotoShop History pane displays previous operations ^Z – one-level undo that toggles undo/redo Also Shift- ^Z, Alt-^Z - linear undo forwards and backwards Redo list erased on new operations “History brush” Select point in past and brush area – returns to the way it was in the past Can’t “skip” operations Is selective by region , but not by time Summer project – add real selective undo © 2014 - Brad Myers 20

27 .Adobe PhotoShop History pane displays previous operations ^Z – one-level undo that toggles undo/redo Also Shift- ^Z, Alt-^Z - linear undo forwards and backwards Redo list erased on new operations “History brush” Select point in past and brush area – returns to the way it was in the past Can’t “skip” operations Is selective by region , but not by time Summer project – add real selective undo © 2014 - Brad Myers 20

28 .Adobe PhotoShop History pane displays previous operations ^Z – one-level undo that toggles undo/redo Also Shift- ^Z, Alt-^Z - linear undo forwards and backwards Redo list erased on new operations “History brush” Select point in past and brush area – returns to the way it was in the past Can’t “skip” operations Is selective by region , but not by time Summer project – add real selective undo © 2014 - Brad Myers 20

29 .Adobe PhotoShop History pane displays previous operations ^Z – one-level undo that toggles undo/redo Also Shift- ^Z, Alt-^Z - linear undo forwards and backwards Redo list erased on new operations “History brush” Select point in past and brush area – returns to the way it was in the past Can’t “skip” operations Is selective by region , but not by time Summer project – add real selective undo © 2014 - Brad Myers 20