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.

  • 1
    I dont really understand what you are saying..
    – Mervin
    Commented Mar 11, 2013 at 19:38
  • @mervin What is under the finger can't be seen, because of the finger. Feel free to rephrase my question if you want, english is not my mother tongue.
    – alecail
    Commented Mar 11, 2013 at 19:55
  • sorry about the misunderstanding. Can you look and see if the edited question is along the lines of what you are looking for.
    – Mervin
    Commented Mar 11, 2013 at 20:12

4 Answers 4


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.

enter image description here

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

enter image description here

  • Wouldn't this prevent the user from moving the object to the bottom part of the screen ?
    – alecail
    Commented Mar 13, 2013 at 17:59
  • Good question, do you plan to put anything there? :) Perhaps you could calculate the "angle of attack" from the first few movements of the finger...
    – Aadaam
    Commented Mar 13, 2013 at 23:13
  • In the general case, yes, but I think it could also be solved by scrolling the layer accordingly when I enter a border zone.
    – alecail
    Commented Mar 14, 2013 at 8:20

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.


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.

enter image description here


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.

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.