Glisser-déposer sur un axe (réorganiser) - quel curseur?
Je me demandais quel curseur de survol est le meilleur choix pour faire glisser des éléments sur un seul axe, par exemple pour réorganiser les éléments entre les listes.
![cursor:move]()
curseur: déplacer ; Il a quatre flèches, donc c'est trompeur, car il n'y a qu'un seul axe disponible.![cursor:grab]()
curseur: grab ; Ce pourrait être un bon choix, mais l'est-il?![n-resize]()
curseur: n-resize ; etc. Il ressemble à curseur: déplacer mais n'a qu'un seul axe, donc ce pourrait être une bonne solution mais il est souvent utilisé (comme son nom l'indique) pour le redimensionnement.
Quel est ton opinion?
J'utiliserais le curseur de déplacement .
Le curseur doit indiquer à l'utilisateur comment il peut interagir avec l'élément.
Déplacer le curseur : indique que l'élément peut être déplacé pendant que ses frères et sœurs restent.
Curseur de capture : indique qu'un élément peut être saisi (glissé pour être déplacé). L'élément peut être saisi avec ses frères et sœurs, comme dans scrolled.
N-resize : indique qu'une limite d'élément peut être déplacée, couramment utilisée pour redimensionner. Ce curseur a probablement été utilisé comme curseur de déplacement mais pour indiquer que le mouvement n'est effectué que sur un axe. Mais pour autant que je sache, ce curseur n'indique pas le mouvement d'un élément mais de son bord.
Vous pouvez peut-être créer votre propre conception personnalisée pour le curseur ou utiliser des icônes * disponibles en ligne (banques d'images/d'icônes) et définir la propriété CSS. 'curseur: copie' peut également être envisagé.
*Les images peuvent faire l'objet de droits d'auteur.
Je pense que vous pouvez choisir le curseur approprié en traitant ces sujets:
1) L'utilisateur sait-il qu'il peut déplacer les éléments? Il est probablement mentionné dans le titre de l'action, l'instruction - mais ils sont probablement supervisés. Ainsi, le curseur de saisie/déplacement devrait faire le travail. Le redimensionnement pourrait être trompeur
2) L'utilisateur veut-il réorganiser? Cela dépend fortement de la signification des éléments à réorganiser. Ainsi, ils sont en ordre et peuvent être réorganisés (sur un axe) Je ne sais pas si l'utilisateur veut essayer de les organiser dans un ordre non linéaire. Pourquoi le ferait-il? Il n'y a pas de liste top10 avec des articles parallèles :-)
3) L'utilisateur doit-il apprendre qu'il n'y a qu'un seul axe? voir 2). Je pense que l'esprit humain/utilisateurs est assez rapide pour voir qu'il n'y a qu'un ordre linéaire et qu'il peut faire glisser et déposer les éléments dans l'ordre souhaité.
À mon avis, cela conduit à l'icône de saisie. C'est la plus intuitive pour la première action (Glisser/Saisir/Ramasser) et l'utilisateur verra rapidement quoi faire avec cela dans la deuxième action (se déplacer sur un axe)
Les icônes de saisie et de curseur de capture sont une solution, mais elles ne sont pas prises en charge par tous les navigateurs de manière cohérente.
Cependant, le curseur de déplacement est également un curseur correct pour indiquer que quelque chose peut être déplacé et est cohérent dans tous les navigateurs. Peu importe que ce curseur de déplacement affiche une croix sur 2 axes, le mouvement est contraint sur un seul axe. En effet, il existe d'autres éléments d'une interaction glisser-déposer qui doivent être utilisés pour indiquer les contraintes de mouvement.
Dans le livre de Bill Scott & Theresa Neil "Designing Web Interfaces", ils identifient jusqu'à 15 événements et au moins 6 acteurs auxquels vous devez penser:
Chapitre 2 page 27
Événements:
- Chargement de la page - avant que l'interaction ne se produise, vous pouvez pré-signifier la disponibilité du glisser-déposer.
- Survol de la souris - Le pointeur de la souris survole un objet qui peut être déplacé.
- Souris vers le bas - L'utilisateur maintient le bouton de la souris sur l'objet glissable.
- Glissé initié - Après le démarrage de la souris (généralement quelques seuils - 3 pixels).
- Le glisser quitte l'emplacement d'origine - Une fois le glisser tiré de son emplacement ou de l'objet qui le contient.
- Glisser ré-entre dans l'emplacement d'origine - Lorsque l'objet rentre dans l'emplacement d'origine.
- Glisser entre une cible valide - Glisser sur une cible de largage valide.
- Faire glisser quitte la cible valide - Faire glisser la souris hors de la cible valide.
- Glisser entre une cible invalide spécifique - Glisser sur une cible de largage invalide.
- Le glisser ne dépasse aucune cible spécifique - Glisser sur une cible non valide ou non valide. Traitez-vous toutes les zones situées en dehors des cibles valides comme non valides?
- Faites glisser la souris sur une cible valide - L'utilisateur s'arrête sur la cible valide sans la laisser tomber. Cela se produit généralement lorsqu'une cible de chute à ressort peut s'ouvrir.
- Faites glisser la souris sur une cible non valide - L'utilisateur fait une pause sur la cible non valide sans la laisser tomber. Ça t'intéresse? Voulez-vous des commentaires supplémentaires sur la raison pour laquelle il n'est pas valide?
- Drop accepté - Le drop se produit sur une cible valide et a été accepté.
- Drop rejeté - Le drop se produit sur une cible invalide et le drop a été rejeté. Faites-vous un zoom arrière sur l'objet déposé?
- Déposer sur le conteneur parent - L'endroit où l'objet a-t-il été glissé est-il spécial?. Ce n'est généralement pas le cas, mais cela peut avoir une signification particulière dans certains contextes.
Ce sont ces autres aspects de l'interaction glisser-déposer qui jouent un rôle important dans la communication de ce que vous pouvez ou ne pouvez pas faire, il ne s'agit donc pas seulement de l'icône du curseur.
Lorsque l'action consiste à "saisir" l'élément avec la souris et le bouton avant de le faire glisser vers sa nouvelle position, l'incertitude la plus importante pour l'utilisateur est de savoir s'il a effectivement "saisi" l'élément. J'utilise donc le saisir le curseur pour la qualité de son retour: pointeur jusqu'à ce que le bouton soit enfoncé, puis saisir le curseur jusqu'à ce que le bouton soit relâché.
C'est à peu près la même chose dans le monde physique: si nous voulons déplacer quelque chose de lourd, glissant ou cassable, notre plus gros problème est: avons-nous une bonne adhérence?