![Page 1: Towards Cartographic Standards for Web-Based Flood Hazard Maps](https://reader036.vdocument.in/reader036/viewer/2022062903/58a28e9b1a28ab36508b4e41/html5/thumbnails/1.jpg)
Testing Cartographic Conventions for Web-Based Flood Hazard MapsICON Engineering, Inc. & University of Colorado, Boulder@ebendennis @rsoden
![Page 2: Towards Cartographic Standards for Web-Based Flood Hazard Maps](https://reader036.vdocument.in/reader036/viewer/2022062903/58a28e9b1a28ab36508b4e41/html5/thumbnails/2.jpg)
Who We Are
Eben Dennis
ICON Engineering, GIS Coordinator
Civil Engineering firm
FEMA Mapping Partner
Primarily Public Sector projects (UDFCD, Boulder, Denver, Greeley, Ft Collins)
Certified Floodplain Managers
UC Denver Geography Program Graduate
GIS
Cartography
Hazards and Risk
Robert Soden
University of Colorado, Boulder, PhD Student
Co-Risk Labs, Principal
California-based research and design company
Previous Background
World Bank Global Facility for Disaster Reduction and Recovery
Development Seed
World Resources Institute
![Page 3: Towards Cartographic Standards for Web-Based Flood Hazard Maps](https://reader036.vdocument.in/reader036/viewer/2022062903/58a28e9b1a28ab36508b4e41/html5/thumbnails/3.jpg)
Why Are We Doing This?
Web-based flood maps are mostly hot, flaming piles of
Web-based flood maps need to be improved.
(NACIS is nicest NACIS is nicest NACIS is nicest…)
![Page 4: Towards Cartographic Standards for Web-Based Flood Hazard Maps](https://reader036.vdocument.in/reader036/viewer/2022062903/58a28e9b1a28ab36508b4e41/html5/thumbnails/4.jpg)
User Centered Design
Specify the context of use
Specify requirements
Create design solutions
Evaluate designsFrom usability.gov
![Page 5: Towards Cartographic Standards for Web-Based Flood Hazard Maps](https://reader036.vdocument.in/reader036/viewer/2022062903/58a28e9b1a28ab36508b4e41/html5/thumbnails/5.jpg)
Cartographic InteractionRoth & Cartographic Interaction
“How maps are manipulated by the map user”
Contrasts with the classic Communication Model
Map & user influence each other
Speed of application can affect productivity and focus
![Page 6: Towards Cartographic Standards for Web-Based Flood Hazard Maps](https://reader036.vdocument.in/reader036/viewer/2022062903/58a28e9b1a28ab36508b4e41/html5/thumbnails/6.jpg)
Users are an active component of the application
![Page 7: Towards Cartographic Standards for Web-Based Flood Hazard Maps](https://reader036.vdocument.in/reader036/viewer/2022062903/58a28e9b1a28ab36508b4e41/html5/thumbnails/7.jpg)
Public Facing Applications
Timoney’s Four Requirements of a Web Application:
FASTINTUITIVE
INFORMATIVEFAST
![Page 8: Towards Cartographic Standards for Web-Based Flood Hazard Maps](https://reader036.vdocument.in/reader036/viewer/2022062903/58a28e9b1a28ab36508b4e41/html5/thumbnails/8.jpg)
Public Facing Applications
Typical Problems:
Too much focus on the map itself
Information Overload
Solutions:
Treat your data more like a search engine, encourage text-based exploration.
Focused, single-topic applications; accomodate the small number of power users by making data available for download; provide custom basemaps with some data already built in.
![Page 9: Towards Cartographic Standards for Web-Based Flood Hazard Maps](https://reader036.vdocument.in/reader036/viewer/2022062903/58a28e9b1a28ab36508b4e41/html5/thumbnails/9.jpg)
Competitor Analysis
Analyzed 25 different flood mapping sitesNearly all government owned/operatedWhat interaction operations are supported? How is flood risk represented?
Clear Statement of Purpose
Clear Branding/Ownership
Disclaimers
Address Lookup
Dictionary/Links to Further Info
Guidance for Property in the Floodplain
Base Map Options
Flood Overlay Options
Technology Used
![Page 10: Towards Cartographic Standards for Web-Based Flood Hazard Maps](https://reader036.vdocument.in/reader036/viewer/2022062903/58a28e9b1a28ab36508b4e41/html5/thumbnails/10.jpg)
Competitor Analysis
Almost everyone using ESRI stacks
Good news is that most sites had address lookups
Bad news is that almost none of the sites tell you what to do if, in fact, your home is in the floodplain.
Who do I actually talk to about buying it? What if my house is elevated? What the heck is an elevation certificate? These are all important pieces of information that users want to know in this context.
![Page 11: Towards Cartographic Standards for Web-Based Flood Hazard Maps](https://reader036.vdocument.in/reader036/viewer/2022062903/58a28e9b1a28ab36508b4e41/html5/thumbnails/11.jpg)
Competitor Analysis
![Page 12: Towards Cartographic Standards for Web-Based Flood Hazard Maps](https://reader036.vdocument.in/reader036/viewer/2022062903/58a28e9b1a28ab36508b4e41/html5/thumbnails/12.jpg)
Competitor AnalysisGIS on the internet
Too many buttons that have no intuitive meaning to non-GIS users
No clear purpose
Slow load times, near impossible to keep user interest
![Page 13: Towards Cartographic Standards for Web-Based Flood Hazard Maps](https://reader036.vdocument.in/reader036/viewer/2022062903/58a28e9b1a28ab36508b4e41/html5/thumbnails/13.jpg)
MAPATHYmap·a·thy
noun
Lack of interest in changing default settings.
![Page 14: Towards Cartographic Standards for Web-Based Flood Hazard Maps](https://reader036.vdocument.in/reader036/viewer/2022062903/58a28e9b1a28ab36508b4e41/html5/thumbnails/14.jpg)
Competitor AnalysisSingle purpose application
Limited interactions
Plenty of opportunity for self-directed learning by users
Not too text heavy, but does a good job of providing links to users who are interested in learning more
![Page 15: Towards Cartographic Standards for Web-Based Flood Hazard Maps](https://reader036.vdocument.in/reader036/viewer/2022062903/58a28e9b1a28ab36508b4e41/html5/thumbnails/15.jpg)
Interviews
Conducted interviews with floodplain engineers, clients, and end users to help determine the utility of the applications.
Two audiences were identified:
Public - typical homeowner, wants to know if they are in the floodplain
Expert - engineers and clients utilizing maps as a data immersion tool
Decisions made with this application will potentially affect the public user
![Page 16: Towards Cartographic Standards for Web-Based Flood Hazard Maps](https://reader036.vdocument.in/reader036/viewer/2022062903/58a28e9b1a28ab36508b4e41/html5/thumbnails/16.jpg)
Walkthrough
Created web-map application for a public audience
Single purpose of the application is to identify flood hazards in Boulder, CO
Had public users think aloud while they used the application
Built on Mapbox GL and Turf.js (fast!)
Consists of search bar, map panel, info panel
Limited interactions
Flood information is provided for users in and out of the floodplain
Additional flooding information is provided in a custom basemap
![Page 17: Towards Cartographic Standards for Web-Based Flood Hazard Maps](https://reader036.vdocument.in/reader036/viewer/2022062903/58a28e9b1a28ab36508b4e41/html5/thumbnails/17.jpg)
Walkthrough
![Page 18: Towards Cartographic Standards for Web-Based Flood Hazard Maps](https://reader036.vdocument.in/reader036/viewer/2022062903/58a28e9b1a28ab36508b4e41/html5/thumbnails/18.jpg)
Walkthrough - Findings
People used the search bar, overwhelmingly - though some were confused by autocomplete.
Almost as overwhelmingly, they don’t read text
Simple, actionable instructions - what is the key information the public needs at each stage of the project?
![Page 19: Towards Cartographic Standards for Web-Based Flood Hazard Maps](https://reader036.vdocument.in/reader036/viewer/2022062903/58a28e9b1a28ab36508b4e41/html5/thumbnails/19.jpg)
Walkthrough - Findings
The NFIP 100-year floodplain presents a limited portrayals of flood hazard. People were genuinely surprised when they realized that areas outside the floodplain were affected by the 2013 Colorado floods.
In making these sites simple to use, we need to be careful to not convey simplistic understanding of science - when we added the 2013 flood footprint and it created just enough dissonance for people to get engaged and start asking interesting questions
![Page 20: Towards Cartographic Standards for Web-Based Flood Hazard Maps](https://reader036.vdocument.in/reader036/viewer/2022062903/58a28e9b1a28ab36508b4e41/html5/thumbnails/20.jpg)
Survey
For the expert audience, we utilized two existing applications built by ICON Engineering.
All of the questions on the survey were open-ended, with the exception of difficulty ratings, in order to better simulate a real-world decision making process.
The audience is wholly comprised of CASFM YMG members, so the expectation is they will be comfortable with web-map applications and have the ability to accurately answer technical questions.
![Page 21: Towards Cartographic Standards for Web-Based Flood Hazard Maps](https://reader036.vdocument.in/reader036/viewer/2022062903/58a28e9b1a28ab36508b4e41/html5/thumbnails/21.jpg)
ENGINEERSGONNA
ENGINEER
![Page 22: Towards Cartographic Standards for Web-Based Flood Hazard Maps](https://reader036.vdocument.in/reader036/viewer/2022062903/58a28e9b1a28ab36508b4e41/html5/thumbnails/22.jpg)
Survey Application 1
![Page 23: Towards Cartographic Standards for Web-Based Flood Hazard Maps](https://reader036.vdocument.in/reader036/viewer/2022062903/58a28e9b1a28ab36508b4e41/html5/thumbnails/23.jpg)
Survey -Application 1Too many clickable elements
Alternatives aren’t easily distinguished
Flow direction arrows extremely useful
Speed, clickable information, layer toggles? All good things.
Missing statement of purpose, lacking instructions, more description needed for layers
![Page 24: Towards Cartographic Standards for Web-Based Flood Hazard Maps](https://reader036.vdocument.in/reader036/viewer/2022062903/58a28e9b1a28ab36508b4e41/html5/thumbnails/24.jpg)
Survey Application 2
![Page 25: Towards Cartographic Standards for Web-Based Flood Hazard Maps](https://reader036.vdocument.in/reader036/viewer/2022062903/58a28e9b1a28ab36508b4e41/html5/thumbnails/25.jpg)
Survey -Application 2Transparency on transparency isn’t the most effective
Layer switching not as intuitive as toggles/checkboxes
Speed? Still a good thing.
Needs a better description of what each layer represents
When multiple elements are clickable, more clarity for what layer fired the popup
![Page 26: Towards Cartographic Standards for Web-Based Flood Hazard Maps](https://reader036.vdocument.in/reader036/viewer/2022062903/58a28e9b1a28ab36508b4e41/html5/thumbnails/26.jpg)
Next Steps
![Page 27: Towards Cartographic Standards for Web-Based Flood Hazard Maps](https://reader036.vdocument.in/reader036/viewer/2022062903/58a28e9b1a28ab36508b4e41/html5/thumbnails/27.jpg)
Next Steps
Better in-page analyticsClick tracking
Time spent on page
More data!
Gather more user feedback on the two expert systemsHow much data can one engineer take?
Iterate!
![Page 28: Towards Cartographic Standards for Web-Based Flood Hazard Maps](https://reader036.vdocument.in/reader036/viewer/2022062903/58a28e9b1a28ab36508b4e41/html5/thumbnails/28.jpg)
Questions?Slides available at ebendennis.github.io/notes