web-dev-qa-db-fra.com

Qu'est-ce qu'un bon repère visuel pour le glisser-déposer? (pour réorganiser une liste d'articles)

Je me demande si quelqu'un a des opinions sur la meilleure indication visuelle pour indiquer à l'utilisateur que les éléments de la liste peuvent être réorganisés par glisser-déposer?

Voici quelques options avec lesquelles j'ai joué: drag-and-drop visual cues, some options

Je sais que beaucoup d'utilisateurs mobiles iOS auraient été exposés à l'option B, et compte tenu de la base d'utilisateurs en expansion rapide des iPhones et iPads, je suis tenté d'utiliser cette option. Cependant, je pense que les options A et F sont un peu plus explicites. L'option E est intéressante car elle supprime le repère visuel de "saisie" mais met l'accent sur le mouvement de montée/descente. De toute évidence, n'importe laquelle de ces options peut aller à gauche ou à droite des éléments et les icônes auraient une info-bulle disant quelque chose comme "glisser pour réorganiser"

Qu'en pensez-vous? Je serais très curieux de voir si quelqu'un a des données de test d'utilisabilité réelles sur les indices de glisser-déposer!

34
M.A.X

Personnellement, j'irais avec l'option B sur iOS et regarderais ce que montrent les androïdes.

Sur le bureau, j'utiliserais une sorte de "bump", c'est important, vous pouvez voir pourquoi ici dans cette réponse: https://ux.stackexchange.com/a/25032/16685

7
Aadaam

Je suis tombé sur ce message aujourd'hui et je voulais apporter une réponse basée sur certains développements au cours des deux dernières années (depuis 2012).

Google propose une bonne solution signalant à ses utilisateurs Gmail des éléments triables en utilisant deux rangées de points empilés en survol (bureau)

Gmail's sort iconic cue

11
JWMC

J'irais avec l'option E - la plupart des gens lisent de gauche à droite. Ils examinent les choses de la gauche, puis se déplacent lentement vers la droite, si vous avez joué à des jeux dans les beaux jours du 8 bits, vous verriez que la plupart des jeux commencent par la gauche et se déplacent vers la droite.

Il est donc plus facile de remarquer que vous pouvez faire glisser les éléments si l'icône est à gauche. Cependant, je mettrais l'icône plus en valeur, je recommanderais une nuance de gris plus foncée. Il est difficile de voir, même pour moi sur un écran large, que c'est une flèche pointant vers le haut et vers le bas, cela pourrait ressembler à un 1 ou un je pour quelqu'un utilisant un smartphone avec un écran tactile (sale).

Je suggère de regarder ceci: http://jqueryui.com/demos/sortable/

Cet exemple est vraiment clair et intuitif.

5
AturSams

Peut-être n'avez-vous pas besoin d'une icône pour indiquer la disponibilité. Essayez de changer la forme, la couleur, etc. des listes. Laissez-les réagir visuellement lorsque le doigt les touche. Voir l'exemple d'application avec Trello .

2
gracekan

L'option "D" contrairement à toutes les autres options, donne du sens sans forcer nécessairement la direction.

Par exemple, de nombreuses interfaces utilisateur mobiles permettent à l'utilisateur de tourner l'appareil. Il y a donc deux orientations, paysage et portrait. Si un élément pouvait être déplacé en mode portrait, ce serait de haut en bas. En paysage, cela peut être à gauche et à droite (j'ai dû faire face à cela). J'ai vu quelques exemples où le concepteur utilise les 4 flèches dans toutes les directions, mais cela ne fonctionne pas vraiment parce que ce ne sont que deux directions à la fois.

Un symbole qui peut signifier "prise en main" et peut transmettre n'importe quelle direction semble être l'option la plus polyvalente. Les options "B" et "D" sont les deux seules à le faire. L'option "B" est en train d'être bélier sur le monde par Google pour signifier "Paramètres". Alors, que cela vous plaise ou non, je pense que l'on se dirige vers la retraite (pour les objets mobiliers).

2
Alan Luckow

Je dirais que le critère le plus important est l’abordabilité: lequel reconnaîtra immédiatement votre utilisateur? Dans cet esprit, je choisirais l'option B.

Je trouve que l'option E offre le moins de moyens, tandis que les options A et C ajoutent de l'encombrement via l'utilisation de flèches qui sont probablement inutiles pour le premier utilisateur, et définitivement inutiles une fois que l'utilisateur a compris l'indice visuel que l'option B offre.

Je ne vois pas le point derrière l'option D: les points (vs les lignes) signifient-ils que vous pouvez réorganiser aussi bien horizontalement que verticalement? ou est-ce juste un style? J'éviterais D.

1
Hisham

Je suis également d'accord avec les "points adhérents" (option D) car ils sont documentés ici:

Quelle est la meilleure icône pour montrer que quelque chose peut être glissé et réorganisé?

Pensez que le hamburger pourrait être mal interprété facilement et que les autres options ne sont pas aussi claires qu'elles pourraient l'être.

1
endymion1818