Le drag and drop ou glissé-déposé est une interaction de plus en plus répandue au sein des interfaces graphiques. Cette technique imaginée par le PARC (Palo Alto Research Center) s’est immiscée sur tous nos terminaux fixes et mobiles. S’inspirant du monde réel, cette interaction offre à l’utilisateur la possibilité de déplacer des éléments graphiques présents à l’écran d’un endroit à un autre.

Pratique et ludique, les actions du dragging et du dropping doivent néanmoins respecter certains principes d’utilisabilité afin de ne pas nuire à l’expérience globale de l’utilisateur. Cet article aborde les quelques règles à suivre pour les 4 phases du drag and drop : l’invitation, l’initiation, le déplacement et la validation.

Invitation à dragger l’objet

Chaque mécanisme permettant d’interagir avec une interface graphique doit être mise en évidence. L’utilisateur doit être averti de la possibilité de glisser un objet par une modification graphique de ce dernier ou par une transformation de l’aspect du curseur.

Notifier à l’utilisateur l’alternative du drag and drop.

★ Recommandations

• Mise en surbrillance de l’objet au passage du curseur,
• Modification de l’aspect du curseur lors de son passage sur un objet draggable,
• Certaines interfaces proposent un tutoriel présentant les interactions autorisées lors de la première utilisation,
• Dans la mesure du possible, informez l’utilisateur des possibilités d’interactions par une info bulle ou par des instructions directement dans la zone droppable,
• Si l’utilisateur recompose une liste d’une manière autre que le drag and drop, il est souhaitable de l’informer de l’existence de l’alternative du glissé-déposé.

Phase du dragging

L’utilisateur est maintenant clairement informé des possibilités de glissé-déposé. Il nous faut désormais le guider pas à pas durant l’interaction en lui donnant des informations sur son action de drag.

Latence du dragging

Initier le dragging que lorsque 3 ou 4 pixels ont été parcourus par le curseur permettra à l’utilisateur de voir l’action ayant permis le déplacement de l’objet. De plus, cette latence lui évitera d’accomplir un acte non souhaité.

Insérer un délai avant d’autoriser le déplacement de l’objet.

Apparence de l’objet draggé

L’utilisateur doit comprendre que son action de dragging est bien prise en compte par l’interface. Il est donc nécessaire de le lui notifier par une modification graphique de l’objet draggé.

Les options les plus courantes sont la mise en transparence de l’objet, la réduction de sa taille ou sa transformation.

Cette modification graphique de l’élément permet d’informer mais peut également faciliter son déplacement.

L’apparence de l’objet informe de l’action de dragging en cours.

Identité de l’objet

Si une modification graphique de l’élément draggé est opérée, il est indispensable d’indiquer l’identité de cet objet dans un encart dédié. Et de préférence proche de l’objet. Si l’action porte sur un groupe d’objet, une indication de leur nombre est la bienvenue. L’utilisateur est alors avisé sur ce dont il agit.

Donner une identité à l’objet draggé.

Indication graphique de la zone droppable

La zone de réception de l’objet ou drop doit être identifiée rapidement par l’utilisateur. Un standard de plus en plus commun aux interfaces graphiques est de délimiter la zone droppable à l’aide de pointillés.

Indiquer la zone de réception via un texte ou un élément graphique.

Grille de contraintes pour les déplacements d’objets

Le terme guider prend tout son sens avec cette recommandation. Suivant la configuration de la zone de drop, il est parfois utile de baliser le mouvement de l’utilisateur afin de faciliter la réussite de son action. Cela peut se traduire par la mise en place de couloirs verticaux et horizontaux contraignant les possibilités de déplacement.

Guider le déplacement des objets.

Magnétisme

La rapidité d’exécution est ce qui définit le glissé-déposé. Ne pas forcer l’utilisateur à positionner l’élément draggé de manière précise sur la zone de drop permet de fluidifier la conclusion de l’interaction. L’accomplissement de tâches répétées de drag and drop n’en sera que plus facile.

La proximité et la taille de la zone droppable est également très important. Plus la distance sera réduite entre les éléments draggés et la zone de drop, plus l’action sera réalisée facilement. C’est le principe de la loi de Fitts.

Faciliter l’arrivée de l’objet sur la cible.

Voici un exemple d’interface où l’insertion dans la zone de drop est complétée lorsque l’objet est à moins de 10 px de cette dernière.

Autorisation du drop de l’objet

Indiquez visuellement sur l’objet draggé si la zone de drop est valide ou non. Il est néanmoins plus intuitif d’informer dans un premier temps l’utilisateur sur ce qu’il peut faire plutôt que sur ce qu’il ne peut pas faire.

L’emplacement du curseur est le point de référence pour déterminer la position du drag. De cette manière, l’objet draggé n’activera pas inopinément la zone de drop.

Annoncer ce que l’on peut et ne peut pas faire.

★ Recommandations

• Insérer un laps de temps entre le clic et l’action de drag,
• Modifier l’apparence graphique de l’objet draggé,
• Identifier l’objet draggé,
• Indiquer la zone de drop,
• Guider le déplacement de l’objet,
• Faciliter le drop de l’objet dans la zone de réception en veillant à la taille et à la proximité de cette dernière. Principes de la loi de Fitts,
• Notifier à l’utilisateur les zones autorisées à recueillir des objets,
• La position du drag doit être déterminée par l’emplacement du curseur,
• Eviter le scroll de la page durant le dragging.

Phase du dropping

La zone du drop est atteinte, l’utilisateur peut ainsi exécuter le drop de l’élément. L’informer lors de cette phase est primordial pour éviter toutes frustrations.

Notification du drop

Une notification par un texte ou un changement graphique de la zone de drop aidera l’utilisateur à savoir que son action a bien été validée.

Informer de la réussite de l’action de drop.

Suppression des choix

Laissez le choix à l’utilisateur de pouvoir annuler ou modifier son action de drop. L’utilisateur doit rester maître de ses choix.

L’utilisateur doit conserver le contrôle sur chaque phase du drag and drop.

★ Recommandations

• Notifier à l’utilisateur la validation du drop,
• Permettre la suppression ou la modification de son action.

Fournir un moyen alternatif au drag and drop

Le drag and drop est un raccourci, il ne doit pas être l’unique mécanisme en place. Une barre d’outils offrant les mêmes options que le drag and drop doit être mise à disposition.

Le drag and drop n’est qu’un raccourci.

Conclusion

Le drag and drop est un formidable outil ajoutant une touche d’interactivité aux interfaces graphiques. Sa principale qualité est la rapidité d’exécution de tâches nécessitant un nombre de clics élevé. Néanmoins, il doit être perçu comme un raccourci et non comme l’unique option disponible.

Sa mise en place ne doit pas se faire dans le seul but de réaliser un drag and drop. Sa nécessité doit être clairement établie. L’objectif est de faciliter l’interaction au moyen d’un outil plus direct et rapide.

Alors attention à l’effet SWEB… pardon, l’effet de mode 🙂