Designing great entertainment apps for Windows

Here we discuss design ideas to help you create robust and popular media apps.

Overview

Windows 8 provides unparalleled reach across a range of devices, from touch-centered tablets to high-resolution laptop and desktop PCs. Many of the new features in Windows 8 are uniquely suited for media and entertainment experiences, giving content publishers new ways to connect, engage, and stay close to their audience.

The new Windows Store also provides great opportunities for content publishers to distribute, promote, and sell their content. The business terms in the Windows Store allow you to use the commerce engine that Microsoft provides. Or, if you prefer, you can use your own commerce engine, allowing you to run your business on your terms and maximize flexibility and revenue.

This document highlights new capabilities in Windows 8 that are of particular importance for media and entertainment publishers, including:

• Windows Store apps—A new design language for apps, where your content gets center stage.
• Live tiles and toast notifications—Keep the user coming back to your app by promoting your content through timely, relevant notifications, even when your app isn't running.
• Search contracts and Share contracts—Finding and sharing media content is now a top-level operating-system feature, which creates a more consistent user experience and makes users more likely to find and share content in your apps.
• Device contracts—Users can send content from their PC to networked devices like TVs and audio-video receivers, enabling group viewing and engagement.

Layout and navigation in media apps

Entertainment apps tend to have many different categories for different types of media. For example, a movie app might allow you to browse movies by genre, by a specific director or actor, by your previous movie preferences, or by featured content. Similarly for music apps, users can browse content by artist, album, genre, and featured content. For an optimal end-user experience with a media app, it's critical to organize the content in a meaningful way so that users can find what they want quickly and confidently. Using the hierarchical and other navigation patterns for Windows Store apps will make your app fast, fluid, and easy to use, enabling your users to find what they need quickly.

The navigation design for Windows Store apps article has more information about application navigation hierarchy.

Hierarchical model

Entertainment and media apps typically have a lot of stories and images for the user to discover and digest. Using recommended navigation and interaction patterns in Windows 8, you bring the content to the surface, enabling the stories and images to be the focal point of the experience. Presenting information in a general-to-specific manner enables users to quickly find what they're looking for.

Your app's hub page

To enable a rich and diverse experience in your app, use the hierarchical model for Windows Store apps. Your app’s landing page or the hub can show featured content, recommended content for the user based on previous interest, content that's currently playing, saved queues, genres, and categories in one surface that you can easily pan across. You can highlight each category group, and by tapping on the header, you reveal more content, as shown in the following image. To let the user know there is more content in the category, add a "View 10 more" note indicating more content is available.

Display your content categories flat in the app’s hub page and showcase pertinent media content in each category to draw users into these categories. To let the user know there is more content in the category, add a View 10 more note indicating more content is available.

Bookmarks, favorites, and playlists

Users often save playlists or add media to queues to access them later. If your app supports this in an easily accessible way, it will be used repeatedly by users who want a seamless experience to access their favorite media.

Add a section in your landing page called Bookmarks/Favorites, which is a collection of all the user’s saved media content. Enable users to select these bookmarked items and manage them by moving them to the top of the queue, removing them from the queue, or sorting them within the queue. The following example shows content that is collected in a "saved for later" queue.

Tapping the section header reveals more options in the category, as shown in this image.

Section header drop down

Using the section header enables users to jump laterally between section titles quickly. For example, consider a user who's browsing the tiles for movies in the comedy category and wants to navigate to the drama category. They can easily use the drop-down for the section header to do that. This next image shows the drop down for the section header.

Semantic Zoom

In both the landing page and the category pages, users can use Semantic Zoom to easily see the entire surface and access the things they’re interested in quickly.

The Touch interaction design page has more info about how your app can support panning. This next image shows a group view for Semantic Zoom.

When using Semantic Zoom, you can enable the user to rearrange category placement on the home page by selecting the group and moving it around. Your users can now personalize the app landing page, which gives them another reason to use your app. This image shows content categories being arranged.

You can also use Semantic Zoom in a specific category page to navigate between different movies or songs in that category. Users will use Semantic Zoom to quickly jump between different songs and videos.

Tapping items in the hub view

Case 1: Instant playback

When a user taps media items on the landing page or section pages, the media item should play. Because users expect this, it's best to make it the default response to a tap. This image shows interactions for instant playback.

