Lecture 10 Deep Dive Scrolling Techniques Brad Myers

Homework 3: Evaluate Scrolling l l l Homework 3 like Homework 1 Starts today Evaluate 4 scrolling techniques l l l Two scrolling tasks, back to back l l l Note: more techniques, fewer people Test only takes about 1 minute per device One from each required paper Browsing and searching vs. knowing where going Due in 2 weeks (so can be part of mid-term grade) 2 © 2019 - Brad Myers

Early Systems l Sketch. Pad (1963): Pan and zoom with knobs l “The size and position of the part of the total picture seen on the display are controlled by the four black knobs just above the table. ” 3 © 2019 - Brad Myers

Early Systems, 2 l Bravo, 1974 l l l Move to left margin, cursor changes shape Press to see cursor, release to do operation Left = Scroll up – line next to cursor goes to top Right = Scroll down – line at top of window goes to cursor Middle = “thumb” – jump to that percent of the document, with indicator of where you are 4 © 2019 - Brad Myers

Smalltalk l l Smalltalk, 1977 Scroll bar pops up to the left of the document Focus window has a scroll bar Three regions: l l Right region – text moves up Left region – text moves down Center – drag thumb smoothly Thumb shows percent visible 5 © 2019 - Brad Myers

Keyboard keys l l l Word. Star, June 1979, etc. Scroll using keyboard keys

Inter. Lisp, 1980 l l l Popup on left of window, as move out to the left (same as Smalltalk) Thumb showing percent visible Left button – scroll up l l Same as Bravo – line next to cursor to top Right button – scroll down Middle button – thumb Same cursors as Bravo 7 © 2019 - Brad Myers

Star (1981 -1982) l Scroll bar on right to get it out of the way l l Scroll arrows point in the direction the contents will move l l l Reduce the visual clutter Based on user studies +, - buttons to scroll by pages Thumb fixed size diamond, independent of how much of document is visible Clicking in thumb “elevator” region jumps to that part of the document Viewpoint (1985) l When press and hold, can move outside the scroll bar l l “Reduce the hand-eye coordination problems users were experiencing” Right button – move by percent, or by window rather than page 8 © 2019 - Brad Myers

Lisa l l 1983 Arrows pointing up and down Page buttons Fixed size thumb

Macintosh l l 1984 Arrows point in opposite direction l l l Removed the page buttons l l “Click in a grey region” Hold down for auto-repeat – issue? Press in thumb and drag to get to a particular point in the document l l “Point towards data that will be exposed when the arrow is pressed” Arrows auto-repeat Abort by dragging (far) out of scroll bar before release No scroll bar shown if can see whole document Empty scroll bar when not the focus window 10 © 2019 - Brad Myers

Alternate Reality Kit (ARK) l l l 1985 Hand at edge causes scrolling to

Open. Look l l l l 1988 (One of the Unix “X/11” look and feels) Novel elevator – put arrow keys on it Clicking on cable moves by pages Auto-repeat – pushes the pointer along “Cable anchors” – beginning or end of the document Drag from center of elevator Norm Cox found similar in Google Wave (2010) l Extra notch where the selection is? 12 © 2019 - Brad Myers

Ne. XT l l 1989 Scroll bars moved back to the left side of windows Proportionally sized thumb Arrows are together at bottom l l l Auto repeat Alt-key then moves by window-fulls Drag thumb l Alt-key while dragging moves more slowly 13 © 2019 - Brad Myers

Mouse Scroll Wheel l l Popularized by the Microsoft Intelli. Mouse in 1996 along with support for the mouse wheel in Microsoft Office 97. – Wikipedia Turn to scroll by increments l l Can set how much that is Can press wheel for “middle” mouse button New: some move smoothly – no notches Now used for zoom in Google Maps, etc 14 © 2019 - Brad Myers

Rate-controlled scrolling l Can enable press-and-hold of mouse wheel l l Faster if move further from press-point Also, press “middle” button on IBM Thinkpads and pull with pointing stick 15 © 2019 - Brad Myers

Palm Pilot l l 1997 Conventional scroll bar l l Drag thumb or tap

RIM Blackberry dial l l 1999 Move with right thumb Can press in to

Macintosh recent scrollbars l 2001 – thumb now proportional l l Moved arrow buttons to bottom 2011 – no more buttons on end so looks more like i. OS version Now mostly gone Microsoft Word 2015 copied disappearing scroll bars l Can’t tell what percent through document when mouse outside even if still has focus © 2019 - Brad Myers 18

i. Phone l l 2007 Flick to scroll l l Flick to scroll existed well before i. Phone (? date? ) i. Phone has a highly tuned momentum function Stops when touch the screen Innovation: bounce at end l Patent on “Bounce at end of scrolling” for i. Phone submitted by Bas Ording in 2007 (right before 1 st i. Phone was released in 2007) US 7, 469, 381 l Try it! i. Phone vs. Samsung 19 © 2019 - Brad Myers

