How to avoid hiding the region of interest with the finger?

Question

Let's say you have an element, for example a pair of glasses, that you want to put over an existing element on the canvas, a face. This needs to be done with precision. (In this example I could cheat and snap the moving element on a predefined location when it's close, but I'm looking for a more general solution).

However when I go with such an approach due to the small size of the elements being used (they are the size of a finger tip),my fingers would hide the content or the element on the canvas making it hard for the user to place the secondary content on top of this.

Is there a better way to handle this issue where you are dealing with small elements on a touch screen device which can be manipulated around

What about this: The selected element (glasses) is on a layer (infinite and transparent), and that layer can be moved from anywhere on the screen, with a two finger drag (swipe ?). There would be no need to aim for anything, and it is guaranteed that you are never hiding anything either because you can just reposition your fingers before it happens.

Answer 1

Have a "stick", pop it up!

on touch, substract about a thumbful (let's say, 40 px) from the y coordinate of the selected icon, and draw a line of that length from the middle of the icon downwards. Use this as a handle.

Google Maps uses a similar technique for moving (dragging) markers:

Answer 2

The obvious solution that comes to mind is to emulate the text selection "loupe" mechanic that each major platform now uses.

In it, the user presses and holds until a zoomed up version of what's under the finger is shown offset from the finger itself (usually above it). Then the user can see what they're doing while still manipulating the object itself.

It isn't a great idea to design any system for touch screens to require "precision"—the accuracy of a finger (or lack thereof) can make it very frustrating trying to make fine movements (even the built-in text selection mechanic I describe above drives me absolutely nuts sometimes).

As you mention, snapping elements to the "correct" position is a very helpful thing to so, even though it means losing a fully generic solution.

Answer 3

There are actually two different ways you can solve this. One is to keep zooming until your finger have the right size and you can position the finger where you want to press.

Another technique is to use navigation arrows down the left hand side, as this screenshot from a Fifa game on iPad.

Answer 4

Duplicate the element and canvas. Have the elements move in sync, so it doesn't matter if which version you click on, the other moves relative to the canvas as well. Then you can get the element as precise as you want, without having your finger obscure it. And if both elements can be moved, then you depending on how you are holding the device, you can use whichever hand you want to move it, without your handing obscuring the duplicate as well.