Dessiner des graphes
####################

Pourquoi représenter des structures sous forme de graphes ?

* pour pouvoir se représenter facilement des structures complexes
* pour communiquer efficacement autour de structures complexes

Quelques règles
***************

caractère informatif
====================

Réaliser une arborescence ne consiste pas simplement à relier des nœuds en leur donnant un vague intitulé.

Nommez les nœuds de manière à ce qu'ils fournissent une information claire :

* évitez les termes vagues comme « infos », « page », etc.
* préférez des titres qui nous informent sur le but recherché par la page

.. figure:: images/informatif--mauvais.svg
   :alt: arborescence fictive d'un site, avec des labels peu clairs
   :align: center

   Imaginez que l'on vous montre cette arborescence. Trouvez-vous cela clair ?

----

.. figure:: images/informatif.svg
   :alt: arborescence fictive d'un site, avec des labels clairs
   :align: center

   Cette arborescence vous semble-t'elle plus claire ?


Cohérence
=========

Une représentation doit être cohérente : c'est à dire que si un indice visuel, comme une couleur, est associée à une information, elle doit l'être de manière systématique, et non aléatoire.

.. figure:: images/exemple-arbo--mauvais.svg
   :alt: arborescence fictive d'un site, avec des incohérences de représentation
   :align: center

   Certains éléments de l'arbohérence, en rouge, sont incohérents avec les codes utilisés ailleurs. Ils rendent la carte illisible en brisant la cohérence du reste.

.. figure:: images/exemple-arbo.svg
   :alt: arborescence fictive d'un site, les incohérences ont été corrigées
   :align: center

   Une fois les incohérences corrigées, l'ensemble redevient lisible.

.. warning ::

   Attention, cet exemple ne représente pas l'arborescence d'un site mais d'une **page web**. Les labels « contient » et « suivi de » ne sont habituellement pas pertinent pour l'arborescence d'un site web.

Évitez les répétitions
======================

.. figure:: images/liste-articles--mauvais.svg
   :alt: atodo
   :align: center

   La répétition nuit à la lisibilité. De plus, on indique un nombre précis d'article alors que celui-ci peut changer.

.. figure:: images/liste-articles.svg
   :alt: todo
   :align: center

   Ici on apporte l'information de la multitude en précisant « liste » et en n'indiquant qu'une seule fois la présence d'article.