9

We would like to have an embedded map in a webpage.
This map will have 100% width of the browser window meaning that there will not be any real estate left for the user to have the mouse out of the map area in order to scroll the page.

As you can imagine the situation is that the user is going to scroll the page and then he is going to get stuck in google maps unless he uses the scroll bars which is an unpleasant experience.

The experience gets worse if the user has the mouse at the bottom of the page when scrolling

What makes situation even harder is that the map is expected to cover the entire height of the viewport of the browser.

The current solution that we have thought of (sorry no resources for user testing at the moment) is the following: google maps mockup scroll solution

There is a large semi-transparent overlay over the map.
The user clicks on it and this overlay minimizes to a button-like square which the user can click to maximize the overlay once again. While the google map is "enabled" (meaning no overlay) the user has available to large buttons taking up some real estate from the map itself which on click scroll the page automatically either to the end of the previous section or the beginning of the next section accordingly.

We are looking for the optimal user experience for this situation before start implementation.
Any suggestions, alternative ideas or concerns are more than welcome!

3
  • Visit the following link to see an example of the actual implementation: pligor.com#portfolio May 15, 2015 at 14:51
  • Did you consider disabling scroll zoom?
    – BDD
    Jul 25, 2015 at 19:45
  • yes but how and when?.. Using only the zoom in and zoom out buttons is a very tedious task that should only be used if scrolling-zoom is not working for some reason. In my humble opinion. There are some exceptions to that for mobile case scenarios. This is a web case for the time being. Jul 26, 2015 at 19:42

2 Answers 2

7

Getting in the trap of scrolling map area instead of page scrolling is definitely bad experience. Still current solution looks overcomplicated and provides a barrier to interaction.

The design looks a bit contradictory: large map area assumes reach user interaction with map content (primary task), but scrolling beyond map control looks like users don't need this task, transforming it to secondary task (for small fraction of users). So the better solution depends on the users' goals.

Anyway, my suggestions are:

  1. If work with map is separate big task wich require heavy interaction, place it on separate page to focus them on this task. So those users who really need it will have good experience of working with map, while the others just skip it.

  2. You can show smaller map control with optimal scale and focused object initially. For some users it will be enough. For thouse who need to work with map, provide a control to enlarge/contract map area. These users will stay with map control for longer time and probably need no scrolling out of the map. enter image description here

  3. (A bit tricky!) Display smaller map area, and auto-detect, if user started to interact with map. It's a signal for you to enlarge map area to provide good experience while working with map. Providing "exit" points here is good, too, see the picture: (I'd prefer section names with arrows to make it more clear to users) enter image description here

  4. Display full screen map with scrolling support initially, but provide "exit points": (this solution is good if MOST of your users will work with map) enter image description here

  5. Provide Use scroll for scaling toggle control on the map control, if MOST of your users skip the map.

All the points minimize the possible scrolling issue for non-intersted users, and provide good experiense for interested ones.

UPDATE:
Pay attention of how they do it on Google Maps Embed API: they allow scrolling for scaling only after user clicks within map, it's my 3rd option.

3
  • Hey Alexey how are you doing? Long time no see. Your answers are always very helpful, thank you for that. I indeed believe that for not so much frequent use the 3rd case you are describing is the optimal one. The new challenge is that I should find some content that is relative to the map and it also makes sense to be obscured when the map is maximized. But this involves knowledge domain of the entire project and falls beyond the realm of this question May 12, 2015 at 12:56
  • Hi @GeorgePligor! Glad to help you. Sure, it's nice to have scenario in mind when designing the stuff and test it later. The other option is to place the map block as the downmost element, eliminating scroll down issue at least ). May 12, 2015 at 17:20
  • After all we sticked with the original plan because we could not find a way to integrate any of the above cases to the current design of the website. However we will keep listening to the users' pain and their feedback. So we will definitely keep in mind your five solutions for the upcoming versions. Thank you May 15, 2015 at 14:55
0

I must admit that after further explanations Alexey Kolchenko offered a better solution for the specific case.

So in case you can work with Google Maps API and build your own dynamic map rather than rely on Google Map creation tool you could have a solution like this: portfolio projects map

And he offers the following points as advantages which I agree with all of them:

  • Clear shows this is Portfolio section and the “liveness” of the startup
  • Display the number of projects (it’s hard to count them using markers)
  • Map includes all the markers (due to scale of the map)
  • Right semi-transparent block is good for page scrolling (map responds to scroll by scaling it)
  • Expand the map to full screen if needed

However there are a few cons with it that should be taken under consideration:

First the solution requires a rather large screen and should be redesigned for a good mobile experience.
Secondly, and most importantly, the development time is much larger because you need to use Google Maps API, your own database to store the information, your own graphics to display a rectangle when clicking on a pin on the map and generally you should implement logic that otherwise is already there with google maps.

The intermediate solutions where you would retrieve the information from Google database via Google APIs to create the dynamic list on the right have not been considered.

You may now experience an actual, first, implementation of the above idea at the following website: http://pligor.com

Enjoy!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.