Comment rendre évident que vous pouvez faire glisser des choses que vous ne pouvez normalement pas?

Question

Mon interface permet aux utilisateurs de déplacer des éléments qui ont généralement des positions fixes dans d'autres applications, telles que des zones de texte. Que puis-je faire pour qu'il soit évident pour l'utilisateur qu'il peut déplacer certains objets?

Les idées qui me viennent à l'esprit sont les suivantes:

• Ajoutez une bordure unique autour des objets mobiles
• Changer le curseur de la souris en une icône "saisir" lors du survol de la bordure de l'objet

Je veux que cela soit évident sans que l'utilisateur n'ait déjà l'idée qu'il peut faire glisser les choses.

Answer 1

Il n'y a aucune raison de ne pas implémenter plusieurs solutions pour de meilleurs résultats.

L'intro d'animation d'Anna Rouben est une excellente idée. Bien que je ne l'utilise pas seul.

Je le combinerais avec une icône de flèche à 4 directions (utilisée couramment pour déplacer des objets) avec éventuellement une info-bulle.

Pour les pratiques inhabituelles telles que le glissement de champs de saisie, je rendrais cela aussi évident que possible.

Answer 2

Je suis d'accord avec la réponse de ted.strauss, il existe des indicateurs d'adhérence existants. Un type plus approprié serait un motif de quare, qui ressemble à une surface adhérente comme un tapis de sol. Je pense qu'il fait un meilleur travail dans le transport du message "saisir ici" qu'une icône à trois barres et il peut également être étendu à une zone plus grande. De plus, l'icône à trois barres est maintenant plus couramment utilisée comme indicateur d'un menu ou d'une liste.

Pour indiquer que l'objet peut être déplacé librement, vous devez utiliser le curseur fléché à 4 directions au survol de la souris.

Vous pouvez voir un exemple lorsque vous déverrouillez votre barre des tâches dans Windows 7: 

Un autre peut être vu dans la dernière application Google Music pour Android: 

Et je vois plus en écrivant cette réponse;) -> 

Answer 3

Le glisser-déposer est assez difficile à communiquer.

1. Vous pouvez fournir un curseur `` main saisissante '' ou `` flèche à quatre directions '' sur le survol (mais cela ne fonctionne que si vous pouvez amener les utilisateurs à survoler en premier lieu, et en plus, mon expérience des tests utilisateur est que les curseurs ne font pas grand-chose impact de toute façon)
2. Donnez aux éléments glissables un état de survol ou faites-les `` disparaître '' de la page en ajoutant une ombre portée et en déplaçant vers la gauche et vers le haut de quelques pixels (encore une fois, dépend des utilisateurs qui survolent pour commencer)
3. Utilisez un décalque 'Bord relevé' ou 'texturé' sur la 'poignée' de l'élément à saisir, comme  ou la texture utilisée par Gmail:  (ce n'est pas universellement reconnu)
4. Mentionnez-le dans le texte d'instruction (ne fonctionnera pas car il n'est jamais lu)
5. Assurez-vous que d'autres opérations déplacent les éléments en question de manière animée, pour indiquer qu'ils sont mobiles (je ne peux pas garantir que cela fonctionnera)

Parce qu'il n'y a aucun moyen infaillible de communiquer que le glisser-déposer est possible, et pour des raisons d'accessibilité (vous ne pouvez pas faire glisser-déposer si vous avez une mauvaise vue ou des capacités motrices), vous devriez toujours soutenir une interaction alternative.

Une autre considération: si vous utilisez le glisser-déposer dans n'importe quelle partie de votre application, vous devez toujours donner aux éléments glissables un style spécifique, et ne jamais utiliser ce style pour d'autres éléments. Sinon, vous ne pourrez pas demander aux utilisateurs quels éléments peuvent et ne peuvent pas être glissés.

Answer 4

Lorsque la page/section se charge, vous pouvez afficher une animation rapide intégrée à votre contrôle d'interface utilisateur pour démontrer l'idée qu'un objet peut être déplacé.

Answer 5

Je pense qu'une grande histoire dans la récente UX est la montée de l'indicateur d'humilité, comme illustré dans quelques exemples ici. Le premier exemple est tiré de l'application iPhone de Facebook, où ce symbole est utilisé pour faire glisser entre les deux régions principales de l'application. En choisissant cette icône pour occuper environ 36 pixels de son immobilier, ils ont laissé passer la possibilité de personnaliser la fonctionnalité de l'application ou de choisir une méthode plus flashy pour représenter la transition.

Cet humble symbole de prise en main était tout simplement le choix le moins déroutant.

Le deuxième exemple est peut-être l'utilisation la plus courante du grappin, sur une barre de défilement. Et le troisième exemple est une fine ligne de séparation sur l'interface utilisateur du navigateur, un cas où il n'est pas du tout évident que l'élément peut être saisi, donc une correspondance plus étroite avec la question. En cas de doute, choisissez l'icône représentant la capacité de capture à trois lignes.

Answer 6

Idée principalement pour les interfaces mobiles: lorsque l'élément flotte au-dessus de l'autre contenu: laissez l'élément voler vers l'écran. Cela pourrait suggérer qu'il peut également "voler" en faisant glisser.

Answer 7

Google le fait avec une grille de points, vu ailleurs. Et le pointeur de la souris change.