0

In a Windows Desktop application, I have a diagram control which allows zooming, panning, selection of one or several items and drag and drop of elements in the diagram.

I need to decide how to couple mouse events and keyboard keys for each gesture. What I have now is:

Zooming: Mouse Wheel no modifier key
Panning: Ctrl + MouseDown + MouseMove
Multiselection: MouseDown + MouseMove on diagram pane (draws a rectangle)
Drag and Drop: MouseDown + MouseMove on elements

Plus, it is a quite important aspect that the user connects element in the diagram with each other. At the moment, this is done like this:
Click on an element -> (a button appears in each element which the selected element can be connected to) -> Click the button on the element to connect to. There is probably better ways to this, but I'm running out of gestures and modifier keys, which are intuitively to use.

Question:

As this is a more or less common scenario: What would you consider best practice? Is it possible to say that a majority of common programs has agreed on one way to do it? If no, which program would you use as a model (i.e. Acrobat Reader) and how would you add the extra functionality. If no such recommendation can be made, that is an answer to, I'll figure something out myself then.

2
  • I cannot give you the used combinations off the top of my head. But the program by which most users will have formed their expectations will be Powerpoint with its drawing shapes. And a program which "gets it right" is yEd graph editor. I don't remember how they do it exactly, but I remember the feeling of being able to use it intuitively in a way I have never felt with others, e.g. Visio. I would suggest studying both Powerpoint and yEd and using their gestures.
    – Rumi P.
    Commented Sep 17, 2013 at 10:24
  • Thanks, that's a good hint. I'll have a look at both, especially yEd. Haven't heard of it. Thank you!
    – Marc
    Commented Sep 17, 2013 at 10:47

1 Answer 1

4

Selecting, Zooming, and Panning

You pretty much have the right ideas. The Windows User Experience Interaction Guidelines provide standards for this. For example, page 437 specifies:

  • Single-left-click selects.

  • Single-right-click opens the context menu.

  • Double-click (left or right) selects and performs the default command.

  • Single-shift-click (left or right) multi-selects a range; that is, it selects everything between the current selection and where the user clicked (in a rectangle, in your case)

  • Single-ctrl-click (left or right) discretely multi-selects; that is, it selects or deselects while maintaining the selection state of anything else.

There are rational responses to ctrl and shift double click too.

Page 438 specifies that, if you have scrollbars, then:

  • Wheel alone pans vertically.

  • Ctrl-wheel-up zooms in.

  • Ctrl-wheel-down zooms out.

  • Tilting the wheel pans horizontally

(I didn’t know about the tilting thing, did you? It doesn’t seem to work with my mouse, even though it’s a relatively new one made by Microsoft. If tilting is not available to a lot of your users, you could try supplementing tilting with Shift-wheel, although you’d need to run a usability test to see which way is left and right –or if users even agree on which way is which).

In one app I use, scroll-wheel zooming zooms in on the point where the mouse is hovering, something I found to be discoverable and very convenient for quickly zeroing in on a specific part of the image. The same app uses shift-pressing of the scroll wheel to pan by dragging, which may make a nice supplement to rolling/tilting the wheel, allowing the user to pan diagonally (the app is 3-D modeler where unmodified pressing and dragging rotates the scene).

Microsoft also specifics that the accelerator keys Ctrl + and Ctrl – zoom in and out, which is probably good for accessibility. In your case, maybe un-modified cursor keys could pan when nothing is selected.

Use of accelerators and the mouse wheel should be considered expert shortcuts, which implies:

  • There is a more discoverable if less convenient way to do the same actions (e.g., with the scrollbars and menu items).

  • It’s not necessary for every user to discover and use these features, although the more that do the better.

Connecting

I don’t believe there is one standard or convention for connecting elements. Your solution isn’t bad, actually. It’s got good discoverability and it’s relatively fast. The main disadvantage I can think of is that it could add too much clutter with all those buttons appearing. What happens if two elements are so close the buttons of one occlude the other? It's also a bit "modey," but with some usability testing, I think you could get it to work acceptably.

One alternative is that instead of a button, a small “hook” (maybe even a visual hook) appears on a selected element alone, and the user drags the hook to another element to connect them. This is perhaps not as discoverable, but it is less cluttering, and it’s analogous to having “handles” to resize elements (which you may also have), so experienced users may still find it quickly. I think I've seen solutions similar to this in certain entity-relations diagramming software, and it's similar to certain types of drawing elements in MS Office (e.g., callouts).

Another option, which is commonly done, is to have a separate pointer tool for connecting. Just as you have a tool for regular selecting, and a tool for zooming (in addition to the mouse wheel), and tools for creating each element, you also have one that, by dragging from one element to another, allows the user to connect elements. This is possibly more discoverable than the option above because the user can see the tool on the tool palette. However, like any use of pointer-tools, it's a bit modey, making it harder to transition back regular selection (or make multiple connections).

As for apps to imitate, look at what your users use now. You also may want to look at MS Visio and MS Project. They're relatively commonly used (and commonly imitated) diagramming apps, so your users might expect your app to work the same way.

2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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