The document discusses UX considerations for mapping apps on touch devices. It notes that apps need to be designed with touch and different devices in mind from the start. Key aspects to consider include viewport sizes and orientations, interaction models that replace mouse with touch, and performance with varying processors and connectivity. The document provides recommendations to think mobile first, keep designs simple, use responsive design principles, and test on actual devices through all stages of design and development.
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
Touch-friendly design tips for mapping apps
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