Better Map UX, Prevent Scroll Hijacking

Maps provide important information for users but they can pose a serious UX problem for mobile users.

The Problem.

Scrolling through a page is one of the most common things a user does when visiting a site. When we scroll, we expect the page to move, up or down. But, when a user encounters a map the default behavior of scrolling causes the map to move and take over the scrolling of the page. It is possible to turn this feature off but then you can fall victim to another UX problem when the user wishes to click around on the map.

Exhibit A:

You may have experienced the problem above. Your are scrolling though a page as usual when all of the sudden, the page stops responding as expected, it’s no longer scrolling. Upon closer inspection, you realize that underneath your thumb or mouse, is a map that you are now unexpectedly moving around in. See Exhibit A.

The default page scrolling action/response has been hijacked. So you try and regain control of the page, trying to scroll past the map.  On a desktop, the solution is of course to move your mouse to an area not hovering the map and scroll from there. This is really difficult on a phone because the map usually takes up a larger percentage of the screen and so you are left trying to scroll past the map by using the very thin edges of the page. Frus-trai-ting! See Exhibit A.

The map, once intended to add to the user experience has actually detracted from it. To make matters worse, the map might no longer be useful because it may no longer show the point or area of interest. If you were scrolling vigorously, you are left wondering what part world you are looking at.

A Good Solution

Recently, while scrolling to the bottom of the Plan A Visit page of the Frederick Meijer Gardens website, I came upon a great solution to this map dilemma.

First, Frederick Meijer Gardens disables zooming with the scrollwheel (trackpad) for desktop/laptop computers by declaring scrollwheel: false in their Google Map mapOptions:{}. Simple. That’s an easy  fix. Then, to move around in the map, you intentionally click+hold and drag around. Nice!

That doesn’t solve things on mobile though. For mobile devices, the site implements a “Enable/Disable” map feature as a way to prevent user from unintentionally scrolling inside of the Google Map. Go check out how it works on your phone or using the device mode on your web inspector.

On load, the map is covered up with a semi-transparent cover that prevents the map from being accessed. When the “Enable Map” button is tapped, the cover is removed and the map becomes accessible to user inputs. Cool! What is also sweet about this feature is that the cover can be added back on top of the map by clicking on the “Disable Map” button. This effectively prevents any additional interactions with the map and allows the user to tap and hold above the map and scroll as expected.

My Solution

Inspired by the Enable/Disable Map feature on the Frederick Meijer Gardens website, I set out to mimic the same functionality for the sites that I develop and I implemented a similar solution using the code below into one of our latest projects. Check it out on your phone.

Implementing The Enable/Disable Map Feature

I often use the Google Maps field of the Advanced Custom Fields WordPress plugin to generate maps on pages. So, the code below is written in a way to work with the default HTML, CSS and JS code needed for the Google Maps field of the Advanced Custom Fields plugin but that doesn’t mean you can’t modify and tweak it make it work for your project.

The Map Layout, PHP

This is needed to render out the Google Map and is taken from the ACF Google Map Docs. Note that there is a div, .map_container, on line 7 which wraps the element in which the map will be rendered, .acf-map. Also, the button that will disable the map, .disable_map_btn, is within that container on line 10 and is a sibling of .acf-map.

The CSS

Either copy this css into your existing CSS or save it as an individual CSS file that will be enqueued.

The JS

This js code is needed to render out the Google Map as per the ACF Google Map Docs. It’s important to note the map’s scrollwheel: false setting on line 30 and custom jQuery code on lines 159-172 that make this feature possible.
Either copy this code into your existing JS file or save it as an individual JS file that will be enqueued.

The PHP Functions

Here, the CSS and JS files can be enqueued if needed. Just uncomment their respective add_action hooks and set their respective $src variable paths. Modernizr is used to detect touch enabled devices and Font Awesome is used to add an icon to the Disable Map button. If these libraries are not already being used on a site, I made it easy to enqueue both of them by simply uncommenting a line for each, lines 7 and 23. Font-awesome is not crucial. The CSS needs to be modified a bit if it is not used.

That’s it

Hopefully you have found this tutorial useful.
If you come across a site that hijacks your scrolling functionality via a map, mention it to them. Tweet this to them. Tell them that its bad for their user and they need to fix it.

Comments Off on Better Map UX, Prevent Scroll Hijacking