UX Considerations for Touch Mapping Apps
-
Upload
allan-laframboise -
Category
Technology
-
view
619 -
download
0
Transcript of 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
So you’ve got a web mapping app…
#uxmaptouchapp #esriuc #mapux #gisux
So you’ve got a web mapping app…
…is it usable on a touch device?
#uxmaptouchapp #esriuc #mapux #gisux
#uxmaptouchapp #esriuc #mapux #gisux
Why?
#uxmaptouchapp #esriuc #mapux #gisux
Time
Cost
Knowledge
Standards
Technical Limitations
#uxmaptouchapp #esriuc #mapux #gisux
Design
it’s a jungle out there!
#uxmaptouchapp #esriuc #mapux #gisux
it’s a jungle out there!
Touch
#uxmaptouchapp #esriuc #mapux #gisux
touch = mouseless
#uxmaptouchapp #esriuc #mapux #gisux
Viewports
Interaction
Processors/speed
Connectivity
Device challenges
#uxmaptouchapp #esriuc #mapux #gisux
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
• 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
- 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
Mouse vs touch events
Mouse vs touch vs mapping events
Usability
Mapping dev challenges
#uxmaptouchapp #esriuc #mapux #gisux
So where do I start?
#uxmaptouchapp #esriuc #mapux #gisux
Think mobile first
#uxmaptouchapp #esriuc #mapux #gisux
Think relevance
#uxmaptouchapp #esriuc #mapux #gisux
Think simple
#uxmaptouchapp #esriuc #mapux #gisux
Think reusable (content)
#uxmaptouchapp #esriuc #mapux #gisux
Think “responsive”
#uxmaptouchapp #esriuc #mapux #gisux
Your app running everywhere…
#uxmaptouchapp #esriuc #mapux #gisux
Plan/design for each device
What is most relevant?
#uxmaptouchapp #esriuc #mapux #gisux
Mock-up first (mobile, tablet & desktop)
#uxmaptouchapp #esriuc #mapux #gisux
Web app
Touch
Responsive
Good UX
Use case: Javascript Dev Starter App
#uxmaptouchapp #esriuc #mapux #gisux
Touch
Fluid layout (960 grid)
Media Queries – screen, print, handheld
Smart css
Dev solutions, thinking responsive...
#uxmaptouchapp #esriuc #mapux #gisux
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
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
@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 */
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
Mobile browser challenges…
#uxmaptouchapp #esriuc #mapux #gisux
Tool bars take up space too!
Touch-friendly dev
#uxmaptouchapp #esriuc #mapux #gisux
<script
type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0compact">
</script
ArcGIS Javascript Compact
#uxmaptouchapp #esriuc #mapux #gisux
<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
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
<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
<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
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
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
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
Remember the “Javascript Dev Starter App”?
#uxmaptouchapp #esriuc #mapux #gisux
Grand Finale
#uxmaptouchapp #esriuc #mapux #gisux
http://edn1.esri.com/starterapp/
In the end…
Design for devices
Design for touch
Design for the user!
There are challenges!
#uxmaptouchapp #esriuc #mapux #gisux
#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?
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/