Le drag and drop, ou « glisser-déposer », est une fonctionnalité permettant de sélectionner un document et de le déplacer à un autre emplacement. Cette action consiste à maintenir le bouton de la souris sur l’objet à déplacer, à faire glisser le pointeur jusqu’à l’emplacement souhaité, puis à relâcher le bouton pour déposer l’élément.
Pour déposer un élément à un endroit précis, il faut identifier clairement l’objet déplaçable, matérialiser la zone de réception, accepter le dépôt uniquement lorsque le pointeur se trouve au-dessus de cette zone et fournir un retour visuel pendant toute l’interaction. Sur une interface tactile, la souris est remplacée par le doigt, mais le principe reste identique.
Qu’est-ce que le drag and drop ?
Le Drag and Drop est une technique qui permet de déplacer un élément d’une application à une autre dans une interface graphique. Il peut s’agir d’un élément graphique, d’un texte, un d’un fichier.
Cette action de base peut être réalisée soit à la souris par clic sur le bouton gauche sur l’objet à déplacer et relâchement sur l’application destination, soit simplement avec le doigt sur les interfaces tactiles. La simplicité du geste a fait du « Drag and Drop » un élément-clé de l’ergonomie des interfaces utilisateur modernes.
Le drag and drop, qui signifie Glisser/Déposer, est une fonctionnalité permettant de sélectionner un document et de le déplacer à un autre emplacement. Cette fonctionnalité est disponible sur ordinateurs, tablettes et mobiles. Le but est de faciliter les actions des utilisateurs sur différentes interfaces de navigation.
Pourquoi déposer un élément à un endroit précis ?
Un dépôt précis ne consiste pas seulement à déplacer visuellement un élément : l’interface doit indiquer où l’élément peut être placé et ce qui se produira lorsqu’il sera relâché. Le glisser-déposer s’appuie sur la métaphore de l’interaction dans le monde réel, ce qui le rend ludique, pratique et facile à mémoriser.
Il est cependant parfois difficile d’indiquer la possibilité du drag and drop. Un bon guidage est essentiel tout au long de l’interaction : l’utilisateur doit comprendre qu’un élément est déplaçable, suivre son déplacement et anticiper le résultat du dépôt.
Les usages courants du glisser-déposer
- Déplacer un document de votre bureau ou de vos fichiers dans la corbeille pour le supprimer
- Déplacer un document d’un dossier à un autre dans vos fichiers
- Déplacer une portion de texte
- Réorganiser les différents onglets d’une fenêtre en les déplaçant
- Insérer des images ou un fichier sur un site web ou une application mobile
- Déplacer des éléments vers une zone déterminée dans un diagramme
- Associer des éléments à des groupes particuliers
- Réorganiser des modules, des champs ou des blocs dans une interface
Le premier usage du « Drag and Drop » a été de pouvoir déplacer les icônes des fichiers et applications sur le bureau et déposer l’icône d’un fichier dans la corbeille du système d’exploitation, métaphore de son effacement. Il est aussi possible de déplacer l’icône vers un autre répertoire afin de le déplacer ou le copier.
Un autre usage très courant du « Drag and Drop » consiste à déplacer l’icône d’un fichier sur l’icône d’une application. Cette manipulation a pour effet de lancer l’application et d’ouvrir le fichier en question.
Le « Drag and Drop » est désormais supporté par tous les navigateurs Internet modernes. Il est ainsi possible de déplacer certains éléments d’une page HTLM, images comprises, pour les sauvegarder sur le bureau ou dans un répertoire.
Le glisser-déposer permet également de transférer des fichiers directement d’un serveur à l’autre, de déplacer des factures dans des dossiers personnalisés, d’insérer des photos dans un album ou de déposer une image à la position requise sur un plan.
Les trois étapes d’une interaction précise
1. Initier le déplacement
Avant même de concevoir l’interaction de drag and drop, il faut faire comprendre à l’utilisateur qu’il peut faire glisser des éléments. La modification du curseur est un comportement standard pour indiquer qu’une action est possible à l’endroit pointé. Cependant ce n’est pas un guidage suffisant et il est nécessaire d’ajouter d’autres indications.
Un standard s’est imposé pour indiquer le drag and drop, il consiste à matérialiser clairement la zone de réception par des pointillés (là où on glisse un élément). Faire apparaitre des instructions directement dans cette zone améliore le guidage.
- Reprendre autant que possible les standards que les utilisateurs connaissent déjà
- Proposer un tutoriel comme une vidéo de démonstration lors de la première utilisation et consultable par la suite au besoin
- Matérialiser la zone de réception avant que l’utilisateur ait débuté le glissement
- Donner des instructions directement dans la zone de réception lorsqu’elle est vide
- Dans la mesure du possible, afficher un texte d’aide en permanence pour expliquer l’interaction de drag and drop
- Afficher un retour visuel au survol de la souris pour faire comprendre que l’objet est déplaçable
- En complément du drag and drop, proposer une alternative plus conventionnelle pour réaliser l’action
La modification du curseur, une bulle d’aide ou un tutoriel peuvent signaler qu’un élément est déplaçable, mais l’interface doit également identifier la zone de réception. Une alternative plus classique est proposée par un bouton.
2. Guider le déplacement
Une fois que l’utilisateur a compris qu’il peut glisser certains objets de la page, il faut continuer de le guider tout au long de l’interaction. Il est important de donner un retour à l’utilisateur sur la prise en compte de son action de drag and drop. Il faut lui permettre de suivre le déplacement de l’objet.
Modifier l’aspect de l’emplacement de départ dès que le drag and drop commence rappelle à l’utilisateur ce qu’il est en train de manipuler. Une miniature, une transparence ou une étiquette de résumé peuvent donner une apparence particulière à l’objet déplacé.
L’interface doit aussi montrer à l’utilisateur ce qu’il peut faire ou non. Pour le drag and drop, le retour visuel doit être renforcé sur ce que l’utilisateur peut faire plutôt que sur ce qu’il ne peut pas faire.
- Modifier l’aspect de l’emplacement de départ dès que le drag and drop commence
- Donner une apparence particulière à l’objet déplacé
- Guider davantage l’utilisateur sur ce qu’il peut faire plutôt que sur ce qu’il ne peut pas faire
3. Valider le dépôt
L’action de drag and drop est finalisée par un « lâché » de l’élément dans la zone de réception. Ceci a pour conséquence de valider l’action de l’utilisateur. Il faut lui permettre d’anticiper les effets de cette validation.
Lors du drag and drop, faire ressortir la zone où l’élément peut être déposé lorsque celle-ci est survolée. Montrer dynamiquement un aperçu du résultat de l’action.
Après le drag and drop, animer la fin du déplacement pour garder le contact visuel ce qui augmente la compréhension du comportement de l’interface. Si le drag and drop consiste à dupliquer l’objet et non le déplacer de l’emplacement initial, dupliquer l’objet sur le curseur dès le début du déplacement.
Définir une zone de dépôt
La zone de dépôt est la cible sur laquelle l’élément doit être relâché. En HTML, une dropzone possède un attribut dropzone. Lors de sa déclaration il est important de savoir quels types de données vont lui être envoyés.
La dropzone peut recevoir du texte, ou des données binaires. Il est également important de prévenir l’utilisateur du comportement du dépôt. L’élément glissé peut être copié ou déplacé.
| Valeur de l’attribut dropzone | Sens |
|---|---|
| copy | L’élément glissé sur le dépôt sera copié. |
| move | L’élément glissé sur le dépôt sera déplacé. Il n’existera plus où vous l’avez pris. |
| link | Un lien vers les données de l’élément glissé sera envoyé au dépôt. |
dropzone="move"
Cet attribut ne définit pas l’action réelle du glisser-déposer. C’est à vous de définir son comportement. Théoriquement cet attribut aura une influence sur le type de curseur au survol du dépôt.
Rendre un élément déplaçable
Un élément qui possède la faculté d’être déplacé a un attribut draggable. J’affectionne la syntaxe XHTML donc je renseigne une valeur, ici true, mais en HTML ce n’est pas nécessaire.
draggable="true"
La plupart des moteurs de rendu construisent les liens ainsi que les images comme des éléments draggable. Les éléments déplaçables peuvent être des images, du texte, des fichiers ou des blocs d’interface.
Pour qu’une zone entièrement recouverte d’images puisse être déplacée comme un seul bloc, il suffit de donner la valeur « false » à l’attribut « draggable » de l’image contenue dans la div.
Les événements HTML5 Drag and Drop
HTML5 met à notre disposition sept évènements nous permettant de gérer le glisser-déposer.
| Évènement | Rôle |
|---|---|
| dragstart | Début des opérations, l’élément commence à glisser. |
| drag | Vous déplacez l’élément. Cet évènement est périodique. |
| dragend | Fin des opérations, vous avez lâché l’élément. |
| dragenter | Vous venez d’entrer dans « l’espace aérien » d’un dépôt. |
| dragover | Vous survolez un dépôt. Cet évènement est périodique. |
| dragleave | Vous venez de quitter « l’espace aérien » d’un dépôt. |
| drop | Vous avez lâché l’élément sur le dépôt. |
Tous ne sont pas indispensables. Les trois évènements dragenter, dragover, et dragleave sont par exemple utiles pour mettre en place des effets visuels.
Le début du déplacement : dragstart
L’évènement dragstart signale que l’utilisateur vient de démarrer le glisser-déposer. Il permet de modifier l’apparence de l’objet, de définir l’opération autorisée et de préciser les données transmises à la zone de dépôt.
L’évènement dragend signale que l’objet a été lâché. Il est appelé même si l’élément n’a pas été lâché sur un dépôt. Il appartient à l’application de détecter cette situation et de restaurer l’apparence initiale.
Le survol de la cible : dragenter et dragover
L’évènement dragenter est déclenché lorsque le pointeur entre dans l’espace de la zone de dépôt. Il peut modifier la couleur ou la bordure de la cible afin d’indiquer à l’utilisateur qu’il peut lâcher l’élément à cet endroit.
L’évènement dragover est périodique et se produit lorsque l’utilisateur survole la zone de dépôt. Il est particulièrement important d’écraser le comportement par défaut des navigateurs, qui consiste à refuser toutes les opérations.
Le départ de la cible : dragleave
L’évènement dragleave est déclenché lorsque l’utilisateur quitte la zone de dépôt. Il permet de supprimer le retour visuel appliqué pendant le survol et de rétablir l’apparence normale de la cible.
La validation : drop
L’évènement drop signale que l’utilisateur a lâché son objet sur le dépôt. L’application peut alors lire les données transférées, déplacer ou copier l’élément et remettre la zone de dépôt dans son état initial.
Transférer les données vers la zone précise
La source de glissement fournit les données à transférer en remplissant un objet de paquet de données qui peut contenir des formats de données standard, y compris le texte, RTF, HTML, bitmaps, de stockage ou des formats de données personnalisés.
La source indique également le type d’opérations qu’elle prend en charge : copier, déplacer ou lien. Lorsque le pointeur est relâché, la cible de déplacement traite l’ensemble de données et retourne le type d’opération qu’il effectue.
Deux possibilités peuvent être gérées dans une opération classique : les données « text/html » sont renseignées lorsqu’il s’agit d’une image, tandis que les données « text/plain » sont renseignées lorsqu’il s’agit de texte brut.
Dans certains cas, le navigateur gère lui-même les transferts de données sur les images, il n’est alors pas besoin de préciser ce qui doit être échangé sur les éléments img.
Accepter uniquement le bon élément
La cible de déplacement doit inspecter le contenu du paquet de données avant d’accepter le dépôt. Dans la plupart des cas, vérifier la présence d’un type de données est suffisant.
La cible doit définir l’opération acceptée afin que le système fournisse le retour visuel approprié à l’utilisateur. Si la cible ne retourne aucune opération acceptée, l’évènement drop ne se produit pas, même si l’utilisateur relâche le pointeur au-dessus de la cible.
Lorsqu’il existe plusieurs zones imbriquées, il faut retourner la valeur correcte de dragover, dans le cas où une cible parent pourrait substituer. Le paramètre Handled sur true empêche l’événement de propagation jusqu’au parent.
Donner un retour visuel précis
Même si presque tout le travail est réalisé par Javascript, c’est visuellement que votre glisser-déposer va faire naître des étoiles dans les yeux de vos internautes ! Il est donc important de rendre votre glisser-déposer très visuel, très ergonomique.
La rétroaction visuelle est initialement fournie par la source, mais peut être modifiée par les cibles que le pointeur survole. Elle doit montrer clairement l’opération en cours et éviter de laisser l’utilisateur dans le doute.
La traînée de l’interface utilisateur se compose de trois parties : contenu visuel, glyphe et légende. Le contenu visuel représente les données glissées. Le glyphe reflète le type d’opération acceptée par la cible. La légende est une description donnée par la cible.
- Le contenu visuel peut être l’élément déplacé, une icône standard ou une image personnalisée.
- Le glyphe peut indiquer une copie, un déplacement ou une autre opération acceptée.
- La légende peut préciser l’action qui sera effectuée dans la zone survolée.
Lorsque l’application source ne cherche pas à personnaliser la traînée de l’interface utilisateur, un instantané de l’élément déplacé peut être utilisé comme contenu visuel. L’élément initial est toujours affiché dans sa position initiale.
Améliorer l’ergonomie de la zone de réception
Maximiser la taille des zones de réception et minimiser la distance entre les éléments à déplacer et la zone de réception : d’après la loi de Fitts, l’interaction sera plus rapide donc plus facilement réalisable.
Une zone vide doit être immédiatement identifiable grâce à une bordure, des pointillés, une couleur de fond ou une instruction. Lorsqu’elle est survolée, elle doit changer d’apparence pour confirmer que le dépôt est possible.
Les changements de couleurs de fond peuvent être réalisés directement dans Javascript, en réponse aux évènements qui intéressent l’application. Une transition rend ces changements plus doux.
[draggable=true]{ cursor: move; }
[draggable=true]:hover{ box-shadow:0 0 5px green; }
[draggable=true], [dropzone]{ transition: box-shadow linear 0.2s, background-color linear 0.2s; }
Le sélecteur [draggable=true] remplace, lors du survol de l’élément, le curseur de souris par le curseur de déplacement. Un léger halo vert peut également être créé grâce à la propriété box-shadow.
Déposer un élément dans une activité H5P
Dans une activité « Drag & Drop » dans ELEA grâce à H5P, il faut créer une zone de dépôt, créer des étiquettes et associer chaque zone de dépôt avec une étiquette.
Ce fonctionnement convient aux exercices où l’utilisateur doit glisser un élément vers un emplacement déterminé. La zone de dépôt représente la destination et l’étiquette représente l’élément à associer.
Utilisez Glisser-déposer (Drag and Drop) de H5P
Drag and drop et expérience utilisateur
La simplicité du geste a fait du « Drag and Drop » un élément-clé de l’ergonomie des interfaces utilisateur modernes. Il participe pleinement à l’expérience utilisateur procurée par une tablette numérique ou une application, ce que l’on appelle l’UX.
Avec le Glisser/Déposer, chaque tâche s’effectuera plus simplement et plus rapidement, ce qui permet d’améliorer fortement l’expérience utilisateur. Cette fonctionnalité informatique est très courante sur les logiciels de conception graphique ou de création de site web.
Le drag and drop est de plus en plus fréquent sur le web. S’il est correctement mis en œuvre, il peut améliorer l’expérience utilisateur car il simule des comportements du monde physique et permet de manipuler directement les objets.
Quand préférer un bouton ou un menu ?
Avant de concevoir une interface web avec drag and drop, il faut se poser la question de sa légitimité car parfois des boutons ou des cases à cocher sont plus efficaces et explicites pour l’utilisateur.
En complément du drag and drop, proposer une alternative plus conventionnelle pour réaliser l’action : boutons, menus ou autres commandes explicites.
Le drag and drop ne doit pas être utilisé uniquement parce qu’il est à la mode. L’interface doit rester compréhensible pour les utilisateurs qui ne connaissent pas encore ce geste ou qui utilisent un dispositif ne permettant pas de le réaliser confortablement.