Likely, users will want more info about the media they are playing, so offer a button in the app bar that allows them to navigate away from full screen view to a detailed item view. This next image shows a simulation of this.

The media should continue to play even when it's not full screen view any more. Continue to display media controls even when the media isn’t full screen. By doing this, the user gets the same experience when opening the media controls regardless of whether or not the app is snapped.

Tapping the toggle button for full screen or tapping the video or music presented in the UI should both resume full-screen playback mode.

Alternatively, if the app doesn’t offer a detailed info experience for the media, an app bar button can toggle additional info on or off instead of switching to a detailed view from the app bar. You can see this demonstrated in the following image.

Case 2: Detailed item view

There are situations where it might make more sense for tap to direct the user to a detailed item page instead of playing media back immediately. For example, if there are multiple episodes of a TV show to choose from, give the user a list options before the media starts. Additionally, if media is available pay-per-view only, the user must pay first before the media starts, so you'll want to show payment info first.

This next image shows the process of choosing specific media from aggregated content on a promotional page for a TV show. The user taps one image for a specific episode, can read about that episode and read reviews before tapping again to show the options for playing the episode.

To return to the detailed info page for that episode, tap the Back button in the top app bar navigation header or tap the Full View button to toggle to the other view.

Now playing experience

When media is actually playing, your app can differentiate itself by providing an experience that showcases the user’s content. Design your media playback experience to be completely immersive, without any chrome whatsoever. Media controls can be displayed on the media when the user wants it by a tap. This image shows a video playback experience that's completely immersive.

For music and video apps that have the concept of playlists, the now playing experience enables users to manage the playlist and navigate it easily. Consider putting a playlist button on the canvas or top app bar that displays a scrollable Flyout control with the playlist inside it. Users can select items and manage them by choosing to move them up or down or by removing them from the list altogether. This next image shows a Now Playing list.

Alternatively, if you want to always display the playlist in the Now Playing screen, you can use a list view pattern and vertical scrolling to enable users to navigate the playlist easily. Make sure the rest of the page is a fixed layout so that the page doesn’t pan in two directions, which can be confusing for users. Display other info in a fixed width region next to the playlist as shows in this next image.

You can also enable users to cross-slide to select items and manage the playlist as shown here.

Navigating between previous and next episodes or video clips

Often users watch multiple related clips or episodes in a row. By providing Previous and Next buttons, you allow users to navigate to their next clip or episode quickly. This image shows Previous and Next buttons in a playback experience.

For music apps, where previous and next interactions are more common, these commands are better presented on the canvas as described in the Commanding section later.

Commanding

Media controls

For media apps that have playback of music and video, placing playback controls in a consistent location help your users interact with media confidently and seamlessly. To learn more about commanding, read the Commanding design for Windows Store apps.

Because the Play/Pause button and the transport slider are typically critical controls for media playback, they can be placed on the canvas and shown as soon as the user taps or swipes the screen. Play/Pause should be a toggle button that reflects the action that happens when tapped. For example, when music is playing, the button should show “pause” as the action and vice versa. This image shows controls in a media app.

If your app uses a transport slider, Rewind and Forward buttons duplicate functionality because the user can use the slider to rewind or forward the movie or song. To avoid this duplication, don’t use both the transport control and rewind/forward controls.

Other media controls like Previous and Next (song or episode) really depend on the scenarios for your app. For example, if a movie that’s playing, Previous and Next don’t make a lot of sense, but for a music playlist or TV series with episodes, they’re very useful. If using Previous and Next controls in your app, place them with Play/Pause and the transport slider so that when the user taps or swipes, they can see all available controls at the same time.

Don’t show controls that don’t make sense in a given context. For example, when starting a new music playlist, the Previous button won’t be valid before playback starts (because the user is at the very beginning of the playlist and there are no “previous” tracks).

The media controls appear on tap and swipe. The app bar appears on edge swipe. Whenever the user swipes to display the app bar, display the on-canvas media transport controls as well so the user can interact with media while using the app bar commands if they want to.

In addition to UI media controls, you can give users more control over their media playback experience by allowing them to control your app with media keyboard buttons or media remote buttons such as:

• Play
• Pause
• Fast-forward

A volume control slider and mute button are available via the hardware buttons and should not be duplicated in your app.

Other commands that aren’t as critical to media playback can live in the app bar like toggling between full screen mode, close caption, and meta data. Read the guidelines and checklist for app bars for more info about using the app bar.

