Mobile map

WHAT

Maps on mobile devices are often difficult to manipulate by touch and result in unexpected behavior.

WHY

Maps are difficult to navigate on touch devices and require special attention to the input capabilities of the users, sometimes referred to as the fat finger syndrome. Data visualizations and interactions created for desktop devices cannot be assumed to work on mobile devices without further preparation and reconstruction and vice versa. Thinking mobile first is a good approach because less problems arise by scaling up than scaling down. Responsive design means more than adjusting the size and arrangement of elements, it extends to taking care of content density, gesture events, and providing adequate touch areas.

WHEN

Use maps on mobile devices to show the current location of the user in relation to static or moving object in close vicinity. A typical application is a Store Locator that highlights nearby stores helping users to choose the right location based on factors like distance or opening times with the ability to further interact using phone or routing capabilities. Maps are great tools to explore an area by visually browsing points of interest and knowing where they are in relation to a known frame of reference.

HOW

Mobile maps need to be easy to read and comprehend. That means it is important to

choose a basemap that gives as much reference as needed for the task but doesn’t visually overwhelm or distract
simplify, generalize, or cluster features to minimize overlaps
increase the size of the markers to meet current touch area standards of 44×44 pixels
remove or hide controls that are not essential or less needed
maximize the space available for the map
minimize the use of toolbars and other buttons that float on top of the map

The recommended use of maps is to toggle between List (No Map) and Details (Reference Map) with the option to toggle to Full Map. Avoid Partial Map or Embedded Map[1] for reasons explained in more detail in the Special Considerations section of this pattern.

Touch devices follow specific rules of interaction. It is important to remember that hover doesn’t exist, and mouse click events need to be backed up by touch events. Unlike having a mouse, users on mobile devices have no idea where they are so showing a tap indicator is a good practice.

The following gestures are generally assumed to be available:

Tap-Hold-Move: Pan
Pinch: Zoom or change orientation
Long press is expected to be answered with a context menu, like a mouse right-click
Avoid double-tap

Any time a map is needed on a mobile device or a small screen in general it is important to consider the differences in interaction behavior due to factors like limited screen space, mobile gestures, and technical limitations. The three most commonly found problems[2] are:

Gesture ambiguity
Lack of touch target compliancy
Imprecise and slow feedback

Gesture ambiguity is a problem that arises when users try to scroll to content of the page that is below the fold. This interaction commonly starts with a swipe gesture from the lower half of the screen. If that area happens to be an embedded map it inadvertently activates the pan functionality instead, thus users will not be able to scroll any further and are stuck. One commonly suggested remedy is to leave margins at the side of the map, so users can swipe which is discouraged because it solves the symptom but doesn’t solve the cause. Another approach is to require users to explicitly activate map by clicking on a button or double-tapping the map which is also discouraged.

Map markers are often small or placed too closely together which requires unnecessary zooming and tapping until the desired action can be performed.

Mobile devices are limited in processing power, are dependent on available bandwidth and download volume, may unexpectedly go offline, report imprecise position accuracy, and depend on battery life. All these factors may result in slowed responses and feedback up to a point when the map appears unresponsive. User are typically unaware of these circumstances and continue zooming, panning, or tapping with mostly unexpected and undesired outcomes which can turn into frustration or anger.