2
\$\begingroup\$

In my mobile game, users drag shapes across the screen. Think of it as a classic Lines game, where you drag a dot on the field, or a chess game where you drag and drop pieces.

The problem is that the player's finger totally covers the sprite, making dragging confusing.

Is there a common practice to solve this?

My best try so far was to move the sprite to be offset from the finger when the dragging starts, then move along with the finger in the offset position until dropped.

The problem with this approach is that users might be left- or right-handed. If I offset the sprite to the top-left of the finger, dragging with the left hand covers the sprite again.

Improve this question
\$\endgroup\$
1

2 Answers 2

Reset to default
2
\$\begingroup\$

If you move elements smaller than your finger, there's something wrong with your game design.

I see several solutions to this:

  • Make your elements bigger so you can see that you hold and where you put them, possibly enabling a Zoom gesture.
  • Use another method of move, like a two tap movement mode, you tap from and to positions.
  • Constraint your moves on one axis. User can move his finger on the whole screen with the element fixed on its own axis, so there's always a way his finger doesn't cover the element.
  • Create another element for precise positioning, like a arrow, a cross or a thin line that appears when you start to drag an element.

For the right/left hand problem, people don't change their hand often, what's done most of the time is create a setting to enable or disable left handed mode, so your offset is applied on the right side instead of the left side.

Improve this answer
\$\endgroup\$
2
  • \$\begingroup\$ I ended up using two tap movement mode. This brought a lot of improved usability into the game. \$\endgroup\$
    – Maxim Zabolotskikh
    Mar 24, 2015 at 18:02
  • \$\begingroup\$ Nice to hear that. I would like to see you game when finished :) \$\endgroup\$
    – Crazyrems
    Mar 25, 2015 at 12:50
1
\$\begingroup\$

I would suggest zooming in your game screen so that the pieces are slightly larger, it's extremely frustrating when a game has a bunch of tiny pieces that are hard to see and hard to drag. However, if you don't want to do that, there's a common approach that can be used so that the item can still be seen as it is being dragged. So to Crazyrems list of suggestions I would add this:

  • Try programming the item/element to move slightly slower than the user's finger at all times. So as the user drags it, have it drag behind just a little bit. That way the user can still see where it's going, but selecting the item doesn't have to be difficult and/or confusing.

This is a slightly different suggestion then what you say you're doing. The item should drag slightly behind the finger in all directions at all times, rather than to a certain position to the left or right of your finger. That way, it doesn't matter if you're a lefty or righty, but rather which way you're dragging the item.

Improve this answer
\$\endgroup\$
2
  • \$\begingroup\$ Thx for suggestion, voted. This was (almost) my first idea, although not moving slower, but faster. This works fine in almost all directions. But since a finger is basically not a "fat dot", but a "fat line", the "line" part will still cover the shape. E.g. in your approach when moving up and left. \$\endgroup\$
    – Maxim Zabolotskikh
    Feb 26, 2015 at 14:21
  • \$\begingroup\$ Aha, I see. In that case I would suggest adding a glowing outline / trail to the item. That way the user can still see where it's going even if it's temporarily under their finger. Combine that with a slight drag, and the user likely won't have problems seeing where it is. Btw thx for upvote. \$\endgroup\$
    – Superdoggy
    Feb 26, 2015 at 15:12

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .