Game Refined Wireframe/Storyboard Guide

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.

A Screen Capture of the I-See-U Storyboard Template

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 your Google Drive. It will transform back into a Google Slides file. Or, 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.

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.

Examples Refined Wireframe/Storyboards

An Example Wireframe for an Educational Puzzle Game

Created by Bill Fischer

This Slideshow by Bill Fischer includes a a click-thru wireframe with some added color. It provides an example of adaptive gameplay difficulty, and universal design methods aimed at maximizing engagement for deaf, blind, and cognitively impaired persons as well as everyone else. Note: click on the number '1' to navigate around the slideshow.

MSU-Games_Color-Wheel_Finished-Wireframes

An Example Wireframe/Storyboard for a Dating Simulator

Created By Lexi Schineman

This Slideshow, by Lexi Schineman, includes a logline, core loop, flow chart, character development, accessibility plan, thumbnails, and a click-thru wireframe/storyboard. It adapts the popular game 'Borderlands' into a dating simulation game. It provides an example of gameplay difficulty, and universal design methods aimed at maximizing engagement for deaf, blind, and cognitively impaired persons as well as everyone else . Note: click on the number '1' to navigate around the slideshow.

LS-Game-Wireframe- Example

2nd Semester

Example: An Educational Puzzle Game:

Gameplay includes watching animations, analyzing charts, discussion, and an interactive quiz
Click the down arrow inside the gray circle to expand the example.

This Slideshow by Bill Fischer includes a a click-thru wireframe mock-up. It provides an example of adaptive gameplay difficulty, and methods for maximizing engagement . Start at slide 30. Note: click on the number '1' to navigate around the slideshow.

Universal Game Design - Gamicon

Google Sites

Report abuse