web-dev-qa-db-fra.com

Les composants réseau sont-ils une bonne UX?

J'étais très intéressé par réponse de Rob où il répertorie différentes options pour afficher une liste hiérarchique de "nœuds"

enter image description here

Je pensais que ce composant serait un bon moyen pour nos utilisateurs de gérer leurs sites dans une application de style CMS.

par exemple. Tout a une relation entre eux.
Tout tourne autour de la création de plusieurs cartes.
Une carte peut alors être associée à plusieurs requêtes, rapports, mises en page et outils.
Il y a une relation plusieurs à plusieurs avec tout, et pour le moment nous leur permettons de tout configurer via des assistants.

Nous discutions d'autres approches pour afficher ces relations, et j'avais du mal à expliquer comment un composant réseau pouvait être utilisé dans notre scénario. Le seul exemple grossier auquel je pouvais penser était les diagrammes de relations MS Access:

enter image description here

Je cherche une réponse qui a:

  • Quelques exemples de composants réseau
  • Terme correct pour ce type de composant (c.-à-d. Le composant réseau est-il correct?)
  • Toute information sur la manière et le moment (subjectif, mais juste des conseils sur les meilleures pratiques) à utiliser.
2
Simon

Cette question est assez large, je vais donc essayer de donner une introduction. L'entrée Graph Drawing dans Wikipedia constitue un bon point de départ pour ce genre de visualisations.

Dessin graphique est un terme général pour les images qui montrent comment les choses sont connectées. Les synonymes et variantes plus spécifiques abondent: Diagramme de liaison de nœuds, Diagramme de relations, Diagramme de réseau, Diagramme de réseau social, etc. En général, le modèle mathématique que vous regardez est un graphique acyclique . Il est courant de qualifier les entités de "nœuds" et les connexions entre elles de "bords" (bien que ce soit un peu bizarre - j'essaie d'utiliser des "lignes" dans la conversation commune).

Je ne connais pas de nom dur et rapide, accepté par l'industrie, pour une implémentation de l'interface utilisateur de l'un de ces diagrammes - il y a trop de variété et de saignements dans le sujet spécifique.

Il existe une variété de méthodes d'affichage couramment utilisées pour ce type d'informations, notamment:

  • Force dirigée - "style molécule". Ils sont mieux utilisés pour les diagrammes à grande échelle où vous voulez vraiment comprendre les regroupements, les clusters, les régions, etc. Ils s'emmêlent facilement et il est difficile d'afficher les détails sur des lignes individuelles. L'exemple de votre site est une hiérarchie parfaite, qui a l'air agréable et ordonnée. Plus les nœuds sont interconnectés, plus cela peut devenir un nid de rat.

  • Orthagonal - "style de câblage". Ceux-ci sont utiles pour afficher les processus, les flux et les détails sur la façon dont les pièces sont liées entre elles, car la mise en page s'efforce de bien ordonner les liens entre les choses. Votre exemple Access s'inscrit dans ce cadre - cela est courant dans le monde de la programmation (de nombreux outils d'administration IDE et DB incluent une représentation graphique de base des modèles). Celles-ci peuvent devenir difficiles à comprendre lorsqu'il y a trop de nœuds car les nœuds doivent être répartis et les routes entre les nœuds peuvent être longues.

  • Circulaire - "anneaux". Il s'agit d'un bel équilibre lorsque vous avez un nombre de nœuds très variable. Vous avez une idée des groupements en percevant des groupes de lignes plus épais ou plus minces, et pourtant vous pouvez avoir une compréhension assez détaillée des lignes, principalement parce qu'elles sont ordonnées.

Dans tous les cas, il peut être utile de mettre l'accent visuel sur les parties pertinentes du graphique - en survolant, en cliquant sur les nœuds, ou par le biais d'une autre interaction comme "mettre en évidence toutes les relations de type X". Certains outils de dessin graphique utilisent plusieurs volets pour afficher les mêmes informations sous plusieurs angles: enter image description here

Source: yEd .

En fait, je vous recommande installez yEd (c'est multiplateforme et gratuit à utiliser personnellement), ajoutez des données représentatives et exécutez-les via leurs différents moteurs de mise en page pour avoir une idée de la façon dont vos données pourraient regarde et ressent. Leur interface utilisateur est également hautement configurable - essayez plusieurs volets, un seul volet, avec ou sans volets de vignettes, etc.

6
peteorpeter

Je pense que la vue "réseau" serait un bon outil de visualisation. Vous pouvez facilement voir comment les choses sont liées à une alternative au plan du site ci-dessus. Vous pouvez également modifier la taille du nœud en fonction de la quantité de contenu ou de visites.

Cependant, c'est une excellente idée de visualisation pour les présentations ou même une petite quantité de liens, cela pourrait devenir difficile à gérer pour les grands scénarios. Ce sera comme naviguer sur une grande toile d'araignée. Travailler avec MS Access en connectant table à table est un bon concept, mais la plupart des gens utilisent simplement SQL lorsque le nombre de tables et de clés augmente.

1
lifeofmle