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
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
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
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
