I come to you with a dilemma that I think is most closely identified with 'user experience.' I'm wireframing a web application, yet this "free form" user area has posed a few interesting challenges.
My apologies for such a long question.
The "free form" user area is an empty canvas, where users can create "nodes." The nodes created however, should not be allowed to overlap... which begs the question: How will prohibited overlaps affect the UX of node creation, and what methods are best?
. . .
Edit: Single click 'n drag is already tied to dragging the
canvas (think google maps,) so the closest available command is a "long click".
double click method, and problem:
My initial idea was to have a
double click event trigger the node creation (Fig 1.) The problem I see with this method is outlined above (Fig 2)--without some form of restriction, the user would be able to
double click close to preexisting nodes... thus illustrating the problem with this approach.
. . .
drag 'n drop method:
An alternative method I thought of, would be to have a
source node in the toolbar (not pictured.) The user would grab this
source node from the toolbar, and drag it onto the
canvas--allowing for a color change when the node was being held in an invalid position.
The problem with this approach is a reduction in UX value--dragging from the toolbar every time you want to create a node seems unrefined... so I merged the two:
Doubleclick 'n drop:
As much as I like this approach, I'm still not confident I'm accounting for all the factors; I'm a little hesitant to pull the trigger in any one direction.
I'm wondering if it's just best to develop 2 or 3 different interfaces, and split test them... does anyone have any ideas for how to handle the prohibited behavior, and more specifically, what approach (especially ones I haven't described here) will maintain the best UX?
Notes: The user will be creating numerous nodes (upwards of 20 per page,) and editing/moving them frequently; this page is the heart of the application.