Problem

A delay is encountered before a requested screen can be loaded. The information previously displayed cannot or should not be displayed.

Solution

Whenever possible, use Loading Indicators which occupy a small portion of the screen, or are within Pop-Up dialogues to indicate a delay. See the Confirmation pattern for more on these.

Only use the Interstitial Screen pattern when:

• 1) The screen

Cannot=technical (loading app), should-not=Context changed enough that it would be confusing... If not, use a Wait Indicator in some other manner...

The interstitial is primarily a loading process screen. Whenever there is a sufficient delay and no suitable information that should be presented on the bulk of the screen, advertising can also be added to it.

Variations

Only two types really exist:

The Loading screen, when an app is loading or some other major change in state occurs. Try to avoid these, and load actual content as quickly as possible. Often, it is possible to rapidly load the last state (even as just a screenshot) or preserve the screen from which the change was initiated, even if a Wait Indicator is displayed, and prevents access to the actual content.

In Process screens are displayed when a delay is encountered inside an application, site or process, and the context change is so serious that presenting a loading pop-up over the previous screen is not suitable. Switching users, or changing or initiating information filtering (including some searches) can cause this.

Interaction Details

Interstitial screens are usually required steps, and do not have any interaction themselves. Key device features such as the ability to switch applications or exit back to the Idle Screen should not be disabled. If the screen is displayed as part of a system update, or something else where interruption could cause irreparable harm. Whenever possible, prevent disallowed actions like power-off by disabling the buttons, as well as describing the function.

When the process may be cancelled, a button or Softkey tab should be displayed with this function. Selecting it will return to the last stable screen. Assure this screen, if part of a process, has an easy method to change path or exit the entire process or application.

When advertising is displayed, it should be interactive as much as possible. Allow the user to select the ad to view details, purchase the product, etc. Load the ad link into a new application (a new browser window, or the application store) and do not interrupt the ongoing process.

Presentation Details

The title of the application or service should be displayed, and the position in the process also included.

Branding should also be included. At least include an icon in the title bar, but the entire screen may be occupied with branding for loading screens, and in other chases.

One or another type of Wait Indicators should be used. See that pattern for details, and be as specific as possible.

Describe what is being loaded, and why. Say "Finding the best deals for you" instead of just "Loading." If the screen is being displayed due to a critical system process, and features like application switching are disabled, clearly communicate this.

When a cancel function is provided, the button or Softkey should be labeled "Cancel" or the equivalent label or icon used across the OS to denote the current screen or process is to be cancelled.

Additional spaces may be occupied with Advertising. However, these must be clearly differentiated from the other messaging, so users are not confused by an apparent change in context, even if they glance away at the beginning of the screen being loaded. Simply labeling "advertisement" or similar is not an effective method of differentiating.

The advertising should not interfere with the user’s understanding of the application. Advertising should almost never animate, while the loading indicator will, to imply activity.

Antipatterns

Unless deliberately using a business model with a paywall, do not load Interstitials purely to display Advertising.

Examples