Storyboard Tools

for Software Development

What is a Storyboard?

• “A storyboard is a series of panels that depict key scenes, actions, visuals, and annotations that define the highlights of a user experience.” – MIT user experience design assignment

• “Storyboards are graphic organizers in the form of illustrations or images displayed in sequence for the purpose of pre-visualizing a motion picture, animation, motion graphic or interactive media sequence.” – Wikipedia

• “The Storyboard technique was borrowed from the motion picture industry.” – Hughes Aircraft Company, STOP, 1965

The Storyboard technique was borrowed from the motion picture industry. Each sheet is brought to life with just enough detail, and means the same thing to all viewers because of its limited thematic dimensions. Gallery effect shows whole strategy, spots loopholes and overlaps.

Sketchboard

Wireframes

Storyboard

A user interface-flow diagram is also called a storyboard.

Standalone and Online Tools

Standalone Tools

• Adobe InDesign• XCode 4 Storyboard• Adobe Fireworks• Axure RP• Balsamiq Mockups• ConceptDraw• Diagram Designer• Enterprise Architect

• FlairBuilder• OmniGraffle• OpenOffice Draw• Pencil Project• Microsoft Visio• Microsoft Sketchflow• WireframeSketcher• iRise Pro Studio

Online Tools

• MockFlow• Mockingbird• Mockup Builder• Pidoco

• fluidIA• Gliffy• iPLOTZ• Lovely Charts• Lucid Chart

Analysis of Alternatives

Research and Findings

Comparison Criteria• Chart• Diagram• UML• Flowchart• Collaboration• Graph• Workflow• Drawing• Custom Images• Web Wireframe• HTML5 Export• Flash-based• Vector Graphics• Mockup Low Fidelity• Mockup High Fidelity• Wireframe Layout• Wireframe Prototype• Usability Testing• Functional Specs• Online Based Tool• Standalone Tool• Mac• Windows• Linux

• Cost• Implementation

Recommended Tools

Axure RP and Pencil Project

Tool Review for Axure RP

Features• Linking - Yes, through simple linking or through

programmability. • Exporting - Yes, to HTML and CHM files for stand

alone viewing (note exports to PDF unavailable)

• Run-time viewer and annotations option -

No, both the HTML and CHM version are read-only

• Web Browser Control widget - No• Phone Widgets Support - Yes• Programmability - Yes, fully programmable like

changing click behavior in presentation mode

• UI Types Out of the Box - Generic, not tied to a UI or OS

• Third party support: Widgets available for OS X

Specs• Price $589 Single User License (PC + Mac)

$539 per license (purchase 5 or more)

Both come with 12 months of maintenance. Another year of maintenance updates costs $149.

• URL - http://www.axure.com/• Trial available - Yes, feature complete; 30 days

Available from: http://www.axure.com/downloads.aspx

• Application Modes - Desktop, with a standalone installer

• Documentation -

http://www.axure.com/online-training.aspx• Instruction videos -

http://www.axure.com/online-training-videos.aspx

Tool Review for Pencil Project

Features• Linking – Yes, but not available when linking work

in any of the export features• Exporting - Yes; PNG, HTML, OpenOffice, MS

Word and PDF (atter three require Export Templates downloadable from the official Pencil Project web site)

• Run-time viewer and annotations options -

Can export as HTML; unable to annotate afterward

• Web Browser Control widget - No• Phone Widgets Support - No; must use custom• Programmability - Yes, fully programmable like

changing click behavior in presentation mode

• UI Types Out of the Box - Generic, not tied to a UI or OS

• Third party support: Widgets available for OS X

Specs• Price - Free • URL - http://pencil.evolus.vn/en-US/Home.aspx• Trial available – NA;

http://pencil.evolus.vn/en-US/Home.aspx• Application Modes - Desktop application on

Windows and Linux; Firefox addon• Documentation - Limited

http://pencil.evolus.vn/en-US/UserGuides.aspx• Instruction videos - Yes; OGG video (requires

DirectShow filters for Windows)

http://pencil.evolus.vn/en-US/UserGuides.aspx

Axure RP Review Summary

Axure RP is excellent in creating high-fidelity, complex mockups requiring numerous interactions. The tool has a small learning curve, especially building complex interactions with programmed behavior. Lots of documentation is available.

Axure RP has numerous tools and options for building high-fidelity, complex and programmable prototypes.

Pencil Project Review Summary

Pencil Project is a no-cost, open source tool. This allows for it to have an excellent value for cost ratio.

Pencil Project has limited documentation and support which contributes to its “rough on the edges” feel. In addition, it has a several issues that have made it difficult to work with.

Tool IDE Screen Shots

Axure RP

Pencil Project

Enterprise Architect

Adobe InDesign

XCode 4 Storyboard

Adobe Fireworks

Balsamiq Mockups

ConceptDraw

Diagram Designer

FlairBuilder

fluidIA

Gliffy

iPLOTZ

Lovely Charts

Lucid Chart

MockFlow

Mockingbird

Mockup Builder

OmniGraffle

OpenOffice Draw

Pidoco

Microsoft SketchFlow for Expression Blend 4

Microsoft Visio

WireframeSketcher for Eclipse