Storyboarding for Data Visualization Design

Storyboarding for Data Visualization Design

• 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 storyboardcan be used to: Set the parameters of the argument being made,
• 3.
  define the keyvisual and statistical dimensions, identify what user interactions are critical to the argument,
• 4.
  make a “todo” list for preparing the assets of the visualization,
• 5.
  and provide designersand developers with a clear sense of direction.
• 6.
  The Final productcould look like this
• 7.
  Which is astoryboard 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 sequencesinto 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 thefinal visualization need to be completed? Is the deadline hard or soft? What is the desired follow up frequency?
• 10.
  What format willthe 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 doyou 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 areyou trying to tell?
• 13.
  Why create avisualization? What makes this story worth showing instead of just telling?
• 14.
  What insights wouldyou like your user to take away from your visualization?
• 15.
  What is theutility of your visualization?
• 16.
  What are thekey dimensions of your argument and how do those dimensions relate to user functionality?
• 19.
  On the SpatialHistory 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 agrid? 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: Firstdivide 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 elementsin 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 DataModels: 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 needto 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 anyphotos 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 tiedto the desired functionality. Are your users actively or passively interacting?
• 38.
  Are your userscreating 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 shouldbe 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 overinteractivity: http://www.povertyover.com/
• 41.
  High level ofinteractivity: http://www.gapminder.org/
• 42.
  Sketching a layout: Usearrows or instructions to indicate movement.
• 44.
  Show the sequenceof what the user/viewer sees
• 46.
  Indicate where interactivityoccurs and highlight buttons or other controls
• 48.
  Suggest connections betweeninteractive elements by drawing arrows.
• 50.
  Use multiple colorsto 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 sketchwith written explanation of how it is organized.
• 54.
  There are differenttools 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 inthe 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 Repeatsteps until satisfied.
• 59.
  Begin working withDesigner/Developer to implement the visualization.