Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
    
Did you consider putting the arrow below the controls instead? –  André May 13 '13 at 9:55
    
@André read the penultimate paragraph ;) –  Mahn May 13 '13 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 '13 at 14:34
    
@André ah, right, I see what you mean, good point. –  Mahn May 13 '13 at 15:13

2 Answers 2

up vote 1 down vote accepted

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]

mockup

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

mockup

download bmml source

Do both

Quite affordant for gamers

mockup

download bmml source

share|improve this answer
    
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 '13 at 11:25
    
So you changed your mind. I knew my very special skills where convincing ;-) –  Gildas Frémont May 13 '13 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 '13 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.

share|improve this answer
    
I would not recommend the use of pulsations. It is quite disturbing and does not allow the user to concentrate in the current map. –  Gildas Frémont May 12 '13 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 '13 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/… –  Gildas Frémont May 12 '13 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 '13 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 '13 at 11:37

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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