MDSC 30056 — Digital Empires: Making StoryMaps (Cai)

Interweaving interesting and attractive media can create compelling geospatial narratives. How to visualize your data well to craft your narrative will require some thoughtful consideration.
 

1: DESIGN ALWAYS SERVES THE DATA

• With your audience in mind, outline your narrative and arguments.
   
• Look for examples of visualizations of data or narratives similar to your planned project. (You can look both at approaches that are inspirational and approaches that remind you of what would not be a good fit for your project.)
   
• Think about (possibly sketch out) what type of visualizations and structures will best serve your underlying data and argument.
  • Consider geometries (bar graph, pie chart, etc.)
  • Consider flow for your audience (e.g., reading top to bottom and left to right versus another way)

2: COLOR, SHAPE, AND DESIGN CHOICES PRODUCE MEANING

"The choices you make regarding the color palette of your data visualization (which should always be accessible to colorblind viewers), the geometry of your data visualization, the positioning and orientation of your data and captions can shape how viewers perceive meaning in a data visualization. Take, for example, these two versions of visualizing the number of deaths during the U.S.-led war in Iraq by Simon Scarr (left infographic: Iraq's Bloody Toll) and Andy Cotgreave (right infographic: Deaths on the Decline)."

"...data analysis and data visualizations have an outsized capacity to mislead, misrepresent, and harm communities that already experience inequity and discrimination. For researchers and analysts to unlock the full potential of their data, they must apply an equitable lens to every step of the research process." This includes the communication and visualization of your scholarship.

Learn more about these important considerations in the "Do No Harm Guide: Applying Equity Awareness in Data Visualization" (opens in new window) and the Datawrapper blog post, "What to consider when choosing colors for race, ethnicity, and world regions" (opens in new window).

3: MINIMIZE EXCESS: LESS IS MORE

Data/cognitive overload is a challenge for us all—avoid including extra elements which can be distracting or even potentially misleading. 

4: EXPLAIN YOUR DATA

Explain your data visualization clearly using both labels appropriate to the visualization style as well as narrative explanation of the depiction and the source data. 

5: BE HONEST AND ETHICAL

Avoid misleading your audience (accidentally or intentionally). There are many considerations to bear in mind that will be specific to different contexts, but some good tips to start with include the following: 

• Always start with 0 on your axes.
• Do not change aspect ratios/warp images.
• Do not hide important data.

6: ASK FOR FEEDBACK

Platform Accessibility

ESRI StoryMaps follows the World Wide Web Consortium's (W3C) Web Content Accessibility Guidelines (WCAG). According to the ESRI accessibility statement, "Stories created with the story builder support keyboard navigation, alternative text, suitable color contrast, semantic structure, and other accessibility design and feature considerations." While many of the accessibility features are built-in and require no additional effort from the author, authors will need to provide alternate text for any included media (i.e. photos, video, maps, embedded content).

• Navigation: StoryMaps was created so that everything that can be clicked on by a mouse can be accessed using standard keyboard navigation, such as the Tab and Enter/Return keys as well as the Spacebar.
• Colors and fonts: StoryMaps has built-in themes that were all tested to have visual contrast and be color-blind friendly.
   

Design Considerations

Use meaningful headings and embedded text structure elements.

StoryMaps has headings and subheadings options that add structure to your textual elements. These structural elements are crucial for navigating pages when visitors are using assistive technology. This includes using the built-in bulleted and numbered lists when appropriate so assistive technology can properly share the information with the user.
 

Use alternative text (also known as "alt text") for all photographs, videos, charts/graphs, maps, and GIFs.

"Alt text is meant to convey the “why” of a media file as it relates to the content of a document or webpage. It is read aloud to users by screen reader software, and it is indexed by search engines. It also displays on the page if the image fails to load, as in this example of a missing image." (alt text considerations source)
 

General alt text tips

• Add alt text all non-decorative images. (Leave alt text blank if the image is purely decorative: "Decorative images don’t add information to the content of a page. For example, the information provided by the image might already be given using adjacent text, or the image might be included to make the website more visually attractive.")
• Be short and descriptive (like a tweet or caption of an insta post) and relevant to the context. e.g.,
  • No context: A mostly empty stadium.
  • A page about recent track tryout events: University of NAME Stadium with two lone runners bounding up the steps.
  • A page about building renovation projects: University of NAME Stadium with cracked concrete pillars.

Additional alt text tips

• Specific alt text suggestions for a variety of use cases (e.g., for graphs/charts)
• YouTube video (duration 1:41): Video tutorial for Adding Alt Text in ArcGIS StoryMaps
   

Add captions or provide a transcript for video.

If uploading your own video, upload your script as well, so people can read along. If embedding a link from another website (such a YouTube), check to see if the video has captions enabled.
 

Use readable hyperlinks.

Using words like "Click here," "Linked," or "Read More," don't tell the reader what is being linked. Screen readers tell readers that they are on a link then read exactly what words are linked, so it is best to use words that are descriptive.

• Avoid using a URL as your link text (especially if it is long or complicated).
• Keep linked phrases as short as possible, while still being meaningful out of context. (This will save screen reader users time, as less will need to be spoken.)
• If you must add action prompts to your link, put them at the end. For example, "Contact us (opens popup)," could be, "Link opens popup: contact us." (readable hyperlinks text source)

• Create a works cited/reference list using the "Credits" feature, and refer to the numbers or author/year in the text of your story (just like a research paper)
   
• Use the "Quote" feature to highlight a specific quote in your story
   
• Cite image sources using the "Image Caption" or "Info icon" features
   
• Link to sources in-line within your story using the "Hyperlink" feature

Keeping Projects Organized

Experiment with good enough methods, but the following are often considered minimum viable principles (how you apply them in your life is going to depend on what works for you!)

• One folder per class (one folder per big project)
   
• Name files/folders by a useful naming method (e.g., YYYY-Summer-ClassName)
   
• Note your major deadlines in a calendar / reminder system 
   
• Keep notes on your process so you don't lose important citations / thoughts 
   
• It's OK to be messy/imperfect! Future you will be grateful for the breadcrumbs you leave for yourself! Something (even if it's messy/imperfect) is better than nothing!