Best way to display offset position in direct manipulation design software?

Question

I'm thinking on how to solve for an application that uses real-time positioning to project images.

It uses a beacon (same as motion capture) that is hidden and sewed into a person clothes

When the beacon is detected, a projector will point an image to a default spot which is the supposed to be a midpoint between these two LEDs.

I need to design a visual representation of the screen but with a way to allow direct manipulation of an offset position, in this case, to drag it down from that middle point to the desired offset location. I do have another panel for precise movement (X Y Z coordinates) but I would like the user to do it with direct manipulation easily. Is the representation I created well for this?

Are there other examples/innovation in those types of graphical software manipulation?. I have been trying to read and find HCI journals to read about design patterns in design software but could not find many.

Ideally, the solution can be applied for mouse + keyboard or touchscreen inputs

Answer 1

At several points, people in the HCI research community have dreamed of being able to tell you the "right" way to do something like this, but it turns out it's really hard to give general guidance, when each use case is so diverse.

There are plenty of valid designs and interactions—your use case actually feels a little novel / interesting. If you're really concerned about getting it right, the HCI literature will tell you more about how to understand the way that your users think about the problem, how to go about implementing several designs, how to get a feel for which / how many different designs to test, and how to go about testing those designs. If you really went through some/all of this process, you could probably publish a really good CHI paper.

If you're just interested in a decent solution, feel free to trust your own instincts. There are maybe some relevant precedents (e.g. drawing programs often have something like an "anchor" for cloning / rotating around a specific point), but a lot of those assume desktop interfaces and the ability to do things like Control-click. I actually really like your diagram itself—what if you initially showed the white box, and only show the green one if the user clicks/taps or drags from the white one (with maybe a little x to get rid of the offset that they created)?