Table of Contents

L'évolution de Drag-and-Drop sur iPad

Depuis son introduction avec iOS 11, Apple a conçu l'interaction pour refléter la manipulation physique, permettant aux utilisateurs de récupérer du contenu avec une longue pression et de le déplacer vers une zone cible. Ce paradigme a déplacé iPad d'un appareil de consommation à un outil de productivité sérieux. Les implémentations précoces ont été limitées à des applications de première partie comme Files et Photos, mais l'API s'est rapidement étendue à des développeurs tiers. Aujourd'hui, glisser-déposer est une interaction centrale dans d'innombrables applications iPad, de la prise de notes et de la gestion de projet à la conception et à l'organisation de données.

Principes UX de base pour le drag-and-Drop à base de touche

Réaction visuelle immédiate

Dès qu'un utilisateur commence un geste de glisser, le système doit réagir instantanément. Sur iPad, cela signifie que l'élément traîné soulève la surface avec un effet d'ombre subtile, simulant un objet en train de soulever. L'aperçu doit suivre le doigt avec précision, sans décalage ni jitter. Apple , lignes directrices d'interface humaine recommandent une animation à l'échelle d'environ 10 pour cent combinée avec une ombre de goutte pour créer de la profondeur.

Métaphore des fourmis de levage et de marche

Quand un utilisateur prend un élément draggable, la position originale doit montrer un contour fantôme ou -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Les prix des zones de chute

Les zones de chute doivent communiquer leur disponibilité à accepter le contenu. Utilisez des indicateurs visuels tels que les bordures en surbrillance, les changements de couleur de fond ou les changements de rembourrage d'inset. Par exemple, une liste de tâches peut afficher une ligne verticale entre les éléments lorsqu'une tâche est traînée, indiquant où elle atterrira. Évitez de compter uniquement sur la couleur pour l'accessibilité; combinez les changements de forme, les étiquettes ou les commentaires haptiques pour rendre les zones de chute perceptibles par tous les utilisateurs.

Intégration des commentaires haptiques

Les modèles iPad avec moteurs haptiques (iPad Pro 11-inch et 12,9-inch, iPad Air 4th gen et plus) peuvent fournir une confirmation tactile pendant les opérations de drag. Un tap subtil quand la drag commence, un buzz court quand il plane sur une zone de drop valide, et une impulsion de confirmation quand la drop complète tout rend l'interaction plus immersive.

Comprendre l'architecture de glisser-déposer iOS

Interaction UIDrag et interaction UIDrop dans la profondeur

Apple=1 fournit et comme éléments de base pour glisser-déposer. Attachez une interaction de glisser-déposer à toute vue qui devrait être dragable, et implémentez les méthodes de délégation pour fournir des éléments de glisser. Pour les zones de dépose, attachez une interaction de goutte et répondez aux mises à jour de session. Le système gère la reconnaissance gestuelle, la coordination multitouche et la résolution de conflit entre les interactions qui se chevauchent. Les développeurs peuvent personnaliser l'animation de l'ascenseur de glisser, l'apparence de l'aperçu et la proposition de goutte pour correspondre à leur langage visuel app=1. Apple=1s drag-and-drop documentation est la source autorisée pour les détails d'implémentation.

Faites glisser les sessions, les éléments et les fournisseurs de prévisualisation

Une session de glisser représente l'ensemble du mouvement d'un ou de plusieurs éléments depuis le début du geste jusqu'à la goutte. Chaque élément de la session a un qui peut fournir plusieurs représentations (texte simple, RTF, données d'image, etc.). Les fournisseurs de prévisualisation vous permettent de fournir une personnalisée qui balance, tourne ou modifie l'opacité au fur et à mesure que le glisser progresse. Ceci est utile pour montrer plusieurs éléments comme une pile lorsque l'utilisateur traîne un groupe.

Déposez les propositions et les types d'opération

Lorsque l'utilisateur survole une zone de dépôt, le système allume un qui définit l'opération prévue : copier, déplacer ou annuler. L'application peut accepter ou rejeter la proposition et modifier la rétroaction visuelle en conséquence. Par exemple, un éditeur de photo peut par défaut à -copier - - lors du glisser des fichiers, mais -déplacer - lors du glisser dans la même collection.