i. Phone scroll bars l l Displays scrollbar with letters for jumping around in contacts, etc. “Regular” scrollbar in web browser, other applications l Just output – not touchable 20 © 2019 - Brad Myers

i. Phone, cont. l Two-finger drag l l l Takes advantage of multi-touch screen Can also flick with momentum Also two-finger rotate, zoom Imported into Mac touchpad (when? ) Now available on most touchpads 21 © 2019 - Brad Myers

Other Scrolling Mechanisms l Hand to grab the contents and scroll l l Dial on original i. Pod (2001) Tap at edge or flick to go page-bypage on e. Readers “Infinite scroll” like on Twitter & Facebook l l l Mac. Paint (1984), Adobe Acrobat, etc. Usability problems Scroll bars with marks for search results, errors, etc. … what else? 22 © 2019 - Brad Myers

Scroll bar with overview of file l Example: Sublime text editor – most useful

“Sliders” l l l Part of most widget sets to select numbers in a

i. OS variable speed l Move finger down from the slider to adjust scanning speed. l Like a bendy stick connected to slider 25 © 2019 - Brad Myers Image source: https: //lifehacker. com/how-to-control-the-audio-and-video-scrubbing-speed-on-y-5811660

Research System l 1978 l Spatial Data Management System (SDMS) l l l MIT “Architecture Machine Group” now MIT Media Lab Use a small, zoomed out version for 2 -D scrolling l l One monitor for “world view” Main (large) screen for area of current interest 26 © 2019 - Brad Myers

Research Paper l l William Buxton and Brad Myers. "A Study in Two-Handed Input, " Proceedings SIGCHI '86: Human Factors in Computing Systems. Boston, MA. April 13 -17, 1986. pp. 321326. pdf or html and video. (required) Explored two handed interactions l l l Clicking, resizing, scrolling Clicking and resizing done in parallel Scrolling was not, but still faster to use 2 hands 27 © 2019 - Brad Myers

Research Paper l l l George W. Fitzmaurice. 1993. Situated information spaces and spatially aware palmtop computers. Commun. ACM 36, 7 (July 1993), pp. 39 -49. http: //dl. acm. org/citation. cfm? doid=159544. 159566 3 D sensor on hand-held device Moving device causes contents to move as if contents were fixed in place l l l “Move to scroll” Also zooming if move towards and away from the user Later implemented using Smartphone camera and “optical flow” image analysis 28 © 2019 - Brad Myers

Research Paper l l Christopher Ahlberg and Ben Shneiderman. 1994. The alphaslider: a compact and rapid selector. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (CHI '94). ACM, pp. 365371. http: //dl. acm. org/citation. cfm? doid=191666. 191790 New designs for a more accurate slider (scroll bar) l l l One divides thumb into 3 regions, of different scroll speeds Another: depends on speed of mouse movements Another: speed depends on vertical distance from slider User test with 10, 000 items Position and scrollbar fastest Rate controlled failed l Too much overshoot 29 © 2019 - Brad Myers

Research Paper l l Jun Rekimoto. 1996. Tilting operations for small screen interfaces. In Proceedings of the 9 th annual ACM symposium on User interface software and technology (UIST '96). ACM, pp. 167 -168. http: //dl. acm. org/citation. cfm? doid=237091. 237115 Tilt to scroll Also, tilt to select menu items Usability issues [Hinckley 2000] 30 © 2019 - Brad Myers

Research Paper l l l Brad Myers, Kin Pou ("Leo") Lie and Bo-Chieh ("Jerry") Yang, "Two-Handed Input Using a PDA and a Mouse", Proceedings CHI'2000: Human Factors in Computing Systems. April 1 -6, 2000. The Hague, The Netherlands. pp. 41 -48. local pdf. See if could use PDA in left hand Clicking, scrolling, etc. Created a variety of scrollers on PDA screen Used design from IBM study of scrolling techniques l l 10 pages from IBM manual with embedded links Mouse fastest, buttons close, rate-controlled worst 31 © 2019 - Brad Myers

Research Paper l l Selina Sharmin, Oleg Špakov, and Kari-Jouko Räihä. 2013. Reading on-screen text with gaze-based auto-scrolling. In Proceedings of the 2013 Conference on Eye Tracking South Africa (ETSA '13). ACM, pp. 24 -31. http: //dl. acm. org/citation. cfm? doid=2509315. 2509319 Participants preferred to read only at the top of the screen So auto-scrolled when looked below that No statistically significant difference in reading speed or preference 32 © 2019 - Brad Myers