geoweb property viewer - esri · bootstrap. foundation. boilerplate. phase three –tech research....
TRANSCRIPT
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
GEOweb PROPERTY VIEWER
DESIGNING FOR SIMPLICITY
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
www.geoweb.dnv.org/properties
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
AGENDA
CONSIDERATIONS WHAT WE DIDAND WHY WHAT’S NEXT MOBILE
USABILITY
RESPONSIVE &ADAPTIVE DESIGN
SIMPLIFICATION
MOBILE FIRST
THE NEWREALITY
QUESTIONS
Crickets?
CHALLENGES
GOALS
DESIGN & BUILD
DIFFICULTIES &SUCCESSES
SEO
THE gw.jsFRAMEWORK
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
The DISTRICT of NORTH VANCOUVER• Around 85,000 Residents• GIS Section = 3 Analysts + 1 Coordinator + 1 Manager (Biz Systems & GIS)• Dev Team = 2 Application Developers + 1 Manager
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
CONCLUSION• Very interesting, educational, project• Very successful development process• Very successful beta application§ Fast & Lightweight§ Mobile fr iendly§ Single code base
• Confidence for future development• The desktop is dead. Long live the desktop!
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
USABILITY - Devices
LUKEW Ideation + Design | www.lukew.com
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
USABILITY - Devices
Scott Hurff | www.scotthurf.com
THE THUMB ZONE
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
USABILITY - Devices
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
USABILITY - Devices
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
USABILITY - Devices
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
USABILITY - Devices
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
USABILITY - Devices
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
USABILITY - Devices
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
USABILITY - Design• What will the thing you’re designing make
better?• Clearly define your intended outcome
OUTCOME
• Design the system• What components are required to meet the
intended outcomeSTRUCTURE
• How will users interact with the system?• In what sequence?• What UI elements are appropriate
INTERACTION
• Make it look and feel beautiful and enjoyable• Alignment, colours, typography, iconographyVISUAL
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
USABILITY - DesignSCROLLING vs CLICKING
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
USABILITY - DesignSCROLLING vs CLICKING
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
• Monitor the user ’s environment• Enhance or simplify an interface• Encourage ideal, efficient interaction• Optimize usability for each visitor
USABILITY - DesignRESPONSIVE & ADAPTIVE
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
• Adaptive Design– Adapt to the user ’s capabilit ies– Both form and function
USABILITY - DesignRESPONSIVE & ADAPTIVE
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
• Responsive Design– Fluid grids– Flexible images– Media queries
USABILITY - DesignRESPONSIVE & ADAPTIVE
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
Conway’s Law
“Organizations which design systems ... are constrained to produce designs which are copies of the communication structures of these organizations.”
— M. Conway, 1968
USAB ILITY - Simplification
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
Conway’s Law
“Organizations which design systems ... are constrained to produce designs which are copies of the communication structures of these organizations.”
— M. Conway, 1968
USAB ILITY - Simplification
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
USABILITY - SimplificationConway’s Law
“Organizations which design systems ... are constrained to produce designs which are copies of the communication structures of these organizations.”
— M. Conway, 1968
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
USABILITY - Simplification“Simple things should be simple, complex things should be possible..”
— Alan Kay, 2008
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
USABILITY - Simplification“Simple things should be simple, complex things should be possible..”
— Alan Kay, 2008
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
USABILITY - Simplification“Simple things should be simple, complex things should be possible..”
— Alan Kay, 2008
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
USABILITY - Simplification“Simple things should be simple, complex things should be possible..”
— Alan Kay, 2008
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
USABILITY - Mobile First
• Get mobile right, first– Loading times– Library sizes– File sizes– Performance
• Consider devices, design, making things simple
• Desktop becomes easier
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
WHAT WE DID & WHY• GIS launches GEOweb (geoweb.dnv.org)• P.I.E., Plans & Drawings
2001ArcIMS
• New web mapping paradigm• GEOweb rebuild, launch of five specialized apps• Open Data
2009Flex/Flash
• Dedicated GIS Application Developers• Backend updates• Launch of GEOtools (internal)
2011Flex/Flash v2
• GIS awareness is ubiquitous• Need for mobile support, a better experience• Mature technology
2014HTML5
• New Corporate website• Mobile-first• Simplicity, Innovation, Engagement, Efficiency, …
2015Org Catches Up
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
CHALLENGES
• Evolving user needs• Flash• Better integration needed with DNV web• Dated• Needed a plan for future development
PROPERTIES HAZARDS PROJECTS SOLAR HISTORY
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
CHALLENGES
• Evolving user needs• Flash• Better integration needed with DNV web• Dated• Needed a plan for future development
PROPERTIES HAZARDS PROJECTS SOLAR HISTORY “Why doesn’t this work on my phone?”
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
GOALS
• Device Agnostic• Fast• Better maps• Clear and Concise• More property-related info• Easy to maintain, scalable, future proof
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
GOAL
USABLEIt just works
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
DESIGN & BUILDPHASE ONE – CONTENT
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
• Not starting from scratch• 5+ years of user metrics
– Basemaps– Layers– Tools– Search Methods
DESIGN & BUILDPHASE ONE – CONTENT
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
DESIGN & BUILD
0
2000
4000
6000
8000
10000
12000
Flash Properties App: times layers were added in 2013
PHASE ONE – CONTENT
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
DESIGN & BUILD
0
2000
4000
6000
8000
10000
12000
Flash Properties App: times layers were added in 2013
Popular!Keep these!
Ditch these.
PHASE ONE – CONTENT
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
Ditch these.
DESIGN & BUILD
0
2000
4000
6000
8000
10000
12000
Flash Properties App: times layers were added in 2013
BasemapPopular!Keep these!
PHASE ONE – CONTENT
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
DESIGN & BUILD
• Improve the content & look of our maps• Clear symbology• Clear typography, better labelling
PHASE TWO - MAPS
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
DESIGN & BUILD
• Improve the content & look of our maps• Clear symbology• Clear typography, better labelling
PHASE TWO - MAPS
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
DESIGN & BUILD
• Improve the content & look of our maps• Clear symbology• Clear typography, better labelling
PHASE TWO - MAPS
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
DESIGN & BUILD
• Improve the content & look of our maps• Clear symbology• Clear typography, better labelling
PHASE TWO - MAPS
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
DESIGN & BUILDPHASE TWO - MAPS
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
DESIGN & BUILD
• One Developer, three months• Client-side only; Server is all good
– Maps– Map APIs– Frameworks
PHASE THREE – TECH RESEARCH
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
DESIGN & BUILD
Many well supported libraries:
Map EnginesEsri Javascript APILeafletOpenLayers
PHASE THREE – TECH RESEARCH
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
DESIGN & BUILD
Many well supported libraries:
Map EnginesEsri Javascript APILeafletOpenLayers
PHASE THREE – TECH RESEARCH
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
DESIGN & BUILD
Many well supported libraries:
HTML5 FrameworksBootstrapFoundationBoilerplate
PHASE THREE – TECH RESEARCH
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
DESIGN & BUILD
Many well supported libraries:
HTML5 FrameworksBootstrapFoundationBoilerplate
PHASE THREE – TECH RESEARCH
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
DESIGN & BUILD
Many well supported libraries:
Javascript ArchitectureEmberBackboneAngular JS
PHASE THREE – TECH RESEARCH
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
DESIGN & BUILD
Many well supported libraries:
Javascript ArchitectureEmberBackboneAngular JS
PHASE THREE – TECH RESEARCH
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
DESIGN & BUILD
Many well supported libraries:
PHASE THREE – TECH RESEARCH
Javascript ArchitectureEmberBackboneAngular JS
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
DESIGN & BUILD
JavascriptAngular JS
Map EngineLeaflet
HTML5Bootstrap
PHASE FOUR – ALL TOGETHER NOW
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
DESIGN & BUILD
JavascriptAngular JS
Map EngineLeaflet
HTML5Bootstrap
Map Server
PHASE FOUR – ALL TOGETHER NOW
ArcGIS forServer
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
DESIGN & BUILD
JavascriptAngular JS
Map EngineLeaflet
HTML5Bootstrap
Map Server
PHASE FOUR – ALL TOGETHER NOW
Mapbox MapServerArcGIS forServer
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
Esri Leaflet on
DESIGN & BUILD
JavascriptAngular JS
Map EngineLeaflet
HTML5Bootstrap
Map Server
PHASE FOUR – ALL TOGETHER NOW
ArcGIS forServer
Mapbox MapServer
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
GOALS
• Device Agnostic• Fast• Clear and Concise• Better maps• More property-related info• Easy to maintain, scalable, future proof
HAZARDS & SOLAR
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
DESIGN & BUILD
SIX WEEKS IN A SCRUM BLENDER
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
PROPERTY VIEWER
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
WHERE WE WEREAT
• App was launched in beta in July 2014• Promoted feedback!
– Online survey– Twitter– Emails– Phone calls
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
USER FEEDBACK
• Very positive; always includes helpful criticism
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
USER FEEDBACK
• Very positive; always includes helpful criticism
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
USER FEEDBACK
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
USER FEEDBACK
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
DIFFICULTIES
• Browser compatibility• Consistency on all form factors• Printing• Dealing with Open Source projects
– Things change quickly– Bugs
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
SUCCESSES
• Single code base• Confidence in development plan• Happy users
– Realtors– Roofers– Assessors– DNV Utilit ies– DNV Construction
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
KEYS
• Test Test Test• Learn how to measure your application• Understand what the code is doing• Write the code yourself• Don’t copy and paste! Not too much,
anyway…
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
WHAT’S NEXTSEO
• Dynamic sitemap• Crawlable dynamic pages
<url><loc>http://geoweb.dnv.org/properties/#!?address=1818
+GREENOCK+PL</loc><changefreq>weekly</changefreq><priority>1.0</priority>
</url>
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
WHAT’S NEXTSEO
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
WHAT’S NEXTgw.js
• Common, extensible framework• Easy configuration• Easy integration
http://devtools/dev/mapembed/debug/
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
WHAT’S NEXTgw.js
• Common, extensible framework• Easy configuration• Easy integration
http://devtools/dev/mapembed/debug/http://devtools/dev/mapembed/debug/?zoom=5&lat=49.33717060674193&lng=-123.10166804996803
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
WHAT’S NEXTgw.js
• Common, extensible framework• Easy configuration• Easy integration
http://devtools/dev/mapembed/debug/http://devtools/dev/mapembed/debug/?zoom=5&lat=49.33717060674193&lng=-123.10166804996803
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
WHAT’S NEXTgw.js
• Common, extensible framework• Easy configuration• Easy integration
http://devtools/dev/mapembed/debug/http://devtools/dev/mapembed/debug/?zoom=5&lat=49.33717060674193&lng=-123.10166804996803
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
WHAT’S NEXTgw.js
• Common, extensible framework• Easy configuration• Easy integration
http://devtools/dev/mapembed/debug/http://devtools/dev/mapembed/debug/?zoom=5&lat=49.33717060674193&lng=-123.10166804996803http://devtools/dev/mapembed/debug/?zoom=5&lat=49.33769138114837&lng=-123.10148701965008&nozoom&nopan&nokeyboard&noscalebar
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
WHAT’S NEXTgw.js
• Common, extensible framework• Easy configuration• Easy integration
http://devtools/dev/mapembed/debug/http://devtools/dev/mapembed/debug/?zoom=5&lat=49.33717060674193&lng=-123.10166804996803http://devtools/dev/mapembed/debug/?zoom=5&lat=49.33769138114837&lng=-123.10148701965008&nozoom&nopan&nokeyboard&noscalebarhttp://devtools/dev/mapembed/debug/?zoom=5&lat=49.34153914010762&lng=-123.09947160982138&basemap=gw5_Basemap_Canvas&layersource=Data_DynamicLayers&layers=Survey%20Monuments%2CBus%20Stops&nopopup
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
WHAT’S NEXTgw.js
• Common, extensible framework• Easy configuration• Easy integration
http://devtools/dev/mapembed/debug/http://devtools/dev/mapembed/debug/?zoom=5&lat=49.33717060674193&lng=-123.10166804996803http://devtools/dev/mapembed/debug/?zoom=5&lat=49.33769138114837&lng=-123.10148701965008&nozoom&nopan&nokeyboard&noscalebarhttp://devtools/dev/mapembed/debug/?zoom=5&lat=49.34153914010762&lng=-123.09947160982138&basemap=gw5_Basemap_Canvas&layersource=Data_DynamicLayers&layers=Survey%20Monuments%2CBus%20Stops&nopopup
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
WHAT’S NEXTgw.js
• Common, extensible framework• Easy configuration• Easy integration
http://devtools/dev/mapembed/debug/http://devtools/dev/mapembed/debug/?zoom=5&lat=49.33717060674193&lng=-123.10166804996803http://devtools/dev/mapembed/debug/?zoom=5&lat=49.33769138114837&lng=-123.10148701965008&nozoom&nopan&nokeyboard&noscalebarhttp://devtools/dev/mapembed/debug/?zoom=5&lat=49.34153914010762&lng=-123.09947160982138&basemap=gw5_Basemap_Canvas&layersource=Data_DynamicLayers&layers=Survey%20Monuments%2CBus%20Stops&nopopup
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
WHAT’S NEXTgw.js
• Common, extensible framework• Easy configuration• Easy integration
http://devtools/dev/mapembed/debug/http://devtools/dev/mapembed/debug/?zoom=5&lat=49.33717060674193&lng=-123.10166804996803http://devtools/dev/mapembed/debug/?zoom=5&lat=49.33769138114837&lng=-123.10148701965008&nozoom&nopan&nokeyboard&noscalebarhttp://devtools/dev/mapembed/debug/?zoom=5&lat=49.34153914010762&lng=-123.09947160982138&basemap=gw5_Basemap_Canvas&layersource=Data_DynamicLayers&layers=Survey%20Monuments%2CBus%20Stops&nopopup
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
WHAT’S NEXT
• More powerful CMS integration • GEOtools HTML5• GEOtools for the public• Additional focused apps
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
THE NEW REALITY
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
THE NEW REALITY
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
THE NEW REALITY
Including the US and Japan
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
THE NEW REALITY
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
THE NEW REALITY
Cordelia McGee-Tubb via Jesse Hausler | www.medium.com
DISTRICT OF NORTH VANCOUVER
GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY
GEOweb PROPERTY VIEWER
QUESTIONS?
Andrew [email protected]
@durnin@nvandistrict