UX par glisser-déposer : signifiants, commentaires et alternatives accessibles
Comment concevoir le glisser-déposer que les utilisateurs peuvent découvrir et utiliser : saisir des signifiants, soulever et prévisualiser les commentaires, les zones de dépôt, la physique et l'alternative sans glisser requise par WCAG 2.2.
À retenir
Rendre les éléments déplaçables évidents avec une poignée de saisie ou un changement de curseur, confirmer la saisie avec un ascenseur et une ombre, prévisualiser le résultat tout en faisant glisser en mettant en surbrillance les zones de dépôt et régler clairement l'élément lorsqu'il est déposé, avec annulation. Fournissez toujours un moyen non traînant de faire la même chose ; WCAG 2.2 l'exige au niveau AA.
Des retours à chaque étape
L'orientation de Nielsen Norman Group est que des signifiants clairs et des commentaires clairs à chaque étape rendent le glisser-déposer visible et facile à utiliser. Une fois qu'un objet est saisi, les gens doivent savoir qu'il a été saisi et voir ce qui se passera avant de le laisser tomber.
- Signifiant : une icône de poignée de saisie, un curseur de saisie en survol, ou les deux.
- Saisi : soulevez l'objet avec une ombre et une légère échelle pour qu'il semble tenu.
- Aperçu : mettez en surbrillance les zones de dépôt valides et indiquez où l'objet atterrira.
- Abandonné : animez l'élément en place et proposez l'annulation.
Accessibilité : toujours proposer une autre voie
Le critère de réussite 2.5.7 de WCAG 2.2, Mouvements de glissement (niveau AA), exige que tout ce qui est effectué par glisser puisse également être effectué avec un seul pointeur sans glisser, à moins que le glisser ne soit essentiel. Les alternatives courantes sont les boutons de déplacement vers le haut et vers le bas, un menu « Déplacer vers » ou la prise en charge du clavier avec les touches fléchées. NN/g note également qu'une alternative précise aide souvent tout le monde, par exemple en faisant glisser grossièrement et en poussant avec les touches fléchées.
La physique donne l’impression que le glissement est direct
Les éléments déplacés doivent suivre le pointeur sans décalage. Lorsqu'il est relâché, un ressort qui transporte la vitesse de libération dans le réglage donne une sensation physique à la goutte, et d'autres éléments s'écartant en douceur montrent où se trouve l'écart. Gardez ces mouvements courts et réduisez-les lorsque la réduction des mouvements est activée.
Toucher les détails
Sur les écrans tactiles, distinguez un glissement d'un défilement, souvent en appuyant longuement pour reprendre. Créez des poignées suffisamment grandes pour être frappées, faites défiler automatiquement les listes lorsque vous les faites glisser près du bord et donnez un retour haptique lors de la prise en charge et du dépôt là où la plate-forme le prend en charge.
Principes clés à retenir
- Afficher ce qui peut être déplacé avec des poignées ou des changements de curseur
- Confirmez la saisie et prévisualisez le dépôt
- Réglez avec un mouvement clair et proposez l'annulation
- WCAG 2.5.7 (AA) : offre une alternative sans glisser
- Utilisez des ressorts pour une libération naturelle ; réduire pour réduire les mouvements
Questions fréquentes
Sources
- Drag–and–Drop: How to Design for Ease of Use — Nielsen Norman Group
- Understanding SC 2.5.7: Dragging Movements — W3C WAI