The document discusses UX considerations for mapping apps on touch devices. It notes that apps need to be designed with touch and different devices in mind from the start. Key aspects to consider include viewport sizes and orientations, interaction models that replace mouse with touch, and performance with varying processors and connectivity. The document provides recommendations to think mobile first, keep designs simple, use responsive design principles, and test on actual devices through all stages of design and development.

1. UX Considerations for Mapping Apps
on Touch Devices
“Touch-friendly mapping apps”
Allan Laframboise
Frank Garofalo
#uxmaptouchapp #esriuc #mapux #gisux

2. So you’ve got a web mapping app…
#uxmaptouchapp #esriuc #mapux #gisux

3. So you’ve got a web mapping app…
…is it usable on a touch device?
#uxmaptouchapp #esriuc #mapux #gisux

4. #uxmaptouchapp #esriuc #mapux #gisux

6. Why?
#uxmaptouchapp #esriuc #mapux #gisux

7. Time Design
Cost
Knowledge
Standards
Technical Limitations
#uxmaptouchapp #esriuc #mapux #gisux

8. it’s a jungle out there!
#uxmaptouchapp #esriuc #mapux #gisux

9. it’s a jungle out there!
Touch
#uxmaptouchapp #esriuc #mapux #gisux

10. touch = mouseless
#uxmaptouchapp #esriuc #mapux #gisux

11. Device challenges
Viewports
Interaction
Processors/speed
Connectivity
#uxmaptouchapp #esriuc #mapux #gisux

12. Viewports - Resolution/Orientation
1024, 768,480,320
Rotation, orientation
UX
• Handling physical device
• Large screen size = small buttons (OK!)
• Small screen size = big buttons (challenge!)
• Glare, fingerprints…
#uxmaptouchapp #esriuc #mapux #gisux

13. Interaction - Keyboard vs mouse vs touch
• Physical differences… / Input
• Form factor
• UX
• Click vs tap vs voice
• Mouse cursor vs direct interaction (finger)
• Keyboard shortcuts vs gestures
• Right-click, mouse over (don’t exist)
#uxmaptouchapp #esriuc #mapux #gisux

14. Processor Speed & Connectivity
- Connected & Disconnected
- Wifi vs mobile
- UX
- user feedback one when connection status
- too slow due to connection speed
- out of memory/memory limitations
#uxmaptouchapp #esriuc #mapux #gisux

15. Mapping dev challenges
Mouse vs touch events
Mouse vs touch vs mapping events
Usability
#uxmaptouchapp #esriuc #mapux #gisux

16. So where do I start?
#uxmaptouchapp #esriuc #mapux #gisux

17. Think mobile first
#uxmaptouchapp #esriuc #mapux #gisux

18. Think relevance
#uxmaptouchapp #esriuc #mapux #gisux

19. Think simple
#uxmaptouchapp #esriuc #mapux #gisux

20. Think reusable (content)
#uxmaptouchapp #esriuc #mapux #gisux

21. Think “responsive”
#uxmaptouchapp #esriuc #mapux #gisux

22. Your app running everywhere…
#uxmaptouchapp #esriuc #mapux #gisux

23. Plan/design for each device
What is most relevant?
#uxmaptouchapp #esriuc #mapux #gisux

24. Mock-up first (mobile, tablet & desktop)
#uxmaptouchapp #esriuc #mapux #gisux

25. Use case: Javascript Dev Starter App
 Web app
 Touch
 Responsive
 Good UX
#uxmaptouchapp #esriuc #mapux #gisux

26. Dev solutions, thinking responsive...
Touch
Fluid layout (960 grid)
Media Queries – screen, print, handheld
Smart css
#uxmaptouchapp #esriuc #mapux #gisux

27. Touch
Minimum “press-able” area 36px x 36px
Keep “press-able” elements away from edges
No right-click & hover / mouse-over for touch
Avoid the "double tap"
Gestures should be used as shortcuts
#uxmaptouchapp #esriuc #mapux #gisux

28. Fluid Explained…
Percentage based widths
960 grid system (www.960.gs)
grid_16
grid_5 grid_11
grid_8 grid_8
#uxmaptouchapp #esriuc #mapux #gisux

29. Media Query
@media
@media all and ( min-width : 768px ) and ( max-width : 1024px ) and
( orientation : portrait ) { … } /* Tablet - Portrait */
@media all and ( min-width: 768px ) and ( max-width : 1024px ) and
(max-height : 768px) and ( orientation : landscape ) { … } /* Tablet - Landscape */
@media all and ( min-width: 321px ) and ( max-width: 480px ) { … } /* Smartphone - Landscape */
@media all and ( max-width: 320px ) { … } /* Smartphone - Portrait */
@media all and ( min-width: 800px ) and ( min-height: 800px ) and
( max-width: 1279px ) { … } /* Desktop */
@media all and ( min-width : 1280px ) { … } /* Desktop - Wide Screen */
Resource: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
#uxmaptouchapp #esriuc #mapux #gisux

30. Smart CSS
<body class = “ … ” >
“ui_iOS ui_iOS_iPhone” “ui_Android ui_AndroidPhone” “ui_Win ui_Win7_Phone”
Same HTML with different CSS applied
#uxmaptouchapp #esriuc #mapux #gisux

31. Mobile browser challenges…
Tool bars take up space too!
#uxmaptouchapp #esriuc #mapux #gisux

