Comment gérez-vous l'interdiction à l'intérieur d'une interface de "forme libre"?
Je viens à vous avec un dilemme qui, je pense, est le plus étroitement identifié à "l'expérience utilisateur". Je filme une application web, mais cette zone utilisateur "de forme libre" a posé quelques défis intéressants.
Mes excuses pour une si longue question.
La zone utilisateur "forme libre" est un canevas vide, où les utilisateurs peuvent créer des "nœuds". Cependant, les nœuds créés ne devraient pas pouvoir se chevaucher ... ce qui pose la question: comment les chevauchements interdits affecteront-ils l'UX de la création de nœuds, et quelles méthodes sont les meilleures?
. . .
Edit: Un simple clic et glisser est déjà lié au déplacement du canvas (pensez à google maps,) donc la commande disponible la plus proche est un "clic long".
1.double click méthode et problème:
Mon idée initiale était d'avoir un double click l'événement déclenche la création du nœud (Fig 1.) Le problème que je vois avec cette méthode est décrit ci-dessus (Fig 2) - sans aucune forme de restriction, l'utilisateur serait en mesure de double click à proximité de nœuds préexistants ... illustrant ainsi le problème de cette approche.
. . .
2:drag 'n drop méthode:
Une autre méthode à laquelle j'ai pensé serait d'avoir un source node dans la barre d'outils (non illustré.) L'utilisateur saisirait ce source node à partir de la barre d'outils et faites-le glisser sur canvas-- permettant un changement de couleur lorsque le nœud était maintenu dans une position non valide.
Le problème avec cette approche est une réduction de la valeur UX - le glissement depuis la barre d'outils chaque fois que vous voulez créer un nœud semble non raffiné ... alors j'ai fusionné les deux:
:Doubleclick 'n drop:
Même si j'aime cette approche, je ne suis toujours pas sûr de tenir compte de tous les facteurs; J'hésite un peu à appuyer sur la détente dans une seule direction.
Je me demande s'il est juste préférable de développer 2 ou 3 interfaces différentes, et de les tester séparément ... est-ce que quelqu'un a des idées sur la façon de gérer le comportement interdit, et plus précisément, quelle approche (en particulier celles que je n'ai pas décrites) ici) maintiendra le meilleur UX?
Notes: L'utilisateur va créer de nombreux nœuds (jusqu'à 20 par page,) et les modifier/déplacer fréquemment; cette page est le cœur de l'application.
Dans de nombreux cas, les éditeurs qui vous empêchent de faire des choses sont plus difficiles à utiliser que les éditeurs qui permettent de corriger les "erreurs" et les problèmes d'indicateur. Une entreprise que je connais a passé deux ans à écrire un éditeur sophistiqué conçu pour éviter les erreurs. Plus tard, ils l'ont remplacé pour des raisons d'utilisabilité par un éditeur qui a signalé les erreurs.
En traduisant cela dans votre éditeur de nœuds, vous pouvez permettre à l'utilisateur d'avoir des nœuds qui se chevauchent. Ne les laissez pas quitter la page et enregistrez les résultats avant d'avoir corrigé les problèmes. Quand ils placent un nœud en chevauchant un autre, vous ne pouvez pas savoir si le nouveau nœud est correct et l'ancien faux, ou l'ancien a raison et le nouveau faux. Laissez-leur le soin de décider.
Changer la couleur des nœuds qui se chevauchent et augmenter l'épaisseur de la bordure des nœuds suffit à signaler où se trouvent les problèmes de chevauchements. Ils peuvent faire glisser les nœuds à corriger. Pour plus de commodité, affichez également un message texte avec un bouton comme:
Le code derrière le bouton 'Fix' peut être simple, par exemple il peut agrandir le diagramme à partir du centre, sans augmenter la taille des nœuds.
C'est contre-intuitif, mais permettre aux utilisateurs de passer par un état intermédiaire non valide peut considérablement améliorer la convivialité.
Vous pouvez conserver le comportement de double-clic mais informe clairement l'utilisateur lorsque la souris est trop proche d'un autre nœud pour permettre la création, avec une sorte de repère visuel (par exemple, changer le curseur ou mettre en surbrillance le nœud le plus proche).
Alternativement, vous pouvez implémenter une méthode qui trouve l'emplacement valide le plus proche pour ajouter un nouveau nœud en fonction de l'emplacement de l'écran. De cette façon, vous n'aurez rien à interdire: tous les emplacements seront un emplacement valide de double-clic. Vous pouvez également utiliser un repère visuel pour informer l'utilisateur que le nœud créé ne se trouvera pas exactement sous la souris. Pour réduire la confusion, vous pouvez créer le nœud à l'emplacement du clic et le déplacer vers l'emplacement valide dans une courte animation.
Je pense que la meilleure solution serait d'autoriser toutes les méthodes que vous avez mentionnées ci-dessus: le double-clic serait une fonctionnalité cachée (tous les utilisateurs ne penseraient pas à créer un nouveau nœud comme ça), tandis que faire glisser un nœud depuis la barre d'outils serait plus évident.
À propos de la position, ne pouvez-vous pas simplement forcer une fonction "aligner sur la grille"? Regardez le Finder OS X, par exemple, où peu importe où sur l'écran vous faites glisser un élément, il s'ajustera et se repositionnera sur le "spot" le plus proche disponible ...
Comme ça, un double clic sur le canevas créerait un nouveau noeud à l'endroit disponible le plus proche, un double clic sur un noeud le modifierait. Ces fonctions pourraient également être accessibles par clic droit + options ...
En forçant un "snap to grid", les utilisateurs ne se soucieraient jamais de le faire correctement ou mal, ce serait le système qui s'en occuperait
Si un utilisateur veut placer un nœud au point X, alors laissez-le.
N'essayez pas de deviner ce qu'ils essaient d'atteindre (car vous ne pouvez pas bien le faire), et ne leur faites pas plus de mal pour atteindre leur objectif. Le logiciel doit s'adapter à l'utilisateur, et non l'inverse.
Étant donné que vous avez une règle selon laquelle les nœuds ne peuvent pas se chevaucher, faites en sorte que les nœuds existants s'éloignent du nouveau nœud - éloignez-les d'une distance minimale du nouveau nœud, afin qu'il y ait de l'espace pour le nouveau. Oui, cela pourrait entraîner une cascade de petits mouvements, mais rarement.
Le double-clic pour la création de nœuds me semble contre-intuitif et complique la création de nœuds, en particulier avec les périphériques d'entrée autres que la souris (c'est-à-dire les écrans tactiles, les tablettes graphiques). Pourquoi ne pas simplement utiliser un seul clic pour la création et la sélection de nœuds? Si vous cliquez près d'un nœud, il sera sélectionné, si plus loin un nouveau nœud sera créé. Problème résolu :-) Amélioration: utilisez également cliquer-glisser-relâcher pour créer/sélectionner et positionner les nœuds avec un mouvement fluide.
Je ne m'attendrais pas à cliquer sur un objet et à déplacer le canevas. Vous avez mentionné Google maps. Lorsque vous cliquez et faites glisser une ligne de direction pour modifier votre itinéraire, le canevas ne bouge pas.
Je suis tout pour la simplicité, mais trop souvent le design met trop l'accent sur les débutants et les utilisateurs qui vont acquérir de l'expérience. Les commandes du clavier ne sont peut-être pas intuitives, mais une fois que vous les maîtrisez, vous pouvez être beaucoup plus productif. Vous avez mentionné qu'il pourrait y avoir 20 nœuds. Cela ne ressemble pas à une application où les nouveaux utilisateurs font quelques entrées et utilisent rarement le site à nouveau.
Quelque chose comme un double-clic rendrait la création de nouveaux nœuds assez efficace. Encore une fois, si quelqu'un veut l'utiliser souvent, il voudra des raccourcis qu'un débutant n'utiliserait pas à son avantage.