Glisser-déposer avec défilement sur les tablettes
Je suis actuellement confronté à un problème de conception avec le glisser-déposer sur les tablettes.
Scénario: L'écran est divisé en deux, sur le côté droit, j'ai une liste d'éléments et sur le côté gauche j'ai une liste de cases. Je peux ramasser un article et le déposer dans une boîte.
Sur le côté droit, il est possible de faire défiler la liste s'il y a tellement d'éléments qui ne tiennent pas tous à l'écran.
J'ai trois solutions pour ramasser un élément à faire glisser, elles ont toutes des problèmes:
Appuyez et maintenez pendant 0,5 s, puis l'élément est ramassé, puis il est possible de le faire glisser. Problème: la plupart des gens ne tiennent pas et essaient de glisser tout de suite. Ils échouent et ça les ennuie.
Glisser instantanément au toucher, l'élément peut être glissé instantanément au toucher. Problème: lorsqu'ils essaient de faire défiler, ils ramassent l'élément au lieu de faire défiler la liste. Ça ne fait pas ce qu'ils voulaient et ça les ennuie.
Avoir une poignée de glissement, donc s'ils touchent la poignée, ils ramassent instantanément l'élément et peuvent le faire glisser. S'ils se touchent ailleurs, l'article n'est pas ramassé. Problème: Doit agrandir l'icône de l'objet. La zone déplaçable (poignée de glissement) peut être petite, donc plus difficile à récupérer un élément.
Je pense que le glisser-déposer est l'interaction la plus naturelle pour ce scénario, mais je ne peux pas trouver un moyen parfait de le faire. Avez-vous des suggestions?
Il est possible d'éviter totalement le glisser-déposer, mais j'y recourrais comme dernière solution.
Merci!
Je suggère que vous utilisiez plutôt l'approche 'select + drag'. Ceci est similaire à "double-tap-drag" décrit par PhonicUK mais ne nécessite pas de glisser immédiatement.
L'utilisateur sélectionne d'abord un élément en le touchant une fois, l'élément est ensuite mis en surbrillance et prêt pour une opération de glissement. Les autres éléments n'acceptent pas le glisser tant qu'ils ne sont pas sélectionnés, le défilement est donc toujours disponible.
Je pense avoir vu cette approche utilisée dans les jeux sur iPad où vous sélectionnez des éléments dans une barre d'outils déroulante.
Vous devez également inclure une petite note d'aide, par exemple "appuyez pour sélectionner, puis faites glisser".
Je n'irais pas avec l'option 2. Elle semble la moins conviviale de toutes les solutions.
En ce qui concerne les options 1 et 3, elles ont toutes deux le potentiel de fonctionner, mais cela dépend fortement du retour visuel pendant l'interaction.
Cependant, à mon avis, l'option 3 semble avoir le moins de résistance en termes de convivialité. Dans mon esprit, il est plus facile de comprendre (et d'instruire) que toucher un emplacement spécifique (ex: icône de flèche à 4 côtés sur la gauche) déplacerait un objet que de le maintenir pendant un certain temps.
Je voudrais également inclure une animation d'introduction de ce que l'utilisateur doit faire en combinaison avec l'une de vos options.
Je pense que toucher/tenir est inacceptable. Ce n'est pas une convention établie (que j'ai jamais vue), donc elle est vouée à la confusion et à l'irritation.
Quelques possibilités supplémentaires:
4) S'il y a un espace vide autour de la liste des éléments qui pourraient être la cible du défilement.
5) Boutons de défilement: un bouton en haut pour faire défiler vers le haut et un bouton en bas pour faire défiler vers le bas.
Quelle que soit la solution que vous utilisez, elle doit avoir un retour d'informations solide, par exemple lorsqu'un élément commence à être glissé, il devrait "s'allumer", donc il y a une indication claire que quelque chose arrive à cet élément et le toucher n'est probablement pas le début d'un parchemin.
Je ne serais pas trop attaché au glisser-déposer. Si une sensation de glisser confortable ne peut être établie, je ne la forcerais pas, j'essaierais une autre approche. Il peut y avoir une meilleure solution.
Avez-vous pensé à ajouter une barre de défilement/bande sur la boîte contenant les articles? Donnez à l'utilisateur une poignée pour faire glisser vers le haut et vers le bas afin de faire défiler vos articles. Ensuite, ils peuvent faire glisser les éléments individuels immédiatement.
L'autre chose que vous pourriez envisager est un bref cercle qui apparaît autour de l'objet et se remplit rapidement une fois que l'utilisateur commence à tenir, indiquant qu'il attend une demi-seconde pour faire glisser. (Je pense à l'application Shazam ou à l'interface Kinect, si vous connaissez les deux.)
Je ne suis pas sûr de la plate-forme que vous utilisez, mais pouvez-vous détecter la direction dans laquelle se déroule l'opération de glissement? Si cela va sur le côté comme si l'utilisateur essayait de déplacer l'objet vers l'autre liste, alors c'est glisser-déposer. Si le mouvement est de haut en bas, interprétez-le comme un défilement. Vous devez attendre un minimum de battement avant d'engager l'une ou l'autre opération.
ce que vous pourriez faire est de vous en tenir à l'option 1 et de fournir une indication visuelle que l'élément touché se prépare pour le glisser, peut-être une info-bulle avec `` glisser ... '' s'estompe en plus de 0,5 seconde - cela laisse les utilisateurs libres de faire défiler sans faire glisser accidentellement, ce qui Je pense que c'est le plus souhaitable.
Ce que vous voyez souvent sur les appareils tactiles est un `` double-toucher-glisser '' - vous appuyez rapidement une fois, puis appuyez et maintenez immédiatement pour faire glisser. Il est presque instantané et vous permet de faire la différence entre un glissement et un défilement. Si vous utilisez un bureau avec une souris trackpad, cela fonctionne généralement comme ceci.
Vous pourriez dicter que l'utilisation d'un doigt effectue un glissement et que 2 doigts effectuent un défilement, ou vice-versa.