UX Considerations for Touch Mapping Apps

944 views
834 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
944
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×