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

UX Considerations for Touch Mapping Apps

Embed Size (px)

Citation preview

Page 1: UX Considerations for Touch Mapping Apps

#uxmaptouchapp #esriuc #mapux #gisux

UX Considerations for Mapping Apps on Touch Devices

“Touch-friendly mapping apps”

Allan Laframboise

Frank Garofalo

Page 2: UX Considerations for Touch Mapping Apps

So you’ve got a web mapping app…

#uxmaptouchapp #esriuc #mapux #gisux

Page 3: UX Considerations for Touch Mapping Apps

So you’ve got a web mapping app…

…is it usable on a touch device?

#uxmaptouchapp #esriuc #mapux #gisux

Page 4: UX Considerations for Touch Mapping Apps

#uxmaptouchapp #esriuc #mapux #gisux

Page 6: UX Considerations for Touch Mapping Apps

Why?

#uxmaptouchapp #esriuc #mapux #gisux

Page 7: UX Considerations for Touch Mapping Apps

Time

Cost

Knowledge

Standards

Technical Limitations

#uxmaptouchapp #esriuc #mapux #gisux

Design

Page 8: UX Considerations for Touch Mapping Apps

it’s a jungle out there!

#uxmaptouchapp #esriuc #mapux #gisux

Page 9: UX Considerations for Touch Mapping Apps

it’s a jungle out there!

Touch

#uxmaptouchapp #esriuc #mapux #gisux

Page 10: UX Considerations for Touch Mapping Apps

touch = mouseless

#uxmaptouchapp #esriuc #mapux #gisux

Page 11: UX Considerations for Touch Mapping Apps

Viewports

Interaction

Processors/speed

Connectivity

Device challenges

#uxmaptouchapp #esriuc #mapux #gisux

Page 12: UX Considerations for Touch Mapping Apps

1024, 768,480,320

Rotation, orientation

UX

• Handling physical device

• Large screen size = small buttons (OK!)

• Small screen size = big buttons (challenge!)

• Glare, fingerprints…

Viewports - Resolution/Orientation

#uxmaptouchapp #esriuc #mapux #gisux

Page 13: UX Considerations for Touch Mapping Apps

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

Interaction - Keyboard vs mouse vs touch

#uxmaptouchapp #esriuc #mapux #gisux

Page 14: UX Considerations for Touch Mapping Apps

- Connected & Disconnected

- Wifi vs mobile

- UX

- user feedback one when connection status

- too slow due to connection speed

- out of memory/memory limitations

Processor Speed & Connectivity

#uxmaptouchapp #esriuc #mapux #gisux

Page 15: UX Considerations for Touch Mapping Apps

Mouse vs touch events

Mouse vs touch vs mapping events

Usability

Mapping dev challenges

#uxmaptouchapp #esriuc #mapux #gisux

Page 16: UX Considerations for Touch Mapping Apps

So where do I start?

#uxmaptouchapp #esriuc #mapux #gisux

Page 17: UX Considerations for Touch Mapping Apps

Think mobile first

#uxmaptouchapp #esriuc #mapux #gisux

Page 18: UX Considerations for Touch Mapping Apps

Think relevance

#uxmaptouchapp #esriuc #mapux #gisux

Page 19: UX Considerations for Touch Mapping Apps

Think simple

#uxmaptouchapp #esriuc #mapux #gisux

Page 20: UX Considerations for Touch Mapping Apps

Think reusable (content)

#uxmaptouchapp #esriuc #mapux #gisux

Page 21: UX Considerations for Touch Mapping Apps

Think “responsive”

#uxmaptouchapp #esriuc #mapux #gisux

Page 22: UX Considerations for Touch Mapping Apps

Your app running everywhere…

#uxmaptouchapp #esriuc #mapux #gisux

Page 23: UX Considerations for Touch Mapping Apps

Plan/design for each device

What is most relevant?

#uxmaptouchapp #esriuc #mapux #gisux

Page 24: UX Considerations for Touch Mapping Apps

Mock-up first (mobile, tablet & desktop)

