In the blog post for testing Windows Store apps, we discussed what to test at the various runtime states for your app. We also discussed a few aspects of the Windows 8 user experience and how that affects the environment your app lives in. Now, we explore the new user experience a bit further and highlight some of the interesting interactions and scenarios your app can run into based on our testing of existing apps, and what you can do to make sure your app works correctly.
A common layout and behavior theme
Windows 8 introduces new and rich functionality that allows your apps to be immersive and engaging. The splash screen appears while your app is being initialized and is the first impression the user gets from your app. When your app is up and running a user can rotate it, scale it, or put it in a snapped or filled view at any time. More importantly, any of these events can occur in combination or close succession. For example, your app could receive an orientation change while its splash screen is displayed or a view can be snapped as you plug your device into a projector, which causes a scaling change. Let’s go into a little more detail of what issues to specifically watch for during each of these events.
Splash screen
The splash screen functionality allows your app to show activity while the system is initializing your app for first use or when bringing it out of a suspended state from the back stack. To make sure your splash screen displays correctly, launch your app to full screen in both portrait and landscape mode and verify that your splash screen is properly positioned (typically centered) and free from animation or visual issues. Also pay close attention to the resolution quality of graphics displayed on your splash screen, looking for jagged edges or pixilated images.
If your app supports an extended splash screen, verify the transition from the splash screen to the extended splash screen is consistent and non-jarring. Specifically watch out for irritating things like changes in icon position, screen flashes, etc.
Rotation
Rotation can happen at any time while your app is running, even when your app is in a suspended state. Verify that your app responds to orientation changes while exercising the various states of your UI. Specifically watch for layout and clipping issues that could degrade the experience users have with your app. Also make sure that content doesn’t jump or flash when transitioning between orientations.
If your app uses auto rotation preferences, verify that the system orientation is changed to your app’s rotation preference when a user launches your app or switches to it. Also verify that your app can be used in the flipped rotation preference. E.g., if your auto rotation preference is landscape, verify that your app looks and functions correctly in both landscape and landscape flipped.
You can use the Visual Studio Simulator to simulate rotation if you don’t have access to the appropriate hardware to test your app with. For more info on how to use the simulator in your testing see Testing Windows 8 apps using Visual Studio.
Scaling
Windows 8 scales your app to maintain touch and usability for a variety of supported pixel density hardware. Verify your app’s user experience at 100%, 140%, and 180% scaling plateaus. Make sure your app displays correctly on all scaling plateaus while exercising the various states of your UI.
You can use these settings in the Visual Studio Simulator to test your app at the supported plateaus:
- 100% plateau - use 10.6in, 1366 X 768
- 140% plateau - use 10.6in, 1920 X 1080
- 180% plateau - use 10.6in, 2560 X 1440
Scaling changes can occur dynamically, while your app is running, if your app is moved from one monitor to another on a dual monitor system or on a device that is presenting on a projector. Specifically watch for layout and clipping issues that could degrade the experience users have with your app. Also pay close attention to the resolution quality of icons, tiles, images and your in-app content, looking for jagged edges and pixilated images.
Snapped and fill views
Display view changes, to and from the snapped or fill view states, can happen at any time while your app is running; even when your app is in a suspended state. Verify that your app responds to display view changes correctly while exercising the various states of your UI. Also watch for layout and clipping issues that could degrade the experience users have with your app.
A minimum screen size of 1366 X 768 is required to support showing two apps on screen in a snapped view. To snap your app, you need your app running, with another app on the back stack. Swipe in from the left side of the screen and position the second app until you see a vertical gutter drawn to create a snapped view.
Contracts and optional behavior
Windows 8 introduces rich and flexible ways apps can interact and share data and files. Apps can use the file picker to open and save files. By implementing the file picker contracts, apps can also provide files or a save location to other apps. The search contract provides an essential way for apps to surface information the user is looking for. The share contract provides a convenient way for the user to share content, such as photos and web links, from one app to another.
With apps having more options and playing a key role in defining the user’s experience with files and data, more responsibility falls on the apps themselves to make sure these experiences are intuitive to the user. Next we discuss some of the options for working with files and data, and some of the interesting scenarios.
File open picker contract
In Windows 8, apps can use the file picker to open and save files. By implementing the file picker contracts, apps can also provide files or a save location to other apps.
When you allow another app to invoke the picker for the types of files that your app supports, make sure thumbnails for the items your app added to the picker’s basket are displayed correctly, and that the files (including content) that the user picked are correctly provided back to the app that invoked the picker.
If your app provides a unique view over files, make sure that the files are added and removed from the picker’s basket correctly.
An app hosted within the picker can often be suspended but not terminated, when the user navigates away from your app in the picker. Because of that, your app shouldn’t handle the suspending or resuming events as it will decrease the perceived performance when the user navigates back to it. Instead, register for the picker’s closing event to determine when your app is being closed and verify that your app performs necessary cleanup during that time.
Search contract
The search contract provides an essential way for apps to surface information that users are looking for. If your app supports search, the most basic behavior to verify is that when the user opens the search pane and types a search query, your app handles the search and shows relevant results. If you haven’t implemented the search contract correctly, you’ll see the message “This app can’t be searched” and any search the user performs will default to Apps.
If your app provides search suggestions, verify that they are displayed correctly, that the icon is shown, and that the icon width and height are correct. If your app supports type to search, verify that the search pane opens when you open your app and start searching and that the expected results are returned.
The search contract supports setting cue text, which is the gray example search text that is shown in the search box when a user opens the search pane. If your app sets cue text in the search box, verify that it is helpful to the user and it looks as expected when you open the search pane in your app.
If your app supports setting the search pane text programmatically, verify that it works as expected. With the search pane closed, perform an action in your app that causes the search pane text to be set, open the search pane, and verify that the text is set correctly.
Rotation can happen at any time while your app is running, including while performing a search. Refer to the Rotation section earlier and verify that searching in your app works well while the device is being rotated.
Share contract
The share contract provides a convenient way for users to share content, such as photos and web links, from one app to another. Share source apps provide the content while share target apps consume it. Your app can be either (or both).
If your app is a share source, note that different share target apps handle the data shared to them differently, depending on their own scenarios. Some might prioritize some content over others. For example, if you share both a link and an HTML fragment, some target apps might chose to ignore the HTML in favor of the link, or vice versa. To ensure that the user has a great experience sharing from your app, make sure the content of your data package are all different representations of the same data, and try to share to a few different target apps (the share target sample, Mail, and other share target apps you have installed) while you are designing and testing your app.
Users expect the content being shared to be visible, tied to the current page, something they selected, or obvious from the context the app is in. Navigate around in your app, share from different locations, select and share the selected content, and verify that what is being shared from your app matches what a user would expect.
If your app is a share target, it will be hosted in the Share pane. This is a more narrow view than the full screen, and the user can easily dismiss the pane, including your app, by tapping outside the pane. It was designed to provide a light-weight, quick experience with share target apps. Make sure your app works as expected in this environment. The more heavy or intricate work the user has to do to complete the share, the more likely it is that he or she accidentally taps outside and loses all their work. Look for controls such as scrollbars on the left that could cause the same problem. It is also possible that a user will launch your app as a share target the first time they use it. If your app requires authentication or first time setup, make sure the user can either complete that in the Share pane or that your app provides a helpful message to the user on what he or she needs to do before sharing to your app.
If your app is both a share source and a share target, the user has the option to share from your app to your app. Verify that is something that makes sense for your scenarios.
Conclusion
Windows 8 introduces a rich, immersive experience in which your app plays a main role. Outside of the user experience within your app, you might also interact with rotation, scaling, different view states, and contracts depending on what features your app supports or what the user is doing while your app is running. In this blog post, we covered some of those interactions that can be problematic for apps and explained how you can test your app to avoid issues. We hope this blog will help you find issues that negatively impact the user experience of your apps. Please let us know if you have feedback on this topic or interesting issues you have run into that you want to share.
-- Rick Muszynski, SDET, Windows
-- Patrik Lundberg, SDET, Windows
Special thanks to Tom White and Jake Sabulsky for their help and contributions to this post.