Federal GIS Conference February 24–25, 2015 | Washington, DC
Building Great Maps for the Web Allen Carroll, Lee Bock Esri Story Maps Team What we’ll cover in this session
1. Intro: Visual Perception in an ADD Age 2. From Desktop to Web Browser 3. Web Maps for Story Maps: A Case Study 4. The Map (or Screen) is a Stage 5. Some CLUES to making Great Maps 1
How Visual Perception Works How your Brain Perceives
<1 second 1-3 seconds 3-20 seconds + PRE-ATTENTION RECOGNITION COGNITION How Your Brain Perceives
| | | | | | | | | | |||||||||||| |||||||||| Headline Words
Lorem ipsum dolor sit amet, vis vide latine debitis ne, cu eos numquam alienum apeirian, nec augue consul suavitate ne. Dolore philosophia pro eu. Eos te definiebas scribentur efficiantur. Solet putant mea in, ea nam lorem necessitatibus, illum facete cetero his ex. Falli dolorem vituperatoribus ne eum. Illud salutandi scribentur sed ne.
Section Subtitle
Mei odio assueverit id, omnium hendrerit an sit. Per te epicurei posidonium concludaturque, eu vel illum offendit voluptua, quo ei suscipit eleifend. An prompta definiebas vis, unum omittantur in usu, vix case dolores ex. Nibh everti vel ex, munere molestie deserunt pri no. Te per cetero deterruisset, nam ne tation imperdiet
<1 second 1-2 seconds 3+ seconds Color, shapes, contrast resolve objects engage content The First Glimpse is Critical for Engagement
////////// IIIIIIIIIIIIIIIIIIII
<1 second 1-2 seconds 3+ seconds Design for Eye Movement Design for Short Attention Spans
Digital media = ADHD media
“Not that the story need be long, but it will take a long while to make it short.” ― Henry David Thoreau, Letters to Various Persons 2
From Desktop to Web Browser Ways to add data to a web map Ways to add data to a web map
From File (drag / drop) • Comma-separated values file (.csv) • GPS exchange format file (.gpx) • Shapefile (.zip) • Text file (.txt) • Keyhole markup language (KML) file (.kml, .kmz) Ways to add data to a web map
From Web • ArcGIS Server service • GeoRSS web feed • Open Geospatial Consortium (OGC) Web Map Service (WMS) • Open Geospatial Consortium (OGC) Web Map Tile Service (WMTS) File vs Web Service SHP CSV • File GPX - Quick & convenient - Better for small, static data - Stored as part of the map document (as JSON) • Service - Allows for your data to change - Accommodates multi-person edits - Data is stored as a hosted service - Can include cartography - Different dissemination options - Feature - Tile - Imagery - Elevation Sharing data from ArcGIS Pro Sharing data from ArcGIS Pro
• Starting in ArcGIS Pro… Sharing data from ArcGIS Pro
• Right-click on the layer of interest • Choose “Share as Web Layer” Sharing data from ArcGIS Pro
• Configuration menu appears Sharing data from ArcGIS Pro
• Optional: Click folder to change destination. Sharing data from ArcGIS Pro
• Specify destination Sharing data from ArcGIS Pro
• Fill out options Sharing data from ArcGIS Pro
• Publish! Sharing data from ArcGIS Pro
• Magic happens… Sharing data from ArcGIS Pro
• Success!!! Sharing data from ArcGIS Pro
• Let the masses go forth and use! Sharing data from ArcGIS Pro
• Data and symbology 3
Web Maps for Story Maps: A Case Study Task: Produce a simple story map on the Muslim world
• Show overall distribution of Muslims • Show Sunnis and Shiites • Show key Muslim holy sites 1Create web map Choose base map: • Too busy Create web map
Choose base map: • Too gloomy Create web map
Choose base map: • Just right! 2Add Data
• Drag-and-drop a CSV with Muslim populations and percentages • Source: Pew Research Center Smart Mapping
• Click “Change Style” icon Smart Mapping
• Choose an attribute: (Muslim population)
• Choose a second attribute Smart Mapping
• Choose a second attribute: (% population Muslim)
• Under Color & Size options… Smart Mapping
• …make adjustments Smart Mapping
• …make adjustments
More on Smart Mapping at esri.com/software/arcgis/smart-mapping 3Assemble layers
• Assemble multiple layers into a single web map
• (Muslim population and percent) Multiple layers
Why? • Easier to manage • Story map loads faster
• (Percent Shia) Multiple layers
• (Muslim holy sites) Configure 4pop-ups
• Default: Ugh! Configure pop-ups
• Click on little ellipsis item to see menu options
• Choose “Configure Pop- up” Configure pop-ups
• “A custom attribute display” option gives you the most flexibility Configure pop-ups
• Add field names, other text, color, bold type, etc. Configured
• Nice! Build your 5story
• I’ve chosen Story Map Series: Tabbed Layout Build your story
• Enter a title… Build your story
• Select a map… Build your story
• I choose my Muslim map and customize its content Build your story
• …by turning on and off layers
• Link to story 3
The Map (and Screen) is a Stage The Page (and Screen) is a Stage
• A successful production combines many elements into a seamless whole Appeal to your Audience
• Technical GIS maps aren’t for the masses! Put Your Star in the Spotlight
• Create Visual Hierarchies
Tenor in the spotlight… Put Your Star in the Spotlight
• Create Visual Hierarchies
Attractive map as centerpiece… Put Your Diva in a Bright Costume
• Figure-Ground: Bright Colors Against Neutral
Bright soprano, subdued chorus… Put Your Diva in a Bright Costume
• Figure-Ground: Bright Colors Against Neutral
Bright parcels, subdued background The Power of Color
• HSV
- Hue
- Saturation
- Value The Power of Color
• HSV
- Hue
- Saturation
- Value The Power of Color
• HSV Our secret weapon! - Hue
- Saturation
- Value The Power of Color
• Using Color for Emphasis
(And de-emphasis) Saturated Desaturated sopranos choruses The Power of Color
• Saturated Color at Center Stage;
Desaturated in the background A Cast of Thousands?
• Best to Reduce the Number of Performers A Cast of Thousands?
• Best to Reduce the Number of Performers A Cast of Thousands?
• …Or to Have Them Appear on Stage in Succession
• Timing & sequence 4
Some CLUES to Making Great Maps C L U E S
A Great Map…
1. Connects With its Audience
2. Limits User Options
3. User Experience and Map are a Seamless Whole
3. Easy-to-Read Maps
3. Strives for Simplicity C L U E S Connect with Your Audience
Think of your Mom • Step back and explain things • Avoid being too technical • Be informal but respectful C L U E S Limit User Options
The best maps and apps do one thing really well
An all- purpose map viewer may make But a focused, sense once single-purpose in a while… app will better serve a specific audience C L U E S User Experience and Map are a Seamless Whole
There are lots of ways to interact with maps
Think about the job your map is doing, and choose the means by which users will experience it
Locate Navigate Compare Narrate Show change C L U E S User Experience and Map are a Seamless Whole
Pop-ups Mouseovers Map Actions C L U E S Easy-to-Read Maps
Base map as context—not competition
We love the light gray and dark gray base maps C L U E S Easy-to-Read Maps
Avoid visually complex symbols and icons C L U E S Easy-to-Read Maps Strip off non-essential information
Use limited color palettes C L U E S Strive for Simplicity
USER EXPERIENCE Eliminate unnecessary options
Avoid “GIS-y” functions:
No arrays of little icons C L U E S Strive for Simplicity
USER No rows of obscure icons, no long EXPERIENCE lists of options
Eliminate unnecessary options VISUAL Avoid unnecessary lines, rules, drop shadows, etc.
EDITORIAL Keep text, labels, and titles clear, simple, and descriptive C L U E S Strive for Simplicity C L U E S
Connect With Your Audience
Limit User Options
User Experience and Map are a Seamless Whole
Easy-to-Read Maps
Strive for Simplicity Thank You
Questions and discussion Don’t forget to complete your digital session survey Download the Esri Events app! Please Take Our Survey!
Download the Esri Events Select the session Scroll down to find the survey Complete Answers app and find your event you attended and Select “Submit” Networking Reception Smithsonian National Museum of the American Indian Thursday, 6:30 p.m. – 9:30 p.m. Bus pickup on L Street Print your customized Certificate of Attendance Print stations located in the 140/150 Concourse GIS Solutions Expo, Hall A Wednesday, 12:30 p.m. – 6:30 p.m. Welcome Social, 5:15 p.m. – 6:30 p.m. Thursday, 10:45 a.m. – 4:00 p.m. • Exhibitors • Hands-on Learning Lab • Demo Theaters • Esri Showcase