Typically, most applications let you zoom in to a document. This is often expressed as a percentage (100%, 200%, 800%, etc...), or as a multiplier (x1, x2, x8). Sometimes they let you zoom in or out. In those situations, you might display a zoom out as 50%, 25%, and so on (MSPaint for example, uses the percentage for display, out to 12.5%).

But my "document" starts zoomed in at 100%, and you can't zoom in any further, only zoom out from there. So the document is always 100% or less, zoomed in.

Some ways of describing these values are:

100%  50%   25%   12.5%   6.25%
1/1   1/2   1/4   1/8     1/16
1.0   0.5   0.25  0.125   0.0625

I feel that these are unintuitive, and would like a "friendlier" way to display zoom values to users. I already have a slider bar, and buttons with a text display next to it:

Zoom widget

Part of my issue is that I 'feel' (there goes that word again) that the slider should start at the far left as the default, and increase to the right. But 'increasing' in this context means zooming out, when other applications zoom in when the slider goes to the right.

I'd really like a way to display the textual information in a more user-friendly way (by that, I mean without decimal or fractional values), and in a way where a positive number implies (or is at least 'acceptable for') zooming out instead of in.

One way of doing it is just to have a zoom 'level', instead of an actual measurement. The zoom goes 1,2,3,4,5,6 or whatever, even though the zoom amount might be some odd value like 0.33%.

What are some other options of expressing zoomed-out values textually?

For context, the application is a videogame 2D tile-based map editor, and you're zooming out the map to get a greater look at the entire map or to edit on a larger scale. You never zoom in more than 1:1 (where one game pixel equals one screen pixel).


It may be worth reconsidering displaying any zoom text at all. This is how twitter deals with zooming:

Twitter zoom bar

The question I would ask is whether or not displaying text is redundant/necessary. Does the user need to know the zoom percentage? Is this game going to be available for mobile devices as well? If so adding that extra text field is going to reduce the total slider width which will mean you'll have a lower zoom sensitivity.

If it is a requirement to show the percentage/ratio text I would stick to percentage as it is a clear metric most everyone understands.

  • 1
    Excellent points. I think I'll go with no text, and might also switch to more stylized "large" vs "small" icons instead of plus/minus icons. – Jamin Grey Jan 6 '14 at 22:02
  • I can't find the twitter example; when you click on the buttons on the side of the twitter zoom slider, does it snap the slider to the minimum or maximum, or does it move the slider one step towards the minimum/maximum? – Jamin Grey Jan 6 '14 at 23:57
  • To find the twitter example: 1. Go to the "Me" section when logged in 2. Click "Edit profile" 3. Click on your avatar or background image 4. Click "Upload photo" At that point you can resize the photo you upload. – circuitry Jan 7 '14 at 1:09
  • 1
    @Jamin, in twitter's case clicking the photo image on either side does nothing, it just acts as a label. My intuition is that if they wanted you to click the photo they would change the color from grey to blue to indicate the action. If you wanted to make those icons clickable however it could be nice to have a single button press which could zoom the map all the way in/out. – circuitry Jan 7 '14 at 1:17
  • Thanks, I thought they might've just been labels. My icons also highlights blue on hover. I tried it where clicking the icons jumps to the end of the slider, but it felt unintuitive after a lifetime of +/- buttons being at the sides, so I changed it to 'step' in the right direction instead, which felt butter. If I wanted to make it jump to one end or the other, it seems like double-clicking the icons might be a better way of implementing that - but since my sliders only have a few zoom levels anyway, I don't think I'll bother. – Jamin Grey Jan 7 '14 at 1:59

Google Maps used to have a slider like...


download bmml source – Wireframes created with Balsamiq Mockups

..but now just uses a plus and minus button...


download bmml source

...in part because most zooming is done by scrollwheel on a computer or pinching on touch devices.

I agree with Circuitry that the zoom numbers (either % or multiplier) aren't really needed ... unless there's chance that a user cannot guess what the relative zoom level is a glance - such as looking at a fractal.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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