Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
1  
I dont really understand what you are saying.. –  Mervin Johnsingh Mar 11 '13 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. –  Antoine Lecaille Mar 11 '13 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 Johnsingh Mar 11 '13 at 20:12
    
@Mervin This sounds good, thanks. –  Antoine Lecaille Mar 11 '13 at 20:17
add comment

4 Answers

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.

share|improve this answer
add comment

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

share|improve this answer
add comment

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.

share|improve this answer
add comment

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

share|improve this answer
    
Wouldn't this prevent the user from moving the object to the bottom part of the screen ? –  Antoine Lecaille Mar 13 '13 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 Mar 13 '13 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. –  Antoine Lecaille Mar 14 '13 at 8:20
add comment

Your Answer

 
discard

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.