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'm working on a GIS web app where a user can draw a polygon on a map (a Microsoft map) to define a region. The vertices are placed by right clicking on the map placing vertices at each click and when the user right clicks the first vertex it completes the polygon. After that a user can right click an edge to add a vertex on that edge. At any time, a user can left click to drag the existing vertices around the map. My only remaining hurdle is a way to allow the user to remove vertices from the polygon in a way that makes sense.

In our map application, we don't use info boxes or other map pop ups anywhere else, so doing so here seems a little uncharacteristic for the webapp as a whole. All of our controls are in dialogs that are free floating and not attached to locations on the maps.

share|improve this question
If it's a web app, have you considered that right click causes problems with touch interfaces? –  dhmholley Aug 2 '12 at 11:13
We have a dedicated mobile site that we'll bring this code to. In that site, we can use touch oriented events to better accommodation the platform. –  Corey Ogburn Aug 2 '12 at 13:34
How frequent is the act of deleting a vertex? Could you click to select the vertex, then use the delete key/backspace key to remove it? –  drawtheweb Aug 3 '12 at 12:05
The polygon as a whole defines a region on a map that trigger notifications when GPS enabled vehicles enter or leave that polygon. In application, my understanding is that once a polygon is created, it's unaltered for long periods of time. Deleting a vertex may be frequent during creation, but all editing is rare once the user settles. –  Corey Ogburn Aug 3 '12 at 13:48

5 Answers 5

I'd question the use of using the right-click for actually adding content. If you look at most vector based drawing tools, the left click is always the primary action, right click being the secondary and/or contextual menu.

In this case, I'd say left click should add a new vertices, unless you are already clicking on an existing node, in which case it will move said node.

To remove a node, I'd suggest either a) adding remove node as a right-click contextual menu option and/or b) having a separate tool for removing a node.

share|improve this answer
We avoided left click because the user can still drag and map around while constructing the polygon. –  Corey Ogburn Aug 1 '12 at 18:42
drag and drop the map* –  Corey Ogburn Aug 1 '12 at 18:47
Seems like you are trying to combine a lot of tools into one. That can get tricky, obviously. I'd lean towards using separate tools (one for dragging the map, one for adding vertices, one for removing them) and then maybe use keyboard modifiers or the contextual menu as shortcuts for power users. –  DA01 Aug 1 '12 at 22:51
Instead of making the user explicitly switch to dragging the map while making a polygon, you can automatically slew the map at a reasonable rate when the mouse reaches the edge whenever in polygon-draw mode. This is a common technique in graphics applications, and similar to what's done with drag and drop in many apps. –  Michael Zuschlag Aug 2 '12 at 12:52

As a user, I think it would be a natural where:

moving a vertex to a point on a straight line between the two neighboring vertices should be enough, as that makes the vertex in question redundant or 'deleted'.

share|improve this answer

If the user can drag vertices around the map, then one way to get rid of a vertex is to drag it on top of an adjacent one. While that's being done, the connecting line reduces to zero length and landing one vertex on top of another to merge them is the logical conclusion.

share|improve this answer
That would be good if the vertices do not have any attached information, and dragging from the middle of a line creates a new vertex. It's less than ideal if vertices hold information and a user might want to place vertices close together. –  supercat Jan 16 at 22:26

Make each vertex selectable and have a Delete menu item, perhaps along with the delete key as an accelerator. If you need to distinguish selecting a vertex from selecting the whole polygon, then either have a separate visible "handle" for selecting the whole polygon or have a separate tool for polygon and vertex actions.

The selection-menu syntax allows better discoverability than your current design, so you may want to do the same for adding a vertex (user selects a side then clicks "Add Vertex"). It also allows easier scaling to additional commands you may want now or in the future (e.g., toggle a side between straight and curved, get coordinates of vertex to move it to a precise geographic position).

share|improve this answer

You could look at editing "modes" - Add mode, where clicking creates a new vertex, and delete mode, where clicking removes vertices. This lets you keep the clicking basic and uncomplex without menus. I'd suggest you also implement an undo, for both adding and deleting vertices.

share|improve this answer

Your Answer


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.