For managing playlists, consider placing buttons for "remove from playlist," "clear queue," "save queue," "move up in queue," and "move down in queue" in the app bar as well.

Snapped state

For snapped app state, the interaction for media controls should be the same: tap the media canvas to display the media playback controls. Play/Pause is critical to maintain in snapped state; other controls like transport slider and Previous and Next can be dropped in snapped state. This image shows a Play/Pause button in a snapped media app.

Background and foreground playback

If your media app is playing music and the user switches away to another app, your app might allow the user to keep listening to their music in the background. Good examples of media scenarios that work well as background-capable are music, streaming radio, podcasts, and music videos. While playing visual media like TV shows and movies, your app should pause automatically when the user switches away to another app. That way, users can pick up where they left off when they switch back to your app, without missing any content.

Learn more about background media playback by reading the MediaControl.Soundlevel | soundLevel property and the Audio Playback in a Windows Store app paper.

System transport controls

For apps that play media in the background, the system transport controls enable users to see what your app is playing and control playback without having to switch back to your app. Users can press a hardware volume button on their device to access media controls and metadata in a fast and fluid way from outside your app. Provide info about the track and artist name so that users know what’s playing. If your app is loading content or downloading, you can provide status to the user so they know the state of their media playback. This next image shows system transport controls.

Getting back to the media playback experience

If a user is using your app, navigating around to add more songs to the playlist or buying new music, it's important to have a consistent place to navigate to for Now Playing music/video. This enables users to quickly come back to the Now Playing experience.

This next image shows how easily accessible the nav bar is when users are doing other media-related tasks. Users can quickly navigate to the Now Playing section of the app when they want to.

Rating and reviewing

Rating and reviewing media content is an important scenario for most media apps. Consider placing stars at the top of a section of your app that displays reviews so that users can quickly review media content. For users to write reviews, you might display a text box at the top to allow room for the touch keyboard to come up. Pressing Enter submits the review. The text box can grow in place if necessary for a longer review.

Users can see more reviews by tapping the header as shown here.

Typography in media apps

Follow the type ramp guidance to create a sense of content structure and rhythm. To align your media app’s typography with that of Windows 8, use 11pt Segoe Semilight as the primary size for content, and Segoe UI Light 20pt, for titles and subheads. If you need a smaller size, use Segoe UI Regular 9pt for short captions and credits. Don’t specify type below 9pt.

Use 42pt Segoe UI Light sparingly for headlines and titles. Avoid setting headings, such as “Music” or “Movies” at 42pt. Reserve the largest type size for the name of the movie, album, or music track. When using the largest type size, it's critical to apply kerning and typographically correct punctuation. Use true quotes, apostrophes, and dashes, in place of straight quotes and hyphens. The following example shows the correct and incorrect usage of punctuation.

Although the Windows 8 personality requires the use of sentence case, you might decide that all-caps, all lower case or title case are more appropriate for your content. Be aware that these typography treatments will not transfer to many localized languages. Also be sure to use casing styles consistently and to differentiate different pieces of content, not just to add visual interest to the app’s typography.

If you decide to diverge from this guidance, try not to use more than four different type sizes and weights. Use color and font weight to help differentiate content displayed at the same type size.

The Guidelines and checklist for text and typography has more information about best practices for fonts such as size, color, and weight.

Contracts

Share

The Share contract provides users with a familiar and natural way to share content between two apps. There are many scenarios for sharing content to or from your media app that would differentiate your app from the rest. If you want to enable your users to share content from the app, the app should be a Share source. If you want to enable your users to consume data from other apps, the app should be a Share target. You can also support both depending on the specific needs of your app.

Sharing from your entertainment app

Sharing media content is a key scenario for entertainment apps. By using the Share contract, you enable your users to share out videos they find interesting or songs they’re listening to, to any apps that support this format. This enables many compelling scenarios like sharing funny videos on social networks, or emailing movie or song recommendations to friends. It also enables transforming music, photos or video from your media app in an interesting way through other apps on Windows such as camera filter apps, auto-tune apps and so on.

Sharing to your entertainment app

If your app can support storage of photos, music or videos for sharing with friends, family or publicly, the app should register for the Share target contract. This will make it really easy for users to leverage your app to organize their media from other apps and reach a broader audience.

