10InteractionTechnique--Scrolling Techniques

1 .1 Lecture 10: Deep Dive: Scrolling Techniques Brad Myers 05-899A/05-499A: Interaction Techniques Spring, 2014 © 2014 - Brad Myers

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

3 .Early Systems SketchPad (1963): Pan and zoom with knobs “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.” © 2014 - Brad Myers 3

4 .Early Systems, 2 Bravo, 1974 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 © 2014 - Brad Myers 4

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

6 .Keyboard keys WordStar, June 1979, etc. Scroll using keyboard keys Scrolls to keep cursor on the screen © 2014 - Brad Myers 6

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

8 .Star (1981-1982) © 2014 - Brad Myers 8 Scroll bar on right to get it out of the way Reduce the visual clutter Scroll arrows point in the direction the contents will move 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) When press and hold, can move outside the scroll bar “Reduce the hand-eye coordination problems users were experiencing Right button – move by percent, or by window rather than page

9 .Lisa 1983 Arrows pointing up and down Page buttons Fixed size thumb © 2014 - Brad Myers 9

10 .Macintosh 1984 Arrows point in opposite direction “Point towards data that will be exposed when the arrow is pressed” Arrows auto-repeat Removed the page buttons “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 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 © 2014 - Brad Myers 10

11 .Alternate Reality Kit (ARK) 1985 Hand at edge causes scrolling to start from that side “ Teleporters ” © 2014 - Brad Myers 11

12 .OpenLook © 2014 - Brad Myers 12 1988 (One of the Unix “X/11” look and feels – see Lecture 8) 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

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

14 .Mouse Scroll Wheel © 2014 - Brad Myers 14 Popularized by the  Microsoft   IntelliMouse  in 1996 along with support for the mouse wheel in  Microsoft Office 97 . – Wikipedia Turn to scroll by increments 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

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

16 .Palm Pilot 1997 Conventional scroll bar Drag thumb or tap on arrows with stylus Arrow buttons © 2014 - Brad Myers 16

17 .RIM Blackberry dial 1999 Move with right thumb Can press in to activate selected item Not a touch screen © 2014 - Brad Myers 17

18 .Macintosh recent scrollbars 2001 – thumb now proportional Moved arrow buttons to bottom 2011 – no more buttons on end so looks more like iOS version © 2014 - Brad Myers 18

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

20 .iPhone scroll bars Displays scrollbar with letters for jumping around in contacts, etc. “regular” scrollbar in web browser, other applications Just output – not touchable © 2014 - Brad Myers 20

21 .iPhone , cont. Two-finger drag 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 © 2014 - Brad Myers 21

22 .Other Scrolling Mechanisms © 2014 - Brad Myers 22 Hand to grab the contents and scroll MacPaint (1984), Adobe Acrobat, etc. Dial on original iPod (2001) Tap at edge or flick to go page-by-page on eReaders “Infinite scroll” like on Twitter & Facebook Usability problems Scroll bars with marks for search results, errors, etc. … what else?

23 .“Sliders” © 2014 - Brad Myers 23 Part of most widget sets to select numbers in a range Usually look different than scrollbars, but behave similarly Two-handled “range sliders”

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

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

26 .Research Paper 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 3D sensor on hand-held device Moving device causes contents to move as if contents were fixed in place “Move to scroll” Also zooming if move towards and away from the user Later implemented using Smartphone camera and “optical flow” image analysis © 2014 - Brad Myers 26

27 .Research Paper 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 3D sensor on hand-held device Moving device causes contents to move as if contents were fixed in place “Move to scroll” Also zooming if move towards and away from the user Later implemented using Smartphone camera and “optical flow” image analysis © 2014 - Brad Myers 26

28 .Research Paper 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 3D sensor on hand-held device Moving device causes contents to move as if contents were fixed in place “Move to scroll” Also zooming if move towards and away from the user Later implemented using Smartphone camera and “optical flow” image analysis © 2014 - Brad Myers 26

29 .Research Paper 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 3D sensor on hand-held device Moving device causes contents to move as if contents were fixed in place “Move to scroll” Also zooming if move towards and away from the user Later implemented using Smartphone camera and “optical flow” image analysis © 2014 - Brad Myers 26