"Couper et coller" dans une structure arborescente
Je travaille sur une application web qui fournit un environnement de programmation visuel pour générer des modèles 3D - Mobius
Cela implique de créer un script en ajoutant des lignes de codage et en modifiant simplement les paramètres. Nous utilisons angular-tree-component pour générer un arbre pour représenter la structure du code, comme dans l'image ci-dessous
Les lignes de code peuvent être déplacées - mais à mesure que l'arbre devient plus grand - le glisser-déposer devient lourd. Par conséquent, nous pensions ajouter une fonctionnalité de couper-coller avec laquelle l'utilisateur peut sélectionner et couper des lignes de code et les coller ailleurs.
Quelle serait la manière la plus conviviale de mettre en œuvre cette fonctionnalité?
L'ajout de raccourcis Ctrl + X, Ctrl + V est un moyen - mais je ne suis pas sûr qu'il serait détectable, étant donné que cette fonctionnalité n'existait pas auparavant. Quelles micro-interactions dois-je prendre en charge dans ce cas?
Existe-t-il une meilleure façon de mettre en œuvre cela que les raccourcis clavier? Chaque ligne possède un ensemble de boutons qui sont visibles lorsque la ligne est mise au point. Vous ne savez pas si l'ajout d'un autre bouton est une bonne idée?
Pour résoudre le problème des commandes clavier: les logiciels Microsoft permettent généralement à l'utilisateur de réaliser les choses de trois manières différentes. le raccourci clavier (que vous avez déjà identifié), une sélection de barre de menus (où les raccourcis clavier sont souvent affichés à côté des commandes) et le bouton de barre d'outils visible (souvent avec une info-bulle qui montre la commande et son équivalent clavier).
Cependant, si vous parlez de réutilisation de blocs de code, pourquoi ne pas donner à l'utilisateur une palette où il peut jeter des morceaux de code qui peuvent ensuite être glissés dans le corps du code de la même manière que les commandes individuelles. Faire glisser n'importe quel bloc parent doit également faire glisser ses enfants afin que l'utilisateur puisse faire glisser un morceau de code imbriqué dans la palette, donner un nom au bloc, puis le retirer à nouveau autant de fois que nécessaire.
Pour un système vraiment intelligent, vous pouvez même suivre où ce bloc a été utilisé et vous assurer que chaque fois que le bloc `` maître '' dans la palette a été modifié, les changements sont apparus dans toutes les autres instances - comme la bibliothèque de symboles de croquis.
IMO, la solution la plus conviviale consiste à prendre en charge CTRL + C, CTRL + V, car elles sont les plus intuitives pour la plupart des utilisateurs, et à un autre bouton, car c'est là que toutes les autres actions se trouvent dans votre produit.
Si l'interface utilisateur a un espace limité, vous pouvez envisager de réduire certaines des actions les moins fréquemment utilisées dans un menu accessible à partir du jeu de boutons.
L'ajout de raccourcis Ctrl + X, Ctrl + V est un moyen - mais je ne suis pas sûr qu'il serait détectable, étant donné que cette fonctionnalité n'existait pas auparavant. Quelles micro-interactions dois-je prendre en charge dans ce cas?
Si vous craignez que la nouvelle fonctionnalité ne soit pas détectable, envisagez d'ajouter une procédure pas à pas/didacticiel qui met en évidence de nouvelles fonctionnalités dans votre produit. Bootstrap Tour et IntroJS sont d'excellents plugins javascript pour cela.
Je peux voir trois petites icônes sur l'une des lignes qui ressemblent à une imprimante, une coche et une poubelle. S'il s'agit de commandes pouvant être exécutées sur cette ligne, serait-il possible d'y ajouter vos commandes couper, copier et coller? Ou mieux encore, pourraient-ils être regroupés dans un menu contextuel qui apparaîtrait avec un clic droit? Si vous avez peur que les capacités visuelles donnent aux utilisateurs un indice que les commandes sont disponibles en affichant une icône de menu sur chaque ligne qui apparaît en survol?
... nous pensions ajouter une fonctionnalité de couper-coller avec laquelle l'utilisateur peut sélectionner et couper des lignes de code et les coller ailleurs. Quelle serait la manière la plus conviviale de mettre en œuvre cette fonctionnalité?
Des questions qui, selon moi, affectent ce qui sera considéré comme "convivial":
- Qui est l'utilisateur? Le public cible principal ressemble-t-il davantage à un programmeur ou à un concepteur visuel? Quels autres programmes ont-ils ouverts en ce moment et que font-ils avec eux? (Remarque: je ne pose pas de questions sur toute la gamme possible de types d'utilisateurs, juste si vous avez dû en choisir 1 ou 2 importants.)
- À quoi sont-ils habitués? Plus précisément, en termes d'opérations de copier-coller ou d'extraits de code? Pouvez-vous vous baser sur ce à quoi ils sont habitués comme base de comparaison?
Exemple: en tant que designer, je sais qu'Illustrator me permet faites glisser les éléments à dupliquer eux via Option-cliquez-puis-faites glisser. Lorsque j'ai commencé à utiliser Axure RP7, je pensais juste et j'ai été agréablement surpris de découvrir qu'ils prennent en charge les mêmes fonctionnalités avec la même commande d'entrée.
Donc, la théorie est que la courbe d'apprentissage d'un nouvel outil est réduite lorsqu'il s'appuie sur des expériences avec des outils avec le même utilisateur cible.
Toutes les idées tactiques fournies dans ce fil pourraient certainement réussir. Tant que vous considérez d'abord continuité et cohérence avec les attentes des utilisateurs votre "meilleure estimation" sera assez bonne.