Integrate a mobile broadband app with other Windows components

Updated: November 13, 2013

Applies To: Windows 8, Windows 8.1

You can use Windows 8 and Windows 8.1 user interface (UI) surfaces to enhance the overall experience of your mobile broadband app.

For additional user experience design guidelines for layout, navigation, commanding, animations, touch interaction, snapping and scaling, contracts and capabilities, tiles and notifications, UI controls, app roaming to the cloud, and fundamentals, see Index of UX guidelines for Windows Store apps.

This topic contains the following sections:

Settings charm

You can use the Settings charm to include settings for your apps configuration. Some examples of these are as follows:

  • Sign in and sign out

  • View and edit the user profile

  • Change billing address

  • View and edit payment options

  • View and set marketing preferences

Error user experience

General

Your mobile broadband app can have a number of error cases that should be dealt with gracefully. Some common examples are as follows:

  • Device is missing or unplugged Appears when a device such as a SIM or a dongle is missing or unplugged.

  • Locked device Appears when a connected device is locked to the user.

  • Internet connectivity lost Appears when no network connection is detected.

  • Multiple devices are plugged in Appears when a built-in adaptor and an external dongle are plugged in. A notification bar error is recommended for such cases.

  • Form field validation errors Appears when a user enters incorrect information into a form. Validation errors should be shown inline so that the user knows the field with which the error is associated.

For guidance on how to present errors, see Laying out your UI (Windows Store apps). In the example below, a notification bar is displayed at the top of the page.

Notification Bar shows Errors

Errors in data usage

The following error cases should be shown on the overview page in the following ways:

  • When the user is near plan expiration: Use a bar on the top of the screen to indicate that the user’s plan is close to expiration.

  • When usage is over the data cap: The data bars should be full and there should also be an inline message that describes the issue and tells the user what to do about it. Alternatively, the over data cap usage message can be in a notification bar on the top of the page.

  • When the plan is expired: Use a bar on the top of the summary box to describe the issue and actions that the user can take. In this case, data usage, billing cycle, and roaming information is not displayed.

  • International roaming: Indicate roaming at the bottom of the summary section.

App views

Your app should be adaptive and be able to fit a number of layouts, including:

  • Landscape

  • Portrait

  • Snapped

  • Filled

  • Keyboard up

    noteNote
    When the touch keyboard is up, make sure that elements such as form fields scroll appropriately.

The following examples show how some pages look as a snapped app.

Snapped View of Landing Page

Snapped View of Services Page

Make sure that your app is accessible through app views, including high-contrast mode and screen reader readiness. For more information about how to make your app accessible, see Accessibility in Windows Store apps using JavaScript.

Launch points

Your mobile broadband app is available to users in the All Apps view, in Windows Connection Manager, or through a toast notification.

Entry Points to Start App

Launch from Windows Connection Manager

Start App by using Windows Connection Manager

You can connect to the mobile broadband app by using Windows Connection Manager. Your app should open to the landing page with account and data usage information. After you are connected, Windows Connection Manager shows the current account and data usage.

Windows Connection Manager Account Information

Automatic launch from connection manager during a captive portal purchase flow

When the user is connected to a captive portal network where web traffic is redirected, Windows provides you the option to automatically launch their app if it’s installed. The app should open to the Plans page that provides information on how to purchase Internet access.

Launch app from tile in All Apps view

Your app should support users who have multiple simultaneous accounts (for example, using two external USB mobile broadband adapters). When your app is launched from a tile, your app should let users select the account that they want to use.

If your app was suspended or already running, it should show the last page used. If your app wasn’t already running or suspend information is not available, your app should open to the landing page.

Tile and toast notifications

In the Start screen, tiles are the primary representation of an app. Users launch their apps through those tiles, which can display new, relevant, and tailored content through notifications. This makes the Start screen feel vibrant, and allows the user to see what's new at a glance. An app can also communicate time-critical events to the user through toast notifications, whether the user is in another app, on the Start screen, or on the Desktop. The methodology to design and deliver toast closely parallels that of tiles, thereby lowering the learning curve.

Start Screen Tile

A toast notification can contain text and images but do not support secondary actions such as buttons. Think of toast as similar to a Windows balloon notification from the taskbar's notification area. Like balloon notifications, a toast appears in the lower-right corner of the screen. When a user taps or clicks on the toast, the associated app is launched in a view that is related to the notification. This is the only mechanism by which one app can interrupt a user in another app. Toasts can be activated, dismissed, or ignored by the user. The user can disable all toasts for an app.

Toast Notification

A toast notification should be used only for information of high interest to the user and typically involves some form of user opt-in. It is a good choice for incoming email alerts, IM chat requests, and breaking news. However, it is very important that when you consider using a toast notification, you realize that, due to its transient nature, the user might never see it. When using toast notifications for data usage overage or roaming alerts, consider showing the information on your tile and within your app views in case the end user misses the toast notification.

Splash screen

You can use splash screen to promote branding. For more info about the splash screen, see Adding a splash screen.

Splash screen

Quick summary

Appropriate design for operator notifications:

  • Use both toast and tile notifications to alert users of important and high-interest messages that relate to the subscriber’s account and service plan.

  • Customize toast and tile background colors and logo based on your brand guidelines.

  • Include important SMS or USSD operator notifications and alerts that relate to the subscriber’s account and service plan directly on the landing page.

Inappropriate design for operator notifications:

  • Don’t show toast notifications for information that is not real time (such as promotional advertisements).

  • Don’t show user-to-user chat messages and promotions and advertisements mixed together with operator notifications and alerts, because end users can miss important operator notifications.

Additional resources

See Also

Show:
© 2014 Microsoft. All rights reserved.