Conception intuitive de glissades et d'animations

L'animation de levage

L'animation de levage est la première chose que les utilisateurs voient. Utilisez une animation à ressort d'une durée de 0,2 à 0,3 seconde. La vue devrait diminuer légèrement (95 à 90 %) et augmenter avec une ombre qui passe de zéro alpha à 0,3 opacité. Évitez les brusques chocs – l'animation devrait sentir que l'utilisateur soulève physiquement une carte hors d'une table. Testez l'animation sur des appareils réels avec différentes tailles de doigts pour assurer que le point soulevé s'aligne avec l'emplacement du toucher.

Aperçu du glisser avec l'échelle en temps réel

Lorsque l'utilisateur déplace l'élément, l'aperçu doit suivre exactement le point de contact. Sur iPad, l'aperçu peut éventuellement s'étendre en approchant une zone de chute importante ou se rétrécir lorsque la cible de chute est une petite fente. L'échelle en temps réel ajoute un sens du contexte spatial. Utilisez avec une fraction interactive complète pour relier l'échelle à la position de glisser par rapport aux limites de la cible.

Zones de chute à ressort

Les zones de dépôt à charge de ressort sont des zones qui élargissent ou révèlent le contenu lorsque l'utilisateur s'arrête sur eux pendant le glisser. Ce modèle est essentiel pour les données hiérarchiques comme les dossiers ou les listes imbriquées. Lorsque l'utilisateur survole un dossier pendant environ 0,5 seconde, le dossier s'ouvre, révélant son contenu comme cible de dépôt potentielle. Implémentez ceci avec un minuteur qui s'allume après un retard configurable, et fournissez des commentaires visuels clairs comme une bordure de pulsation ou une légère mise à l'échelle de l'icône du dossier.

Multi-touch et traînée simultanée

L'iPad prend en charge plusieurs éléments en utilisant des doigts supplémentaires. Chaque doigt soulève un nouvel élément dans la même session de glisser. La pile visuelle doit organiser des éléments dans un motif de ventilateur ou de cascade afin que l'utilisateur voit tous les éléments être déplacés. La zone de dépôt doit gérer plusieurs éléments intelligemment – par exemple, importer plusieurs photos dans un album simultanément. Tester la glisser multi-éléments avec au moins trois à cinq éléments pour s'assurer que l'aperçu ne devient pas encombré visuellement ou lent.

Accessibilité dans les interfaces Drag-and-Drop

Voix sur-dessus et glisser-et-déploier

Pour glisser-déposer, le système fournit des actions rotor et des éléments d'accessibilité personnalisés. Assurez-vous que chaque élément draggable a une étiquette d'accessibilité claire et que les zones de dépôt annoncent quand elles sont des cibles valides. Implémentez la méthode pour annuler un glisser-déposer en cours, et fournissez des actions personnalisées pour --Pick Up, --Move, et -Place qui fonctionnent avec le jeu de gestes VoiceOver. Testez avec VoiceOver activé sur un iPad pour vérifier qu'aucune étape ne manque.

Actions personnalisées pour le contrôle du clavier et de l'interrupteur

Les utilisateurs ne peuvent pas tous effectuer des gestes tactiles. Fournissez des raccourcis clavier pour les opérations de glisser-déposer, comme les équivalents de copie/collage Command+C/V, ou des commandes de touches personnalisées pour lancer et effectuer une traînée. Pour le contrôle de commutation, cassez la traînée-déposer en étapes discrètes : sélectionnez l'élément, choisissez l'action (mouvement/copie), naviguez vers la cible et confirmez. Chaque étape doit être exposée comme un élément de contrôle de commutation.

Commentaires haptiques pour l'accessibilité

La rétroaction haptique est particulièrement précieuse pour les utilisateurs à faible vision. Different les états de succès, d'échec et de vol stationnaire avec des motifs haptiques distincts. Par exemple, un double robinet pour la chute réussie, un long buzz pour la zone de chute invalide, et une courte tique pour planer sur une cible valide.

Modèles d'interaction avancés

