Glisser-déposer

Présentation

Le glisser-déposer est un modèle d'interaction d'interface utilisateur qui permet aux utilisateurs de sélectionner et de manipuler des objets en cliquant dessus et en les faisant glisser d'un emplacement à un autre dans une interface numérique. Il offre aux utilisateurs un moyen visuel et intuitif de déplacer, de réorganiser ou de transférer des éléments tels que des éléments de liste, des cartes, des vignettes, des lignes et des colonnes dans une table de données en les faisant simplement glisser avec une souris ou une entrée tactile. La fonction glisser-déposer améliore le contrôle et l'efficacité de l'utilisateur en réduisant la dépendance à l'égard de menus complexes ou d'actions basées sur des commandes.

Quand l'utiliser

• Le public cible est familier avec le concept d'interactions par glisser-déposer et cela s'aligne sur son modèle mental.
• L'utilisateur doit manipuler ou réorganiser des objets dans un contexte spatial, par exemple organiser des fichiers dans un dossier ou organiser des éléments sur un canevas.
• Les objets manipulés ont une représentation visuelle claire et peuvent être facilement glissés et déposés sans ambiguïté.
• L'interaction glisser-déposer améliore l'expérience utilisateur globale, la rendant plus intuitive, plus efficace ou plus agréable.
• Il est nécessaire de procéder à un placement ou à une personnalisation précis, par exemple lors de la conception de mises en page, de l'organisation d'éléments ou de la création de workflows personnalisés.
• Lorsque l'interaction glisser-déposer améliore le contrôle et l'efficacité en réduisant la dépendance à l'égard de menus complexes ou d'actions basées sur des commandes.

Quand ne pas l'utiliser

• Le public cible n'est pas familier avec le concept d'interactions par glisser-déposer et peut le trouver déroutant ou difficile à utiliser.
• L'interaction glisser-déposer ajoute une complexité inutile ou ralentit le flux utilisateur global, ce qui nuit à la convivialité de l'interface.
• Les objets ou éléments à manipuler sont limités. D'autres méthodes d'interaction, telles que des cases à cocher ou des menus déroulants, peuvent constituer une solution plus simple et plus efficace.
• Les objets manipulés sont trop petits ou trop rapprochés, ce qui rend difficile leur sélection et leur déplacement avec précision.
• Le modèle glisser-déposer entre en conflit avec les directives ou les exigences d'accessibilité, ce qui le rend inaccessible aux utilisateurs présentant certains handicaps ou déficiences.
• L'utilisateur doit faire défiler et glisser en même temps.

Structure

Le glisser-déposer est un modèle de conteneur qui peut être implémenté avec plusieurs autres composants tels que les fiches, les listes, les tables de données et le chargement de fichiers.

