Qu'est-ce qu'une interface intuitive pour établir des connexions entre des éléments d'interface utilisateur?
Je viens de publier une application Web qui vous permet essentiellement de créer des notes et de les connecter: http://www.noodl.in .
Cependant, un certain nombre d'utilisateurs ont eu des problèmes pour créer des connexions. Je ne sais pas exactement quels problèmes ils ont, la plupart du temps ils disent simplement qu'ils "ne pouvaient pas".
Pour le moment, mon application prend en charge deux façons de créer des connexions:
- cliquez sur la bordure, puis cliquez sur une autre note
- cliquez et faites glisser la bordure vers une autre note
Existe-t-il un moyen plus intuitif de créer des connexions? Ou que je pourrais le présenter dans le tutoriel?
Utilisez une barre d'outils qui a des formes et des connexions. Je pense que vous devez rechercher plus pour obtenir de meilleures idées, voici quelques liens d'inspiration.
Graphiques Lucid: https://www.lucidchart.com/
Cacoo: https://cacoo.com/
Gliffy: https://www.gliffy.com/
Diagram.ly: http://www.diagram.ly/
Remarque: je n'étais pas à l'aise avec votre interface utilisateur, veuillez la repenser. Soit dit en passant, j'aime la façon de supprimer les notes :-)
Je n'ai pas compris comment établir un lien entre les notes avant d'avoir lu votre réponse non plus.
Un problème avec (en particulier) votre deuxième option d'interaction (glisser de la bordure d'une note vers une autre note) est que vous avez également un comportement de "redimensionnement horizontal" attaché au bord droit d'une note. Cela signifie que je perçois la frontière dynamique que vous montrez comme existant à cet effet. Même une fois que j'ai compris que je peux faire glisser des lignes depuis cet espace, cela réduit également la largeur de la zone cible qui ne le fait pas redimensionne la note. Enfin, puisque le comportement de redimensionnement utilise un curseur différent, lorsque le curseur ne change pas entre la bordure et le contenu, je suppose qu'il n'y a pas de comportement caché.
En termes de correction, je mettrais en œuvre des ancres dont le seul but est de me permettre de faire glisser une connexion entre les éléments. Ces ancres peuvent être masquées jusqu'à ce qu'une note soit mise au point ou qu'une connexion soit établie à proximité. OmniGraffle appelle ces "aimants" et les présente ainsi (notez que le nœud sélectionné — Publier l'article — montre ses quatre aimants, mais lorsque le curseur est déplacé vers le nœud de l'article d'édition, son aimant le plus proche est affiché dynamiquement):
Image de Mise en route avec OmniGraffle 5