Faites glisser entre les panneaux de vue à double sens

Une des fonctionnalités uniques de l'iPad est glisser-déposer entre les applications fonctionnant dans Split View. Votre application pourrait recevoir du contenu d'une autre application et vice versa. Enregistrez vos types de données supportés par l'application (texte simple, images, URLs, UTIs personnalisés) dans Info.plist sous . Lorsque le contenu arrive, présentez un aperçu clair avant de lancer les données. Ce flux d'applications croisées transforme l'iPad en un véritable environnement multitâche où les utilisateurs assemblent des informations de plusieurs sources sans laisser leur workflow.

Faites glisser de l'application vers l'application

De même, les utilisateurs peuvent glisser du contenu de votre application vers une autre application de vision partagée. Fournissez des représentations de données riches pour que l'application réceptrice puisse gérer le contenu de manière optimale. Par exemple, une application de conception peut exporter un PNG et fournir des données SVG vectorielles. Le système affiche automatiquement le meilleur aperçu basé sur les capacités de l'application réceptrice.

Réorganisation des listes et des grilles

Utilisez et pour mettre en œuvre la réorganisation avec des animations. Les éléments doivent glisser en douceur de côté pour faire place à l'élément traîné. Fournissez une subtile autoscroll lorsque l'utilisateur traîne près des bords de la zone défile. Évitez de désactiver le défilement pendant la traînée, au lieu de cela, ajustez le contenu décalé dynamiquement en fonction de la position de traînée par rapport aux bords de la portance.

Drag-and-Drop avec les vues de la collection et les vues de la table

Au-delà de la réorganisation, les vues de collection peuvent accepter le contenu externe. Par exemple, une application d'édition de photo peut permettre aux utilisateurs de glisser des images de l'application Photos directement dans une liste de calques. Utilisez les cellules de placeholder pendant la glisser pour montrer où le contenu sera inséré, et animez l'insertion finale avec un fade ou une diapositive. Respectez toujours l'intention de l'utilisateur en fournissant un bouton de défaire ou un geste -Annuler (double-tap avec un autre doigt) pour les gouttes accidentelles.

Pièges courants et comment les éviter

Activation accidentelle de la traînée

Si un simple clic ou une longue pression déclenche un glisser, les utilisateurs éprouveront de la frustration. Définissez une durée de pression minimale raisonnable (0,1 à 0,2 seconde) et un seuil de déplacement minimum (5 à 10 points) avant le début du glisser. Faites la distinction entre une longue pression pour les menus contextuels et une longue pression pour le glisser. Sur iPad, une longue pression qui reste dans un petit rayon devrait afficher un menu contextuel, tandis que le mouvement au-delà du rayon devrait déclencher un glisser.

Zones de chute trop sensibles

Utilisez une zone de frappe généreuse – sortez la zone de chute en position d'enclenchement d'au moins 10 points de la limite visuelle. Appliquer une activation basée sur la distance : la zone de chute devient --hot-- seulement lorsque le centre de l'élément traîné est dans les limites de la zone. Fournir une animation snap-to-target lorsque l'utilisateur se libère dans la région tampon, de sorte que les éléments atterrissent précisément sans nécessiter un alignement exact.

Manque de soutien

Les utilisateurs peuvent regretter l'action immédiatement après la sortie. Ils peuvent toujours prendre en charge l'annulation par le geste de secouement, un bouton de désactivation ou une confirmation en deux étapes pour les mouvements destructeurs (comme déplacer un fichier dans un dossier de poubelle). Gardez une pile d'actions récentes de glisser afin que les utilisateurs puissent annuler plusieurs étapes. Apple s'intègre parfaitement aux délégués de glisser-déposer – enregistrez une action de désaction lorsqu'une goutte est acceptée.

Problèmes de performance avec un contenu lourd

Le fait de faire glisser de grandes images, de faire des dessins vectoriels complexes ou de faire tomber des données multimégaoctets peut provoquer des chutes de cadre. Générer des aperçus miniatures légers pour l'opération de glisser et ne lancer les données complètes que lorsque la goutte est confirmée. Utilisez avec une taille maximale fixe (par exemple 200x200 points) et un chargement de données asynchrones.

