User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I just released a web app that basically lets you create notes and connect them:

However, a bunch of users have had issues creating connections. I'm not exactly sure what problems they're having, mostly they just say they "couldn't."

At the moment, my app supports two ways of creating connections:

  1. click on the border, then clicking on another note
  2. click & drag from the border to another note

Is there a more intuitive way creating connections could work? Or that I could present it in the tutorial?

share|improve this question
up vote 2 down vote accepted

Use an toolbar which have shapes and connections. I think you need to research more for getting better ideas, here are few links for inspiration.

Lucid Charts :

Cacoo :

Gliffy : :

Note : I was not comfortable using your UI, pls do rethink it. By the way I like the way of deleting Notes :-)

share|improve this answer
Thanks! I'm going to try the anchor points. – kristina Oct 12 '12 at 2:03

I didn't figure out how to make a connection between notes until I read your answer either.

One issue with (particularly) your second interaction option (dragging from the border of a note to another note) is that you also have a "resize horizontally" behaviour attached to the right edge of a note. That means I perceive the dynamic border that you show as existing for that purpose. Even once I've figured out that I can drag lines from that space, it also reduces the width of the target area that doesn't resize the note. Lastly, since the resize behaviour uses a different cursor, when the cursor doesn't change between the border and content I assume that there's no hidden behaviour.

In terms of fixing this, I'd implement anchors whose sole purpose is to allow me to drag a connection between elements. These anchors could be hidden until a note is focused or a connection is dragged near it. OmniGraffle calls these "magnets" and presents them like so (notice that the selected node—Publish article—shows all four of its magnets, but as the cursor is dragged toward the Editing article node its closest magnet is shown dynamically):

A screenshot from OmniGraffle 5 showings its "magnet" behaviour
Image from Getting Started with OmniGraffle 5

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.