Home | Overview of the Profession | Usability Overview | Dec. 13th Program Summary | Definitions | Resources | Articles

December 13, 2004 Program Summary

Share and Compare Notes & Ideas:
Paper Prototypes, Storyboards, and Mockups

Setting up a paper prototypeSitting around a circle of friendly, interesting people with plates of holiday goodies, we enjoyed another opportunity to relax, roll up our sleeves, and exchange ideas with our colleagues. As with similar events in the past, this session gave us an occasion to informally see what others have been doing, this time in the way of modeling and communicating conceptual ideas.

Why are these tools important? Before embarking on a costly development cycle for a Web site, game, software application, instructional system, movie, or any physical product, it's critical to agree on the conceptual aspects. These aspects can include the content, plot, features, navigation, functions, sequence, and user interface.

Prototypes, storyboards, and mockups help teams study, demonstrate, evaluate, and optimize system characteristics before developers invest a lot of time with expensive media and processes. Usability testing iteratively evaluates mockups and other prototypes to be sure the interface design seems intuitive from the user's perspective. Testing early in the design cycle typically saves many hours and dollars in the design stage, before continuing with development and modifications.

See highlights of the mini-presentations below!

Dave Gillette, SLO STC board member, Cal Poly professor, and usability proponent, showed us and then provided related information about a 32-minute DVD produced by the Nielsen Norman Group called “Paper Prototyping: A How-To Video.”

From the video, we learned how basic tools such as paper, pens, sticky notes, tape, and scissors comprise everything you need to test mockups of Web sites, software, devices, and hardware interfaces.

The video demonstrated how usability testers typically work in pairs with a testing subject who represents a typical user. One tester gives instructions and takes notes while the other tester simulates the CPU, device, or hardware that reacts to the user's selections.

Dave then explained that he has worked on various projects (for example: a PDA system for tourists and a campus Web site interface) in which doing usability testing with mockups handily uncovered a variety problems before the designs were finalized.

Testing a mockup of a kiosk (by Nielsen Norman Group)

(Above: A scene from the video) Testing hardware user interfaces: mockup of a kiosk. Behind the mockup, a second tester is simulating the actions of the kiosk. Copyright © 1998-2004 Nielsen Norman Group.

To see more still shots from the video, go to http://www.nngroup.com/reports/prototyping/video_stills.html

This DVD is available at Cal Poly's Kennedy Library (call number DVD 005.437 P197P2 2003).

Bruce Mills, a SLO STC board advisor and repeat presenter on business and graphic design topics, showed various examples of storyboards he has created for earlier instructional design projects.

As Bruce's divergent examples at right illustrate, storyboards can range from simple sketches and annotations to high fidelity illustrations. Likewise, many tools and media apply, from pencil and paper to sophisticated information design tools.

In any situation, Bruce explained, the main purpose of a storyboard is to represent, through notes and static imagery, a frame-by-frame progression of a relatively involved production such as a Web site, learning tool, film, print product, or animation.

Bruce reminded us that although storyboards show only individual frame views, they can still depict all the branching and decision logic within the system.

The primary goal is to help the stakeholders explore and evaluate not only a solution they can agree on, but eliminate in advance as many problems as possible and avoid expensive design mistakes.

Sample low-fidelity storyboard by Bruce Mills

Sample high-fidelity storyboard by Bruce Mills

Keri Morgret, a SLO STC board member with a graduate degree in instructional design, demonstrated a truly fascinating simulation she co-authored in her grad school program at Stanford. It was designed for fourth to eighth grade science students to become aware of animal characteristics that affect an animal’s suitability to a particular environment.

The project, called the Mammal Maker, was created in PowerPoint. (Representative screen shots appear at right.)

The top image shows one of several choices the learner would make to select the mammal's traits -- in this case, a tail. At bottom, the completed mammal subsequently copes with the frigid environment of the tundra, one of several habitat options. The system also helps evaluate how well the mammal would survive in its new home, given its capabilities.

When viewed in Slide Show mode, the tool transforms itself from a collection of static storyboards into an interactive simulation of the actual program flow.

As a prototype, this particular example is limited to one linear path rather than illustrating all possible branches. Yet it effectively demonstrates the proposed look and feel of the final production.

Sample #1 of Mammal Maker simulation by Keri Morgret

Sample #2 of Mammal Maker simulation by Keri Morgret

Other resources mentioned:
  • The November 2004 issue of the free Human Factors International newsletter. This issue discusses some fascinating comparisons between usability testing in observed laboratory settings vs. remote, unobserved settings, and the implications for test design. See http://www.humanfactors.com/downloads/nov04.asp.
  • PowerPoint and e-learning templates available from William Horton and Associates. Recommended by Keri Morgret. See http://www.horton.com/.
  • Lookandfeel New Media, a whimsical site that uses a clever Flash interface (optional) to explain its own layout to the visitor. Recommended by Dave Gillette. See http://lookandfeel.com.
Share and Compare Notes & Ideas:
Paper Prototypes, Storyboards, and Mockups
Date: Monday evening, December 13, 2004

Share and Compare Notes & Ideas: Paper Prototypes, Storyboards, and Mockups” offered an opportunity to see how our colleagues have been using various physical or electronic tools for modeling designs.

For example, storyboards were used to capture the details of an evolving design in the form of text and descriptions of audio, video, animation, and navigation. Mockups illustrated the placement of features and functions, and simulate navigational considerations in product, software, or Web site interfaces.

These methods make it easier to convey dynamic information to other team members; agree on proposed content, methods, and changes; avoid delays and miscommunication; achieve higher audience or end user satisfaction; and manage production cost and schedule issues.


Disclaimer, credits, copyrightGet Acrobat ReaderSome articles or linked resources may be in Portable Document Format (PDF). To download the free Acrobat Reader, click the icon at right. To install the Reader, double-click the downloaded file.

Disclaimer and credits