Scrolling

Designers

WilliamJonMcCann, JakubSteiner, AllanDay

Objectives

  • Natural scrolling on touch devices
  • Support for:
    • Touch screen
    • Touchpad
    • Scroll-wheel mouse
    • No-wheel mouse
    • Keyboard

Relevant Art

OS X

http://cdn.slashgear.com/wp-content/uploads/2011/08/os_x_lion_scroll_bar.jpg

iOS

http://www.iphonesdkarticles.com/2009/01/uitableview-indexed-table-view.html

Picasa

http://ignorethecode.net/upload/219/picasa_scroll_explanation.png

http://ignorethecode.net/blog/2009/11/17/picasas_scrollbars/

Ubuntu Unity

ayatana-scrollbars.png

Gmail

https://lh6.googleusercontent.com/-bdCD0buro1E/TspprFJLkPI/AAAAAAAAYyA/LQes4hg2nUE/s400/Screenshot%2520at%25202011-11-21%252010%253A04%253A05.png https://lh4.googleusercontent.com/-RuTMY76zivk/TspprFt1-RI/AAAAAAAAYyE/wY8lu1eCG6c/s400/Screenshot%2520at%25202011-11-21%252010%253A04%253A09.png

Discussion

Scrollbars

  • Don't show mouse-based affordances when using only touch since content itself should be manipulated.
  • Focus the design on indication rather than manipulation for touch.
  • Reduce visual noise and complexity for both touch and pointer-driven UI.
  • Do not require reserving much space for scrollbars.
  • Support intra-window scrolling as well as window edge scrolling (in left panes for example).
  • On pointer-based devices allow manipulating bar to scroll.
  • On pointer-based devices allow paging up/down.

Long content / lists

Scrolling long content using the scrollbar handle has always been very difficult. What other examples do:

  • Gmail combines paging with scrolling.
  • OS X - drag handles aren't that effective, but they have very effective touchpad/magic mouse scrolling to compensate.
  • Ubuntu - overlaid paging buttons.

GNOME 3.10 - a fine scrolling mode was introduced, activated with the shift key. In GNOME 3.14 the shift modifier was replaced with long press to activate. The delay for activation was increased for 3.16, due to issues with fine scrolling mode being accidentally triggered.

Alternative solutions could include:

  1. Rely on scrollwheel/touchpad scrolling for long lists, without the aid of a fine scrolling mode (this would be helped by improvements to scrollwheel/touchpad scrolling, such as smoother and/or kinetic scrolling).
  2. Variable scroll speed, depending on drag speed (could be linear or two-step).

  3. Limit the range of the scrollbar for very long lists.

Tentative Design

Touch

  • Show a minimal indicator for view position.
  • No direct manipulation of indicator.
  • May overlap view content.

Animated study -- http://jimmac.fedorapeople.org/gnome3/scrolling-touch.webm

Pointer

  • Show a simple handle for view position and for direct manipulation.
  • Should focus on indication when not being manipulated.
  • Should take advantage of screen edge scrolling in maximized windows (Fitt's Law).
  • When pointer hovers over bar:
    • Show a channel to use used for paging.
    • Add affordance for direct manipulation.
  • When dragged by pointer:
    • Scroll the content view as smoothly as possible.
    • Use a linear scaled scroll factor.

Animated study -- http://jimmac.fedorapeople.org/gnome3/scrolling-pointer.webm

Comments

  • Scrollbars used to show the current position within a document. On touch when they can be hidden, they need to show up:
    • when the document first shows up
    • any time it's being interacted with (window gaining focus for example)
    • even if you have a "don't show scrollbars if i don't need them" setting for non-touch
    Jon thinks that could also be always visible on touch, if they are minimal enough (though they then hamper the display of the document) (@SIG)
  • CarlosGarnacho: I'm looking into implementing this in GTK+ with an eye on mixed input environments, where I think we want dynamic switch between mouse and touch driven approaches. The problem I mainly see is the "should/shouldn't overlap view content" dichotomy. For dynamic mode switching, and if we want to avoid relayouting the view content, overlapping scrollbars anytime makes most sense.

  • A users experience with our arrow-less scrollbars: http://bugzilla.redhat.com//show_bug.cgi?id=812982

See Also

Design/OS/Scrolling (last edited 2015-04-14 12:08:36 by AllanDay)