Guidelines for flip view controls
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.
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.
Horizontal is the typical layout for flip view, as it works well on all devices and in either portrait or landscape orientation.
Flip view can also be laid out in a vertically scanning style.
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.
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.
- 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.