[Ask YC] Icon suggestions for 1 button Zoom / Unzoom

3 pointsculley17y ago3 comments

I need to add a button to my site that will toggle a series of graphs from zoomed in to zoomed out. Some users will want to see all the sparklines against the same range. Some users will want to see each sparkline zoomed to it's own range.

sometimes you want to compare each graph against the others. sometimes you want to look at the detailed trend in one graph.

I only have room for 1 button in the design (in the top left corner of the grid).

I'm having a hard time coming up with a button that makes it clear that it will change the zoom / unzoom the graphs and show the current status of the zoom.

all the designs I've seen use 2 buttons (small / large magnifying glass, close / far mountains).

Anyone have any good ideas on how to do this with only 1 button?

3 comments

3 comments · 2 top-level

noodle17y ago· 1 in thread

i'm not sure if i understand completely.

if the functionality is a simple toggle, like, click to zoom in, click again to zoom back out, then use a CSS sprite (or something similar) to toggle the icon between a zoom icon with a plus and zoom icon with a minus (so that the image will remain mostly the same and therefore not confusing).

if its something else, either do something more complex to toggle the icon between a variety of icons, all of which being similar. if you're looking for just a single icon, perhaps a simple magnifying glass without any other decoration.

jacobbijani17y ago

Yeah, you need to either explain the actual functionality you expect to have behind the button or figure that out first. You need to figure out if zooming in and back out again is actually possible with the same element before figuring out how to iconify it.

And if you go for just a toggle, then I agree your best bet is to simply toggle the button along with the state change.

lacker17y ago

In general, if there is some functionality other web sites don't have, there is no icon that will make this new functionality clear to a user.

If clicking a button will make it zoom in, use the standard magnifying-glass-with-a-plus. If clicking a button will make it zoom out, use the standard magnifying-glass-with-a-minus. If clicking a button will open some other weird zoom mode then it is guaranteed not to be clear. Might as well just use a magnifying glass with no text then to imply it's zoom-related.

I wouldn't be surprised if the best design is just to find space for an extra button somehow, and use the 2-button-zoom that is so standard.

j / k navigate · click thread line to collapse