Intro & Exit Screens

Many SBTs begin with an intro screen to orient the test taker and provide the task’s purpose and context. An exit screen is also often provided to reinforce that the task has been completed. Either screen may be omitted if it is not needed for the SBT’s flow.

Intro and exit screens typically adhere to one of two formats: character-based or content-based.

Character-based Screens

Character-based intro and exit screens are used in SBTs that provide task characters to guide test takers through the scenario. Styling for character-based screens can be found on the Characters & Dialogue page.

The following demo presents a character-based screen.

To view alternative presentations and styling, use the Change Theme and Read Aloud buttons in the upper-right of the screen.

Content-based Screens

Content-based intro and exit screens are used in SBTs that provide directions and other information to test takers directly, rather than via task characters. Content is presented in a container with the following characteristics:

  • Horizontally and vertically centered
  • Width between 40 and 65 characters to ensure easy readability
  • White #FFFFFF (or other light color) fill
  • Rounded corners
  • Drop shadow

The following demo presents a content-based screen.

The demo is 62.5% its actual size. To see a full-size demo, click here.
To view alternative presentations and styling, use the Change Theme and Read Aloud buttons in the upper-right of the screen.

Backgrounds

Backgrounds for both character-based and content-based screens may be composed of image(s) or a solid fill. Three kinds of background images are available:

  • Tiled. The background is composed of image tiles that repeat horizontally, vertically, or both to create a pattern.
  • Isometrically scaled. The ratio of the background image’s height and width remains the same as the content area’s size changes.
  • Allometrically scaled. The ratio of the background image’s height and width is allowed to change as the content area’s size changes.

Combinations of these background image types can be used to create various effects. For example, in the demo below, the sky is a tiled image, and the buildings are an isometrically scaled image. This approach prevents the buildings from becoming deformed in unusual browser window sizes. (Try opening the full-size demo and resizing the browser window to see how it works.)

The following demo presents a background screen.

The demo is 62.5% its actual size. To see a full-size demo, click here.
To view alternative presentations and styling, use the Change Theme and Read Aloud buttons in the upper-right of the screen.