Essential graphics, visual indicators, and notifications (Windows Phone Store apps)

Applies to Windows Phone only

Beauty is integral in mobile apps, where it's synonymous with intuitive operation. In Windows Phone, the visual elements of your Tile, splash screen, icons, controls, and navigation should draw attention to relevant tasks, priorities, or operations inside your app, and present info in novel, eye-catching ways. Your app will need custom designs for a Live Tile, or animated icon, as well as a splash screen image that introduces your app to the user while it loads. These and other visual indicators are the subject of this section.

Be sparing with graphics. Remember to use content and typography for visual appeal, and never use visual elements that are purely decorative in nature.

Keep in mind that on mobile platforms, simplicity is the most appreciable source of attractiveness. Where art is appropriate, use high-quality, original graphic art, branding, or photography. Ensure that art meets or exceeds the required dimensions in your app, and looks crisp and intelligible.

Tiles

A Tile is an easily recognizable visual shortcut for an app or its content that users can set in the phone's Start screen. Which Tiles show on the Start screen can be customized by pinning an app's Tile to the view. A Live Tile has more value than an icon, because it can surface info about or relevant to the app. For example, a Tile for a weather app can dynamically show the temperature. We strongly encourage you to take advantage of this feature because it makes your app that much more useful.

The best Tiles communicate some info about the app, show off the personality of your brand, and look great beside all the other Tiles on the screen. Tiles can communicate info to the user by displaying an optional counter that uses the system font, updating Tile background images that you've provided, or displaying an optional Tile that uses the system font in a fixed size and color. Counter, background image, and Tile updates are controlled using the Tile Notification service. The accent color for the counter is always the accent color that the user has selected. Counter display is optional.

Windows Phone devices come with some Tiles already installed by Microsoft and its mobile operator and hardware manufacturer partners. These Tiles consistently reflect the unique Windows Phone Experience.

For more info, see Guidelines for tiles and badges.

Tile art is important

If you use multiple Tile images, they should be visually consistent with each other and have a recognizable theme or style. You can't change the color, font, font color, or the size of the counter display.

Apps that don't incorporate a Tile image or title will display a generic, system-defined icon and the name of your project. If you're developing an app with a tight design budget, there are many websites where you can buy icons for a reasonable fee. Whether you're designing the Tile yourself, commissioning it, or buying it, keep it simple. Icons should have simple geometry and limit the amount of very fine detail. If possible, they should use metaphors that are already familiar to people.

Note  Be conservative in the use of Tile Notifications. Excessive use can reduce battery life.

Styles to avoid

  • 3D typography
  • Icons or backgrounds with gradients, bevels, or casting shadows
  • Rounded corners
  • Black or white color backgrounds; the Tile background will disappear in dark or light theme
  • Using non-descriptive, ambiguous icons
  • Transparent backgrounds with colorful images

Correct and incorrect Tile usage

Correct and incorrect Tile usage

Tile background colors

There are two key elements to a Tile: the icon or logo that appears in the foreground, and the square, colored background. These two should complement one another.

Choose a background color that represents your brand and makes your foreground icon easy to see or read. The following figure shows three examples that follow the guidelines.

Phone Company, Adatum, Margie’s Travel

Phone Company, Adatum, Margie's Travel

You should avoid using a black or white background color, because the Tile background will disappear in dark or light theme.

Incorrect use of black background color for a Tile

Incorrect use of black background color for a Tile

If you want your Tile background to be the same theme color as the phone UI, you can make the background of your Tile transparent. If you do this, it's very important to:

  • Make only your Tile transparent. The other icons you submit with your app shouldn't have transparent backgrounds.
  • Make your foreground icon white. If the foreground icon is colored, the icon won't be visible or will be jarring to look at on some of the phone theme colors, as seen in the figure below.

Problems with not making the foreground icon white

Problems with not making the foreground icon white

Splash screens

Many apps take a moment to load. Use this opportunity to introduce the user to your app with the splash screen. The splash screen is visible only for a few seconds, so we recommend that you avoid using any copy text that requires the user's attention or would take time to read. Instead, use this space to transition the user's gaze into your app with graphics. A good splash screen is a graphical advertisement for your app, and uses colors and graphics to that end.

Correct and incorrect splash screens

Correct and incorrect splash screens

Keep the following things in mind when planning your app's opening views:

  • If your app uses loading or intro pages, they shouldn't be included in the back stack. In other words, they should be skipped when the user presses the back button.
  • There are several certification requirements related to the back button and the first screen of the app. For more info, see Technical certification requirements for Windows Phone.

Visual indicators

