Building Great Maps for the Web Allen Carroll, Lee Bock Esri Story Maps Team What We’Ll Cover in This Session
Total Page:16
File Type:pdf, Size:1020Kb
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 .