Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I have an SVG on top of which there are some circles. The following are the actions that can be performed:

  • Single-click + Hold on top of canvas and then move mouse to pan the canvas
  • Double-click to increase zoom level
  • Mouse wheel to increase/decrease zoom level

Can someone tell me what is the most concise yet graphical way of representing these actions? Are there any icon sets that I can leverage?

share|improve this question

3 Answers 3

up vote 1 down vote accepted

These are common expert shortcuts in many apps, so experienced users are likely to discover them on their own. However, they should still be considered expert shortcuts, so you should have explicit controls for each of these actions as well (e.g., a zoom slider or dropdown, and scrollbars on margins).

Given you need these controls anyway, static or transitory text at these controls could be used to educate non-expert users on the shortcuts. This is similar to showing the icons and accelerator keys in menu item captions. For example, after zooming in with a slider, a notification could temporarily appear next to the slider saying something like “Double-clicking drawing also zooms in.” Because panning and zoom are often repeated, such text provides hints to the user at the time and place they need it. To reduce clutter, distraction, and possible annoyance, you may need to allow the user to suppress such notifications, or maybe they disappear on their own after a few presentations.

share|improve this answer

you could have a random tip box near the canvas that cycled through different messages on each page load.

tho those controls seem pretty Intuitive as that is how google maps does it.

share|improve this answer

As aaron pointed out this design pattern is already an established convention regarding interactive map elements.

Most web applications using this pattern relies on the recognition with the user of similar elements with a similar design pattern. You rarely (if ever) see any real efforts of communicating the interactive capabilities of the mouse to the user. The user is expected to try and not be afraid to do so.

In the unusual case that you would attract a user that has never seen this type of map element before there may be a problem, that is if the user is incapable of trying anything themselves. Then there's a problem. Question is though if you want to take it upon yourself to let your application school this user, and thereby also having to school all the other users who already know the expected interaction with the map.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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