Windows Phone uses three different types of indicators to show task progress, scroll views, signal strength, battery life, and other vital information.

Progress indicator

The progress indicator shows in-app activity related to an activity or a series of events. This is a system control which is integrated into the Status Bar and which can be displayed across multiple app pages. For more info about the Status Bar, see the "Status Bar" section later in this topic

Note  Just like the standard progress bar, the status bar progress indicator can be either determinate or indeterminate. Determinate progress indicators have a beginning and ending point. Indeterminate progress indicators continue until a task is finished.

You can use this indicator in the determinate mode for tasks such as downloading content, and in the indeterminate mode for tasks such as remote connections.

For more info about how task progress is displayed to users, see progress controls.

Scroll indicators

Page scrolling occurs when content on the screen—such as a long section of text or an image—exceeds the bounds of the visible page and a user pans or flicks. When a user scrolls, visible scroll indicators appear on the right side for vertical scrolling and along the bottom for horizontal scrolling. These scroll bars indicate that the content is longer or wider than the page, and represent the current position on the page. After page scrolling ends, the scroll indicators fade from view after one second has elapsed.

The scroll indicators aren't user actionable and are an overlay to the content beneath them. Their primary function is to provide a hint to the user about the page size.

You can implement scrolling in your app using a pannable and zoomable control called a scroll viewer. The scroll viewer typically fills the screen, and contains content which is larger than itself. That way, the user can navigate around an area of content that can extend beyond the bounds of the screen.

Status Bar

The Status Bar is an indicator bar that displays system-level status info in a simple and clean presentation in a reserved portion of the app workspace. It automatically updates to provide different notifications and keeps users aware of system-level status.

For more info, see the "Status Bar" section in First Look at Windows Phone.

App bar

The app bar provides a place for you to display up to four of the most common app tasks and views as icon buttons. This bar provides a view that displays icon buttons with text hints, as well as an optional context menu called the App Bar Menu that is activated when a user taps the visual indicator of sequential dots, or flicks up the App Bar.

App bar

App bar

Use the App bar instead of creating your own menu system. This helps to create a consistent user experience across all apps on the device. The App bar provides menu animation and rotation support for you.

You can add an App bar to a page in your app entirely in markup.

Design considerations:

  • Use the user-defined system theme color unless there's a compelling reason to override it. Using a custom color can affect the display quality of the button icons, create unusual visual effects in menu animations, and reduce battery life on some devices.
  • The opacity of the App Bar can be adjusted finely, but we recommend that you use only opacity values of 0, 0.5, and 1.
  • The App Bar always stays on the same edge of the display as the Steering buttons (Back, Start, and Search) and extends the full width of the screen in portrait or landscape mode. Icon buttons themselves will rotate to align with the phone orientations.
  • The App Bar height in portrait mode and width in landscape mode is fixed and can't be modified. It can be set to be displayed or hidden.

For an explanation and an example of how to localize the App Bar, see How to build a localized app for Windows Phone.

App Bar menu

The App Bar menu is an optional way for users to access specific tasks from the App bar. Place tasks that are infrequently used in the App bar menu.

This menu is activated when user taps the visual indicator of sequential dots or flicks up the App bar. The view can be dismissed by tapping outside of the menu area or on the dots, using the Back button, or selecting a menu item or App bar icon.

App Bar menu

App Bar menu

Design considerations:

  • To prevent the menu from scrolling, the number of items displayed in the menu is limited to five.
  • The text for an App bar menu item runs off the screen if it's too long. The recommended maximum length for the text of a menu item is between 14 and 20 characters. Again, less is more in this space.
  • If no menu items are displayed, only the icon text hints are displayed.
  • The App Bar menu remains on the screen until the user performs an action.

App Bar icons

App bar icons should be clear and understandable, and should use real-world metaphors that are familiar to users. The best icons have simple geometry and limit the amount of fine detail.

Buttons should have an icon and a text hint. Text hints should be short and provide context for what the button does, and they don't need to be fully descriptive. An example would be a button that flips an image horizontally. Instead of "flip horizontally," "flip" would be sufficient.

Note  Buttons should have an icon and a text hint.

App Bar buttons can be displayed in an enabled or disabled state. An example of a disabled button would be a Delete button in read-only scenarios.

App Bar icons

App Bar icons

Use icon buttons for the primary, most-used actions in the app. Don't employ more icons just to use them.

