What is the best way to point the user somewhere offscreen in a draggable map?

Question

Let's say you have a Google Maps like draggable map:

I'd like to show the user that there is something waiting for him somewhere outside of the visible portion of the map, let's say to the left. My instinct would tell me to overlay an arrow, but this has a few problems:

If I respect the interface controls like in the image above, then it's not evidently clear for the user whether he's supposed to scroll to the left or interact with the zooming controls which the arrow seems to be pointing at aswell. If I disregard the interface instead:

While the intent might be clearer, well, what if the user wants to interact with the zooming controls before reaching the location pointed by the arrow?

In the example I'm providing here the solution might seem easy, just place the arrow somewhere where there are no interface controls; the problem comes when the location I want to point the user to is not predefined, scenario in which, at least in the examples I provide, the arrow would ideally "guess" what is the best place on the screen to appear based on the target location (that is to say, depending on the direction the user should scroll)

What is the best way to let the user know he should scroll in some direction without getting in the way of an existing overlayed interface AND in such a way that it doesn't become ambiguous with said interface?

Answer 1

Two general advices and a complementary idea :

• If you want the user to see something show it to her
• If you want the user to do something tell her how
• Do both

If you want the user to see something show it to her

Depending on what you want to show and why :

• Unzoom to show both location (current and destination)
• Go to the location directly

• Add a link on the top of the screen that leads to the location, maybe with a transition (like going from a place to another if it makes sense)

  • Go to previous < > next location
  • Go to [Name of the place]

^{download bmml source – Wireframes created with Balsamiq Mockups}

If you want the user to do something tell her how

Tell her what to do :

Go north Follow this item Click on that arrow

^{download bmml source}

Do both

Quite affordant for gamers

^{download bmml source}

Answer 2

A couple options come to mind depending on your implmentation:

• Unzoom the map to show the destination location w.r.t. the starting location. If you cannot unzoom for some reason, just connect the locations, the connection itself will serve the goal of showing the direction.

• If you are not using a large map, you can use the arrow effectively. Place the arrow near the edge of the map and make it pulsate. The pulsing is should be a decent signal over a static one, for the user to atleast click in that direction.

• Direction banners within the map are effective if you are using the map for navigation purposes.