Guidelines and checklist for splash screens (Windows Store apps) (Windows)

7 out of 16 rated this helpful - Rate this topic

In this article

Appropriate use of the splash screen
Inappropriate use of the splash screen
User experience guidelines: splash screen
User experience guidelines: extended splash screen
Security considerations
Troubleshooting
Related topics

Follow these guidelines to customize the splash screen and create an extended splash screen, to help ensure a good launch experience for your users.

Every Windows Store app must have a splash screen, which consists of a splash screen image and a background color. You can customize both of these features.

Windows displays this splash screen immediately when the user launches an app. This provides immediate feedback to users while app resources are initialized. As soon as your app is ready for interaction, Windows dismisses the splash screen.

A well designed splash screen can make your app more inviting. The Windows Store uses this simple, understated splash screen, shown here scaled down:

A 75% scaled screen capture of the splash screen from the Splash screen sample.

This splash screen is created by combining a blue background color with a transparent PNG.

Additionally, you can use the SplashScreen class to customize your app's launch experience by extending the splash screen and triggering entrance animations.

Appropriate use of the splash screen

Customize the splash screen to differeniate your app.

Your splash screen consists of an image and a background color, both of which you can customize. A well designed splash screen can make your app more inviting.

Putting an image and background color together to form the splash screen helps the splash screen look good regardless of the form factor of the device your app is installed on. When the splash screen is displayed, only the size of the background changes to compensate for a variety of screen sizes. Your image always remains intact.

To learn how to add and customize this splash screen, see Quickstart: Adding a splash screen.
Create an extended splash screen so that you can complete additional tasks before showing your app's landing page.

You can further control the loading experience of your app by creating an extended splash screen that imitates the splash screen displayed by Windows. By imitating the splash screen displayed by the system, you can construct a smooth and informative loading experience for your users. For example, if your app needs more time to prepare it's UI or load network data, you can use your extended splash screen to display additional information as your app completes those tasks.

You can see an example of the users' loading experience in these images, progressing from left to right. The screen shots show the transition from the splash screen displayed by Windows, to the app's extended splash screen, and lastly to the app 's landing page.
To learn how to use the SplashScreen class to create and show an extended splash screen, see How to extend the splash screen.

Tip If you use fragment loading to load your extended splash screen, you may notice a flicker between the time when the Windows splash screen is dismissed and when your extended splash screen is displayed. You see this flicker because fragment loading begins to load your extended splash screen asynchronously, before the activated event handler finishes executing. You can avoid this unsightly flicker entirely by using the design pattern demonstrated by the Splash screen sample. Instead of loading the extended splash screen as fragments, it is simply painted on top of the app’s UI. When your additional loading tasks are complete you can then stop displaying your extended splash screen to reveal your app’s landing page. Alternatively, if you wish to continue loading your extended splash screen as a fragment, you can also prevent the flicker by getting an activation deferral and responding to activated events asynchronously. Get a deferral for an activated event by calling the activatedOperation.getDeferral method.

Inappropriate use of the splash screen

Don't use the splash screen or your extended splash screen to display advertisements.

The purpose of the splash screen is to let users know, while the app is loading, that the app they wanted to start is starting. Introducing foreign elements into the splash screen reduces the user's confidence that they launched the correct app and makes the app harder to identify at a glance.
Don't use your extended splash screen as a mechanism to display multiple, different splash screen images.

The purpose of the splash screen and extended splash screen is to provide a smooth, polished loading experience for your users. Using your extended splash screen to display multiple, different splash screen images distracts from this purpose and could be jarring or confusing to your users. Instead, your extended splash screen should only continue the current loading experience while other tasks are completed.
Don't use the splash screen or your extended splash screen to display an "about" page.

The splash screen should not show version information or other app metadata. Display this information in your app's Windows Store description or within the app itself.

User experience guidelines: splash screen

Use the following guidelines to help you customize the splash screen that will be displayed by Windows for your app. To learn how to add and customize this splash screen, see Quickstart: Adding a splash screen.

Use an image that clearly identifies your app.

Use an image and color scheme that clearly identify your app, so that users are confident that they launched the correct app. Making a unique screen also helps reinforce your brand.
Use a transparent PNG as your splash screen image for best visual results.

Using a transparent PNG lets the background color you chose show through your splash screen image. Otherwise, if the image has a different background color, your splash screen may look disjointed and unappealing.
Provide a version of your splash screen image that is sized for all three scale factors.

All apps must have a splash screen image that is 620 x 300 pixels, for when the device uses 1x scaling. We also recommend that you include additional splash screen images for 1.4x and 1.8x scaling. Providing images for all three scale factors helps you create a clean and consistent launch experience across different devices.

Use the following table to determine the required size the splash screen image for each scale factor:

Scale Image size (pixels)

1x 620 x 300

1.4x 868 x 420

1.8x 1116 x 540
Choose an image that uses the area allotted by the system for the splash screen image.

When you choose a splash screen image, try to take advantage of the space allotted at each scale factor. Refer to the scale and image size table to determine the size of the splash screen image for each scale factor.

This helps you produce a high-quality splash screen, by ensuring the quality of the image.
Show system and event-related UI after the splash screen is dismissed.

You can determine when it is safe to show system or event-related UI by listening for the splash screen dismissed event. Otherwise, the associated UI (like the search pane, a message dialog, or web authentication broker) might show while the splash screen is displayed. This might cause unwanted visual effects.
Start entrance animations after the splash screen is dismissed.