Usage considerations:

  • Some actions are difficult to clearly convey with an icon. Place these actions in the App bar menu instead.
  • Text hints for app bar icons are displayed when a user displays the App bar menu.
  • Don't use an Icon button for a Back button that navigates backward in the page stack. All Windows Phone devices have a dedicated hardware Back button that should always be used for backward navigation.
  • Choose icons that have clear meanings when the App bar is rotated. The App bar automatically handles changes in screen orientation. When the device is in a landscape orientation, the menu is displayed vertically on the side of the screen. The icon buttons are rotated so that they appear upright to the user, but the order of the icons in the list is not changed. Consider whether the intended meanings of your icons have been confused when this occurs, particularly for similar or symmetrical pairs of icons.

Design considerations:

  • Icon images should be 76 x 76 pixels in size.
  • Icon images should use a white foreground on a transparent background using an alpha channel. The white foreground graphic for the button should fit in a 41 x 41 area square in the center of the image so that it doesn't overlap the circle.
  • Images that are sizes other than the recommended size are scaled to fit and can potentially lower the overall image quality of the App bar icon.
  • The circle that's displayed on each icon button is drawn by the App Bar and shouldn't be included in the source image.

Sample icon assets

A set of App Bar icon assets (both dark and light) in PNG format are installed as a part of the Windows Phone SDK. Only the white icons (the ones in the folder named "Dark") should be used in the App Bar. To locate these items, navigate to:

C:\Program Files (x86)\Microsoft SDKs\Windows Phone\<version>\Icons\Dark

Notifications

For app development, the Windows Notification Service is designed to provide a cloud service with a dedicated, resilient, and persistent channel for pushing a notification to a mobile device.

When a cloud service needs to send a push notification to a device, it sends a notification request to the Windows Notification Service, which in turn routes the notification to the app, or to the device as a Tile notification, toast notification, or raw notification.

There are three methods for displaying push notifications: Tile notifications, toast notifications, and raw notifications.

Tile notifications

A Tile notification informs the user of changes or events that may have occurred and are nondisruptive to the user workflow. They appear on Start Tiles. Using a Tile notification, you can dynamically set properties on a Tile such as the count, background image, and title.

Tile notification

Tile notification

Use Tile notifications for awareness-only notifications.

Toast notifications

A web service can generate a special kind of push notification known as a toast notification, which requests an action from the user. A toast notification causes a banner to appear, which is an opaque bar in the accent color at the top of the screen, displaying a scaled-down version of the app icon in the left corner. Two fields of text are available: one bolded title and one normal subtitle. Text that's longer than the display area is truncated.

A banner is displayed for 10 seconds before disappearing. If the banner is tapped, the app that sent the toast notification will launch. A toast notification is a system-wide notification, but it doesn't disrupt the user workflow or require intervention to resolve. An example of these notifications is when the user receives a text message or instant message.

Banner

Banner

Use a toast notification for an action-requested notification. Examples would be notifications produced via an instant messaging client or a peer-to-peer oriented app. But use them sparingly; all apps have access to toast notifications, and too many banners annoy the user.

Apps must default to turn toast notifications off. Toast notifications should be personally relevant and time-critical to the user. Generally, they're reserved for peer-to-peer communication, as in the SMS application.

Raw notifications

Notifications that require action inside an app are fully controlled by an app and affect only that app. These are called raw notifications. They can be generated by the app itself or sent from a web service. There is no system-wide way to display a raw notification.

Raw notification

Raw notification

Use a raw notification for an in-app notifications that requires the user's action.

On network outage

  • If there is no network connection, the app should provide an appropriate warning. You can use Airplane mode to test your warning.
  • Verify that the app can still be navigated when there is no network available. Although there may be no data coming in, navigation of the app should still be functional.
  • If a network outage interrupts a feature or operation, always let the user know what's wrong.

Include an end-user license agreement

An end-user license agreement, or EULA, is a set of guidelines for use that the user consents to follow when he or she first launches an app. It also lays out the user's rights, as you envision them. It's an agreement between you and the person purchasing the app that stipulates that the user won't misuse it.

Use of an app should depend on a user accepting the EULA. If the user doesn't accept the terms of your EULA, the user shouldn't be permitted to use the app.

This statement should discuss behaviors and uses of your app that you endorse, including specific terms about content, license, installation, activation, validation, Internet-based services, or the use of certain information. It's also a good place to inform users about your plans to update or offer upgrades to the app, or your use of software formats and standards. If your app is associated with a business, your EULA should also indicate where your business is registered, and whether you offer any kind of warranty.

Related topics

Tile design guidelines for Windows Phone

Icon templates for Windows Phone 8

Screen design templates for Windows Phone 8

Tiles and notifications for Windows Phone

How to create a splash screen for Windows Phone

How to create a custom indeterminate progress bar for Windows Phone

App bar for Windows Phone

 

 

Show:
© 2014 Microsoft