Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UX Considerations for Touch Mapping Apps

1,089 views

Published on

Published in: Technology
  • Be the first to comment

UX Considerations for Touch Mapping Apps

  1. 1. UX Considerations for Mapping Appson Touch Devices“Touch-friendly mapping apps”Allan LaframboiseFrank Garofalo #uxmaptouchapp #esriuc #mapux #gisux
  2. 2. So you’ve got a web mapping app… #uxmaptouchapp #esriuc #mapux #gisux
  3. 3. So you’ve got a web mapping app… …is it usable on a touch device? #uxmaptouchapp #esriuc #mapux #gisux
  4. 4. #uxmaptouchapp #esriuc #mapux #gisux
  5. 5. Why? #uxmaptouchapp #esriuc #mapux #gisux
  6. 6. Time Design Cost KnowledgeStandards Technical Limitations #uxmaptouchapp #esriuc #mapux #gisux
  7. 7. it’s a jungle out there! #uxmaptouchapp #esriuc #mapux #gisux
  8. 8. it’s a jungle out there! Touch #uxmaptouchapp #esriuc #mapux #gisux
  9. 9. touch = mouseless #uxmaptouchapp #esriuc #mapux #gisux
  10. 10. Device challenges Viewports Interaction Processors/speed Connectivity #uxmaptouchapp #esriuc #mapux #gisux
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. Mapping dev challenges Mouse vs touch events Mouse vs touch vs mapping events Usability #uxmaptouchapp #esriuc #mapux #gisux
  15. 15. So where do I start? #uxmaptouchapp #esriuc #mapux #gisux
  16. 16. Think mobile first #uxmaptouchapp #esriuc #mapux #gisux
  17. 17. Think relevance #uxmaptouchapp #esriuc #mapux #gisux
  18. 18. Think simple #uxmaptouchapp #esriuc #mapux #gisux
  19. 19. Think reusable (content) #uxmaptouchapp #esriuc #mapux #gisux
  20. 20. Think “responsive” #uxmaptouchapp #esriuc #mapux #gisux
  21. 21. Your app running everywhere… #uxmaptouchapp #esriuc #mapux #gisux
  22. 22. Plan/design for each deviceWhat is most relevant? #uxmaptouchapp #esriuc #mapux #gisux
  23. 23. Mock-up first (mobile, tablet & desktop) #uxmaptouchapp #esriuc #mapux #gisux
  24. 24. Use case: Javascript Dev Starter App  Web app  Touch  Responsive  Good UX #uxmaptouchapp #esriuc #mapux #gisux
  25. 25. Dev solutions, thinking responsive... Touch Fluid layout (960 grid) Media Queries – screen, print, handheld Smart css #uxmaptouchapp #esriuc #mapux #gisux
  26. 26. 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
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. Mobile browser challenges…Tool bars take up space too! #uxmaptouchapp #esriuc #mapux #gisux
  31. 31. Touch-friendly dev #uxmaptouchapp #esriuc #mapux #gisux
  32. 32. ArcGIS Javascript Compact<scripttype="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0compact"></script #uxmaptouchapp #esriuc #mapux #gisux
  33. 33. 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
  34. 34. Device detectionvar 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
  35. 35. 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
  36. 36. 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
  37. 37. Events: No doubleclickfunction 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
  38. 38. Locking map navigationfunction 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
  39. 39. Final UX thoughtsToggle - 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
  40. 40. Remember the “Javascript Dev Starter App”? #uxmaptouchapp #esriuc #mapux #gisux
  41. 41. Grand Finalehttp://edn1.esri.com/starterapp/ #uxmaptouchapp #esriuc #mapux #gisux
  42. 42. In the end… Design for devices Design for touch Design for the user! There are challenges! #uxmaptouchapp #esriuc #mapux #gisux
  43. 43. 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
  44. 44. 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

×