Technical Workshops |

Esri International User Conference San Diego, California

Map Makeovers for Online Maps

Charlie Frye, Esri, Redlands Jim Herries, Esri, Redlands

July 26, 2012

Session Goals

• Demonstrate cartographic thinking in action • Instill confidence to think cartographically

Cartographic Thinking Includes

• Geographically informed rationale for communicating

• Creative Minimalist Design Intent • Communicating through graphics • Ensuring readability for your map’s intended readers • Good Sensible Judgment (in the opinion of others) • Forced and blatant objectivity • Clarity

But “cartography” is a cumbersome word…

your map should tell a story that your audience can interpret

and relate to

Basically,

Communication first!

• A web map must work… overtly if necessary • Most things worth communicating need to be

tailored with clarity of purpose and: - Effort… lots of effort & iterations - Inspiration… rarely there when you need it - Experience… speed and confidence

• Strive for self-evidence in communication - Water is blue - Trees are green - Full spectrum color ramps for “heat maps”? Really…

Oversimplified views of audiences

• Reading Level: - College educated and enjoys big words and sentences - Educated, but prefers coffee table books and magazines - Not so educated, and doesn’t care unless the pictures are

great—Loved TV and thinks the Internet finally got value when Hulu came out

• Age and Responsibility - People who vote regularly or would if the place live had

elections - People with jobs who sustain at least one family or

household - 10-year-olds

The Makeovers

SSURGO Data Tool

U.S. Offshore Wind Velocity

The Role of Soils in Liquefaction

SSURGO Data Tool: Before I

SSURGO Data Tool: Before II

What was wrong with that?

• Focused on the “What” not the user or why they need it. • Author-centric perspective • Thumbnail looks muddy • Hyperlinks not provided for URLs

- URLs linked to the home page for the dataset, not the help as promised.

• Title = 2 Generic Terms + a Proper Noun Acronym • Pop-up doesn’t tell you what’s going to happen if you

click Download. • Description: Language is passive voice, “…The data can

be retrieved as Map Packages for individual hydrologic subbasins by clicking on a subbasin and clicking the download link in the pop-up window.”

After

After

U.S. Offshore Wind Velocity: Before I

U.S. Offshore Wind Velocity: Before II

What was wrong with that?

• The title is technically correct, but fails to engage a user • The, “Why does someone need this map?” is very weak

because using the map doesn’t actually help them learn what the map description’s stated task is

• The Pop-up is not useful or informative • The reader must be very knowledgeable about wind

velocity as a factor in generating energy • The “What” this map is, is fraught with assumptions • The credits are weak, i.e., what is NREL?

After

After

Soils Liquefaction Before

Review 1

Review Pop-up

your map should tell a story (not just throw data out there) that your audience

(have one in mind) can interpret (the story is clear) and relate to

(especially if the subject is unfamiliar)

Like fire, a good web map needs three things to ignite

• A good story idea - Is there data?

• Good, clear maps - Information product, or data dump? - Is additional analysis needed? - What else do I need in the

database?

• Data - We have this data,

what does it tell us?

Tell a story from CDC’s obesity and diabetes data

• Our map in 2010

• Updated, made more intelligent, with its story articulated …

• … and placed in a template capable of telling that story

Another story from CDC’s obesity and diabetes data

• Our map in 2010

• Updated, made more intelligent, with its story articulated …

• … and placed in a template capable of telling that story

Web maps for the public

• Assume the reader - knows where they live and work - does not know your story - wants the data in a context

• Build a web map that:

- is focused - is clear - rewards curiosity - dovetails with a story or narrative - moves a conversation forward

Example: statistical web maps

• Consistency helps your reader • Examine the data • Set break points, label them • Apply color palettes, style file • Document descriptions, tags, credits • Follow a checklist • Publish as service • Create a popup • Share the web map in an app

Mapping Diversity example • Look at the data

• “anchor” classes in something meaningful (e.g. national average – find the story in the data)

• Use color palettes, style files

• Use consistent breaks and colors

• Words & numbers in class labels

• Simple, clear popup in plain language

• Make a multi-scale web map

Obesity Map example

• At what scales does this data work well?

