Windows Dev Center

Guidelines for flip view controls

[This article contains information that is specific to Universal Windows Platform (UWP) apps and Windows 10. For Windows 8.1 guidance, please download the Windows 8.1 guidelines PDF .]

The flip view control is for viewing images in a collection, such as photos in an album or items in a product details page, one image at a time. For touch devices, swiping across an item moves through the collection. For a mouse, navigation buttons appear on mouse hover. For a keyboard, arrow keys move through the collection.

Is this the right control?

Flip view is best for perusing images in small to medium collections (up to 25 or so items). Examples of such collections include items in a product details page or photos in a photo album. Although we don't recommend flip view for most large collections, the control works for viewing individual images in a photo album.

Examples

Horizontal is the typical layout for flip view, as it works well on all devices and in either portrait or landscape orientation.

Example of horizontal flip view layout

Flip view can also be laid out in a vertically scanning style.

Example of vertical flip view

For any flip view collection, adding a page indicator provides a handy point of reference. The example below shows a typical page indicator, a series of dots in which each dot is selectable and corresponds to an image in the collection.

Example of a page indicator

For larger collections (10-25 items), an indicator that provides more context, such as a filmstrip of thumbnails, can be beneficial. As with a page indicator, a context indicator lets users jump to specific items in the collection.

Example of context indicator

Recommendations

  • Page indicators can be added to any collection. These simple, selectable controls let the user know which item they're on and let the user switch to other items.
  • Consider adding a context indicator (instead of a page indicator) when items in the collection don't provide enough contextual information to let users know where they are in the collection, such as with product details. In addition, consider adding a context indicator to help users know how large the collection is and where the current item is in relation to the others in the collection.
  • Allow users to jump to specific items. Help users feel in control of where they are and where they want to go.
  • Avoid using a flip view control for large collections, as the repetitive motion of flipping through each item can be tedious. An exception would be for photo albums, which often have hundreds or thousands of images. Photo albums almost always switch to a flip view once a photo has been selected in the grid view layout. For other large collections, consider a List view or grid view.

Related topics

Guidelines for lists

 

 

Show:
© 2015 Microsoft