Web Mapping Applications: New Technology, New Expectations

City of Mobile GIS

Web Mapping Applications: New Technology, New Expectations

Presenters : Scott Kearney GIS Manager Patricia Creamer GIS Analyst

2

• Developing web mapping apps since 1999

• All development is in-house by GIS staff

• ESRI user since 1996

• Centralized geodatabase

• Internal and Public web applications

Background: GIS Department

3

• Faster Maps

- Server upgrades

- Data caching

- Optimized map services

Goals Accomplished for 2011

4

• Improved Interface

- Adobe Flash

- Client-side

- Map centric

- Floating panels

- Rich graphics

- Desktop style controls


5

• Consolidate Apps

- 6 into 1

- Multiple map themes

- Common interface


iMap

UDD Permitting

ROW Viewer

SRO Spatial

Reporting

Address Selection

District Info

Facility Map

6

• Goals Accomplished

• Good Feedback

• Inline With Information From User Conferences

• Comparable To Other Local Governments

• Prepared To Build Upon Successes


7

• August – Mayor’s Office Purchased iPads

• GIS Maps Not Working

• iPads Do Not Allow Adobe Flash

• Implemented iPad Version Within 2 Months

• Rethink All Apps

Blindsided by iPads

8

• How Many Desktop vs. Mobile Users?

• What Are The User’s Expectations?

• Are Existing Apps Mobile Friendly?

• Mobile Apps or Web Apps?

• Server-side Or Client-side Computing?

• Which Development Language?

• How Do You Maintain Uniformity Across Platforms?

• Do You Need A Universal Layout?

• Mobile Users: Tablet vs. Smartphone?

Research and Reevaluation

9

• Desktop vs. Mobile Users

- Currently: users are in a desktop environment

- Future: growth in mobile users


10

Consumer PC (Windows) Growth

-5%0%5%

10%15%20%25%30%35%

40%

Source: Citi Investment Research and Analysis, IDC, Company Reports (May 2011)

11

12

0

2

4

6

8

10

12

14

16

Q3 '10 Q4 '10 Q1 '11 Q2 '11 Q3 '11 Q4 '11 Q1 '12

3.27 4.18

7.33

4.69

9.25

11.12

15.43

iPad Sales

Source: www.apple.com(salesreports)

Mill

ions

iPad Released April 2010 iPad 2 Released March 2011

13

Mobile Device Users Projected Growth Rate 2010 to 2015

0%

20%

40%

60%

80%

100%

120%

Smartphone Portablegamingconsole

TabletLaptop and

netbook M2M module

24%

79%

105%

42% 53%

Source: Cisco VNI Mobile, 2011 http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.html

14

• Mobile Users’ Expectations

- Fast

- Performance

- Single purpose oriented


15

Percentage of users who will bounce after waiting 5 seconds for a mobile site to load.

0% 20% 40% 60% 80%

2009

2011

20%

74%

Source: Web Performance Today, 2012 www.webperformancetoday.com/2011/07/20/new-findings-mobile-web-users-are-more-disappointed-than-ever/

16

0% 20% 40% 60% 80%

2009

2011

58%

71%

Percentage of users who expect a site to load as quickly on their mobile device as it does on their desktop.


17

35%40%

45%50%

2009

2011

40%

46%

Percentage of users who would not return to a poorly performing mobile site.


18

• Mobile Friendly

- Not “thumb” friendly

- Mouse events

- Not taking advantage of

touch screen

- Content not readable

- Minimal typing

- Rollovers in menus

- Improved download times

- Number of tools


19

Mobile Apps Web Apps

Success Rate (Nielsen Norman Group Report) 76% 64%

Platform Dependent

Multiple builds for each Platform

Utilize Device Functions (Camera, GPS, etc…)

Interface: Responsive and Fast High Quality Good

Animation and Graphics High Quality Good


ArcGIS App - Interface not customizable - Map is customizable - Utilize local data

20

Server-side Client-side

Computing Environment Server Client

Secure Code

Network Traffic

Responsive Interface

Performance

Uniformity Across Browsers


21

• Development Language : JavaScript

- ArcGIS Server JavaScript API

- Client-side scripting

- Available in all browsers

- Open source

- Asynchronous data processing

- Mashup


22

• JavaScript Frameworks

- Cross-browser

- Dojo

ESRI’s JavaScript API is built on Dojo

Majority of ESRI sample code is Dojo

- jQuery Mobile

Lightweight code base

Standard user interface elements for smartphones


23

• HTML5

- Flash alternative

- World Wide Web Consortium (W3C) standard

- Backwards compatible

- Supports multimedia (without plugins such as Flash)

- Still in development

- Major browsers moving toward compliance

- JS GeoLocation API

- Application platform

- Uniformity across browsers


24

• ESRI Templates

- Public Maps Gallery template

- Utilizes ArcGIS online maps

- Customizable maps

- Limited customization


25

• Uniformity Across Platforms

- Web Apps

- Device and OS independent

- Browser focused

- HTML5, CSS, and JavaScript Dojo

- Test in multiple browsers

- Internet Explorer most used


26

0

10

20

30

40

50

60

IE

Firefox

Chrome

Safari

Opera

Other

Top 5 Browsers in the United States

Source: Statcounter.com 2/2012

Perc

ent %

27

• Universal Layout

- Across Devices

- Default to Tablet size

- Bulk of the page within 1024 x 768

- Smartphone: separate page

- Google Browser Size Tool (http://www.browsersize.googlelabs.com)

90% Google users: 950 x 500


Monitor Average 24” 1920 x 1080

Laptop Average 15” 1280 x 1024

iPad 9.7”

1024 x 768

iPhone 3.5”

960 x 640

28

• Mobile Users: Tablet Vs. Smartphone


29

Mobile-Only Internet Users

0

10,000,000

20,000,000

30,000,000

40,000,000

50,000,000

60,000,000

2010 2011 2012 2013 2014 2015

North America

Source: Cisco VNI Mobile, 2011 http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.html

30

0%

10%

20%

30%

40%

50%

60%

70%

Q3 2010 Q4 2010 Q1 2011 Q2 2011 Q3 2011 Nov-11

Android

iOS

RIM

Windows Phone 7

Windows Mobile

All Others

Smartphone OS Sales

Source: The NDP Group, Business Insider

Perc

ent %

31

0

2,500

5,000

7,500

10,000

12,500

15,000

Q2'07

Q3'07

Q4'07

Q1'08

Q2'08

Q3'08

Q4'08

Q1'09

Q2'09

Q3'09

Q4'09

Q1'10

Q2'10

Q3'10

Q4'10

Q1'11

Q2'11

Q3'11

Q4'11

AT&T VERIZON SPRINT

Quarterly iPhone Activations By U.S. Operator

(in thousands)

Source: Asymco, 2011 http://www.asymco.com/2012/01/05/estimating-iphone-sales-in-the-us-during-q4/l

Repo

rted

Re

port

ed

Estim

ated

32

• Mobile Users: Tablet Vs. Smartphone

- Smartphone

Small screen

Creative interface

Single purpose

Fast apps

Simulate mobile apps

- Focus on Tablets first


33

Application Evaluation

• Purpose of application

• Identify users

• Primary functions

• Need met outside of an application

• Tool in an existing application

• Standalone web application

Development Standards

34

Map • Basemap

- Reusability

- Scale-dependent

- Optimize for speed

- Schedule cache updates

- ArcGIS Online Community Maps Program

Web Mercator coordinate system

Fast

Limited control over updates


35

Map • Operational layers

- Dynamic

- Limited features

- Avoid labeling

• No more detail than is needed

• Clean and clear cartography

• Highlight critical layer


36

Application Design • Layout

- Map centric

- Fast and responsive – page loads < 5 sec

- Limit user controls

- Critical content above the “fold”

- Consistency

- Printer friendly (or print page option)

- Repetition (common elements in standard locations)


37


Application Design • Map Control

- Simple navigation

- Avoid sliding scale controls

- Limited map tools

- User intuitive mouse gestures

Pan = click and drag

Select or Identify = click on feature

Zoom = two finger pinch or zoom

- Simplify / combine searches

38


Application Design • Mobile Friendly

- No Flash or Silverlight

- Tablet compatible

- Touchscreen friendly

- Readable content

- Vertical or horizontal

- Thumb friendly controls: 1cm x 1cm

- Increase spacing / clickable area

- Avoid complex widgets and controls

39


Application Design • Mobile Friendly (cont.)

- Limit typing (use check boxes and lists)

- Use mobile site redirects

- Increase “Select Feature” radius

- Avoid rollovers in menus

40

Live Demo

Documents

Web Mapping Applications: New Technology, New Expectations