10 Deep Dive Scrolling Techniques Brad Myers 05899A05499A Interaction Techniques Spring 2014 2014 Brad Myers Homework 3 Evaluate Scrolling Homework 3 like Homework 1 Evaluate 4 scrolling techniques ID: 397028
Download Presentation The PPT/PDF document "1 Lecture" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
1
Lecture 10: Deep Dive: Scrolling Techniques
Brad Myers05-899A/05-499A: Interaction TechniquesSpring, 2014
© 2014 - Brad MyersSlide2
Homework 3: Evaluate Scrolling
Homework 3 like Homework 1Evaluate 4 scrolling techniquesNote: more techniques, fewer peopleTest only takes about 1 minute per deviceTwo scrolling tasks, back to back
One from each required paperBrowsing and searching vs. knowing where goingDue in 2 weeks (so can be part of mid-term grade)© 2014 - Brad Myers
2Slide3
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 Myers3Slide4
Early Systems, 2
Bravo, 1974Move to left margin, cursor changes shapePress to see cursor, release to do operationLeft = Scroll up – line next to cursor goes to topRight = Scroll down – line at top of window goes to cursorMiddle = “thumb” – jump to that percent of the document, with indicator of where you are
© 2014 - Brad Myers4Slide5
Smalltalk
Smalltalk, 1977Scroll bar pops up to the left of the documentFocus window has a scroll barThree regions:
Right region – text moves upLeft region – text moves downCenter – drag thumb smoothlyThumb shows percent visible© 2014 - Brad Myers
5Slide6
Keyboard keys
WordStar, June 1979, etc.Scroll using keyboard keysScrolls to keep cursor on the screen© 2014 - Brad Myers
6Slide7
InterLisp, 1980
Popup on left of window, as move out to the left (same as Smalltalk)Thumb showing percent visibleLeft button – scroll upSame as Bravo – line next to cursor to topRight button – scroll downMiddle button – thumb
Same cursors as Bravo© 2014 - Brad Myers
7Slide8
Star (1981-1982)
© 2014 - Brad Myers8
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 pageSlide9
Lisa
1983Arrows pointing up anddownPage buttonsFixed size thumb
© 2014 - Brad Myers9Slide10
Macintosh
1984Arrows point in opposite direction“Point towards data that will be exposed when the arrow is pressed”Arrows auto-repeatRemoved 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 documentAbort by dragging (far) out of scroll bar before releaseNo scroll bar shown if can see whole documentEmpty scroll bar when not the focus window
© 2014 - Brad Myers
10Slide11
Alternate Reality Kit (ARK)
1985Hand at edge causes scrolling to start from that side“Teleporters”
© 2014 - Brad Myers11Slide12
OpenLook
© 2014 - Brad Myers12
1988(One of the Unix “X/11” look and feels – see Lecture 8)Novel elevator – put arrow keys on itClicking on cable moves by pages
Auto-repeat – pushes the pointer along“Cable anchors” – beginning or end of the documentDrag from center of elevatorSlide13
NeXT
1989Scroll bars moved back to the left side of windowsProportionally sized thumbArrows are together at bottomAuto repeatAlt-key then moves by window
fullsDrag thumbAlt-key while dragging moves more slowly© 2014 - Brad Myers
13Slide14
Mouse Scroll Wheel
© 2014 - Brad Myers14
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, etcSlide15
Rate-controlled scrolling
Can enable press-and-hold of mouse wheelFaster if move further from press-pointAlso, press “middle” button on IBM Thinkpads and pull with pointing stick
© 2014 - Brad Myers15Slide16
Palm Pilot1997
Conventional scroll barDrag thumb or tap onarrows with stylusArrow buttons© 2014 - Brad Myers
16Slide17
RIM Blackberry dial1999
Move with right thumbCan press in to activateselected item Not a touch screen© 2014 - Brad Myers
17Slide18
Macintosh recent scrollbars
2001 – thumb now proportionalMoved arrow buttons to bottom2011 – no more buttons on endso looks more like iOS version
© 2014 - Brad Myers
18Slide19
iPhone
© 2014 - Brad Myers19
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. SamsungSlide20
iPhone scroll bars
Displays scrollbar with letters for jumping around in contacts, etc.“regular” scrollbar inweb browser, otherapplicationsJust output – nottouchable
© 2014 - Brad Myers20Slide21
iPhone, cont.
Two-finger dragTakes advantage of multi-touch screenCan also flick with momentumAlso two-finger rotate,zoom
Imported into Mactouchpad (when?)Now available onmost touchpads© 2014 - Brad Myers
21Slide22
Other ScrollingMechanisms
© 2014 - Brad Myers22
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?Slide23
“Sliders”
© 2014 - Brad Myers23
Part of most widget sets to select numbers in a range
Usually look different than scrollbars, but behave similarly
Two-handled
“range sliders”Slide24
Research System
1978Spatial Data Management System (SDMS)MIT “Architecture Machine Group”now MIT Media LabUse a small, zoomed out version for 2-D scrollingOne monitor for “world view”
Main (large) screen for area of current interest© 2014 - Brad Myers
24Slide25
Research Paper
© 2014 - Brad Myers25
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. 321-326.
pdf
or
html
and
video
. (required)
Explored two handed interactions
Clicking, resizing, scrolling
Clicking and resizing done in parallel
Scrolling was not, but still faster to use 2 handsSlide26
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 deviceMoving device causes contents to move as if contents were fixed in place“Move to scroll”Also zooming if move towards and away from the userLater implementedusing Smartphone
camera and“optical flow”image analysis
© 2014 - Brad Myers
26Slide27
Research Paper
© 2014 - Brad Myers27
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. 365-371.
http://dl.acm.org/citation.cfm?doid=191666.191790
New designs for a more accurate slider (scroll bar)
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
Too much
overshootSlide28
Research Paper
Jun Rekimoto. 1996. Tilting operations for small screen interfaces. In Proceedings of the 9th 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 scrollAlso, tilt to select menu itemsUsability issues [Hinckley 2000]© 2014 - Brad Myers
28Slide29
Research Paper
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 handClicking, scrolling, etc.Created a variety of scrollers on PDA screen
Used design from IBM study of scrolling techniques10 pages from IBM manual with embedded linksMouse fastest, buttons close, rate-controlled worst
© 2014 - Brad Myers
29Slide30
Research Paper
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 screenSo auto-scrolled when looked below that
No statistically significant difference in reading speedor preference
© 2014 - Brad Myers
30