map makeovers for online maps · oversimplified views of audiences • reading level: -college...
TRANSCRIPT
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