#uxmaptouchapp #esriuc #mapux #gisux

Page 25: UX Considerations for Touch Mapping Apps

Web app

Touch

Responsive

Good UX

Use case: Javascript Dev Starter App

#uxmaptouchapp #esriuc #mapux #gisux

Page 26: UX Considerations for Touch Mapping Apps

Touch

Fluid layout (960 grid)

Media Queries – screen, print, handheld

Smart css

Dev solutions, thinking responsive...

#uxmaptouchapp #esriuc #mapux #gisux

Page 27: UX Considerations for Touch Mapping Apps

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

Touch

#uxmaptouchapp #esriuc #mapux #gisux

Page 28: UX Considerations for Touch Mapping Apps

Percentage based widths

960 grid system (www.960.gs)

Fluid Explained…

grid_5 grid_11

grid_8 grid_8

grid_16

#uxmaptouchapp #esriuc #mapux #gisux

Page 29: UX Considerations for Touch Mapping Apps

@media

Media Query

Resource: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

#uxmaptouchapp #esriuc #mapux #gisux

@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 */

Page 30: UX Considerations for Touch Mapping Apps

Smart CSS

#uxmaptouchapp #esriuc #mapux #gisux

<body class = “ … ” >

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

Same HTML with different CSS applied

Page 31: UX Considerations for Touch Mapping Apps

Mobile browser challenges…

#uxmaptouchapp #esriuc #mapux #gisux

Tool bars take up space too!

Page 32: UX Considerations for Touch Mapping Apps

Touch-friendly dev

#uxmaptouchapp #esriuc #mapux #gisux

Page 33: UX Considerations for Touch Mapping Apps

<script

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

</script

ArcGIS Javascript Compact

#uxmaptouchapp #esriuc #mapux #gisux

Page 34: UX Considerations for Touch Mapping Apps

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

},

Viewport and orientation

#uxmaptouchapp #esriuc #mapux #gisux

Page 35: UX Considerations for Touch Mapping Apps

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

}

Device detection

#uxmaptouchapp #esriuc #mapux #gisux

Page 36: UX Considerations for Touch Mapping Apps

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

Events: onclick vs ontouchstart

#uxmaptouchapp #esriuc #mapux #gisux

onmousedown + onclick = ontouchstart ontouchstart != onmousedown || onclick

Page 37: UX Considerations for Touch Mapping Apps

<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 onmouseover (hover)

#uxmaptouchapp #esriuc #mapux #gisux

Page 38: UX Considerations for Touch Mapping Apps

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

Page 39: UX Considerations for Touch Mapping Apps

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

Page 40: UX Considerations for Touch Mapping Apps

Toggle - turn tools on and off (expected)

Guide your user

- “just-in-time-assistance” (user message)

Give them a way to “back-out”

Final UX thoughts

#uxmaptouchapp #esriuc #mapux #gisux

Page 41: UX Considerations for Touch Mapping Apps

Remember the “Javascript Dev Starter App”?

#uxmaptouchapp #esriuc #mapux #gisux

Page 42: UX Considerations for Touch Mapping Apps

Grand Finale

#uxmaptouchapp #esriuc #mapux #gisux

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

Page 43: UX Considerations for Touch Mapping Apps

In the end…

Design for devices

Design for touch

Design for the user!

There are challenges!

#uxmaptouchapp #esriuc #mapux #gisux

Page 44: UX Considerations for Touch Mapping Apps

#uxmaptouchapp #esriuc #mapux #gisux

Allan Laframboise .NET Technical Lead, Esri Developer Network @Al_Laframboise

Frank Garofalo UI / Human Factors Engineer, Esri Professional Services @fgarofalo

Questions?

Page 45: UX Considerations for Touch Mapping Apps

Questions?

Allan Laframboise .NET Technical Lead, Esri Developer Network @Al_Laframboise

Frank Garofalo UI / Human Factors Engineer, Esri Professional Services @fgarofalo

#uxmaptouchapp #esriuc #mapux #gisux

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

Page 46: UX Considerations for Touch Mapping Apps