Differences between revisions 5 and 6
Revision 5 as of 2010-11-18 19:12:22
Size: 2784
Editor: shoobe01
Comment:
Revision 6 as of 2010-11-18 19:22:32
Size: 4354
Editor: shoobe01
Comment:
Deletions are marked like this. Additions are marked like this.
Line 6: Line 6:
Scrollbars, long used in information display systems of all sorts, Scrollbars, long used in information display systems of all sorts, are displayed to indicate the scrollable axes, and the relative position within the scrollable area.

Due to the scale of mobile devices, as a general rule scrollbars are not manipulatable themselves. Instead, the content is controlled directly, or indirectly via dedicated scrolling hardware controls.
Line 10: Line 12:
Whenever possible, scrolling should take place on a single axis only. When the situation demands, such as for zooming in to content which otherwise fits the area, a secondary scroll axis will also become available. Considering a secondary axis may discourage design behaviors which may lead to confusion or becoming lost when scrolling.

In rare cases, both axes of movement may be equally important. When zooming in images, for example, the information is equally important in all directions.


Line 17: Line 25:

THUMBNAIL VIEWS!!!!!
Line 29: Line 39:

THUMBNAIL VIEWS IN DETAIL... CLICK TO JUMP TO SECTIONS!!!!
Line 47: Line 59:
When a scrolling area is displayed, but is not in focus so scroll actions will have no effect, this must be communicated somehow. Generally, simply removing the scroll indicators will do, but often the secondary value of the indicator (position and When a scrolling area is displayed, but is not in focus so scroll actions will have no effect, this must be communicated to the user. Generally, simply removing the scroll indicators will do, but often the secondary value of the indicator (position and size) are still useful. When displaying a '''[[Pop-Up]]''' layer simply graying out the scrollbar in the parent window may or may not be sufficient. Additional changes to the scroll indicators may be needed.
Line 51: Line 63:
Do not allow users to become lost in the scrollable area. Do not allow scrolling single axis lists so far that no content is visible.

Consider anchoring secondary axis scrolling to an edge when scrolling on the primary axis. Two dimensional scrolling is often very difficult to achieve with precision.

Do not assume multi-axis scrolling will work for the available dataset. Try it out, and add additional help or more prominent scroll indicators as needed.

Problem

More information is in the page or element than can fit in the viewport. A method of access to this information must be provided.

Solution

Scrollbars, long used in information display systems of all sorts, are displayed to indicate the scrollable axes, and the relative position within the scrollable area.

Due to the scale of mobile devices, as a general rule scrollbars are not manipulatable themselves. Instead, the content is controlled directly, or indirectly via dedicated scrolling hardware controls.

Variations

Whenever possible, scrolling should take place on a single axis only. When the situation demands, such as for zooming in to content which otherwise fits the area, a secondary scroll axis will also become available. Considering a secondary axis may discourage design behaviors which may lead to confusion or becoming lost when scrolling.

In rare cases, both axes of movement may be equally important. When zooming in images, for example, the information is equally important in all directions.

Primary direction: vertical suggested, sometime horizontal (define why! data that applies, generally)...

Additional secondary direction: sometimes a short scroll a secondary direction is needed, such as zooming on a web page (which is generally vertical). Why is this secondary??? Does it anchor more, or... anything else??? Just the part where we allow the scrollbar that direction to be obscured more (behind SKs, as we did for browsers) maybe...

Very rarely, two equal directions, such as a photo.

Do not confuse this pattern with the Infinite Area patterns, either in one or two dimensions, which does not use scrollbars due to the arbitrarily large data set presented.

THUMBNAIL VIEWS!!!!!

Interaction Details

Only items in focus scroll... if multiples, be clear which is in focus...

Cannot grab the scrollbar directly, as a general rule. Phones too small, so it would allow accidental grabbing of page content.

Instead, touch scroll on page... care to not click items and detect scroll actions. Great care with draggable items in a scroll area. Try to avoid drags that go the same direction as the scroll; use multi-finger gestures, etc.

Scroll-and-select generally scrolls by item, line by line for select lists, jumps link to link on pages. But never jump past a link... at which point (or if no links) down and up scroll at a reasonable speed.

Scroll acceleration and inertia...

THUMBNAIL VIEWS IN DETAIL... CLICK TO JUMP TO SECTIONS!!!!

Presentation Details

Scroll indicators are not used in mobile devices to enable scrolling, but to:

  1. Provide an affordance (communicate the function) that the area is scrollable.
  2. Convey the current location within the total content.
  3. Indicate the relative amount of information the viewport displays, as a ratio of the total content.

Show an indicator, always! When do you not?

Relative size of viewport:total based on size of scroll indicator.

Location and relative size need to be absolutely true, even if lazy loaded. SEE OTHER PATTERN

Doesn't need to be huge. Bars can be as small as 2 px. If you have a large bezel or overscan, much larger, but current devices expose the whole screen and tend to have no bezel occlusion, so this is fine

Or, a bar that sticks out further

When a scrolling area is displayed, but is not in focus so scroll actions will have no effect, this must be communicated to the user. Generally, simply removing the scroll indicators will do, but often the secondary value of the indicator (position and size) are still useful. When displaying a Pop-Up layer simply graying out the scrollbar in the parent window may or may not be sufficient. Additional changes to the scroll indicators may be needed.

Antipatterns

Do not allow users to become lost in the scrollable area. Do not allow scrolling single axis lists so far that no content is visible.

Consider anchoring secondary axis scrolling to an edge when scrolling on the primary axis. Two dimensional scrolling is often very difficult to achieve with precision.

Do not assume multi-axis scrolling will work for the available dataset. Try it out, and add additional help or more prominent scroll indicators as needed.

Examples

Scroll (last edited 2013-04-10 23:52:29 by localhost)