11Jun

Online Map Design: Which Way to Zoom In?

Before you read any further, answer this question:

If you were designing the zoom slider for an online map interface, would you put zoom in at the top of the slider and zoom out at the bottom, or the reverse?

The reason I ask is because I recently happened to be looking at a map on MSN. I went to zoom in and instinctively moved to click towards the top of the slider.

However, as I did I realized that the zoom slider was laid out in reverse with zoom in towards the bottom and zoom out towards the top.

That felt counterintuitive to me, although, on reflection I'm not sure I can say why.

In fact, I can see an argument for putting zoom in at the bottom, signifying that you're getting closer to the earth, and zoom out at the top, representing going further and further up into the sky.

However, for me at least, it feels more natural for zoom in to be at the top (and be damned with logic).

A 'Zoom In' Convention?

Indeed, I could swear that the other major mapping sites had zoom in at the top of their sliders.

If this was a design convention as I thought, would it be a good idea for MSN break it, even if they felt they had valid reasons to do so?

So, I had a look at the other sites to test my hypothesis. Here's what I found:

Zoom sliders for major mapping sites

Mapquest, Google and Yahoo! have zoom in towards the top of their sliders (although it's interesting to note that Yahoo!'s new mapping service turns the tables on its predecessor and puts zoom in at the bottom).

With a 3:2 split, there's certainly not a convention towards having zoom in at the top. In any case, I suspect that the sample size is a little too small to make any generalizations. However, I'd love to know why Yahoo! changed their minds.

Does it Matter?

So, does it matter whether zoom in is towards the top or bottom? That's a good question. It mattered to me, because I almost clicked on the wrong button.

Do I represent the majority of users? I've no idea. If anyone cares to comment, I suspect that there will be a similar split in the responses.

Here's a thought: I wonder if there are ethnographic preferences towards zoom in being at the top or bottom?

If there are, perhaps it would be a good idea for the mapping sites to add some degree of personalization to their services – now there's a way to differentiate yourself from your competitors.

Interestingly, Windows Live Local avoids the whole issue by using a horizontal slider:

Windows Live Local zoom slider

Personally, I prefer a vertical orientation, but it may well be that there is no overall user consensus as to whether the slider should go up-down or side-to-side.

Sidenote: thinking of a succinct, descriptive title for this post was an absolute nightmare. If you think my final choice is crap, you should have seen what I discarded.

Posted on: June 11, 2006 | 11 Comments

11 Comments Posted

If you think of the zoom as a metaphore of an actual bird or satelite then the closer you get to the ground the larger things get. This would imply that zoomed in is toward the bottom of the screen.

That said you're also making things larger and taller as you zoom. This may be why + along the top sometimes feels right as well.

1. Posted by Greg on June 12, 2006

This one seems pretty straightforward to me. The answer is do it like you would fly a plane that is, after all, why maps help, to give us a plane or birds-eye view of things.

So I would say 'up' would equate to pulling back on the flight stick going skywards. And 'down' to pushing the flight stick foward and descending to the ground.

2. Posted by Brad Garland on June 12, 2006

Like you, I naturally associate the top of the slider with zoom in, although I can't explain why either. (I'm guessing it might be due to my use of Google Maps.)

So I find it confusing that at work, we do it "backwards". But I agree with the other commenters that there are some good analogies to associate down with zoom in.

3. Posted by Richard Davies on June 12, 2006

Greg and Brad - I agree that it seems more logical to have zoom in at the bottom for the reasons you've stated.

In that case, why do Richard and I feel that having zoom in at the top is more intuitive?

What would you design for – what is logically correct or the way that your users think it should work? What do you do if your user-base is pretty evenly split?

Interestingly, I just polled 5 people in my office and they all expected zoom in to be at the top. So much for logic!

4. Posted by Christian Watson on June 12, 2006

I would expect the top area to be where the zoom feature would be but maybe thats because I use mapquest alot. I am the type of person that looks for the + or - indicator and therefore for me it probably does not matter how it is setup.

5. Posted by Dave Majher on June 12, 2006

I think the rationale is that since it is a magnification bar, "higher magnification" should be on the high end and "lower magnification" should be on the low end.

As for preference, I think I'm just used to the Google and Mapquest conventions.

6. Posted by Tim McCormack on June 12, 2006

Tim, I like your analogy. I was looking for a good one to justify why my brain likes clicking on the top to zoom in closer.

7. Posted by Tom Watson on June 12, 2006

Tim - thanks for the analogy; I was sure someone could come up with one! By the way, I asked another three people and they all plumped for zoom in at the top.

Which begs the question: if this is turning out to be such a user expectation, why would Yahoo! do the reverse with their new mapping service?

That decision doesn't seem to make any sense, especially given how focused on UI design their designers appear to be.

8. Posted by Christian Watson on June 12, 2006

In this case, I think intuition is a matter of training. If you start using one particular site for your maps, you train yourself to think of it in that way. Re the airplane analogy, this clearly made sense to Greg b/c he probably has earlier experience flying. I've never seen the inside of a cockpit or played a simulation so that analogy has no meaning to me. For some reason, I think of the slider bar going into the screen (3-D) and the higher you go, the closer to the image you get.

It's like the MS Windows interface, everything is intuitive after you've used it for six months. =)

9. Posted by Brian B on June 13, 2006

Brian - I think there is definitely some 'first mover advantage' at play where you get used to the interface of the site you first use or use the most.

I recall a stat saying that MapQuest still had 40% of the market (or more) and so it's not surprising that the people I asked expected the zoom slider to follow their design.

As a designer, I just wonder why anyone else would stray from this convention?

10. Posted by Christian Watson on June 13, 2006

if the image is in a vertical position, i like the style you propose.

11. Posted by sergio on June 15, 2006