Meilleure interface utilisateur pour l'échange de blocs de haut en bas
J'ai développé une interface utilisateur comme indiqué ci-dessous:
Maintenant, je veux ajouter une fonctionnalité à cette interface utilisateur que si l'utilisateur souhaite échanger des positions de if et else if bloque, il doit pouvoir le faire.
Une option pourrait être une flèche vers le haut et vers le bas à côté de chaque si et sinon si, pour déplacer les blocs vers le haut et vers le bas. Quelles pourraient être d'autres meilleures options?
Je suggère d'ajouter des poignées de glissement sur chaque bloc et de laisser l'utilisateur décider de la commande. Vous aurez seulement besoin de vous assurer que peu importe l'ordre des blocs, le premier bloc sera toujours un bloc if et les blocs restants- else if.
Référez-vous à l'image pour plus de détails
De cette façon, l'utilisateur saura d'avance que les blocs peuvent être glissés, à la fois sur le bureau et sur les appareils mobiles.
Toutes les autres réponses suggèrent faites glisser poignées, mais je suggère contre cela.
Le problème avec les poignées de glissement est que:
- vous demandez à l'utilisateur de déplacer un bloc d'une position vers une zone spécifique . S'il manque la zone, des erreurs peuvent facilement se produire.
- si le bloc que vous déplacez est trop élevé, la distance de déplacement peut devenir encombrante.
- il peut être difficile à mettre en œuvre
- les poignées de déplacement suggèrent que l'élément peut être déplacé n'importe où, mais dans ce cas, il n'y a qu'une seule cible
Les poignées de glissement fonctionnent bien avec un liste des N éléments, où chacun de ces éléments occupe une petite quantité d'espace, et où chaque élément pourrait être déplacé n'importe où dans la liste.
Switch, pas glisser
Ici, vous voulez juste changer positions, entre 2 articles. Il n'y a qu'une position de départ et une position cible. Utilisez simplement un bouton à bascule.
Exemples
Par exemple, Google Translate utilise un bouton à double flèche pour basculer entre la langue source et la langue de destination:
Voici Converbot:
Rester simple
Ne donnez pas à vos utilisateurs l'illusion qu'ils peuvent déplacer des éléments n'importe où avec des poignées de glissement. Il suffit d'avoir un seul bouton qui effectue la seule action de changement de position.
Mailchimp utilise et l'icône pour indiquer la capacité de glisser du bloc.
Google utilise des poignées de glissement dans Gmail, elles apparaissent en survol.
L'utilisation d'une icône (n'importe quelle icône) ou de poignées de déplacement pour indiquer que l'objet peut être déplacé sont deux bonnes solutions, mais tout se résume à la disponibilité des solutions. En le montrant à votre utilisateur, comprendront-ils sa signification? Une façon de résoudre ce problème consiste à présenter la fonctionnalité aux nouveaux utilisateurs. Laquelle choisir dépend de vous.
Une troisième option consiste à définir la propriété de curseur sur move au survol. C'est par défaut une bonne chose à faire et peut être utilisé en combinaison avec les options précédentes. Un conseil à ce sujet est de ne rendre qu'une partie du bloc déplaçable (juste une poignée) afin que les utilisateurs ne voient pas le curseur de déplacement tout le temps lorsqu'ils se déplacent sur les blocs. Ils doivent toujours sélectionner et cliquer sur les blocs. Le curseur de déplacement peut faire croire à l'utilisateur qu'il ne peut pas sélectionner les zones de liste déroulante.
Lorsque je fais des listes d'éléments pouvant être commandés, j'essaie d'éviter les poignées de glissement, mais seulement parce que ils sont compliqués avec des éléments d'interface utilisateur plus petits dans mon cas.
Au lieu de cela, j'implémente Move Up et Move Down sur les boutons ou une zone de contexte (ou les deux).
L'inconvénient de remplacer directement les poignées de glissement par des boutons est que l'utilisateur doit repositionner la souris après chaque action move. Idéalement, vous souhaitez qu'un mécanisme de sélection mette en surbrillance (ou "vérifie") le ou les blocs déplacés et les boutons statiques qui apparaissent lorsqu'un bloc est sélectionné.
Les boutons associés peuvent également inclure Remove, Add Comment, Copy. Une poignée de glissement ne vous permet pas naturellement d'ajouter ces actions dans le même mécanisme.
Je ferais ce que vous avez suggéré et utiliser flèches haut/bas sur le ( si les blocs ainsi que les conditions individuelles dans le cas où le l'utilisateur voulait également échanger l'un de ceux-ci.
Vous pouvez également rendre les flèches conscientes de leur position en les activant/désactivant selon qu'elles peuvent déplacer leur élément vers le haut ou vers le bas ou non.
En fonction de votre image, voici à quoi cela pourrait ressembler:
Remarque:
Évidemment, vous pouvez donner un peu plus de hauteur aux conditions individuelles pour avoir des flèches plus grandes.
Si je devais résoudre ce problème, j'aurais combiné deux façons différentes de le faire:
- Permettre à l'utilisateur de faire glisser des blocs pour changer leur position.
- Lorsqu'un bloc est sélectionné, utilisez les flèches du clavier pour changer sa position.
Je pense qu'il est intéressant de combiner différentes façons de faire quelque chose, donc vous pouvez également afficher les flèches dont vous parliez en vol stationnaire ou si le bloc est sélectionné bien que je ne pense pas que cette façon de faire soit aussi naturelle que de faire glisser ou en utilisant le clavier.