I am trying to develop a graph which has both zooming and panning features. I am using flot chart library (which is irrelevant for this question). What I want to know is: What would be the best way to let the users know the graph has both zooming and panning feature?

I thought about adding this icon:

4-way drag arrows icon

...but it only provides the message that it does panning, not the zoom option.

Example: http://www.flotcharts.org/flot/examples/navigate/

Any suggestions, guys?


Here are a few ways you can hint at this functionality:

  1. Provide an alternative method for zooming in and out via buttons - it looks like flotchart provides this functionality. By seeing the zoom in and zoom out buttons, users may simply try to pinch because that functionality is commonly associated with zooming.

  2. Same idea as above, provide an alternative method for panning (button arrows on the sides?).

  3. The icon route works better for panning than it does for zooming, as you identified, but even then - there's no "cursor" on a touch screen, so where would you put that icon? In the corner? Would it be non-functional? I wouldn't advise this route.

  4. This last suggestion can be combined with all of them: Simply tell your users in the form of a "Hint" or "Tip" that you can pan and zoom by swiping and pinching. Ideally you would show this as part of a onboarding/tutorial process, or have the hint/tip disappear after you've detected that users are taking advantage of that functionality.

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.