Guidelines for cross-slide (Windows Store apps) (Windows)

6 out of 7 rated this helpful - Rate this topic

In this article

Overview of cross-slide
When to use cross-slide
Related topics

Important APIs

This topic describes the new Windows UI for selecting and moving elements and provides user experience guidelines that should be considered when using these new interaction mechanisms in your Windows Store app.

Overview of cross-slide

Cross-slide is the touch-optimized technique used by Windows Store apps in Windows 8 for selecting or dragging-and-dropping an item within a content area that is pannable in one dimension (vertical or horizontal).

Both the slide and swipe gestures use cross-slide functionality to manipulate an item by moving it some distance and, based on a distance threshold, provide the selection or drag-and-drop interaction. The gesture must be performed in a direction perpendicular to the panning direction.

When to use cross-slide

Use cross-slide to let users select an item or drag-and-drop an item, if a distance threshold is crossed, using a slide or swipe gesture perpendicular to the single panning direction of a content area .

The following diagram demonstrates both selecting and moving an object using cross-slide. The image on the left shows how an item is selected if a swipe gesture does not cross a distance threshold before the contact is lifted and the object released. The image on the right shows how a sliding gesture crosses a distance threshold and results in the object being moved.

Diagram showing the select and drag and drop processes.

The threshold distances used by the cross-slide interaction are shown in the following diagram.

Screen shot showing the select and drag and drop processes.

To preserve scrolling functionality, a small threshold of 2.7mm (approximately 10 pixels at target resolution) must be crossed before either a select or drag-and-drop interaction is activated. This small threshold helps the system to differentiate cross-sliding from panning, and also helps ensure that a tap gesture is distinguished from both cross-sliding and panning. The following diagram illustrates this technique.

Screen shot showing the disambiguation threshold.

This diagram illustrates how a user intends to scroll horizontally, but moves their finger down slightly at touch down. With no threshold, the interaction would be interpreted as a cross-slide because of the initial vertical movement. With the threshold, the movement is interpreted correctly as horizontal panning.

We strongly recommend cross-slide for lists or collections that scroll in a single direction. For more information, see Adding ListView controls.


A horizontally panning two-dimensional list. Drag vertically to select or move an item.	A vertically panning one-dimensional list. Drag horizontally to select or move an item.

In cases where the content area can be panned in two directions, such as web browsers or e-readers, the press-and-hold timed interaction should be used to invoke the context menu for objects such as images and hyperlinks.

Selecting

Selection is the marking, without launching or activating, of one or more objects. This action is analogous to a single mouse click, or Shift key and mouse click, on one or more objects.

Cross-slide selection is achieved by touching an element and releasing it after a short dragging interaction. This method of selection dispenses with both the dedicated selection mode and the press-and-hold timed interaction required by other touch interfaces and does not conflict with the tap interaction for activation.

In addition to the distance threshold, cross-slide selection is constrained to a 90° threshold area, as shown in the following diagram. If the object is dragged outside of this area, it is not selected.

Diagram showing the selection threshold area.

The cross-slide interaction is supplemented by a press-and-hold timed interaction, also referred to as a "self-revealing" interaction. This supplemental interaction activates an animation that indicates what action can be performed on the object. For more information on disambiguation UI, see Guidelines for visual feedback.

The following screen shots demonstrate how the self-revealing animation works.

Press and hold to initiate the animation for the self-revealing interaction. The selected state of the item affects what is revealed by the animation: a check mark if unselected and no check mark if selected.
Select the item using the swipe gesture (up or down).
The item is now selected. Override the selection behavior using the slide gesture to move the item.

Note In addition to the cross-slide interaction, a single tap interaction can be used for selection in applications where selection is the only primary action that can be performed. The cross-slide self-revealing animation is displayed to disambiguate this functionality from the standard tap interaction for activation and navigation.

Selection basket

The selection basket is a visually distinct and dynamic representation of items that have been selected from the primary list or collection in the application. This feature is useful for tracking selected items and should be used by applications where:

Items can be selected from multiple locations.
Many items can be selected.
An action or command relies upon the selection list.

The content of the selection basket persists across actions and commands. For example, if you select a series of photographs from a gallery, apply a color correction to each photograph, and share the photographs in some fashion, the items remain selected.

If no selection basket is used in an application, the current selection should be cleared after an action or command. For example, if you select a song from a play list and rate it, the selection should be cleared.

The current selection should also be cleared when no selection basket is used and another item in the list or collection is activated. For example, if you select an inbox message, the preview pane is updated. Then, if you select a second inbox message, the selection of the previous message is canceled and the preview pane is updated.

Queues

A queue is not equivalent to the selection basket list and should not be treated as such. The primary distinctions include:

The list of items in the selection basket is only a visual representation; the items in a queue are assembled with a specific action in mind.
Items can be represented only once in the selection basket but multiple times in a queue.
The order of items in the selection basket represents the order of selection. The order of items in a queue is directly related to functionality.

For these reasons, the cross-slide selection interaction should not be used to add items to a queue. Instead, items should be added to a queue through a drag-and-drop action.

Moving (drag and drop)

Drag-and-drop actions move an object from one location to another.

A cross-slide drag-and-drop action is achieved by touching an object and dragging it past a distance threshold. This distance threshold is required by Windows Touch to differentiate between the drag-and-drop action and the selection action.

If more than one object needs to be moved, select each item with cross-slide selection and then drag them.

Guidelines for cross-slide (Windows Store apps)