1. Glisser-déplacer le conteneur source (fiche)
2. Glisser-déplacer le conteneur de destination (fiche)
3. Indicateur (icône) déplaçable
4. Élément déplaçable
5. Indicateur (curseur) déplaçable
6. Conteneur source (d'où l'élément déplaçable est extrait)
7. Conteneur de destination (où l'élément déplaçable doit être déposé)

Apparence

Icône

• L'indicateur de glissement est une paire de trois points verticaux (par défaut). Il peut être positionné à gauche ou à droite selon le cas d'utilisation.
• Note : Si une action secondaire est associée au conteneur d'éléments déplaçables, il est recommandé de placer l'icône de glissement à gauche du conteneur d'éléments.

Curseur

• Gauche : le curseur Mickey Mouse du Mac apparaît au survol et indique que le glisser-déposer est disponible.
• Centre : lorsque vous cliquez et maintenez le bouton de la souris enfoncé, le curseur glisser-déposer du Mac se transforme en un gant fermé pour indiquer que l'élément est saisi.
• Droite : le curseur glisser-déposer de Windows apparaît lors du survol de l'élément, mais ne change pas pour indiquer que l'élément a été saisi. Au lieu de cela, il garde la forme d'une barre transversale pour l'ensemble de l'interaction.
• Note : Ces changements de curseur ne se produisent pas lors du déplacement de fenêtres sur Mac ou Windows. Ils s'appliquent uniquement aux objets dans des applications ou des sites Web.

Zone de préhension

La zone de préhension peut être définie de deux façons :

• Conteneur d'éléments (par défaut)
• Indicateur d'icône déplaçable uniquement : applicable lorsque l'élément déplaçable a un événement de clic associé à son contenu.

Retour de préhension des objets

Une fois que l'utilisateur a « saisi » l'objet qui sera glissé-déplacé, deux types de rétroactions sont nécessaires :

• Retour indiquant que l'objet a été « saisi »
• Commentaire prévisualisant ce qui se passera lorsque l'utilisateur « déposera » l'objet

Le fait que l'objet soit saisi donne généralement à l'objet un aspect différent des autres objets similaires à l'écran. Il peut inclure les éléments suivants :

• Un contour ou une couleur contrastée
• Élévation : présentation visuelle qui donne l'impression qu'il est « au-dessus » d'autres éléments, comme une ombre portée
• Décalage visuel de l'objet, tel que son indentation ou son inclinaison

Directives générales

• Assurez-vous que les éléments déplaçables sont visuellement distincts et faciles à identifier.
• Fournir un point de départ clair pour lancer l'action de glissement, tel qu'une poignée ou une zone de glissement désignée.
• Prenez en charge les interactions cliquer-glisser et toucher-glisser pour plus de polyvalence.
• Utilisez un retour visuel (par exemple, inclinez/mettez en surbrillance l'objet avec lequel vous interagissez) pour fournir une indication claire de l'action de glissement.
• Activez la sélection multiple et le glisser-déposer de plusieurs éléments lorsque cela est logique dans le contexte.
• Fournissez une zone de cible de déplacement qui donne des repères visuels ou des surbrillances lorsqu'un élément déplaçable se trouve au-dessus d'un emplacement de dépôt valide.
• Fournissez une rétroaction visuelle appropriée lorsqu'une action de dépôt a réussi pour signifier qu'elle est terminée.
• Tenez compte des dépôts accidentels ou des actions involontaires en autorisant les utilisateurs à annuler l'opération de glisser-déposer.
• Optimisez les performances pour garantir des interactions glisser-déposer fluides et réactives, en particulier lorsqu'il s'agit d'éléments volumineux ou complexes.
• Testez l'interaction de glisser-déposer avec des utilisateurs représentatifs pour identifier les problèmes d'utilisation et itérer sur la conception en fonction des commentaires des utilisateurs.

Contenu

Directives générales relatives à la rédaction

• Mettez une majuscule en début de phrase pour tous les aspects relatifs à la conception des interfaces de produit Guidewire. Ne mettez pas la 1re lettre du 1er mot du titre en majuscule.
• Utilisez des verbes au présent et la forme active dans la plupart des cas.
• Utilisez des contractions courantes pour donner à votre texte un ton plus naturel et informel.
• Utilisez un langage simple. Évitez tout jargon inutile et les formulations complexes.
• Utilisez des termes et des phrases concis.

Accessibilité

L'accessibilité au clavier est un aspect important de la fonction glisser-déposer. Les utilisateurs doivent pouvoir y accéder et l'utiliser efficacement sans dépendre uniquement d'une souris ou d'un écran tactile. Pour ce faire, intégrez des messages de lecteur d'écran pour tous les modèles, en fournissant des conseils clairs sur la façon d'effectuer des actions de glisser-déposer à l'aide des touches du clavier.

• Pour sélectionner : l'utilisateur appuie sur la touche de tabulation pour parcourir la liste/fiche afin de sélectionner l'élément déplaçable approprié vers la fiche/liste de destination.
• Pour saisir : l'utilisateur appuie sur la touche Espace d'un élément déplaçable pour passer en mode glisser-déposer.
• Pour déplacer : l'utilisateur utilise la touche fléchée vers la droite pour déposer ou déplacer l'élément déplaçable sur la fiche/liste de destination et utilise les touches fléchées vers le haut et le bas pour déplacer la position de l'élément déplacé dans la fiche/liste de destination.
• Pour déposer : l'utilisateur appuie sur la touche Espace d'un élément déplaçable pour quitter le mode glisser-déposer.
• Pour désélectionner : l'utilisateur appuie sur la touche de tabulation pour désélectionner l'élément déplaçable dans la fiche/liste de destination.

Note : Appliquez les mêmes actions de glisser-déposer à l'aide des touches du clavier lorsque la zone de saisie est limitée à l'icône de l'indicateur de glissement (les points verticaux) au lieu de l'ensemble de l'élément déplaçable.

Interactions

Dans un modèle de glisser-déposer, les différents états jouent un rôle crucial en guidant les utilisateurs et en fournissant des commentaires tout au long de l'interaction.

Création de thèmes

Par défaut, le thème et la marque correspondent à ceux de l'application, sauf s'ils sont remplacés.

Il est possible de donner un thème aux modèles pour répondre à des exigences spécifiques en matière de valorisation de la marque et aux besoins des clients. Cela inclut des éléments visuels tels que les couleurs, la typographie, les icônes, les boutons et d'autres composants et éléments graphiques.

En savoir plus sur les thèmes avec les jetons de conception

Prise en charge de la recherche

Une analyse concurrentielle et une étude approfondie des meilleures pratiques en matière de glisser-déposer ont été effectuées au cours de la phase de découverte de ce projet de conception.

Composants associés

• Accordéon
• Fiches
• Table de données
• Vues de données
• Chargeur de fichiers
• Les composants personnalisés seront également associés en fonction des besoins spécifiques du projet

Ressources

Téléchargez un fichier ZIP contenant tous les derniers modèles Jutro et commencez à concevoir des expériences.

Bibliothèque de modèles Jutro (19.6 MB)