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:

enter image description here

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:

enter image description here

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?

  • Did you consider putting the arrow below the controls instead?
    – André
    May 13, 2013 at 9:55
  • @André read the penultimate paragraph ;)
    – Mahn
    May 13, 2013 at 11:15
  • I did read that (and again after looking up what penultimate means). And I did not mean below as in "more to the south", but under as in "layered below". So, basically, between the map and the controls that are layered on top of the map.
    – André
    May 13, 2013 at 14:34
  • @André ah, right, I see what you mean, good point.
    – Mahn
    May 13, 2013 at 15:13

2 Answers 2


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

  • Thanks, just wanted to let you know this answer helped me aswell, you have my upvote; I would accept it too if I could. In the end I realize the question was rather open ended, so it ended up being a matter of what worked best for my app. But I'm sure the answer will do good aswell for others.
    – Mahn
    May 13, 2013 at 11:25
  • So you changed your mind. I knew my very special skills where convincing ;-) May 13, 2013 at 11:38
  • Yeah, as I mentioned below I'm going for a unzooming in advance implementation and as you pointed out you were first, so I stand corrected :)
    – Mahn
    May 13, 2013 at 11:39

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.

  • I would not recommend the use of pulsations. It is quite disturbing and does not allow the user to concentrate in the current map. May 12, 2013 at 16:10
  • @GildasFrémont It depends on the implementation. And given that it's usage is to direct the users attention to the side of the map, it is perfect in that respect :)
    – rk.
    May 12, 2013 at 16:11
  • We are making hypothesis here. @Mahn will have to find his own way (what a joke!). There some help: ux.stackexchange.com/questions/15898/… May 12, 2013 at 16:35
  • @GildasFrémont The highest voted answer agrees with me there :P 'In my book, all animations of control elements must be triggered only by user actions.' The user is selecting the destination, which is resulting in the pulsating arrow.
    – rk.
    May 12, 2013 at 16:47
  • 1
    @GildasFrémont well this is embarrasing.. ahem, I'm going to switch the accepted answer in this case, I hope it's okay for both of you guys. Rest assured both of the answers helped me in any case!
    – Mahn
    May 13, 2013 at 11:37

Your Answer

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

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