Guidelines for cross-slide (Windows Store apps)
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.
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.
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.
The threshold distances used by the cross-slide interaction are shown in the following diagram.
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.
|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.
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.
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.
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.
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.
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 common user interactions
- Touch interaction design
- Quickstart: Pointers
- Quickstart: DOM gestures and manipulations
- Quickstart: Static gestures
- Quickstart: Manipulation gestures
- Tutorial (Windows Store apps using C#/VB/C++ and XAML)
- Quickstart: Touch input
- Quickstart: Handling pointer input
- Tutorial (Windows Store apps using C++ and DirectX)
- Responding to touch input (DirectX and C++)
- Samples (DOM)
- HTML scrolling, panning and zooming sample
- Input: Instantiable gestures sample
- Samples (Windows Store app APIs)
- Input: Windows 8 gestures sample
- Input: XAML user input events sample
- XAML scrolling, panning, and zooming sample
- Samples (DirectX)
- DirectX touch input sample
- Input: Manipulations and gestures (C++) sample
Build date: 11/29/2012