10InteractionTechnique--Scrolling Techniques

下载 0

知秋一叶

发布于

1812

人观看

#信息技术

The course is mainly about Scrolling Techniques,Generally covered early systems, smalltalk, Keyboard keys, inter lisp, star, macintosh, alternate reality kit and so on.

展开查看详情

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

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

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

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

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

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?

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

0点赞

0收藏

0下载