L'espace visuel d'une page web
Afficher au mieux les informations utiles sur une page web
Le web a été inventé pour partager de l'information, c'est-à-dire faire la part belle à l'information. Il est donc dommage de sacrifier une partie de la surface d'affichage à des informations secondaires, voire inutiles dans la plupart des cas. Car, en réalité, ces informations usant de l'espace visuel sont-elles toujours utiles pour tous ? Assurément non. Il est donc dommage de sacrifier de la largeur (seule dimension limitée) et de la surface d'affichage pour ces informations. Autant utiliser l'affichage pour n'afficher que ce qui est utile car, dans la grande majorité des cas, c'est ce que demande l'internaute.
Les limites physiques
Le monde de l'informatique est virtuel. Alors que nous pouvions nous affranchir des contraintes, les limitations humaines ont imposé des limitations structurelles et physiques aux pages web.
La surface d'affichage
Il s'agit d'une contrainte liée au matériel lui-même. Il paraît peut concevable en effet de disposer d'un écran de surface infinie.
Pour compenser la faible surface d'affichage, l'informatique permet de créer une surface virtuelle d'affichage théoriquement infinie.
La largeur
Alors que la surface d'affichage pouvait être infinie, l'usage a limité la largeur des pages web, au profit d'une longueur infinie. Les spécialistes de la macrotypographie décrivent une page web comme étant plus proche du volumen que du codex.
Cette limitation de l'affichage en largeur provient d'une limitation humaine. Il devient très pénible de suivre une ligne trop longue.
Le fatalisme du volumen
Le principe du volumen introduit un biais de raisonnement et un piège dans la présentation des pages web : Comme une ligne trop longue est inutile, autant limiter la largeur d'affichage du texte et profiter de l'espace libéré pour insérer des informations secondaires de moindre importance (liens, notes, références, publicités...).
Le repère visuel de la surface
Des études sur la mémorisation de textes sur papier et de textes sur ordinateurs ont démontré que l'homme mémorise mieux les textes sur papier en raison des repères visuels (bords de page, etc.), des repères visuels plus difficiles à mettre en place sur un texte numérique. En effet, le volumen apporte une longueur infinie. Et même dans le cas de document arbitrairement tronqués pour reproduire l'effet de page (PDF, etc.) la surface d'affichage cache très souvent les repères visuels, ce qui empêche une vision d'ensemble et une bonne mémorisation. En effet, la fragmentation du texte oblige à une interruption de la concentration pour déplacer la surface virtuelle. Cette interruption parasite diminue la concentration et la mémorisation.
Pour compenser, les macrotypographes conseillent d'introduire un certain nombre d'irrégularités et de repères visuels artificiels de façon à permettre une lecture plus confortable.
Conclusion
Nous avons donc là, un paradoxe : Le matériel physique est de trop petite surface pour permettre un bon repérage visuel des bords et nous limitons la longueur des lignes afin d'éviter la fatigue. Ce qui fait que la surface visuelle est très limitée en largeur et donc, allongée dans le sens de la hauteur, ce qui fragmente la surface d'information affichée et oblige à utiliser fréquemment l'ascenseur et diminue la capacité de mémorisation.
Cette capacité de concentration et de mémorisation est d'autant plus diminuée lorsque des informations dynamiques (publicités sous forme vidéo) interceptent l'attention.
L'information se retouve donc très fragmentée et difficile à appréhender.
Optimalisation l'affichage
Comme nous venons de le voir, plus la ligne est longue, plus il est difficile de trop la lire. A contrario, plus ligne est courte, plus l'information est fragmentée et moins elle est facile à retenir à cause de l'augmentation du nombre de manipulations parasites (utilisation de l'ascenseur, de la souris, des doigts,...).
Toute l'astuce consiste à trouver une largeur de colonne suffisamment petite pour être lue sans fatigue tout en évitant la fragmentation de la surface visuelle d'affichage.
La solution la plus simple est d'augmenter le nombre de colonnes. Ainsi, au lieu d'afficher le texte sur une seule longue colonne, il sera affiché sur deux voire trois colonnes plus courtes.
Cependant, plus le nombre de colonnes est grand, plus l'espace résiduel pour les informations secondaires est restreint.
Mais une informations secondaire, comme son nom l'indique, n'est pas importante, dans la majorité des cas. Pourquoi s'encombrer d'informations secondaires ?
Parce que ces informations peuvent être utiles (notes, références, définitions), obligatoires ou fortement conseillées (impressum, licence,...) ou vitales (publicité,...).
L'information principale sur toute la largeur
L'information principale doit occuper le plus d'espace visuel possible. C'est-à-dire toute la largeur d'affichage. Il convient donc de moduler la largeur de l'affichage en fonction du support grâce aux CSS. Si la ligne est trop longue, l'affichage sera produit en deux ou trois colonnes.
L'information secondaire
L'information secondaire ne sera pas affichée sur la surface visuelle principale. Elle n'utilisera donc pas de colonne spécifique. Elle sera placée avant (en haut) ou après (en bas).
L'information secondaire sera masquée et accessible simplement.
Conclusion
L'affichage ressemble donc à ceci :
Ainsi, lorsque l'utilisateur est centré sur l'information celle-ci est exploitée au mieux dans la plupart des cas.
Choix du format d'affichage
L'espace visuel optimalisé faire la part belle à l'information de première nécessité et met de côté, voir cache, l'information secondaire mais pourtant parfois nécessaire. En effet, la publicité peut être vitale pour un site et permet de subvenir à tout ou partie de son fonctionnement.
Qu'à cela ne tienne. Grâce aux CSS et à développement modulaire d'une structure de page, sans rien changer, il est possible de passer aisément d'un affichage à un autre, en fonction du but rechché ou du support (téléphone portable, tablette, écran HD...).
Il n'y a pas de bonne ou mauvaise présentation. Tout dépend du but recherché et des contraintes imposées.