Story Maps
Using Maps to Craft User Interfaces
April 19th, 2016
Athens, GA
Slides: bit.ly/1SpWDgC
Roy Hewitt
Job: Regional Web Developer
Background: Biology, GIS
Agenda
- What is a Story Map?
- Path to Story Map Mastery
- Our approach in the Southeast
- Challenges
- Examples
- Resources
What is a Story Map?
“Story maps use geography as a means of organizing and presenting information. They tell the story of a place, event, issue, trend, or pattern in a geographic context. They combine interactive maps with other rich content—text, photos, video, and audio—within user experiences that are basic and intuitive.”— ESRI, emphasis is mine.
Why Build a Story Map?
- Where matters; nothing happens in a vacuum
- Wrap an analysis in context for lay audiences
- Let your audience explore your data on their own terms
- Engage new audiences
What Makes a Good Story Map?
- Know your audience
- Write in plain language
- Know what’s important
- A good user experience
Hack your Maps
“Have you ever taken apart a map? Worked with a map as a critical part of your design?” - Young Hahn, ‘Hack Your Maps’
Know What's Important
If you're making a story map to share photos from a trip ensure the size of the photos is relative to their importance. It doesn't make sense to have a full screen map with tiny thumbnail images.
User Experience
User experience (UX) focuses on having a deep understanding of users, what they need, what they value, their abilities, and also their limitations. —usability.gov
It better be Easy
Poor UX
Having scroll-to-zoom enabled on a scroll driven page
Small click targets
How do you hover with your finger?
Photo: Kārlis Dambrāns CC BY 2.0
Reinventing GIS in the Browser
An Iconography of Confusion: Why Map Portals Don't Work, Part IV, Brian Timoney
Always show a Loading state
User clicks the button, but there's no indication that the application is working.
The Path to Story Map Mastery
- Pre-built templates with point and click interface
- Customize upon open source templates
- Code your story maps from scratch
Photo: Mario! CC BY-SA 2.0
Pre-built Templates
ESRI provides a series of pre-built templates that you can fill with your own content
Open Source Templates
ESRI provides about a dozen open source templates on their GitHub page. This option allows you to dive into the code and change anything and everything.
Coding your Maps from Scratch
Highest level of difficulty, but limitless options for creativity.
How we craft Story Maps Spatial User Interfaces in the Southeast
We start from scratch!
Data Creation/Collection
WMS example on mapbox.com
Google Spreadsheets
Collaborate on application data as a spreadsheet. When you're ready to use the data download as a CSV file.
geojson.io
geojson.io is a great tool if you need to create point line or polygon features including attribute data directly on a map
How to Handle Data
Generally you can make your data available as a service (WMS, WFS, etc.) or as a text file (geojson, geobuf, csv).
Feature Data
Lends itself towards text files. Easy to maintain, store right along side your project. User interactions (clicks, scrolls, etc.) can give you all of the associated attribute data to use in pop-ups, infowindows, banners.
Rasters
Lends itself to web services. This is a great option if the product of your analysis is a continuous surface and you're less interested in click interactions. Use ScienceBase or ArcGIS Online to create these services.
Data Analysis with Turf.js
Turf.js
Handling User Input
Clicking on a marker is not the only, or even the best way to interact with map date.
Auto-complete input FTW!
How about a small thumbnail gallery to preivew the content before you click?
Get the user's location with the Geolocation API in HTML 5 (with user's permission)
Good/Bad UX: Always give your user a hint when the application is loading/processing.
Manage a Specie's state range in the At-Risk Species Finder
Internally the range is managed as a list of states. The map gives a handy UI to add/remove states from the list.
Filter a list using a map.
Filter large datasets on pan/zoom
Zoom to a location to give a sense of distance and direction (don't over do it!)
Clip and Ship: Allow user to identify AOI, download data.
Challenges
Can't Ignore Mobile
According to SimilarWeb’s State of Mobile Web US 2015 report, roughly 56 percent of consumer traffic to the leading US websites is now from mobile devices.
Graph: Wikimedia Commons, CC BY-SA 3.0
Responsive Web Design
Adapting web content based on the available screen realestate for phones, widescreens and everything in between through fluid layouts.
Photo: Responsive design CC BY-SA 2.0
Accessibility
How do non-sighted, motor impaired users navigate?
Use of tab index, Accessible Rich Internet Applications (ARIA)
Photo: Australian Paralympic Committee CC BY-SA 3.0
Performance
Forget the kitchen sink. 1 out of 4 customers will abandon a webpage that takes more than 4 seconds to load. - emarketer
Examples!
Many of these are a work-in-progress!
Southeast Region Mega Map
Mega map is a one-stop shop for finding USFWS offices in the Southeast Region
Southeast Conservation Adaptation Strategy (SECAS)
The SECAS Story Map lets the user explore conservation projects related to the strategy
Rio Loco/Guanica Bay
The Rio Loco/Guanica Bay Watershed Partnership Initiative lets the user explore several restoration efforts, the partners involved and their monetary contributions.
Resources!
You don't have to do everything on your own.
Technological Resources
- Free Data Hosting: Post your layers to USGS Science Base
- Free Web Hosting: southeast.fws.gov
- Free Map Plugins for common tasks like editing, clustering, geocoding, etc.
Your Regional External Affairs Digital Team!
Pitch us your story!
- Roy Hewitt: Web Development
- Katherine Taylor: Social Media
- Jennifer Strickland: Content Development/Storytelling
Online Resources
Questions?
Roy_Hewitt@fws.gov
Slides: http://bit.ly/1SpWDgC