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.<p>sometimes you want to compare each graph against the others. sometimes you want to look at the detailed trend in one graph.<p>I only have room for 1 button in the design (in the top left corner of the grid).<p>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.<p>all the designs I've seen use 2 buttons (small / large magnifying glass, close / far mountains).<p>Anyone have any good ideas on how to do this with only 1 button?
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.<p>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.<p>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.
i'm not sure if i understand completely.<p>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).<p>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.