Windows Store app UX test cases

  • [アーティクル]

[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]

Use this collection of UX focused test cases to make sure you've achieved the goals you set when you designed your app.

Your app may offer a unique user experience that can't be verified by the test cases provided here. You can use the UX design checklist and the Windows and Windows Phone Store Policies to identify more experience requirements to verify before submitting the app to the Windows Store.

Test case Details

Avoid using Web browser controls.

Don't use browser controls for the core scenarios of your app. Content received from the Web should be displayed within native controls. Make sure links that navigate users away from the app open in a separate browser window.

If any web content is included on the page, it should look and feel like it's part of the app page, for example, zoom is disabled and the web content doesn't pan independently of the hosting page.

Test example

  1. Start your app.
  2. Determine if the app is using web browser controls on an app page.
  3. If content must be embedded, user interactions with the content feel like it's part of the app. For example, the embedded content doesn't enable its own scrolling mechanism.
Note  

If the app takes the user to a webpage for service authentication (such as with Facebook or Twitter), and no Xauth or similar API is available for authentication using native controls, the operation can be performed in an embedded web browser control in the app.

If you can't avoid using web controls, make sure that the page behaves like an app page and doesn't negatively impact the larger user experience. (e.g. Pinch and zoom is disabled).

 

For more info, see Quickstart: Using single-page navigation.

Content lists are scrollable in either the horizontal or vertical direction; not both.

Content presented in containers with scroll capabilities only scroll vertically, or horizontally.

Test example

  1. Start your app.
  2. Navigate to each app page and confirm that content in the app (lists, hubs, grids, etc) scrolls only in horizontal or vertical direction.

For more info, see Guidelines for panning.

Branding is consistent across entire app.

Promote your brand with consistent branding across the whole app. Any brand should be represented using official branding assets.

Test example

  1. Start your app.
  2. Verify that high quality branding (art) is used consistently throughout the app.

For more guidance on branding within your app, see Branding.

Icons are appropriate for the context and clearly indicate intended purpose.

Ensure all icons used in your app are contextually relevant and appropriate.

Test example

  1. Start your app.
  2. Make note of all icons within the app, including app bar buttons.
  3. Verify that all icons are contextually appropriate, follow the application theme, and are visually well-designed.
Note  

Users recognize certain icons to mean certain things, either because the icons are used by another app on the device, or because they are commonly associated with something else.

For example, a pencil icon often means "edit", and not "new." If an icon doesn't exist for what you're trying to convey, create one. Don't re-purpose existing icons.

 

For more info, see Guidelines and checklist for tiles and badges.

App supports semantic zoom where applicable.

Your app implements semantic zoom to support the presentation and navigation of large data sets.

Test example

  1. Start your app.
  2. Verify Semantic Zoom functionality where applicable.
  3. Determine if the observed behavior is similar to what is detailed in the following image:

For more info, see Guidelines for semantic zoom.

App doesn't exceed five navigation levels.

Your app doesn't exceed five navigation levels.

Test example

  1. Start your app.
  2. Starting with the app home page (the first navigation level), click an item on the page that loads another page within the app and follow the flow of the navigation.
  3. Count the number of screens the app passes through. When the maximum navigation level has been reached, click the back button until returned to the app home page.
  4. Identify app home page items with a navigation path that exceeds five levels. Consider alternative ways to organize your app to reduce the levels for these items.

For more info, see Navigation patterns.

Touch gestures don't overlap.

Verify that scroll viewers don't contain other controls that use the same left/right swipe gestures.

For example, don't put maps, toggle switches, or other gesture control supported content inside scroll viewers. Placing these controls within a scroll viewer is known to introduce usability issues.

Test examples

  1. Start your app.
  2. For every scroll viewer in your app, confirm that the content it contains doesn't provide additional controls, which can include the following:
    • Scrollable map control
    • Controls that use left/right swipe (or pan) gestures
    • Slider
    • Toggle switch
Note  

For map controls, toggle switches can be replaced with check boxes without impacting usability. If a map has to be placed within another scrollable control, make sure to leave enough space around the map to allow the user to scroll within the map control.

 

For more info on designing for interaction, see Touch patterns.

Touch Target size greater than 9mm (50 pixels).

Avoid creating touch targets that are smaller than 9 mm (48 pixels) square and provide at least 2 mm (10 pixels) between touchable controls.

