Comment visualiser la possibilité de drag'n'drop?
Mon application Web contient une liste d'éléments, qui peuvent être triés par glisser-déposer. Comment cette fonctionnalité doit-elle être représentée visuellement aux utilisateurs?
J'ai utilisé une petite texture "saisissable" sur des trucs pour montrer qu'ils peuvent être déplacés. Voici la texture de Gmail:
Il y a quelques années, j'ai vu une présentation de Sean Kane de Netflix , dans laquelle il décrivait le fonctionnement de la file d'attente DVD. Vous devriez l'étudier si vous le pouvez (si vous avez un compte ou connaissez quelqu'un qui en a un).
Quelques points à noter:
Il a dit que le curseur de déplacement par défaut ne testait pas très bien, alors ils sont passés à un curseur de saisie , comme suggéré par GoodEnough .
Le glisser-déposer est une amélioration progressive. Vous pouvez toujours trier en remplissant les zones de texte dans la colonne d'ordre de la liste. De nombreux utilisateurs ne remarquent jamais que la fonction glisser-déposer est disponible.
Il n'y a pas de poignée de glissement. Vous pouvez démarrer le glissement avec la souris n'importe où dans la ligne (sauf là où un autre objet, tel qu'un lien, est au premier plan) .
Il y a une icône standard de trois lignes horizontales l'une sur l'autre qui implique que les éléments peuvent être glissés et déposés.
Cela implique une "friction" ou une "poignée" et est un peu similaire aux lignes diagonales dans le coin inférieur droit des fenêtres ou des zones de texte qui permettent de les redimensionner.
Le curseur de déplacement est couramment utilisé avec les éléments déplaçables dans les applications Web.
css:
cursor:move;
Je vous suggère d'utiliser la petite main de préhension (ouverte en vol stationnaire, fermée en faisant glisser). Ayez une sorte d'icône de préhension (une poignée) qui ressemble à quelque chose qui peut être saisi (dans Gmail, c'est une paire de colonnes de points (4 points par colonne).
Je suggérerais également que vous ajoutiez une petite animation montrant le comportement aux nouveaux utilisateurs (ou aux utilisateurs existants s'il s'agit d'une nouvelle fonctionnalité), mais n'affichez pas constamment l'animation chaque fois qu'un utilisateur est dans votre application.
Le glissement est un glissement. Après avoir récemment terminé la refonte de quelques interfaces utilisateur par glisser-déposer, je suis en fait arrivé à la conclusion que la prochaine fois, je les changerai en une sorte de "cliquer-déposer". Ayez un widget sur chaque élément sur lequel vous cliquez pour le sélectionner pour le déplacer. Ensuite, vous cliquez où vous voulez qu'il aille. Jusqu'à présent, cela semble bien se passer dans les tests.
Lorsque vous déplacez le curseur sur des objets déplaçables, il doit être changé en main ouverte. Lorsqu'un objet est saisi, il doit être changé en une main saisissante. Lors de la saisie d'un objet, les zones de dépôt autorisées peuvent être accentuées depuis l'autre arrière-plan (c'est-à-dire par l'ombrage ou la coloration).
Le symbole Whirlpool universel peut être?.
L'application de bureau avec laquelle je travaille permet de faire glisser des fichiers en dehors d'applications. Certaines applications qui permettent le glisser-déposer ont généralement une zone de dépôt ou un volet de contenu; comme une liste de lecture dans un lecteur de musique. La convivialité du glisser-déposer est une divulgation progressive, mais certains utilisateurs n'y arriveront jamais intuitivement. Dans de tels cas, le mieux que je puisse penser de la publicité dans la zone de dépôt est d'avoir un arrière-plan de symbole de tourbillon.
J'arrive moi-même à ce problème avec une application de bureau. La meilleure solution que je peux trouver pour le moment est d'avoir une flèche au survol, qui pointe simplement vers où l'objet peut être glissé, avec du texte disant glisser-déposer, ou similaire.