Storyboarding

The I -See-U Wireframe/Storyboard Slideshow Template

Overview

To facilitate integrating universal design during the planning and early design phases, Bill Fischer developed the I-See-U storyboard template. It contains text boxes for defining Integrated captions and audio descriptions as well as dialogue, narration, and sound design, that can be coordinated, screen by screen, with the visual assets.

The Universal Design Storyboard Template

SusanBonnerAnimation Plan and Storyboard

Instructions For Using the Google Slides I-See-U Storyboard Template

Login to your Google account from your web browser. You will need to create an account if you don't already have one. Google accounts are free.
Use this link to the Google Slides storyboard Template (external link) to access the Template.
Once the Google Slides template is open in your browser
1. 1. Choose File > Download Microsoft Powerpoint.
  2. Upload the Powerpoint file to the One Drive. Work directly in Powerpoint. Note that Powerpoint slideshows will automatically convert to Google slides when uploaded to Google Drive.
  3. Add narration/dialogue, audio description, timing, and sound design notes as needed to ensure accessible and/or universal design.
  4. Make sure to share your file with the team.
  5. Add the storyboards to this folder on One Drive

Example Presentation including Storyboards for the Anxiety Animation

MHA ANXIETY SCREENING ANIMATION

the final Anxiety animation that uses integrated captions

User Experience Design Fundamentals

Signal and Noise Management

Which visual information in the design is information? Decoration? Distraction? The image below is a bad example of signal and noise management.

Visual hierarchy: Position, color, and contrast of screen elements should be designed in a hierarchical attentional order:
1. information (signal)
2. decoration (noise)(beautiful noise?)
Focus: where do we want attention to be prioritized. The user should be able to easily find and obtain what they are looking or know where we want them to look.
Grouping: organizing content in intentional chunks that are separated by generous margins and further differentiated by design elements like background value, lines, and other visual elements.

Discoverability & Affordance

It should be clear what the results of a choice will be and should be built on an expected, shared understanding. This can include:

Fully viewable menu systems avoid asking users to create mental maps of hidden navigational elements which require more working memory and increase cognitive load. Humans can only keep 4-5 pieces of information in working memory.
Maintaining consistency of formatting from screen to screen
Consistency of visual cues throughout the media, including menus.
Utilizing massively adopted conventions for both image and layout.
Accompanying icons with text.

Feedback & Recovery

Providing information that orients, and confirms the success or failure of the user's choices, is important because that can mirror the physical world, which provides constant feedback to our senses. This can include:

Screen titles that reinforce where we landed and remind us where we are.
'Submitted', 'saved', 'scored' 'Damaged' and other confirmations.
Undo, Redo, Exit, and Back are essential navigational elements for usability. Without them, users must return to 'home' pages/screens or navigation systems to undo an action.