Test example

  1. Start your app.
  2. Confirm that active items on each app page respond to touch.
Note  

In exceptional cases, controls can be smaller but never less than 7 mm (40 pixels) square.

 

For more info on designing for interaction, see Guidelines for targeting.

Visual feedback on user interactions is clear.

Your app should provide the user with visual feedback when an interaction within the app occurs.

Test example

  1. Start your app.
  2. Verify that tilt animation implementation for all touch elements that perform an action. Examples include buttons, list items, menu items and excludes controls like toggle switches.
  3. Verify that toggle switches don't use tilt animation.
  4. Verify that your app doesn't use animations for elements that don't perform an action.

For more guidance, see Guidelines for visual feedback.

Your app supports flexible content layout and scaling.

Windows 8 supports variety of device screen sizes; from small tablet screens to a large desktop screens. Make sure your app takes advantage of larger screen resolutions by designing a dynamic content layout.

The goal is to identify the resolution/orientation combinations that introduce scrollbars to support a content space that extends beyond the viewable area.

Design your app to present more content in larger resolution and without excessive amounts of empty unused space. In some cases the content will simply scale to the larger resolution. The bottom margin can be flexible, but should be a minimum of 2.5 units (50px). \

Test example

  1. Start your app.
  2. Verify app content layout at minimum resolution (1024x768) and large resolutions (*).
  3. Verify app content layout at minimum resolution (1024x768) and higher resolutions in both portrait and landscape orientation.
Note  

Optionally, you can use the Windows Simulator, which allows developers to run their apps on a variety of screen sizes, orientations, and pixel densities.

 

For more info, see Guidelines for scaling to screens.

Your app supports the main app tile.

Verify the visuals and functionality provided by the main app tile.

Test example

  1. Pin your app to the Start screen.
  2. Switch the app tile between small and wide mode.
  3. Verify that the app tile supports small mode (minimum) and, optionally, wide mode.
  4. Verify that the new title contains content that is valid, within the context of the app, and easily identified.
  5. If the app tile supports wide-mode, verify that the tile in wide-mode uses live content to provide meaningful and extended updates at a glance.
  6. Verify that the tile name, if provided, accurately represents your app on the Start screen.

For more info, see Guidelines and checklist for tiles and badges.

Your app supports secondary app tiles.

Verify the visuals and functionality provided by secondary app tiles.

Test example

  1. Start your app
  2. Navigate through different app pages and identify functionality that enables the user to create a secondary tile.
  3. Create a secondary tile.
  4. Verify that the new title contains content that is valid, within the context of the app, and easily identified.
  5. Verify that your app doesn't use secondary tiles to represent static content.
  6. Verify that your app doesn't use secondary tiles as a method of interacting with the parent app.

For more info, see Guidelines and checklist for secondary tiles.

App stores settings in the cloud where applicable.

Make sure your app supports the roaming of app settings and data using the cloud wherever applicable. This provides users with a great experience, regardless of what device they have your app installed on.

Test example

  1. Start your app on the first device.
  2. Adjust app settings. Create the conditions that result in app data being backed up using the cloud. Some settings will be local per device and some shareable across devices.
  3. Log in on a different device and Start your app.
  4. Verify that settings are synchronized to your app on the second device.
  5. Verify that the app data is synchronized to your app on the second device.

For more info, see Guidelines for roaming app data.

App provides an appropriate login experience.

The placement of a login UI within the app depends on the login requirements defined by the app and any relevant web services.

Test example

  1. Start your app.
  2. Verify the following scenarios where applicable:
    • If login is required to use your app, verify that your app is displaying login controls on the app home page. Confirm that app content is not provided before authentication.
    • If login is required to use your app as a method of accessing secure content on a web service, verify that your app provides a login control on the home page. Make sure this control starts a web authentication dialog.
    • If login is optional, verify that all login controls are accessed using the Settings charm. Additionally, verify that content that doesn't require authentication is still available.

For more info, see Guidelines and checklist for login controls.

App must use a meaningful splash screen.

Test example

  1. Start your app.
  2. Verify that your app's splash screen is not the default Visual Studio splash screen (simple clock icon on a page).
  3. Verify that the splash screen is relevant to your app.

For more info, see Guidelines and checklist for splash screens.