Federal GIS Conference February 24–25, 2015 | Washington, DC

Building Great Maps for the Web Allen Carroll, Lee Bock 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) • (KML) file (.kml, .kmz) Ways to add data to a web map

From Web • ArcGIS Server service • GeoRSS web feed • Open Geospatial Consortium (OGC) (WMS) • Open Geospatial Consortium (OGC) (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