Problem

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

Interstitials display the context as a title and by saying what is being loaded, and indicate activity with a moving progress bar or a spinning general loading indicator. If the process can be cancelled, allow this with a button or -- as shown here -- Softkey.

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.

Use the Interstitial Screen pattern when:

  1. There is a technical limit that prevents display of the previous context. This is commonly encountered when starting the device, or when applications are loaded.
  2. Within an application, site or process, the content presented will change enough that a clean break is required. Switching users, or changing or initiating information filtering (including some searches) are the types of situations that can cause this.

The interstitial is primarily a loading process screen. Whenever there is a sufficient delay and available space on the screen, advertising can also be added to it.

When loading an application, especially, the entire screen can be taken up with branding, and the loading indicator overlaid on top of this. Be sure text titles are still loaded, and make ever effort to use a progress bar and percentage or time remaining.

Variations

Only two types really exist:

The Loading screen, when an app is loading or some other major change in state occurs. This screen is about context change, and should very clearly label the service being loaded, to include major branding. There is more tolerance for vague timing, and simple "Loading" indicators may be tolerated.

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. Many strategies to avoid loading an Interstitial Screen can only be implemented at the OS level, however.

The second type is the the "in process screen," displayed when a delay is encountered inside an application, site or process. These should strive to preserve context (by labeling and branding the existing application or service), and inform the user how brief the delay will be. In many cases, the key reason for the Interstitial Screen is to indicate to the user how hard the service is working, so it is clear the user-submitted action was accepted, and to emphasize the value of the service.

For example, many search systems work well when displaying results on the same screen as the terms were entered on. However, if the search takes more than a few seconds, and if there is much competition in the space, there may be value in adding an Interstitial Screen to emphasize the power of the search taking place instead.

InterstitialScreen-Advertising.png

Interaction Details

The Interstitial Screen is usually described as a required step, and does not have any interaction itself. 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