Storyboarding for Data Visualization Design


Published on

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.

Published in: Education
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Storyboarding for Data Visualization Design

  1. 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. 2. Generally, a storyboard can be used to:Set the parameters of the argument being made,
  3. 3. define the key visual and statistical dimensions,identify what user interactions are critical to the argument,
  4. 4. make a “to do” list for preparing the assets of the visualization,
  5. 5. and provide designers and developers with a clear sense ofdirection.
  6. 6. The Final product could look like this
  7. 7. Which is a storyboard done for this visualization: of functional or visual parts (e.g the layer panel, or the search function).Because most dynamic visualizations are not presented in a linear These parts may lead to sequences of interaction that can also befashion, it is helpful to think of the final product as a combination modeled using storyboards.
  8. 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 returnto these again and again throughout the process.
  9. 9. When does the final visualization need to be completed?Is the deadline hard or soft?What is the desired follow up frequency?
  10. 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 orjournal)
  11. 11. What data do you have to work with? If working with point data, what is the approximate maximumIdentify 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 visualizationWhat are the relevant attributes for this visualization? (include actual name and alias, if any)?List names, data types, and descriptions.
  12. 12. What story are you trying to tell?
  13. 13. Why create a visualization? What makes this story worth showinginstead of just telling?
  14. 14. What insights would you like your user to take away from yourvisualization?
  15. 15. What is the utility of your visualization?
  16. 16. What are the key dimensions of your argument and how do thosedimensions relate to user functionality?
  17. 17. On the Spatial History website, there are two options:Visualizations embedded in our online publications system: 650 by650 pixels.Visualizations appearing in an expanded window (pop-up): 650 x975 pixels.
  18. 18. Example embedded visualization
  19. 19. Example pop-up visualization
  20. 20. Why use a grid? Additionally, a grid facilitates the production of visualizationGrids provide a well-balanced design, which leads to: and makes it easy to update the layout.Better user experienceBetter visual impression
  21. 21. 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 besymetrical.
  22. 22. Put your elements in your cells, and use the grid to align and scalethings.Define the visual elements that are part of the visualization,including the title.
  23. 23. Types of Data Models: Point, Line, PolygonSeveral design choices must be made for map elements: Base Map Elements: roads, bodies of water, terrain (is elevationLocation, 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?
  24. 24. Labeling: Where does that label appear when you do rollover?What are important places to include labels for? Analysis/Cartographic SymbolizationWhich labels are always visible? LegendAre there labels that only appear when you rollover a point on the Categoriesmap? Quantities: Graduated color, Graduated symbols, Proportional symbols
  25. 25. Chart elements: Pie, Bar/Column, StackedExample Chart Types:PieBar chart (horizontal or vertical? stacked?)
  26. 26. Chart types continued:LineAreaScatterplotHistogram
  27. 27. Diagram Types:FlowNetworkVenn
  28. 28. Diagram types continued:CycleTimeline
  29. 29. 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?
  30. 30. 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?
  31. 31. Interactivity is tied to the desired functionality.Are your users actively or passively interacting?
  32. 32. Are your users creating or receiving content? What is the keybenefit of including interactivity? (To allow users to explore, search,build scenarios, filter, compare, digest large datasets, see changeover time, etc.?)
  33. 33. What choices should be left up to the user vs. decided by theauthor? How do these choices lead to possible new insights on thedata you are presenting? What is the ideal sequence of functionsthat a user would explore?
  34. 34. Low level over interactivity:
  35. 35. High level of interactivity:
  36. 36. Sketching a layout:Use arrows or instructions to indicate movement.
  37. 37. Show the sequence of what the user/viewer sees
  38. 38. Indicate where interactivity occurs and highlight buttons or othercontrols
  39. 39. Suggest connections between interactive elements by drawingarrows.
  40. 40. 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.)
  41. 41. Accompany the sketch with written explanation of how it isorganized.
  42. 42. There are different tools that you can use for doing a storyboard; Iam going to show you some of these tools.This diagrams show different rhetorical arrangements that you canuse to explain your approach.
  43. 43. Put yourself in the user’s shoes. Does everything works well? Is the your argument? How can you maximize the effectiveness of yourvisualization too complex? Does it have an intuitive operation? How visualization with the limited amount of attention that you candoes the ease of use of your visualization enhance or detract from draw from your user?
  44. 44. Reorder and Repeat steps until satisfied.
  45. 45. Begin working with Designer/Developer to implement thevisualization.