How to Create Fast and Fluid Windows 8 Metro App Launch Experience?

Microsoft discussed a few techniques for producing a fast and fluid launch experience of Windows 8 metro style apps. "As you continue to build your apps, remember to prioritize app launch and use the patterns outlined in this post," Microsoft said. "After all, it's your first chance to make a memorable impression on users by […]

Windows 8 sequence of operations during metro style app launch

Microsoft discussed a few techniques for producing a fast and fluid launch experience of Windows 8 metro style apps. "As you continue to build your apps, remember to prioritize app launch and use the patterns outlined in this post," Microsoft said. "After all, it's your first chance to make a memorable impression on users by letting them launch a metro app quickly and with little to no lag time once it is clicked on by a mouse or touched by a finger."

Justin Cooperman, Program Manager, Windows User Experience, discuss how to craft a well-designed, responsive app launch experience and explain why app launch is a critical time to make a positive impression on users.

"When users launch an app, they are immediately greeted by the splash screen. Every Metro style app has a splash screen, which consists of a 620x300 image and solid background color. Windows presents the splash screen on your behalf in order to welcome users while your app is activated. The activated event is received by all apps on launch, and gives your app the ability to perform any initialization work needed to present its initial UI. This might include reading basic settings, determining what page to navigate to, and/or identifying whether the app was activated for one of the various contracts."

After initialization is complete and the splash screen is dismissed, the app must present its first window. While for JavaScript apps 'No work is required', C# apps, however, must do this explicitly through a call to Window.Current.Activate.

"Be careful not to delay this operation, as your app will be terminated if a window is not displayed within a reasonable amount of time (~15 seconds). In addition, you'll want to present a window as fast as possible because unnecessarily keeping the splash screen up can quickly deteriorate the user experience. We recommend that you present a window within 2-3 seconds to ensure that your app will always launch as expected, even on low-end hardware," writes Cooperman.

In the post, Cooperman introduces four app launch design patterns that can be applied to metro apps:

  • Default app launch: For apps that don't require additional loading and are immediately ready to use.

    Ex: A dictionary app that enables users to look up or translate various terms. The landing page consists only of a textbox for user input.

    "Below is an example of the default launch flow using Internet Explorer 10 from Consumer Preview. When the app is launched, the splash screen is immediately displayed to the user. The splash screen stays visible on the screen until the app is activated, at which point the splash screen fades out into the landing page. In this case, the landing page shows the last page visited by the user, which is readily available because it was saved during the previous session."

    Windows 8 Default app launch

  • Skeleton app launch: Great for apps that fill the landing page incrementally on launch.

    Ex: A reading app that tracks the user's books, magazines, and newspapers. When launched, the app incrementally populates the user's library.

    "In this flow, Windows handles the display and removal of each app's splash screen. The splash screen is displayed until activation completes and a window is presented, triggering an animated crossfade to the app's landing page."

    Windows 8 Skeleton app launch

  • Extended app launch: For apps that perform lengthy loading operations before presenting UI. This might include network calls or substantial file I/O.

    Ex: A sports app that shows the latest scores and highlights. The app uses REST APIs to retrieve this information over the network and displays live data on the landing page.

    "The extended splash screen is owned entirely by the app and is formatted using the splash screen API. The API provides positioning information that ensures the look and feel of the extended splash screen is visually identical to the splash screen (with the exception of a progress ring or loading details), which unifies the seemingly independent loading operations. While the extended splash screen is up, the app can continue executing tasks needed to paint the landing page. Then, after loading is complete, you can transition from the extended splash screen to the landing page."

    Windows 8 Extended app launch

  • Deferred app launch: Useful for apps that need to complete basic asynchronous tasks on launch, like querying app settings to check for first-run.

    Ex: A game that needs to determine whether the user has already created an account. This information is needed to determine which page to present to the user.

    " Instead of displaying an "extended" splash screen, however, the app defers dismissal of the regular splash screen until asynchronous tasks have been executed. Because apps have limited time to complete this deferral, the deferral pattern should be used sparingly, and mainly to complete simple asynchronous operations like reading app settings before the app is displayed," cooperman explains.

    Windows 8 Deferred app launch

For more info about activation, splash screens, or app lifecycle, Cooperman published following resources:

Link

Type

Highlights

Adding a splash screen

Docs

Extensive section outlining both the splash screen and extended splash screen. The section also includes useful design guidelines.

Splash screen sample

Sample

SDK Sample demonstrating the extended app launch pattern in JavaScript, C#, C++, and VB.NET.

SplashScreen class

API Reference

API documentation for the splash screen class.

How to activate an app - VB/C#/C++ and XAML

Quickstart

Tutorial for activating a Metro style app in C#, C++, or VB.NET.

How to activate an app - JavaScript and HTML

Quickstart

Tutorial for activating a Metro style app in JavaScript.

App activation and suspension sample

Sample

SDK Sample demonstrating Metro style app activation and suspension in JavaScript.

Windows.ApplicationModel.Activation namespace

API Reference

API documentation for the activation namespace.

WebUIApplication.activated event

API Reference

API documentation for the activated event.

Application lifecycle

Article

Article explaining the Metro style app lifecycle.