Essai et itération sur Drag-and-Drop UX

Essais de l'utilisateur sur des appareils physiques

Les simulateurs ne peuvent pas reproduire avec précision la touche d'un iPad. Testez le glisser-déposer sur de vrais iPads avec différentes tailles d'écran (iPad mini, iPad Air, iPad Pro 11-inch, et iPad Pro 12.9-inch). Observez les utilisateurs , placement de doigts – beaucoup de gens utilisent le côté de leur pouce plutôt que le bout du doigt, qui change le décalage visuel entre le point tactile et le centre de l'article.

Cas de bord: Grands fichiers, éléments multiples, contenu mixte

Testez avec des fichiers jusqu'à 1 Go (fichier vidéo, gros PDF) pour confirmer que l'application affiche un indicateur de progression lors du transfert de données. Pour plusieurs éléments, testez avec 10 à 20 éléments simultanément pour vous assurer que la pile d'aperçu ne ralentit pas. Le contenu mixte (images et texte ensemble) doit afficher des aperçus séparés pour chaque type d'élément. Planifiez les transferts en réseau : si les données traînées sont sur un serveur distant, affichez un spinner de téléchargement avec une option d'annulation.

Profil de performance avec instruments

Utilisez les instruments Core Animation, Time Profiler et Leaks pour profiler les performances de glisser-déposer. Recherchez les pics dans l'utilisation GPU lorsque l'aperçu de glisser anime. Assurez-vous que chaque aperçu de glisser élément est rastérisé hors écran et mis en cache. Évitez d'effectuer des calculs de mise en page coûteux pendant la glisser-utiliser des instantanés légers et pré-cachés. Session WWDC 2019 -Drag and Drop with Collection and Table Views fournit des conseils pratiques de performance et des exemples de code.

Études de cas : des applications qui font du progrès

L'application Files démontre le comportement de glisser-déposer standard: longue pression pour soulever, les points saillants de la zone de chute claire, les dossiers à ressort et la traînée multi-éléments. Bear (prise de note) permet aux utilisateurs de glisser des pièces jointes directement dans les corps de note, de réorganiser les balises et de déplacer les notes entre les dossiers, toutes avec des animations fluides. Things (task management) utilise la traînée-déposer pour réorganiser les tâches, déplacer les éléments entre les projets et planifier les tâches sur un calendrier. Procreate[ (digital art) permet aux artistes de glisser des couleurs, des couches et des pinceaux avec des prévisualisations en temps réel, montrant la gestion avancée des performances.

L'avenir de Drag-and-Drop sur iPad

Avec l'évolution continue de iPadOS, glisser-déposer intégrera probablement plus profondément avec les fonctionnalités du système comme Stage Manager et les écrans externes. Imaginez glisser du contenu d'un iPad à un moniteur connecté utilisant Universal Control, ou entre des bureaux virtuels sur le même appareil. Apple explore également les interactions de vol stationnaire avec le Apple Pencil, où le dragage pourrait commencer par une combinaison hover-tap. Les concepteurs devraient construire des architectures flexibles qui peuvent s'adapter à ces paradigmes émergents sans briser les interactions tactiles existantes.

Conclusion

En fournissant une rétroaction visuelle immédiate, en respectant l'accessibilité et en respectant les modèles d'interaction d'Apple, les développeurs peuvent créer des expériences qui se sentent aussi naturelles que de ramasser et de déplacer un objet dans le monde réel. Éviter les pièges communs en testant sur des appareils réels, en supportant l'annulation et en optimisant les performances. Les meilleures interfaces de glisser-déposer disparaissent dans le fond, laissant les utilisateurs se concentrer sur leurs tâches sans friction. Comme iPad continue à brouiller la ligne entre tablette et ordinateur, la maîtrise de la conception de glisser-déposer sera essentielle pour créer des applications avec lesquelles les utilisateurs aiment travailler tous les jours.

Pour plus ample exploration, examiner Apple , Lignes directrices sur l'interface humaine sur la glisser-déposer et étudier le , le code d'échantillon officiel[ pour voir les modèles prêts à la production en action.