Guidelines for panning (Windows Store apps) (Windows)

7 out of 11 rated this helpful - Rate this topic

In this article

Overview of panning
User experience guidelines
Related topics

Important APIs

This topic describes the new Windows UI for panning and provides user experience guidelines that should be considered when using this new interaction mechanism in your Windows Store app.

Overview of panning

Panning or scrolling helps users navigate within a single view (such as the folder structure of a computer, a library of documents, or a photo album) to display the content of the view that does not fit (horizontally or vertically) within the viewport. Depending on the input device, panning or scrolling is performed within a pannable region using:

A mouse or active pen/stylus to click the scroll arrows, drag the scroll box, or click within the scroll bar.
The wheel button of the mouse to emulate dragging the scroll box.
The extended buttons (XBUTTON1 and XBUTTON2), if supported by the mouse.
The keyboard arrow keys to emulate dragging the scroll box or the page keys to emulate clicking within the scroll bar.
Touch or passive pen/stylus to slide or swipe the fingers in the desired direction.

Sliding (moving the fingers slowly in the panning direction) results in a one-to-one scrolling relationship where the content scrolls at the same speed and distance as the fingers. Swiping (rapidly sliding and lifting the fingers) results in the following physics being applied to the panning animation:

Deceleration (inertia): Lifting the fingers causes panning to start decelerating. This is similar to sliding to a stop on a slippery surface.
Absorption: Panning momentum during deceleration causes a slight bounce-back effect if either a snap point or a content area boundary is reached.

Note Panning physics are not exposed programmatically.

The scroll control

The scroll control provides assistance to users for panning or scrolling a view. It is exposed to Windows Store app using JavaScript developers at design time through Cascading Style Sheets (CSS) only. This control has two display modes based on the type of input detected:

Panning indicators for touch.
Scroll bars for other input types, including mouse, keyboard and stylus.

Note The scroll control is a just-in-time control: the panning indicator is only visible when the touch contact is within the pannable region. Similarly, the scroll bar is only visible when the mouse cursor or keyboard focus is within the scrollable region.

Panning indicators

Panning indicators are similar to the scroll box in a scroll bar. They indicate the proportion of displayed content to total pannable area and the relative position of the displayed content in the pannable area.

The following diagram shows two pannable areas of different lengths and their panning indicators.

Image showing two pannable areas of different lengths and their panning indicators.

Types of panning

Windows 8 supports three types of panning:

Single axis - panning is supported in one direction only (horizontal or vertical).
Rails - panning is supported in all directions. However, once the user crosses a distance threshold in a specific direction, then panning is restricted to that axis.
Freeform - panning is supported in all directions.

Snap points

Snap points influence panning behavior by providing logical points at which to stop the manipulation and ensure a specific subset of content is displayed in the viewport. Cognitively, snap points act as a paging mechanism for the user and minimize fatigue from excessive sliding or swiping in large pannable areas.

Snap points enable users to be imprecise and still achieve their goals.

There are two types of snap-points:

Proximity - After the contact is lifted, a snap point is selected if inertia stops within a distance threshold of the snap point. Proximity snap points still allow a panning to end between snap points.
Mandatory - The snap point selected is the one that immediately precedes or succeeds the last snap point crossed before the contact was lifted (depending on the direction and velocity of the gesture). A manipulation must end on a mandatory snap point.
If maximum and minimum size constraints or boundaries are defined, use visual feedback to demonstrate when the user reaches or exceeds those boundaries.

Panning snap-points are useful for applications such as web browsers and photo albums that emulate paginated content or have logical groupings of items that can be dynamically regrouped to fit within a viewport or display.

The following diagrams show how panning to a certain point and releasing causes the content to automatically pan to a logical location.

		s
Begin panning content.	Pan to a midway point and release.	Pannable area moves to the snap point.

Rails

It is common for web pages to be wider and taller than the screen of a display device. For this reason, two-dimensional panning (horizontal and vertical) is often necessary. Rails improve the user experience in these cases by emphasizing panning in one dimension or direction. This is accomplished by providing horizontal and vertical boundaries (rails) where panning is constrained unless the user drags a finger to exit the rail.

The following diagram demonstrates the concept of rails.

Diagram of a screen with rails that constrain panning

User experience guidelines

Use the following guidelines for applications that support panning:

Panning indicators and scroll bars

Always confirm that panning/scrolling is possible.

Display panning indicators and scroll bars to provide location and size cues. Hide them if the application provides a custom navigation feature.

Note Unlike standard scroll bars, panning indicators are purely informative. They are not exposed to input devices and cannot be manipulated in any way.

Single-axis panning (one-dimensional overflow)

Use single-axis panning when the content area extends beyond the viewport in one dimension (vertical or horizontal) only.

Use vertical panning for a one-dimensional list of items.
Use horizontal panning for a grid of items.

Don’t use mandatory snap-points with single-axis panning if a user must be able to pan and stop between snap-points. Mandatory snap-points guarantee that the user will stop on a snap-point. Use proximity snap-points instead.

Freeform panning (two-dimensional overflow)

Use two-dimensional panning when the content area extends beyond the viewport along both axes (vertical and horizontal).

Override the default rails behavior and use freeform panning for unstructured content where the user is likely to move in multiple directions.

Freeform panning is typically suited to navigating within images or maps.

Chaining embedded or nested content

Chaining is used for panning within a single-axis content area that contains one or more single-axis or freeform panning regions (when the touch contact is within one of these child regions). When the panning boundary of the child region is reached in a specific direction, panning is then activated on the parent region in the same direction.

When a pannable region is placed inside another pannable region it's important to specify enough space between the container and the embedded content. In the following diagrams, one pannable region is placed inside another pannable region, each going in perpendicular directions. There is plenty of space for users to pan in each region.

Image demonstrating an embedded pannable area.

Without enough space, as shown in the following diagram, the embedded pannable region can interfere with panning in the container and result in unintentional panning in one or more of the pannable regions.

Image demonstrating insufficient padding for an embedded pannable area.

This type of perpendicular chaining is useful for apps such as photo albums that support freeform panning within each individual image while also supporting single-axis panning within the album to the previous or next images.

Use single-axis panning (typically horizontal) and column layouts for text and grid-based content. In these cases, content typically wraps and flows naturally from column to column and keeps the user experience consistent and discoverable across Windows Store apps.

Don't use embedded pannable regions to display text or item lists. Because the panning indicators and scroll bars are displayed only when the input contact is detected within the region, it is not an intuitive or discoverable user experience.

Don't chain or place one pannable region within another pannable region if they both pan in the same direction, as shown in the following diagram. This can result in the parent area being panned unintentionally when a boundary for the child area is reached. Consider making the panning axis perpendicular.

Image demonstrating an embedded pannable area that scrolls in the same direction as its container.

Paged view

Use mandatory snap-points when the content is composed of discrete elements or you want to display an entire element. This can include pages of a book or magazine, a column of items, or individual images.

A snap-point should be placed at each logical boundary.
Each element should be sized to fit the view.

Logical and key points

Use proximity snap-points if there are key points or logical places in the content that a user will likely stop.

A snap-point should be placed at each section header.

Guidelines for panning (Windows Store apps)