This is derived from a lecture given by Frederico Freitas at the Spatial History Project / Center for Spatial and Textual Analysis at Stanford University. It describes how the process of storyboarding helps clarify design intent and facilitates design decision-making.

1. by Frederico Freitas, Spatial History Project What is Storyboarding?
Storyboarding is an exercise that helps you organize a visual
argument and define the important user interactions that will
enhance the user experience and impact.

2. Generally, a storyboard can be used to:
Set the parameters of the argument being made,

3. define the key visual and statistical dimensions,
identify what user interactions are critical to the argument,

4. make a “to do” list for preparing the assets of the visualization,

5. and provide designers and developers with a clear sense of
direction.

6. The Final product could look like this

7. Which is a storyboard done for this visualization: of functional or visual parts (e.g the layer panel, or the search
http://sanfrancisco.crimespotting.org/map/ function).
Because most dynamic visualizations are not presented in a linear These parts may lead to sequences of interaction that can also be
fashion, it is helpful to think of the final product as a combination modeled using storyboards.

8. Combining these sequences into a coherent application involves Who needs to be involved?
careful consideration of user expectations and behavior while using Who is the project’s lead researcher? Research assistants? Staff?
your tool. The storyboard helps in this process. Other collaborators?
It may be useful to begin by asking some basic questions, and return
to these again and again throughout the process.

9. When does the final visualization need to be completed?
Is the deadline hard or soft?
What is the desired follow up frequency?

10. What format will the visualization take?
Dynamic or Static ?
Final, published formats include: website, PowerPoint presentation,
printed poster, online publication/paper, print publication (book or
journal)

11. What data do you have to work with? If working with point data, what is the approximate maximum
Identify relevant file names, formats, sources, and locations. number of points you want to show? (< 25? 100+?)
For GIS data, also include attribute information Which attributes are you planning to use for the visualization
What are the relevant attributes for this visualization? (include actual name and alias, if any)?
List names, data types, and descriptions.

12. What story are you trying to tell?

13. Why create a visualization? What makes this story worth showing
instead of just telling?

14. What insights would you like your user to take away from your
visualization?

15. What is the utility of your visualization?

16. What are the key dimensions of your argument and how do those
dimensions relate to user functionality?

19. On the Spatial History website, there are two options:
Visualizations embedded in our online publications system: 650 by
650 pixels.
Visualizations appearing in an expanded window (pop-up): 650 x
975 pixels.

20. Example embedded visualization

21. Example pop-up visualization

22. Why use a grid? Additionally, a grid facilitates the production of visualization
Grids provide a well-balanced design, which leads to: and makes it easy to update the layout.
Better user experience
Better visual impression

23. How to use:
First divide the canvas into regular columns and roles (3x3, 4x3,
etc.).
Group cells according to your needs; they don’t need to be
symetrical.

25. Put your elements in your cells, and use the grid to align and scale
things.
Define the visual elements that are part of the visualization,
including the title.

27. Types of Data Models: Point, Line, Polygon
Several design choices must be made for map elements: Base Map Elements: roads, bodies of water, terrain (is elevation
Location, Projection, Scale. Are you showing a metro area? important?), boundaries (parcel outlines, study boundaries,
Country? Region? watersheds, etc.)
Does there need to be an inset for context?

28. Labeling: Where does that label appear when you do rollover?
What are important places to include labels for? Analysis/Cartographic Symbolization
Which labels are always visible? Legend
Are there labels that only appear when you rollover a point on the Categories
map? Quantities: Graduated color, Graduated symbols, Proportional
symbols

29. Chart elements: Pie, Bar/Column, Stacked
Example Chart Types:
Pie
Bar chart (horizontal or vertical? stacked?)

30. Chart types continued:
Line
Area
Scatterplot
Histogram

31. Diagram Types:
Flow
Network
Venn

32. Diagram types continued:
Cycle
Timeline

33. Does there need to be a title or explanation with the visualization?
What should be included in the footer? Authors, sources, etc.
Do you want blocks of text in your visualization?
If so, how much text? 2-3 sentences or a paragraph?

35. Are there any photos you want in the visualization?
Are they high resolution?
What role do they play in the visualization?
The focus (ex. Hart Photo Project)?
Minor way of providing context?

37. Interactivity is tied to the desired functionality.
Are your users actively or passively interacting?

38. Are your users creating or receiving content? What is the key
benefit of including interactivity? (To allow users to explore, search,
build scenarios, filter, compare, digest large datasets, see change
over time, etc.?)

39. What choices should be left up to the user vs. decided by the
author? How do these choices lead to possible new insights on the
data you are presenting? What is the ideal sequence of functions
that a user would explore?

40. Low level over interactivity: http://www.povertyover.com/

41. High level of interactivity: http://www.gapminder.org/

42. Sketching a layout:
Use arrows or instructions to indicate movement.

44. Show the sequence of what the user/viewer sees

46. Indicate where interactivity occurs and highlight buttons or other
controls

48. Suggest connections between interactive elements by drawing
arrows.

50. Use multiple colors to differentiate between notes (like comments,
movement arrows, etc.) and actual elements of the visualization
(like the map, the chart, the slider, the title, etc.)

52. Accompany the sketch with written explanation of how it is
organized.

54. There are different tools that you can use for doing a storyboard; I
am going to show you some of these tools.
This diagrams show different rhetorical arrangements that you can
use to explain your approach.

57. Put yourself in the user’s shoes. Does everything works well? Is the your argument? How can you maximize the effectiveness of your
visualization too complex? Does it have an intuitive operation? How visualization with the limited amount of attention that you can
does the ease of use of your visualization enhance or detract from draw from your user?

58. Reorder and Repeat steps until satisfied.

59. Begin working with Designer/Developer to implement the
visualization.