I am working on a lightweight multi-platform drawing application, and I'm using icons to represent each drawing tool (just as many editors do). However I am struggling to have two icons that clearly differentiate panning from moving.

The best I can come up with is a hand for panning, something like: http://thenounproject.com/term/pan/275/

And a move icon for moving an object, something like: http://thenounproject.com/term/move/2862/

However, I think the icons could easily be misconstrued, and I want something as immediately intuitive as possible.

Any ideas? Icons I haven't thought about?

  • So I get that icons can be extremely specific to a particular context, but I feel that I came across a real issue that applies to a decent number of applications - essentially any drawing application. My question is worded well, and the answer provided by AmeliaBR was relevant and useful. – vbud Aug 1 '14 at 0:54
  • vbud: Looking through the meta pages, it seems that this is a common debate on UX -- some people shutting down all icon-related questions, others emphasizing that conceptual questions are okay but specific icon requests are not. Maybe edit the question to be more clearly along the lines of "How can the difference between panning and moving be graphically represented, given that the standard icons for both are so similar?", rather than "What icons should I use?". Ping JonW (the moderator who cast the deciding close vote) with an @-comment after you've edited the question. – AmeliaBR Aug 1 '14 at 13:47

I suspect the answer to your question, "Are there distinct icons?", is no. The standard icons for the two functions overlap horribly.

But that doesn't mean you couldn't create some.

To try to come up with distinct icons, you need to step back and think of the distinctions in functionality. For move, you have an object that you are moving around within a larger space. For pan, you are moving your view of the drawing space.

So my suggestion is that to represent move, you clearly integrate an object in the icon and have the arrows radiating from it. You might want to connect the representation of that object with whatever you're using to represent the active/selected element in the drawing. For example, if you use a "marching ants" dotted line to represent the selection, you would have a dotted-line shape like the one below. If the objects are more likely to be photos, try an icon that represents that.

Sample move icon, as described in text

For a pan icon, you need to express the "view" aspect. You could maybe try to incorporate a glasses/binocular icon plus the arrows, or you could focus on displaying the fact that the current view is a limited portion of a larger image. In the mock-up below I'm working on the idea of a frame showing the focus area, with the frame slightly blurred to emphasize "focus". I'm not convinced it is as intuitive as one would prefer, but it is sufficiently different from the move icon that they are unlikely to be confused for each other.

Sample pan icon, as described in text

  • I like where you are going with this. Moving the canvas vs moving an element. If I can successfully show the difference between the canvas and a selected element, coupled with using different arrow styles (as you did in your answer), I think I'll be on the path to success. I'll play with some options and post here with what I come up with. – vbud Aug 1 '14 at 0:48

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