Characters & Dialogue

Many SBTs convey information to test takers via in-task character dialogue.

Styling variations for characters and dialogue are allowed to suit the needs of a given context (as described below), but a character and his/her dialogue must always be proximal to ensure their association is clear.

Task characters can be presented in one of two styles: full-body or as a portrait.

Full-body Characters

A full-body shot of the character (AKA a hero shot) is typically shown when a character is first introduced and during transitional scenes that emphasize the overall task flow (as opposed to scenes in which students must complete an activity).

Full-body characters’ dialogue is always presented in a speech bubble. Details:

  • The speech bubble background must be contrast-compliant with respect to the dialogue text.
  • The speech bubble must have a tail that connects it to the speaking character.
  • The task character’s name should appear bolded and with a bottom border at the top of the speech bubble unless the character announces herself (e.g., “Hi, I’m Diana…”)

The following demo presents a full-body character.

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

Character Portraits

Smaller character portraits are used on most screens so that test takers can focus on the activity at hand. Portraits are always accompanied by a name tag. The frames for portraits may be rectangular or round.

Portraits and their accompanying dialogue can be presented in three styles.

  • Distinct. Typically used when a task contains more complex backgrounds. Dialogue is presented in a speech bubble like those for full-body characters, except the tail and padding are smaller. Character name tags have white backgrounds.
  • Intermediate. Typically used when a task contains simple or solid fill backgrounds. Dialogue and name tags are bare. The character portrait is surrounded by a border whose color changes to match the states of the Voiceover button (see below).
  • Subtle. Only used on white backgrounds. Dialogue and name tags are bare. The character portrait has no border, but its background changes color to match the states of the Voiceover button (see below).

The following demo presents two character portraits each in their distinct style, intermediate style, and subtle style.

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

Voiceover Playback

Voiceover for character dialogue is provided unless there is a compelling reason not to (e.g., a science SBT that asks test takers to evaluate sounds with different pitches could be more difficult were voiceover present).

Playback behavior

When test takers navigate to a scene with voiceover for the first time, the voiceover plays automatically. Details:

  • Once playback has finished, pressing the Voiceover button will replay the voiceover from the beginning.
  • Test takers are allowed to move on to the next screen even if voiceover playback hasn’t finished.
  • If a test taker returns to a previously visited screen, voiceover does not automatically play again. Rather, the test taker must press the Voiceover button, which replays the voiceover from the beginning.

When text-to-speech is enabled, voiceover playback is paused.

Voiceover buttons

When voiceover is provided for character dialogue, a Voiceover button is presented either at the upper right of the speech bubble (in the distinct style) or at the upper right of the character portrait (in the intermediate and subtle styles). Voiceover buttons have the following states.

  • Paused. Visible when the voiceover is paused. The button is gray #767676 and displays the volume-up icon. (See the Icons page.)
  • Playing. Visible when the voiceover is playing. The button is blue #0068D1 and displays the pause icon.

Interactive portraits

In the intermediate and subtle styles, the character’s portrait changes state along with its Voiceover button.

  • Paused. If the portrait has a border, it becomes gray #949494 . If the portrait has a background, it becomes light gray #E5E5E5 .
  • Playing. If the portrait has a border, it becomes blue #0068D1 . If the portrait has a background, it becomes light blue #C6EAF7 .