Many apps wish to show content entrance animations each time the app’s landing page is loaded. You can determine when to start your animations by listening for the splash screen dismissed event.

Scale	Image size (pixels)
1x	620 x 300
1.4x	868 x 420
1.8x	1116 x 540

User experience guidelines: extended splash screen

Use the following guidelines to help you create an extended splash screen that your app displays while it completes additional loading tasks. To learn how to create and display an extended splash screen, see How to extend the splash screen.

Make sure your extended splash screen looks like the splash screen that is displayed by Windows.

Your extended splash screen should use the same background color and image as the Windows splash screen. Using a consistent image and background color helps ensure that the transition from the Windows splash screen to your app's extended splash screen looks professional and is not jarring for your users.
Position your extended splash screen image at the coordinates where Windows displayed the splash screen image.

To learn how to position your extended splash screen image correctly by using the SplashScreen class, see How to extend the splash screen.
Adjust the position of your extended splash screen to respond to resize events like snap and rotation.

Your extended splash screen should adjust the coordinates of its splash screen image, if the app is snapped or the device is rotated, by listening for the onresize event. This helps ensure that your app's loading experience looks smooth and professional, regardless of how your users manipulate their device or change the layout of apps on their screen.
If you show your extended splash screen for more than a few seconds, add a progress ring so users know your app is still loading.

Use the indeterminate progress ring control to help make your app seem more responsive, by letting users know that your app hasn’t crashed and will be ready soon. Additionally, you should consider using this control to display a single line of text alongside the progress ring to briefly explain what your app is doing to your users.

Making your app seem more responsive and keeping your users informed is a great way to create a positive loading experience for users. You can learn how to add an indeterminate progress ring and text in Quickstart: adding progress controls.

Security considerations

The following articles provide guidance for writing secure C++ code.

Troubleshooting

JavaScript: Avoiding a flicker during the transition to your extended splash screen

How to extend the splash screen includes advice to help you avoid seeing a flicker: If you notice a flicker during the transition to your extended splash screen, add onload="" on your <img> tag like this: <img id="extendedSplashImage" src="/images/splash-sdk.png" alt="Splash screen image" onload="" />. This helps prevent flickering by making the system wait until your image has been rendered before it switches to your extended splash screen.

C#: Avoiding a flicker during the transition to your extended splash screen

If you followed the instructions in How to extend the splash screen you may notice a flicker during the transition to your extended splash screen. This flicker occurs if you activate the current window (by calling Window.Current.Activate) before the content of the page finishes rendering. You can reduce the likelihood of seeing a flicker by making sure your extended splash screen image has been read before you activate the current window. Additionally, you should use a timer to try to avoid the flicker by making your application wait briefly, 50ms for example, before you activate the current window. Unfortunately, there is no guaranteed way to prevent the flicker because XAML renders content asynchronously and there is no guaranteed way to predict when rendering will be complete.

If you have followed the instructions in How to extend the splash screen and you notice a flicker during the transition to your extended splash screen, follow these steps to make sure your extended splash screen image been read and that your app waits briefly before the current window is activated:

In ExtendedSplash.xaml, update the markup for your extended splash screen image to notify you when your extended splash screen image has been read.
XAML
Copy
<Image x:Name="extendedSplashImage" Source="Assets/SplashScreen.png" ImageOpened="extendedSplashImage_ImageOpened"/>
The ImageOpened event fires after the image has been read. As shown in the example, you should register for the ImageOpened event by adding the ImageOpened attribute and specifying the name of the event handler (extendedSplashImage_ImageOpened).

In ExtendedSplash.xaml, add code in your ExtendedSplash class that activates the current window based on a timer and after your extended splash screen image has been read.


        private DispatcherTimer showWindowTimer;
        private void OnShowWindowTimer(object sender, object e)
        {
            showWindowTimer.Stop();
 
            // Activate/show the window, now that the splash image has rendered
            Window.Current.Activate();
        }
 
        private void extendedSplashImage_ImageOpened(object sender, RoutedEventArgs e)
        {
            // ImageOpened means the file has been read, but the image hasn't been painted yet.
            // Start a short timer to give the image a chance to render, before showing the window
            // and starting the animation.
            showWindowTimer = new DispatcherTimer();
            showWindowTimer.Interval = TimeSpan.FromMilliseconds(50);
            showWindowTimer.Tick += OnShowWindowTimer;
            showWindowTimer.Start();
        }

This example shows both how to respond to an ImageOpened event and how to use a timer to make your application wait briefly before you activate the current window.

Revise your OnLaunched method like this:


protected override void OnLaunched(LaunchActivatedEventArgs args)
{
    if (args.PreviousExecutionState != ApplicationExecutionState.Running)
    {
        bool loadState = (args.PreviousExecutionState == ApplicationExecutionState.Terminated);
        ExtendedSplash extendedSplash = new ExtendedSplash(args.SplashScreen, loadState);
        Window.Current.Content = extendedSplash;
    }

    // ExtendedSplash will activate the window when its initial content has been painted.
}

In the example, we have removed the call to Activate the current window. Instead that activation is performed by the ExtendedSplash object after the ImageOpened event fires to indicate that the extended splash screen image has been read.

Test your code on as many different devices and in as under as many difference circumstances as you can to make sure your code avoids the flicker effectively!

Guidelines and checklist for splash screens (Windows Store apps)