6

I'm working on a product customizer in which the user can drop a material directly to parts of the product. The problem is that some parts of the image are very small.

How can I solve the problem with small areas in this case, especially for touch devices?

Droppable Area

10

You could try to expand responsive zones of small draggable areas. Moving close toward those zones is clear indicator of user intentions. It brings smart behavior to your app and provide better usability, as target is increased and moving distance is decreased (Fitts's law in action).

To indicate small zones more clearly, you could also use more brighter color for them comparing to large zones color.
enter image description here

An example of similar behavior you could see on Amazon or Khanacademy smart mega menus. You could see animation there, too.

enter image description here

| improve this answer | |
4

I'm not sure I'd realise it was possible to drop a colour onto the areas you highlighted, since the target is so small I think I would imagine that trying to drop anything there is futile.

Have you considered having separate colour drop targets listed larger beside the graphic? As in provide a list of customisable sections (e.g. "Collar and cuffs", "Front and back", etc.), with the current colour for each listed alongside it in an obvious drop zone, such that users can drag their chosen colour or pattern to either the shirt directly or the label for the part, with the shirt graphic and label colour key changing simultaneously to reflect their change?

This would allow for much more apparent affordances for colour selection at all, and a better idea of what can be changed independently without sacrificing the WYSIWYG behaviour you're describing.

Mock up of the interface I was describing

| improve this answer | |
1

If you're dragging the droppable, as you drag your finger the target could "light up". There are various ways it could light up: it could be outlined, or it's color could change, or it could expand a little, or combinations of these. Note if the drop region expands, then one would need to move a little extra to move out of the expanded region. This would have a slight "locking in" effect, so minute movements wouldn't take you out of the lighted up, expanded, target. I think this would be beneficial. But you have to be careful not to expand a region so much that it completely obscures another (tiny) region, which could render that other tiny region unreachable.

If you're not dragging the droppable, that is you get in a mode in the next touch performs the drop, you could compute if the drop point is ambiguous, that is if the drop point is within distance D of more than one possible target. If the drop point is determined to be ambiguous, the region around the drop point gets magnified, allowing to re-drop it on the magnified area with less ambiguity.

| improve this answer | |
0

Google Chrome on Android solves this problem by zooming in and requiring the user to confirm their selection when the touch target is ambiguous. They call this Link Preview:

Link Preview

| improve this answer | |
-1

expand the area properly of the part to to touched. the program will compute the area in the circumstances of not touching other parts.

| improve this answer | |
  • 1
    That sounds like it might be a good idea, but it's hard to tell from your answer. Can you expand what you mean? – Alex Feinman Jan 6 '14 at 16:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.