32. Touch-friendly dev
#uxmaptouchapp #esriuc #mapux #gisux

33. ArcGIS Javascript Compact
<script
type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0compact">
</script
#uxmaptouchapp #esriuc #mapux #gisux

34. Viewport and orientation
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
user-scalable=no"/>
…
"autoResize": function ( window ) {
var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
function orientationChanged( map ) {
if (map) {
map.resize();
map.reposition();
}
}
// Attach
if ( window.addEventListener )
window.addEventListener( orientationEvent, function () { orientationChanged(map); }, false );
},
#uxmaptouchapp #esriuc #mapux #gisux

35. Device detection
var mobileDevice = {
Android: function () {
return navigator.userAgent.match(/Android/i) ? true : false;
},
BlackBerry: function () {
return navigator.userAgent.match(/BlackBerry/i) ? true : false;
},
iPhone: function () {
return navigator.userAgent.match(/iPhone|iPod/i) ? true : false;
},
iPad: function () {
return navigator.userAgent.match(/iPad/i) ? true : false;
},
Windows: function () {
return navigator.userAgent.match(/IEMobile/i) ? true : false;
},
any: function () {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iPhone() || isMobile.iPad()
|| isMobile.Windows());
}
#uxmaptouchapp #esriuc #mapux #gisux

36. Events: onclick vs ontouchstart
<button id="addPoint" class="buttonControls" onclick="setActiveTool(this);"
ontouchstart ="setActiveTool(this);"><span class="buttonLabel">Add Point</span></button>
<button id="addLine" class="buttonControls" onclick="setActiveTool(this);"
ontouchstart ="setActiveTool(this);"><span class="buttonLabel">Add Point</span></button>
<button id="addPolygon" class="buttonControls" onclick="setActiveTool(this);"
ontouchstart ="setActiveTool(this);"><span class="buttonLabel">Add Point</span></button>
<button id="clearGraphics" class="buttonControls" onclick="setActiveTool(this);"
ontouchstart ="setActiveTool(null);"><span class="buttonLabel">Add Point</span></button>
onmousedown + onclick = ontouchstart
ontouchstart != onmousedown || onclick
#uxmaptouchapp #esriuc #mapux #gisux

37. Events: No onmouseover (hover)
<div id="containerMenu" class="">
<div id="basemaps" class="buttonNav selected" onmouseover="setActiveModule( this, true );"
ontouchstart="setActiveModule( this, true );"><p>Basemaps</p></div>
<div id="geolocation" class="buttonNav" onmouseover="setActiveModule( this, true );"
ontouchstart ="setActiveModule( this, true );"><p>Geolocation</p></div>
<div id="graphics" class="buttonNav" onmouseover="setActiveModule( this, true );"
ontouchstart ="setActiveModule( this, false );"><p>Add Graphics</p></div>
<div id="findAddress" class="buttonNav" onmouseover="setActiveModule( this, true );"
ontouchstart ="setActiveModule( this, true );"><p>Find Place</p></div>
…
</div>
#uxmaptouchapp #esriuc #mapux #gisux

38. Events: No doubleclick
function addGraphicCallback( evt ) {
var pt = evt.mapPoint;
clearAddGraphics( false );
var finished = ( evt.type == "dblclick" || evt.type == "touchend“ );
switch ( activeToolId )
{
case 'addPoint':
addPoint( pt, finished );
break;
case 'addLine':
addLine( pt, finished );
break;
case 'addPolygon':
addPolygon( pt, finished );
break;
default:
}
}
#uxmaptouchapp #esriuc #mapux #gisux

39. Locking map navigation
function setActiveTool ( ctrl, active) {
lockMapNavigation( active );
…
}
function lockMapNavigation( lock ) {
if ( lock ) {
map.disableDoubleClickZoom();
map.disableClickRecenter();
map.disablePan();
} else {
map.enableDoubleClickZoom();
map.enableClickRecenter();
map.enablePan();
}
}
#uxmaptouchapp #esriuc #mapux #gisux

40. Final UX thoughts
Toggle - turn tools on and off (expected)
Guide your user
- “just-in-time-assistance” (user message)
Give them a way to “back-out”
#uxmaptouchapp #esriuc #mapux #gisux

41. Remember the “Javascript Dev Starter App”?
#uxmaptouchapp #esriuc #mapux #gisux

42. Grand Finale
http://edn1.esri.com/starterapp/
#uxmaptouchapp #esriuc #mapux #gisux

43. In the end…
Design for touch
Design for devices
Design for the user!
There are challenges!
#uxmaptouchapp #esriuc #mapux #gisux

44. Questions?
Allan Laframboise Frank Garofalo
.NET Technical Lead, UI / Human Factors Engineer,
Esri Developer Network Esri Professional Services
@Al_Laframboise @fgarofalo
#uxmaptouchapp #esriuc #mapux #gisux

45. Questions?
Allan Laframboise Frank Garofalo
.NET Technical Lead, UI / Human Factors Engineer,
Esri Developer Network Esri Professional Services
@Al_Laframboise @fgarofalo
http://edn1.esri.com/starterapp/
#uxmaptouchapp #esriuc #mapux #gisux

47. Today’s feature presentation…
Apps need to run everywhere
UX considerations
Dev solutions
#uxmaptouchapp #esriuc #mapux #gisux

48. Things to think about
#uxmaptouchapp #esriuc #mapux #gisux