Guidelines for list view and grid view

[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.]

Lists provide consistent, touch-optimized ways to display and interact with collection-based app content. List view and grid view controls can help you display lists effectively. With list view and grid view controls, you can categorize items and assign group headers, drag and drop items, curate content, and reorder items.

List view or grid view?

Although list views and grid views have similar features, their uses vary.

List views are recommended for:

  • Displaying content collections that are primarily text.
  • Navigating a single or categorized collection of content.
  • Creating the master pane in the master/details pattern. Master/details is the pattern often used in email apps, in which one pane has a list of selectable items while the other pane has a detailed view of the selected item. See choose the right pattern in this article for an example of this view.

The list layout has group headers and displays as a single-column, reads from top to bottom, and pans or scrolls vertically.

Example of a list view with four main unit types

Grid views are recommended for:

  • Displaying content collections that are primarily images.
  • Displaying content libraries. See choose the right pattern in this article for an example of this view.
  • Formatting the two content views associated with semantic zoom.

The grid layout pans vertically, and items are laid out in a left-to-right, then top-to-bottom reading order.

Example of a grid view layout

Choose the right pattern

Lists are used to display content libraries, master/details data, or static data.

  • Content library

    Use a content library to display a collection, or library, of content. This is often used to present media such as pictures and videos. In a content library, users expect to be able to tap an item to invoke an action.

    Example of a content library

     

  • Master/details data

    When using a master/details pattern, you can use a list view to organize the master pane. The master pane displays a list of selectable items. When a user selects an item in the master pane, additional info about the selected item is displayed in the details pane. The details pane often contains a grid view.

    Example of a master-details pattern

     

    You can chain together several lists to create complex master/detail hierarchies. For more info, see the master/details pattern.

  • Static data

    Static data is solely used to present non-interactive content, as most types of interactivity are disabled. This is useful for collections of items that are read-only and can't be activated or navigated into.

Selection mode

This mode lets users select and take action on item(s). It can be invoked via a context menu, by using CTRL+click or SHIFT+click on an item, or by rolling-over a target on an item in a gallery view.

There are three different selection modes:

  • Single - The user can select only one item at a time.
  • Multiple - The user can select multiple items without using a modifier.
  • Extended - The user can select multiple items with a modifier, such as holding down the SHIFT key.

When selection mode is active, check boxes appear next to each list item, and actions can appear at the top or the bottom of the screen.

Tapping anywhere on an item selects it. Tapping on the command bar action affects all selected items. If no item is selected, command bar actions should be inactive, except for "Select All".

Selection mode doesn't have a light dismiss model; tapping outside of the frame in which selection mode is active won't cancel the mode. This is to prevent accidental deactivation of the mode. Clicking the back button dismisses the multi-select mode.

There should be a visual confirmation when an action is selected. Show animations when appropriate. Consider displaying a confirmation dialog for certain actions, especially destructive actions such as delete.

Selection mode is confined to the page in which it is active, and can't affect any items outside of that page.

The entry point to selection mode should be juxtaposed against the content it affects.

For command bar recommendations, see guidelines for command bars.

Multiple selection mode

Edit mode enables line items to be manipulated. It can be invoked through the edit mode button in the command bar, or through a context menu.

An entry point for multiple selection mode should be placed by the list it modifies.

Clicking the back button dismisses the multi-select mode. Entering edit mode removes any command bars. If other frames are visible when selection mode is entered, those frames are smoked.

Edit mode doesn't have a light dismiss model; tapping outside of the frame in which selection mode is active won't cancel the mode. This is to prevent accidental deactivation of the mode.

Edit mode is confined to the page in which it is active, and can't affect any items outside of that page.

Recommendations

  • Items in the same list or grid view should have the same behavior.
  • If your list is divided into groups, use semantic zoom, which makes it easier for users to navigate through grouped content.

Hub

Master/details

Nav pane

Semantic zoom