If your media app can transform the content from other apps in an interesting way – whether it applies special filters to photographs, auto-tunes music recordings, composes panoramas etc., it should register for the Share target contract. This will make it really easy for user to leverage your app to unlock the value of your app with content from others app.

Search

Search is an important scenario in media apps. and oftentimes, media apps display search results from multiple categories. Using the Windows 8 Search charm provides a centralized experience for all the user’s search needs while helping users parse through different categories of results.

To learn more about search, read the guidelines and checklist for search. This next image shows a typical search experience.

If your app has more advanced search scenarios that include filtering and search scopes, provide these on the app canvas when appropriate.

Also, using query suggestions helps autocomplete users' search queries and makes it faster for them to search without necessarily typing the whole string.

Settings

All applicable settings for media apps like user account info, subscription info, privacy settings, and notification settings should live in the Settings charm. It provides a single place for users to tweak their settings. And it also prevents your app UI from getting cluttered by different settings. This image shows settings in a media app.

Devices

The Devices contract provides a nice option for your media app to plug into. Your users might want to view movies or videos on TVs and play music on audio devices. Integrating with the Devices contract enables your users to do that with just a tap. The following image shows content being played to a device.

Connected and alive

Tiles and notifications

There are many compelling scenarios for live tiles in media apps. Tiles for movie apps showing the latest movies that are recommended for the user, new releases available on DVD, popular videos gone viral—all of these help to re-engage the user. Similarly for music apps, tiles showing new albums released by a favorite artist, music now playing, or an artist recommended based on the user’s interests continues to draw users into your app when they unexpectedly discover new content on your tile. These images show live tiles presenting information.

Enabling users to pin different movie genres, tv channels, artist and playlists to Start enables them to see tailored notifications for the content they’re most interested in and quickly access the content they care most about. This is another avenue for drawing users back into your app. The next images show pinned tiles for media apps.

If you allow users to opt-in so that they can see breaking news via toast notifications even when the app isn’t running, it would keep the keen user up-to-date on the latest news and draw them into your app. However, make sure toast notifications are options that the user can enable via the app settings accessed through the Settings charm, because these might be intrusive for some users.

Roaming

Roaming is the moving of settings and preferences from device to device. Most people have more than one Windows PC. Making an app that provides a consistent user experience across all their Windows 8 PCs gives users the experience they expect. Wherever possible, roam app settings, saved media content, favorites, "last watched" history, and where the user left off when viewing certain media. Additional guidance on roaming can be found in Guidelines for app settings, Guidelines for roaming app data, and Managing app data.

Orientation and views

Portrait and landscape

When designing your media app for Windows 8, consider all views for your app like different screen resolutions and device sizes. Windows 8 makes it easy to scale the design for both portrait layout and high resolution screens by including more content in your app for larger devices. Showcase your app in landscape view and portrait view. For certain views in your app like watching a movie, it might make sense to lock the view in landscape.

Snapped view

Windows 8 lets users multitask by "snapping" an app beside another app. Snapped view is a great way to increase the app's time on screen and engage users for longer periods. Having a snapped state for each view of your app allows users to multitask while using your app and results in them keeping your app on the screen longer, even when they’re doing other things.

There are compelling scenarios where the user will want to multitask with a media app. A user may want to watch a live streamed sports match while browsing the web, or listen to their Spotify playlist as they are reading the news. It is important to tailor core playback experiences for the snapped view to support these common scenarios. It is strongly encouraged that the other experiences in your app have tailored snapped views in order to maintain context across resizes.

This image shows examples of entertainment apps that are in the snapped state. Notice that there is a tailored and useful view of each page, allowing the user to maintain context when the application is resized.

Additionally, consider the experience when your app is filled and used next to a snapped app. It may be possible to be displayed at an aspect ratio other than 16:9, so display videos and other media content accordingly. If the aspect ratio of the window does not match the media content, display the media content inside a letterbox so that the content is not stretched.

Splash screen

Often media apps need to download fresh content from the web. To make your app fast and responsive quickly, don’t wait until all the images for each category are downloaded before showing the landing page. This can make users impatient. Show the user the app landing page after the content titles are downloaded and asynchronously load images and other data. This image shows an example splash screen.

Music and video best practices

Music apps

Video apps

Related topics

Making great Windows Store apps

User experience (UX) design patterns for Windows Store apps

UX guidelines for Windows Store apps

Build date: 3/12/2013