Guidelines for flip view controls

Applies to Windows and Windows Phone

A sample of what a standard flip view control looks like

Description

The flip view control lets people flip through views in an app or through a collection of items, like photos in a photo album, one at a time. It offers people a way to look at each individual item while navigating through the collection.

Example

A screenshot illustrating the standard flip view control

Is this the right control?

The flip view control lets people flip through views or items one at a time. Flip buttons appear on mouse hover and let people flip to the next or previous item.

Image of a FlipView control

You can also add a context indicator control so users can jump directly to a particular item.

Image of a context indicator with a FlipView control

Dos and don'ts

  • Use a flip view control to:
    • Flip between items in a small collection ( < 10) of related items. For example, in a shopping app, you might want to show several images of a product in a product details page. You can use the context indicator control for a small collection, but this is often not necessary.

    • Flip between items in a medium-sized list (10 to 25 ) of related items. For example, in a real estate app, you might want to show a number of images of each house, showcasing the rooms and views. For these medium-sized lists, include a context indicator control, like a filmstrip of thumbnails, that lets users to jump to specific photos.

    • Flip between views of an application. For example, an app launcher can have one view that shows a user's favorites in a grid and another that shows the favorites in a list. You can add a flip view control to let users navigate from one view to another.

  • Use a context indicator when the items in the collection don't provide enough contextual information to help users know where they are in the collection. A flip view for days of the week would not need a context indicator, whereas a flip view for product images would.

  • Give users an indication of where the current item is in the collection. Use 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.

  • Tailor the indicator for the number of items and the specific scenario. For small collections, you can show the entire collection in the context indicator. For medium-sized collections, you might want to show only 5 at a time, for example. For purely visual collections, you might display thumbnails; for text-based collections, you might prefer to display the alphabet so users can jump to the right letter.

  • Allow users to jump to specific items. Make sure you always help users feel in control of where they are and where they want to go.

  • Don't use a flip view control for large collections. The repetitive motion of flipping through each item becomes tedious for users. Instead, use one of the following:

Related topics

For designers
Guidelines for ListView controls
For developers (HTML)
Adding FlipView controls
Quickstart: Adding a FlipView
WinJS.UI.FlipView object
For developers (XAML)
Adding FlipView controls
Quickstart: Adding a FlipView
FlipView class

 

 

Show:
© 2014 Microsoft