Content design basics for UWP apps

The main purpose of any app is to provide access to content. Since apps exist for many different purposes, content comes in many forms: in a photo-editing app, the photo is the content; in a travel app, maps and information about travel destinations is the content; and so on.

This article provides an overview of how you can present content in your app. We describe common page patterns and UI elements that you can use to display your content, whatever form it may be in.

Common page patterns

Many apps use some, or all, of these common page patterns to display different types of content. Likewise, feel free to mix and match these patterns to optimize for your app's content.

Landing

landing page

Landing pages, also known as hero screens, often appear at the top level of an app experience. The large surface area serves as a stage for apps to highlight content that users may want to browse and consume.

Collections

gallery

Collections allow users to browse groups of content or data. Grid view is a good option for photos or media-centric content, and list view is a good option for text-heavy content or data.

Hub

hub

Hubs are designed for window shopping. Users get a good sneak peak at the content that's offered; it's all about showing a great diversity of content while keeping the amount brief. For example, Hub section 1 could contain a hero screen, Hub section 2 could contain a collection, Hub section 3 could contain another collection, and so on.

Master/detail

master details

The master/details model consists of a list view (master) and a content view (detail). Both panes are fixed and have vertical scrolling. There is a clear relationship between the list item and the content view: the item in the master view is selected, and the detail view is correspondingly updated. In addition to providing detail view navigation, items in the master view can be added and removed.

Details

multiple views

When users find the content they are looking for, consider creating a dedicated content-viewing page so that users can view the page free of distractions. If possible, create a full-screen view option that expands the content to fill the entire screen and hides all other UI elements.

To adjust for changes in screen size, also consider creating a responsive design that hides/shows UI elements as appropriate.

Forms

form

A form is a group of controls that collect and submit data from users. Most, if not all apps, use a form of some sort for settings pages, log in portals, feedback hubs, account creation, or other purposes.

Common content elements

To create these page patterns, you'll need to use a combination of individual content elements. Here are some UI elements that are commonly used to display content. (For a complete list of UI elements, see controls and patterns.

Category Elements Description
Audio and video

media transport control
Media playback and transport controls Plays audio and video.
Image viewers

flip view
Flip view, image Displays images. The flip view displays images in a collection, such as photos in an album or items in a product details page, one image at a time.
Collections

list view
List view and grid view Presents items in an interactive list or a grid. Use these elements to let users select a movie from a list of new releases or manage an inventory.
Text and text input

text box

Text block, text box, rich edit box

Displays text. Some elements enable the user to edit text. For more info, see Text controls.

For guidelines on how to display text, see Typography.

Maps

map control
MapControl Displays a symbolic or photorealistic map of the Earth.
WebView WebView Renders HTML content.