modeless interaction techniques for text editingbam/uicourse/2014inter/lecture07.tesler.pdf ·...
TRANSCRIPT
![Page 1: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/1.jpg)
Modeless Interaction Techniques for Text Editing
Larry Tesler for
Interaction Techniques CMU HCII
!5 Feb 2014
![Page 2: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/2.jpg)
Source: http://www.columbia.edu/acis/history/650.html
The User Experience in 1960
![Page 3: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/3.jpg)
Doug Engelbart’s 1968 NLS Demo
Source: http://dougengelbart.org/images/pix/img0029.jpg
![Page 4: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/4.jpg)
An NLS Workstation circa 1969
Source: http://dougengelbart.org/images/pix/wke.jpg
![Page 5: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/5.jpg)
[Xerox] PARC — Founded 1970
Source: Wikimedia Commons. Photo by Coolcaesar.
![Page 6: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/6.jpg)
Me and my Alto at PARC in 1975
![Page 7: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/7.jpg)
Early Mice
SRI 1963 1968
Telefunken 1968 1972
Xerox PARC 1973
Image sources: dougengelbart.org, oldmouse.com, Wikimedia Commons
![Page 8: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/8.jpg)
User Studies I ran in 1973
The main subject was our secretary
Blank screen study findings included:
She wanted and expected WYSIWYG
To delete [imaginary] text she would run her finger across it on the screen and press a Delete key (verb after object)
Studies of RCG (an NLS subset)
Syntax was verb before object
![Page 9: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/9.jpg)
NLS and RCG delete syntax
verb noun mark OK
Delete Character Word Statement Text (2 marks)
![Page 10: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/10.jpg)
NLS and RCG editing syntax
verb noun mark OK
Delete Move Insert Replace
Character Word Statement Text (2 marks)
mark
![Page 11: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/11.jpg)
RCG user study Aug 1973
![Page 12: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/12.jpg)
Conclusions that endured
Character keys type characters, not commands
The intuitive use of a mouse is to point at things, not to accept and delete commands
There is a “cursor” displayed showing where the next character typed will appear
There are two ways to move the cursor: keystrokes and mouse pointing
![Page 13: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/13.jpg)
Conclusions we abandoned
There are no invisible characters; carriage return is a command, not a character
Space bar and carriage return should do what they do on typewriters
Keys that don’t exist on typewriters do nothing until the user has learned them
The mouse is taught late; its best aspects are emphasized to make a positive impression
![Page 14: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/14.jpg)
Design explorations
![Page 15: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/15.jpg)
Design done with Jeff Rulifson
![Page 16: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/16.jpg)
Design done with Jeff Rulifson
![Page 17: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/17.jpg)
Objections to cut & paste
1. Unfamiliar metaphor (in the ‘60s and ‘70s)
2. User mistakes (e.g., forgot to paste)
3. Speed compared to NLS
4. Extensibility to other applications
![Page 18: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/18.jpg)
Advantages of cut & paste
1. Fewer errors because there can’t be any mode errors.
![Page 19: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/19.jpg)
Advantages of cut & paste
1. Fewer errors because there can’t be any mode errors.
2. Speed. Roberts and Moran (1983) showed that experienced Gypsy users, on average, performed tasks in two-thirds the time of NLS. Fewer key presses were required.
![Page 20: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/20.jpg)
Roberts & Moran Results
Source: “The evaluation of text editors: methodology and empirical results” by Teresa L. Roberts and Thomas P. Moran, CACM 26(4) April 1983 pp. 265-283
![Page 21: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/21.jpg)
Advantages of cut & paste
1. Fewer errors because there can’t be any mode errors.
2. Speed. Roberts and Moran (1983) showed that experienced Gypsy users, on average, performed tasks in two-thirds the time of NLS. Fewer key presses were required.
3. Modeless. The ability to do other things between cut and paste entails more benefits than risks.
![Page 22: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/22.jpg)
What is a mode?
A mode is a state of the user interface that lasts for a period of time, is not associated with any particular object, and has no role other than to place an interpretation on operator input.
![Page 23: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/23.jpg)
Prefix vs. suffix syntax in editors
Prefix Syntax
<verb> <object>
After the verb, the editor must enter a mode to wait for the user to specify the object.
Suffix Syntax
<object> <verb>
After the verb, the editor can perform the command immediately. No mode is needed.
![Page 24: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/24.jpg)
How modes degrade usability
!
Keeping track of mode changes can distract a user from the task at hand.
If the current mode is misjudged, unintended and sometimes disastrous results ensue.
Users often get “stuck” in a mode and ask, “How do I get out of this mode?”
![Page 25: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/25.jpg)
Image source: Gypsy manual, Xerox PARC
![Page 26: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/26.jpg)
Image source: Gypsy manual, Xerox PARC
Modeless Search, Move and Copy
![Page 27: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/27.jpg)
Image source: Gypsy manual, Xerox PARC
Modeless Search, Move and Copy
![Page 28: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/28.jpg)
Image source: Gypsy manual, Xerox PARC
Modeless Search, Move and Copy
![Page 29: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/29.jpg)
Gypsy photographed
![Page 30: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/30.jpg)
Cut PasteClick
Click&Drag
verb noun mark OK
Delete Move Insert Replace
Character Word Statement Text (2 marks)
mark
selectverb
type
![Page 31: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/31.jpg)
ModelessCut PasteClick
Click&Drag
verb noun mark OK
Delete Move Insert Replace
Character Word Statement Text (2 marks)
mark
selectverb
type
NLS
![Page 32: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/32.jpg)
Modeless
verb noun mark OK
Delete Move Insert Replace
Character Word Statement Text (2 marks)
mark
selectverb
type
NLS
![Page 33: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/33.jpg)
Modeless error recovery
Backspace backs up one step.Command Delete starts over.
Selection error? Reselect.Command error? Undo.
NLS error recoveryverb noun mark OK
mark
selectverb
type
![Page 34: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/34.jpg)
✔ One button subset
Novices used only the top button
Single click selected between characters
Click & drag selected a character range
Marginal click & drag selected paragraphs
Typing, cut and paste were about like today
Look-b/i/u did bold/italic/underline
^character range
![Page 35: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/35.jpg)
✘ Middle & bottom buttons
For power users
Single click selected one character
Marginal click selected one paragraph
Double click [and drag] selected word[s]
Otherwise, same as the top button
But they differed from each other...
![Page 36: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/36.jpg)
✘ Source and Target
For power users
Top or middle button selected the target
Bottom button selected the source
Anything cut also became the source
Paste copied the source to the target
Cut+Paste transposed source and target
target
![Page 37: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/37.jpg)
✔✔✘
✘
✔✘
✔
✔✔
✔✔
✘✔
✘✘
✔
Gypsy scorecard
✘
✘
Image source: Gypsy manual, Xerox PARC
![Page 38: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/38.jpg)
Smalltalk-76 (Dan Ingalls)
Mouse buttons: (1) Select (2) Edit Menu (3) Window Menu
![Page 39: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/39.jpg)
Smalltalk-76 (Dan Ingalls)
Mouse buttons: (1) Select (2) Edit Menu (3) Window Menu
Edit Menu included:
copycutpasteundo
![Page 40: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/40.jpg)
June 1975 PR
![Page 41: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/41.jpg)
Apple Lisa 1980-1983
Source: Wikimedia Commons. -screenshot.
![Page 42: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/42.jpg)
Apple Lisa 1980-1983
Source: Wikimedia Commons. -screenshot.
![Page 43: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/43.jpg)
Cut & Paste Contagion
Bus. Week
Gypsy
Smalltalk BravoX
LisaWrite
Mac
MS Word
Windows
Woodstock
![Page 44: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/44.jpg)
iOS
Cut & Paste Contagion
Bus. Week
Gypsy
Smalltalk BravoX
LisaWrite
Mac
MS Word
Windows
Woodstock
![Page 45: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/45.jpg)
Gypsy’s Modeless Text Editing Pattern
Click to select an insertion point Double click to select a word Click and drag to select a passage
Type to replace the selection by new text Cut to move the selection to a buffer Paste to replace the selection by the buffer Control-B to bold the selection, etc.
Undo to undo the most recent command
Edit a search query as you edit any text
![Page 46: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/46.jpg)
Summary
Qualitative and quantitative user studies showed that a two-step Cut and Paste enabled faster editing and fewer errors.
Those studies and subsequent mass market adoption validated the usability advantages of the modeless text editing pattern.
![Page 47: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/47.jpg)
Discussion
![Page 48: Modeless Interaction Techniques for Text Editingbam/uicourse/2014inter/lecture07.Tesler.pdf · Modeless Interaction Techniques for Text Editing Larry Tesler! for! Interaction Techniques!](https://reader033.vdocument.in/reader033/viewer/2022050406/5f83f1b495526f24a2659f92/html5/thumbnails/48.jpg)
Thank you