Introduction
1. Le drag & drop doit avoir une réelle utilité, augmenter l'efficience
2. La possibilité de drag & drop doit être visible
3. La destination doit être compréhensible et visible
4. Le drag & drop doit être facile
5. Le déplacement doit être visible
6. L'effet du drag & drop doit être visible
Conclusion
Avec la présence de plus en plus marquée des interfaces riches sur le web, on observe le transfert de modes d'interaction à l'origine réservés aux systèmes d'exploitation ou au monde logiciel. C'est le cas du drag & drop (en français, glisser - déposer).
Dans ce type d'interfaces, l'utilisateur saisit un objet, puis le déplace pour l'amener à un autre endroit.
Nous présenterons dans cet article les caractéristiques du drag & drop, ses avantages et inconvénients, mais surtout comment répondre à ces derniers pour profiter des promesses de ce mode d'interaction.
Le propos de cet article est de souligner que le drag & drop ne doit être employé que s'il est utile pour l'internaute, et non parce qu'il est possible de le faire techniquement. De plus, une fois qu'il est présent, de nombreuses règles sont à appliquer pour qu'il soit utilisable.
Notre réflexion intègre des explications et exemples issus du monde logiciel ou système, dans l'optique de questionner son utilité et son utilisabilité dans des interfaces web. La limite entre ces différents mondes étant parfois très fine, il paraît essentiel de souligner la manière dont le drag & drop peut être utilisé à plus ou moins bon escient selon le contexte.
Au quotidien, nous utilisons énormément le drag and drop, sans forcément nous en rendre compte.
C'est surtout le cas dans nos systèmes d'exploitation : déplacement de fichiers d'une fenêtre à une autre, redimensionnement de colonnes, éjection d'un DVD, etc. C'est aussi le cas dans de nombreux logiciels : glisser - déposer de blocs de textes dans un traitement de texte, glisser - déposer des fichiers pour les télécharger dans un logiciel de ftp, ré-organisation des palettes dans un logiciel graphique, etc.
Si l'on revient aux basiques, déplacer des objets dans des applications de dessin vectoriel, de mise en page ou de présentation, c'est aussi effectuer une action de drag & drop.
Ce type d'interface relève fortement de la manipulation directe : on agit directement sur l'objet que l'on souhaite traiter, sans passer par un intermédiaire symbolisant l'action que l'on souhaite effectuer sur cet objet. Mayhew dit à ce propose que dans ce type de mode d'interaction, "au lieu de le dire, les utilisateurs le font, simplement" (instead of "saying it", users simply "do it", Mayhew, 1992, cf. lectures complémentaires).
Comparez par exemple une interface d'ajout de fichiers attachés dans Gmail, et la même interface dans Windows Mail :
Exemple d'attachement de fichiers dans un e-mail sous Gmail : je joins mes 3 photos 1 à 1 (à noter: une extension Firefox existe qui permet de contourner ce système).
Exemple d'attachement de fichiers dans un e-mail sous Windows Mail : je joins mes 3 photos en 1 seule action.
Il est indéniable que le drag & drop a ici de grands bénéfices, surtout dans le cadre de multi-attachements de fichiers. Son utilisation demande toutefois de modifier complètement la procédure mentale consistant à joindre un fichier : dans un cas, l'utilisateur commence par déclarer l'action qu'il souhaite effectuer, dans l'autre il commence par l'objet qu'il souhaite joindre.
Remarquons que Windows Mail supporte à la fois l'entrée par l'action (« clic sur l'icône joindre un fichier -> ouverture de la fenêtre d'exploration du système ») et l'entrée par l'objet / les objets à attacher (« ouverture d'une fenêtre d'exploration -> glisser - déposer dans l'e-mail »).
Cet exemple vise à souligner que le drag & drop peut faciliter la réalisation de certaines actions. Cependant, il peut aussi la compliquer. Tout dépend du contexte et des choix qui sont effectués concernant l'ergonomie de ces interfaces.
Whiteside & al soulignent à cet égard que le seul choix d'un style de dialogue homme-machine (ex: le drag & drop) ne peut pas être le déterminant principal de l'utilisabilité d'une application. Ainsi, de bons (ou mauvais) choix de conception peuvent contrecarrer les défauts (ou annuler les bénéfices) potentiels d'un style de dialogue (ref. dans Mayhew, 1992, cf. lectures complémentaires).
La suite de cet article détaille dans quels cas le drag & drop s'avère le plus pertinent, et les bonnes pratiques à appliquer pour exploiter ses bénéfices. Nous allons ainsi voir que 3 grandes dimensions sont capitales : utilité, visibilité et feedback.
Pour que le drag & drop soit pertinent, encore faut-il qu'il aide l'internaute. Or, on remarque que ce mode d'interaction est souvent utilisé comme un gadget dans les sites web. Autrement dit, les responsables du site décident d'intégrer cette fonctionnalité parce qu'ils la trouvent "cool", "sexy", "innovante"... Dans ce genre de cas, on part d'une possibilité technique pour la plugger sur un site web, sans se soucier de son intérêt sur le site en question.
Le premier point à évaluer, c'est donc l'utilité du drag & drop. Il est indéniable que ce dernier permet, dans certains contextes, d'optimiser les interactions avec le site. Cependant, il peut aussi les alourdir.
Sur le web, on distingue aujourd'hui 2 grandes types d'objectifs pour lesquels est utilisé le drag & drop. Le déplacement de l'objet est toujours nécessaire, puisqu'il appartient à la définition même du mode d'interaction (par "drag", on sous-entend forcément un déplacement). Cependant, il est utilisé à des fins différentes :
» Soit pour lancer une action sur un objet (ex. ajout au panier). Dans ce cas, le déplacement = un moyen pour lancer une action. L'objet "référent" reste à son emplacement initial, mais il peut être dupliqué symboliquement.
» Soit pour déplacer un objet (ex. passage d'un groupe à un autre, ordonnancement de listes, etc.). Pour ce type d'objectifs, le déplacement = la finalité. On n'a qu'une instance de chaque objet.
On remarque en général que le drag & drop est particulièrement adapté pour supporter ces actions de pur déplacement d'un item. Il est alors très utile puisqu'il mime parfaitement l'action désirée. Le déplacement est par définition un type d'action pour lequel il semble logique de saisir l'objet pour l'amener ailleurs (comme dans le monde réel).
Illustrons par des exemples ces deux façons d'exploiter le glisser - déposer, et leurs implications en termes d'utilisabilité.
Commençons par une application positive, où le drag & drop démontre toute son utilité en termes d'efficience utilisateur :
La fonction de drag & drop est très intéressante pour l'ordonnancement de listes.
Ici, un exemple sur l'interface de BaseCamp, où les items peuvent être glissés - déposés aux emplacements désirés. Ce procédé permet d'optimiser l'action d'ordonnancement au regard d'un comportement html plus classique consistant à indiquer un chiffre correspondant à l'emplacement souhaité, ou à déclarer l'élément à déplacer, un emplacement de destination, puis à lancer l'action en cliquant sur un bouton.
Source : www.basecamp.com
Comme c'est le cas dans cet exemple, le drag & drop est intéressant lorsqu'il permet à l'utilisateur d'atteindre plus simplement ou plus rapidement son objectif.
Attention, le simple fait d'utiliser le drag & drop pour faciliter des actions de déplacement d'objets n'implique pas que ce soit le mode d'interaction le plus adapté. Le niveau d'efficience obtenu est en effet très dépendant de la visibilité directe de l'élément à déplacer, ainsi que de sa destination.
Passons à un exemple où le drag & drop vient complexifier ou gêner l'atteinte des objectifs utilisateur.
Les contextes où l'utilisation d'un système de drag & drop est inappropriée sont nombreux sur le web. C'est le cas dans l'exemple suivant, où le drag & drop complique la réalisation de la tâche :
La fonction de drag & drop peut compliquer la réalisation d'une action.
Ici, un exemple sur l'ancienne interface du site de Free, où les manuels d'aide doivent être téléchargés en utilisant le glisser - déposer. Ce procédé s'avère plus complexe qu'un clic sur un lien "Télécharger". En effet, l'internaute doit d'abord comprendre le fonctionnement de l'interface en analysant la page et en lisant la légende. Ensuite, il doit procéder au drag & drop, ce qui n'est pas forcément évident pour tous les internautes et nécessite plus d'actions qu'un simple clic (cf. schéma ci-dessous).
Source : ancien site www.free.fr
Dans le cas d'un système de glisser-déposer d'éléments uniques, voici ce que le style de dialogue implique par rapport à une interface plus classique :
Décomposition de l'action effectuée en drag & drop : clic sur l'objet, parcours de la distance objet / récepteur, dépôt de l'objet sur le récepteur.
Plus la distance objet / récepteur est longue, plus l'action est longue à effectuer, voire compliquée d'un point de vue moteur.
Avantage : l'interface est légère visuellement.
En fait, dans la plupart des exemples de lancement d'actions par un drag & drop, on oublie l'efficience (clé de l'utilisabilité) en ne réfléchissant qu'à l'efficacité (base de l'utilisabilité). Certes, une interface d'ajout au panier me permet d'ajouter un article au panier, mais à quel coût utilisateur en termes de difficulté et de temps de réalisation ?
Plus précisément, lorsque je ne peux pas effectuer de multi-sélection, il y a peu de chances que le drag & drop soit plus efficient qu'un simple bouton d'action. Lorsque la multi-sélection est possible, le drag & drop a d'autant plus de chances d'optimiser l'efficience qu'il y a d'objets sélectionnés simultanément.
Cela explique que le drag & drop a une plus grande vocation à être utilisé dans des interfaces à forte récurrence, que leurs utilisateurs utilisent fréquemment (c'est notamment le cas des logiciels web, des outils, des sites web "applicatifs"), dans lesquelles ils traitent beaucoup d'objets, et bien sûr uniquement lorsqu'il facilite la tâche.
Il semble que plus le web évolue, plus il se destine à accueillir un grand nombre de nos applications. De nombreux sites web sont de véritables outils, et non seulement des "bases de connaissances" dans lesquelles on se contente de circuler. Le drag & drop peut alors être envisagé, mais avec les précautions qui s'imposent. Pour conclure sur ce point, on considèrera que le drag & drop est utile quand il permet à l'utilisateur d'être efficient.
Certaines des fonctionnalités reposant sur le drag & drop nous paraissent plus intuitives que d'autres. Nous avons vu que les actions de déplacement sont celles pour lesquelles il semble le plus naturel de pouvoir glisser - déposer des objets. Pour les autres types d'action, on peut optimiser l'interface pour aider l'internaute à prendre en main le système.
Il faut en effet ajouter aux critères inhérents à la fonction elle-même les choix d'interface, qui vont jouer sur le niveau d'opacité du drag & drop pour l'utilisateur. Les internautes ont besoin de deux connaissances afin d'avoir l'idée d'utiliser un système de glisser-déposer : savoir qu'ils peuvent glisser-déposer des objets, et savoir quels objets peuvent être glissés-déposés. Les formats de présentation, terminologies et comportements au survol peuvent aider les internautes dans ce sens. Il est capital de les optimiser, surtout lorsqu'on n'offre pas d'autre alternative que le drag & drop pour réaliser l'action.
Un des défauts fréquents du drag & drop est que les utilisateurs ne voient pas qu'il est possible. Dans ce type de situation, on perd alors toute la puissance attendue de ce mode d'interaction, puisque les utilisateurs sont face à une impasse.
Yahoo! Mail permet d'effectuer des actions sur les messages via un système de drag & drop. Les internautes le font spontanément lorsqu'ils ont déjà utilisé le glisser - déposer sur un référent logiciel agencé de la même manière en termes d'interface.
Notons que des relais plus classiques (cases à cocher + boutons) permettent d'effectuer les mêmes actions.
Source : http://fr.mail.yahoo.com
Dès que l'on sort d'une interface mimant un existant et qui peut donc capitaliser sur les habitudes des utilisateurs, cela devient plus compliqué. Pour que l'internaute comprenne qu'il existe une possibilité de drag & drop, le plus efficace aujourd'hui reste encore d'être le plus explicite possible.
Utiliser les mots semble donc un des meilleurs moyens d'y parvenir, que ces derniers soient affichés en permanence ou à des moments choisis du flux d'interaction.
L'aide explicite permettant de suggérer la possibilité de glisser - déposer des objets est souvent liée à un état particulier du récepteur, notamment lorsqu'il n'a pas encore été utilisé. En voici 3 exemples :
Notons qu'une fois que le drag & drop a été utilisé une première fois, donc qu'il est appris, l'interface peut redevenir plus « light », et moins forte en termes d'incitation. C'est par exemple le cas sur l'outil Catalyst de Getty Image :
Enfin, le message adossé au récepteur peut aussi venir accompagner dynamiquement l'internaute, et le supporter dans ses tentatives, comme le fait Flickr dans l'exemple ci-dessous :
Dans l'organiseur par lot de Flickr, si je commence à glisser une photo dans l'organiseur, la galerie est totalement remplacée par un message qui me confirme qu'en déposant la photo à cet endroit, je peux la supprimer de l'organiseur.
Notons que ce type de comportement n'est possible que parce que les deux seules actions qui peuvent être effectuées sont de déplacer des photos de la galerie à l'organiseur par lot, et inversement.
Source : www.flickr.com
Pour inciter l'internaute à comprendre qu'il peut glisser - déposer des éléments, on peut aussi utiliser un message d'aide permanent. Il faut alors que ce dernier soit suffisamment fort et bien placé pour être vu par l'internaute.
Cependant, ce besoin de grande visibilité entre en compétition avec les autres éléments de la page. Les défauts de ce type de message sont donc souvent qu'ils doivent nécessairement respecter un compromis (visibilité du message vs force visuelle), et que, de ce fait, ils perdent la puissance d'un message très fort.
Il peut alors être utile de fournir une alternative au drag & drop qui permette d'effectuer la même action de manière plus explicite (en général, sous la forme d'une décomposition d'actions représentée par des liens ou boutons - pour reprendre l'exemple de Yahoo! Mail, je peux déplacer un message par drag & drop directement dans un dossier, ou cliquer sur le bouton déplacer, puis choisir le dossier qui m'intéresse). En outre, cela permet en général de disposer d'un modèle plus classique et, de fait, plus accessible.
Sur le site du Coq Sportif, l'importance du message "Déposez ici vos contenus favoris" a une valeur suggestive en plus d'une valeur explicative.
Source : www.lecoqsportif.com
Se rendre compte de la possibilité de drag & drop, cela peut aussi passer par le fait de se rendre compte que certaines classes d'objet sont déplaçables.
Avant de commencer à détailler cette recommandation, notons qu'elle doit être adaptée au contexte. En effet, la visibilité de la possibilité de drag & drop (cf. point précédent) peut compenser un manque de visibilité directe de chaque objet qui peut être déplacé.
Par exemple, si le récepteur indique bien que l'on peut y déposer des choses, et qu'il n'y a qu'un type d'objets potentiellement déplaçables dans l'interface, ces objets peuvent se passer d'un symbole indiquant qu'il peuvent être déplacés. Dans le cas contraire, il faut faire passer le message à l'internaute via les objets eux-mêmes.
L'action de déplacer un objet d'un endroit à un autre est une bonne métaphore de ce que l'on effectue dans le monde réel. Cependant, l'interface informatique pose la problématique de savoir communiquer à l'utilisateur ce qui est (ou non) déplaçable. Alors que dans le monde physique, tout objet que l'on voit est palpable, saisissable, actionnable, ce n'est pas le cas à l'écran.
Dans une interface informatique, ce qui va nous aider à différencier un objet que l'on peut saisir d'un objet que l'on ne peut pas saisir est lié à la notion d'affordance perçue.
Les affordances d'un objet, au sens large, ce sont les possibilités d'action qu'un individu peut entretenir avec cet objet. Ce concept tel que proposé par Gibson dans les années 50 s'applique aux objets du monde physique.
Norman popularise cette notion en l'appliquant au design d'interfaces, et en l'adaptant aux besoins de la discipline. Il précise en effet après avoir d'abord utilisé le simple terme d'affordance que le plus approprié consiste à parler d'affordances perçues, référant aux possibilités d'action suggérées par l'objet au vu de ses caractéristiques de forme (et non plus aux possibilités d'action réelles).
L'objectif est que l'internaute comprenne que les objets déplaçables sont différents des objets non déplaçables. Dans l'idéal, il faut qu'il comprenne qu'il peut les déplacer. Plusieurs choses peuvent l'y aider :
» Utiliser une icône ou une forme de curseur indiquant conventionnellement la possibilité de glisser - déposer (un pointeur en forme de croix ou de main serrée, cette dernière étant plutôt utilisée pour les interfaces où l'on déplace le focus).
» Utiliser du texte pour indiquer ce que l'on peut glisser - déposer (par exemple, sur le site de General Motors, le libellé "drag vehicles here" permet de comprendre que ce sont les véhicules qui sont déplaçables).
» Éventuellement, design du récepteur. Par exemple, toujours sur le site de General Motors, on voit légèrement des silhouettes de voitures dans le récepteur. Cela facilite la compréhension du mécanisme d'ensemble.
Pour optimiser un système de glisser - déposer, il faut faciliter sa compréhension par l'utilisateur : comprend-on la signification du drag & drop d'un objet d'un endroit à un autre? ce que cela permet de faire ? L'effet du drag & drop doit être prédictible, le plus proche des attentes ou besoins de l'utilisateur.
Les messages adossés aux récepteurs doivent aider dans ce sens. On peut remarquer qu'ils sont en général plus efficaces ou immédiatement compréhensibles quand ils sont en deux parties, présentant à la fois l'action physique à effectuer et la conséquence qui s'ensuivra :
Exemple : "déposer pour ajouter au panier"
Exemple sur Flickr : "Faites glisser des éléments ici pour les modifier par lot."
Exemple sur Panic : "Drag any item here to add it to your cart."
Exemple sur Getty Images : "Drag and drop keywords from the left to exclude the things you don't want."
Dans le cas où l'action ne se fait qu'a posteriori sur l'ensemble des objets contenus dans le récepteur, le design de ce récepteur peut aussi aider à comprendre la relation entre le groupe d'objets déposés, et une action qui peut être lancée sur l'ensemble. C'est par exemple le cas pour la comparaison de véhicules sur le site de General Motors :
La conséquence du drag & drop peut aussi être affichée en cours d'interaction, même si le message a alors moins d'impact. Notamment, il ne peut pas suggérer de commencer à glisser un objet.
Ce type de message peut toutefois accompagner l'internaute dans ses actions de manière assez fine et pertinente. Pour illustration, cet exemple sur le site du Coq Sportif :
Source : www.lecoqsportif.com
Dans une interface utilisant le drag & drop, on doit voir qu'un objet est déposable à un ou à plusieurs endroits. De manière plus précise, on doit pouvoir accéder à deux types d'informations, selon le moment de l'interaction :
» Savoir (à l'avance) où on peut déposer
» Savoir si on peut dropper ce qu'on est en train de déplacer.
En général, dans les interfaces utilisant le drag & drop pour déplacer des objets, la question de savoir où on peut déposer est peu importante. Dans ce type de cas, les utilisateurs comprennent très vite où ils peuvent déposer des objets, de manière intuitive puisque la destination représente exactement l'endroit où ils veulent voir l'objet (exemples : déplacement de rdv dans un calendrier, ordonnancement de listes, etc.).
Lorsque déposer un objet à un endroit n'est qu'un moyen de lancer une action (ex: ajout au panier), il est important de faire plus d'efforts en termes de guidage pour l'internaute. En général, les messages adossés aux récepteurs jouent le rôle d'indicateurs. Ils ont en effet d'abord pour fonction initiale d'indiquer l'endroit où les objets peuvent être déposés.
Même si le récepteur n'indique pas explicitement qu'il est une destination pour l'action de drag & drop, il peut prendre une apparence particulière quand un objet est saisi, aidant à comprendre que les deux peuvent entrer en relation.
Source : www.virginmega.fr
Notons qu'il faut éviter d'exagérer cette mise en avant des destinations, surtout lorsqu'elles sont multiples, car la charge mentale et visuelle peut alors être très gênante.
Lorsque je suis en train de glisser un objet, toute zone survolée candidate au dépôt doit être highlightée.
Nous recommandons d'indiquer où un objet est déposable, bien plus qu'où il n'est pas déposable. En effet, cette indication peut être mal interprétée par les utilisateurs. Du reste, il n'en ont pas besoin. En effet, à partir du moment où l'on indique les destinations permises, il va de soi que lorsque l'indicateur n'est pas affiché, c'est que l'on ne peut pas déposer l'objet.
Cette recommandation vise à limiter le nombre de signifiants pour alléger la charge mentale liée au traitement de l'action de glisser - déposer. Elle est encore plus importante lorsque l'indicateur de « non-déposabilité » prête à confusion. Regardez cet exemple d'une application Flex permettant de glisser des éléments d'une liste à une autre :
Lorsque je survole une zone où je ne peux pas déposer mon item, une icône s'affiche. Or, cette dernière indique conventionnellement la suppression, et m'interroge donc sur ce qui peut se passer si je lâche l'item à ce moment précis : Va-t-on supprimer l'item ?
Source : http://www.adobe.com/devnet/flex/quickstart/adding_drag_and_drop/#list
On peut optimiser le simple feedback visuel par une information plus précise.Bien sûr, cela doit être réservé aux applications où cela a du sens.
Chez Flickr, on me montre 2 choses : un duplicata de l'image que je déplace, et une représentation transparente de son état "prévu" lorsque je l'aurais déposée : on m'indique ainsi l'endroit où va être placée mon image.
En prime, cela peut m'aider à comprendre que je n'ai pas besoin d'aller la mettre tout en haut, ce qui réduit la difficulté motrice et le temps d'exécution du glisser - déposer.
Source : www.flickr.com
Une des difficultés du drag & drop réside dans le fait qu'il implique des actions motrices plus compliquées qu'un simple clic. Cela touche les novices comme les plus expérimentés des utilisateurs, même s'ils n'éprouvent pas le même type de difficultés.
Si on rappelle la loi de Fitts, qui énonce qu'une cible est d'autant plus rapide à atteindre qu'elle est proche et grande, on peut alors trouver des moyens d'optimiser le drag & drop.
Pour commencer, le drag & drop sera d'autant plus facile que la destination sera proche de l'objet. Sur le web, on recommande donc de positionner le récepteur dans un panneau flottant, qui vient se poser sur l'interface et reste au même endroit quelque soit la position du curseur dans la page.
Cela explique pourquoi le drag & drop est plus facile dans l'exemple du site de Panic (panier toujours disponible en bas de l'écran) que dans celui de Virgin Mega (le panier, situé dans le header, disparaît si je scrolle dans la page). On remarque d'ailleurs que lorsque le récepteur n'est pas directement disponible à l'écran, les utilisateurs hésitent à lancer une action de drag & drop.
Faites-en l'expérience : effectuer une opération de drag & drop dans un système d'exploitation est quelque chose qui se prépare : en effet, les deux espaces de travail (celui d'où je prends l'objet cible, et celui où je souhaite le déposer) doivent être visibles simultanément à l'écran, sans quoi il me sera impossible de procéder au glisser-déposer.
De micro-ajustements sont possibles (notamment dans le cas de hiérarchies de dossiers, où le survol d'un dossier peut permettre de l'ouvrir, pour déposer l'objet dans un sous-dossier. C'est notamment le cas dans Outlook). Cependant, ces occasions de contourner la nécessaire simultanéité du drag and drop sont rares.
Notons que quelques pistes de recherche explorent la voie d'un drag & drop par étapes (sélection, pause, drop), pour limiter ces difficultés liées aux distances virtuelles entre point de départ et point d'arrivée.
La deuxième partie de la loi de Fitts nous aide à recommander de prévoir des zones de réception suffisamment grandes pour faciliter le drag & drop.
De manière complémentaire, la zone de réception doit sembler naturelle à l'internaute.
Enfin, le drag & drop sera d'autant plus facile que l'objet sera facilement préhensible.
Dans la plupart des cas, il faut donc veiller à prévoir que l'ensemble de l'objet puisse donner lieu à une action de saisie (et non uniquement une "poignée").
Une interface de drag and drop ne peut être réussie que si le système fournit un feedback informant l'utilisateur sur le fait qu'il est bien en train de déplacer un élément. Cela permet à ce dernier d'éviter une erreur (du type "je crois déplacer un objet alors que je l'ai mal saisi, donc que je ne déplace rien"), d'avoir un retour en temps réel sur l'efficacité de son action de déplacement, et enfin de pouvoir contrôler avec précision son action en vue de la dépose de l'objet à sa destination.
Pour indiquer le fait qu'un élément est en train d'être déplacé, on peut recourir classiquement à deux types de représentations.
Lorsqu'on utilise ce procédé, l'objet peut être représenté sous plusieurs formes :
» Le même objet en transparence, en tout cas de manière dégradée. Cela permet de comprendre l'état « instable » de l'objet, et de continuer à avoir une vue de l'interface située en-dessous.
» Le même objet en plus petit, sous forme de vignettes. C'est par exemple ce qu'utilise General Motors sur son site :
La voiture en cours de déplacement est représentée par son duplicata en miniature.
Source : www.gm.com
L'objet peut aussi être représenté sous la forme d'un symbole. Cela permet de limiter l'intrusion de l'objet déplacé dans l'interface de base, et la charge visuelle liée au déplacement de l'objet. Tant que je n'ai pas relâché le bouton de la souris, l'objet reste à sa place initiale.
C'est par exemple le cas lorsqu'on utilise un filet horizontal pour représenter une ligne d'une liste, un rectangle pour représenter un bloc de texte en déplacement dans un traitement de texte, ou un chiffre pour représenter le nombre d'éléments en train d'être glissés :
Source : www.sfr.fr/communiquer/mes-contenus
La dernière grande recommandation consiste à optimiser la visibilité de la conséquence du drag & drop lorsqu'il a été réalisé. Cette recommandation est valable pour les interfaces où le drag & drop sert à déplacer une "instance" d'un élément (ex: ordonnancement d'une liste vs drag panier) plutôt qu'à déplacer un élément. En effet, dans ce dernier cas, l'effet du drag & drop est auto-explicite.
Pour souligner l'effet du drag & drop, on doit utiliser soit un duplicata de l'objet, soit un représentant symbolique (une incrémentation de chiffres dans un micro-panier par exemple).
On peut y ajouter un effet temporaire pour représenter l'action qui vient d'être effectuée. Voyons ainsi comment Panic représente l'effet consécutif au glisser - déposer d'un article du panier vers la liste :
Source : www.panic.com/goods
On peut observer un comportement similaire chez Flickr:
Source : www.flickr.com
L'ensemble des recommandations évoquées dans cet article visent à profiter des avantages indéniables que présentent les interfaces de drag & drop, tout en limitant les défauts que nous leur connaissons.
Soulignons une dernière fois qu'il est préférable de ne pas recourir au drag & drop « pour le drag & drop », mais plutôt parce que ce mode d'interaction nous permet de simplifier voire d'optimiser le travail de l'utilisateur.
Il est évidemment acceptable de vouloir exploiter le côté séduisant, innovant, dynamique du drag & drop. Cependant, il faudra alors penser à le doubler d'un mode d'interaction plus classique, ou répondre strictement à chacune des recommandations citées dans cet article. L'idée étant de ne pas compliquer la tâche de l'internaute sous prétexte d'avoir voulu utiliser du drag & drop!
» Usability by Hand, AJAX and Efficiency, Thomas Baekdal, Baekdal.com (2006).
» Drag 'n Drop is Invisible To Users, Jared Spool, User Interface Engineering (2005).
» When to use drag & drop (some informal research results), Leisa Reichelt, Disambiguity (2006).
» Drag and Drop Design Pattern Library, Yahoo! Developer Network
» Principles and Guidelines in Software User Interface Design, Deborah J. Mayhew, Prentice Hall PTR (1991). Chapitre 9 : Dialog Styles : Direct Manipulation.
» Boomerang: suspendable drag-and-drop interactions based on a throw-and-catch metaphor, Kobayashi, M. and Igarashi, T. (2007). In Proceedings of the 20th Annual ACM Symposium on User interface Software and Technology (Newport, Rhode Island, USA, October 07 - 10, 2007). UIST '07. ACM, New York, NY, 187-190
