UX Considerations for Touch Mapping Apps

UX Considerations for Mapping Apps
on Touch Devices

“Touch-friendly mapping apps”

Allan Laframboise
Frank Garofalo

#uxmaptouchapp #esriuc #mapux #gisux

So you’ve got a web mapping app…


So you’ve got a web mapping app…
…is it usable on a touch device?


Why?


Time Design
Cost

Knowledge

Standards

Technical Limitations


it’s a jungle out there!


it’s a jungle out there!

Touch


touch = mouseless


Device challenges

Viewports

Interaction

Processors/speed

Connectivity


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…


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)


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


Mapping dev challenges

Mouse vs touch events

Mouse vs touch vs mapping events

Usability


So where do I start?


Think mobile first


Think relevance


Think simple


Think reusable (content)


Think “responsive”


Your app running everywhere…


Plan/design for each device
What is most relevant?


Mock-up first (mobile, tablet & desktop)


Use case: Javascript Dev Starter App

 Web app

 Touch

 Responsive

 Good UX


Dev solutions, thinking responsive...

Touch

Fluid layout (960 grid)

Media Queries – screen, print, handheld

Smart css


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


Fluid Explained…

Percentage based widths

960 grid system (www.960.gs)

grid_16

grid_5 grid_11

grid_8 grid_8


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/


Smart CSS
<body class = “ … ” >

“ui_iOS ui_iOS_iPhone” “ui_Android ui_AndroidPhone” “ui_Win ui_Win7_Phone”

Same HTML with different CSS applied


Mobile browser challenges…

Tool bars take up space too!


Touch-friendly dev


ArcGIS Javascript Compact

<script
type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0compact">
</script


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 );
},


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());
}


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);"

<button id="addPolygon" class="buttonControls" onclick="setActiveTool(this);"

<button id="clearGraphics" class="buttonControls" onclick="setActiveTool(this);"
ontouchstart ="setActiveTool(null);"><span class="buttonLabel">Add Point</span></button>

onmousedown + onclick = ontouchstart

ontouchstart != onmousedown || onclick


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>


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


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();
}

}


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”


Remember the “Javascript Dev Starter App”?


Grand Finale

http://edn1.esri.com/starterapp/


In the end…

Design for devices

Design for touch

Design for the user!

There are challenges!


Questions?

Allan Laframboise Frank Garofalo
.NET Technical Lead, UI / Human Factors Engineer,
Esri Developer Network Esri Professional Services

@Al_Laframboise @fgarofalo


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/


UX Considerations for Touch Mapping Apps

More Related Content

Viewers also liked (6)

Similar to UX Considerations for Touch Mapping Apps (20)

More from Allan Laframboise (9)

Recently uploaded (20)

UX Considerations for Touch Mapping Apps