Entertainment apps

Applies to Windows and Windows Phone

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

Overview

Windows 8.1 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.1 are uniquely suited for media and entertainment experiences, giving content publishers new ways to connect, engage, and stay close to their audience.

The 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 capabilities in Windows 8.1 that are of particular importance for media and entertainment publishers, including:

  • Windows Store apps—A 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.

For help choosing the best navigation pattern for your app, see Navigation patterns.

See the Flat navigation pattern in action as part of our App features, start to finish series.

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.1, 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, also called 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.

An image showing an example hub page

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, you can add a chevron glyph (>) to the header.

An image showing there is more content in a group

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, or Your Playlist, 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.

Demonstrates a group of content saved by the user

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.

An example showing content categories

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.

Users can also use the top app bar for navigation, as shown in the following image.

An example showing categories being moved around

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.

The interactions showing 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 interactions for getting to content's detailed view

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 scaled down.

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.

The interactions for bringing up additional info during playback

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.

The interactions for browsing through featured content

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

An example purchase experience

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.

An immersive video experience without app chrome

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 in the 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.

Selecting music from a playlist flyout

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 width 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.

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

An example of managing playlist items

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.

Next and previous controls 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.

An example of media controls

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.

Narrow window size

When a user resizes the app to a narrow width, 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 narrow widths.
  • Other controls like transport slider and Previous and Next can be dropped in narrow widths.

This image shows a Play/Pause button in a narrow media app.

An example of media app resized to a narrow width

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.

Example 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.

The currently playing content appears in the UI and can be selected to return to now playing

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.

The interactions for rating content

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.

Examples of text formatting

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 for fonts 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 video content

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 often, media apps display search results from multiple categories. The Search charm provides a centralized experience for all the user’s search needs, including the web, while the in-app search box helps you provide a completely custom search experience for your users.

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

An example 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.

Example settings UI

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.

Example devices experience

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.

Example tiles for media apps

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.

Example pinned tiles for media and entertainment 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 window size

Portrait and landscape

When designing your media app for Windows 8.1, consider all device sizes, screen resolutions, and orientations. Windows 8.1 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.

Window resizing

Windows 8.1 lets users multitask by placing multiple app side-by-side on the screen. Designing your app to work well at narrow widths is a great way to increase the app's time on screen and engage users for longer periods. It 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. Tailor core playback experiences for the windows of all sizes to support these common scenarios.

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

Examples of narrow media and entertainment apps

Since the user can resize a window to any width, down to a minimum, the aspect ratio may vary greatly. 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.

An example splash screen

Music and video best practices

Music apps

RecommendationDescription

Register your app as background media

If your app can play music playlists, you can enable your app to continue playing in the background even after the user switches to something else. For more information see How to play audio in the background.

Respond to all hardware media buttons

Register and respond to events for Play, Pause, PlayPause, Next Track, Previous Track, and other media buttons, so that users can control your app from remote controllers or media keyboard buttons. For more information see How to configure keys for media controls.

Provide "now playing" information in the system transport controls

Apps that are capable of playing in the background should provide track name, artist name, and album art in the system transport controls so that users have rich information about what’s playing, even when they’re not in the app. If your app has a delay when the user changes tracks, populate the track name field with "Loading next track" so that your app doesn’t feel unresponsive. For more information see System Transport Controls Developer Guide.

 

Video apps

RecommendationDescription

Choose the correct stream type for your app

In most cases, register the app as foreground-only media

If users have background music playing when they start your video, your stream will automatically cause any background music to pause, so that users can hear the sound that comes from your video. When users switch away from the app, pause the video automatically so that users can later pick up where they left off without missing any part of the video. For more information, see Audio Playback in a Windows Store app.

If the user plays music videos or creates a video playlist, register your app as background media

When users treat your app like a music player or queue up videos, they expect to be able to hear playback continue even after they switch away from the app. For more information, see How to play audio in the background.

Respond to all hardware media buttons

Register and respond to events for Play, Pause, PlayPause, Next Track, Previous Track, and other media buttons, so that users can control your app from remote controllers or media keyboard buttons. For more information see How to configure keys for media controls.

 

Related topics

Meet Windows Store apps
UX guidelines for Windows Store apps
Media playback, start to finish (HTML)
Media playback, start to finish (XAML)

 

 

Show:
© 2014 Microsoft