• How granular is the data?

• Does that granularity show well at this scale?

• Is it a map of data, or a map that clearly supports key point(s) in the story?

Obesity Map example

• Popups that list data are less friendly than popups that form a sentence.

• Ask: how would I explain this table of data to someone? Your answer is what to put into your popup.

Population Growth example

Population Growth example

• Polygon choropleth map treats all areas as equals

• Dot map of same data at different geography level shows density as well as pattern

• Use an invisible layer as a popup layer

Potential College Students example

Potential College Students example

• Again, polygon choropleth map treats all areas as equals

• Uses a black mask to help visualize urban/suburban areas

• Clean, easy to read popup.

Signs your web map needs a makeover

• When you ask someone “what does this map tell you?” you don’t get the answer you want.

• You haven’t stated, out loud, who your audience is • There is no indication where to start • More buttons & tools onscreen than map features • Your splash screen becomes the first page of your online

help, to explain how to use the map and its many tools • The popups are data dumps, not information • You let the user see field names like POP75 rather than

aliases like “Population over 75 years old” • It is not a multi-scale map • It uses defaults for nearly everything – symbology,

labels, popups, field names

Web maps for the public

• Assume the reader - knows where they live and work - does not know your story - wants the data in a context

• Build a web map that:

- is focused - is clear - rewards curiosity - dovetails with a story or narrative - moves a conversation forward

Resources

• ArcGIS Resource Center

• Mapping Resource Center

Thank you!

QUESTIONS?

Please fill out your evaluations: www.esri.com/ucsessionsurveys

These help us improve every year

Sample User Screens Layout

Railroads Oil Platform Building/Room

Utility Network University Underground Utilities

Switzerland Norway Panama

Germany Pennsylvania Texas

ArcGIS 10.1 Themes

• Online • Desktop • Server • Mobile • Developer • Solutions

Cloud

Server Mobile

Desktop

Web

Arrows for Connecting Items

Arrows

Arrows for Connecting Large Concepts

Shapes for Diagrams

ArcGIS

ArcGIS

ArcGIS

ArcGIS

ArcGIS

ArcGIS ArcGIS

ArcGIS

ArcGIS

ArcGIS

ArcGIS

ArcGIS

Quick Style: Subtle Effect

Quick Style: Moderate Effect

DON’T APPLY EFFECTS from the Design tab

Shapes for Diagrams (continued)

Circle behind a group of objects

Content box for each tier (see sample diagrams)

Optional: Use as a frame around showcased screenshots

Cloud optimized for use behind diagrams

Cloud for general diagram

Access the Entire Icon Library

Over 110 items added in 2011 • 535 total icons available for Esri use

• Browse and search from any Microsoft Office application

New! Read-me PDF with complete instructions \\pizzabox.esri.com\space\•Diagrams\Elements\

ArcGIS Desktop Mashups

Explorer Map

Map Map

Web Map

Open Standards

Web Map Web Map

Web Map

Browser

Web Blog Web Blog

ArcGIS Desktop Authors

Raster Files

Mashups

Raster Files Web Map Map Web Map Map Web Map

Map Web Map Map Web Map

Map

A Selection of Frequently Used Icons

ArcGIS Online

Web Map

Globes

Layers

CD/DVD

Files

Files

Models

Internet/Cloud

Databases

Table

Network Legend

Business Partner

Education

Professional Services

Professional Services

Designing & Planning

Situational Awareness

GIS User Mobile GIS User

Education

Data Appliance

Data Server

GIS Users

Mashups

Geodatabase Web GIS

Keep all text and graphics within this area, except for single full-screen images.

(.75” margin all around)

Right-click and select Grid and Guides Check "Display drawing guides on screen”

Content Area

Use Slides to Lead not to Read

• Tell a Story • Know Your Target Audience • Avoid Overloaded Content

Keep It Simple!

Guidelines

Color Swatches

Use Esri Branding Colors as theme colors (see presenter’s notes for the instruction of how to add the Esri theme and theme colors)

Projector Color Guidelines

Use the sRGB video mode on the projector. Most projectors have this setting.

For Help and Additional Resources http://arczone/resources/presentations.cfm