Le Yale C/AIM Style Manual (=Center for Advanced Instructional Media's World Wide Web site) nous apprend un certain nombre de choses intéressantes résumée ci-dessou.
Il n'existe pas de standard reconnu pour l'organisation de documents électroniques; il faut avoir quelques connaissances sur la mise en page graphique d'interfaces (graphic user interface design). Deux problèmes principaux sont à gérer:
1) informer et guider l'utilisateur à travers les différentes pages
2) création d'une rhétorique visuelle appropriée pour l'interaction.
La meilleure stratégie est d'appliquer de manière consistante un certain nombre de principes de base quant à la création de pages Web: le titre, l'auteur, la date et au moins un lien sur une page locale.
Revenir en arrière (bouton « back ») n'est pas équivalent à revenir en arrière à la page précédente dans une séquence ordonnée de pages lorsque le concepteur du site a prévu des icones de navigation pour son site.
Etant donné qu'une petite partie d'un site Web est visible en une fois (la page courante), l'utilisateur construit instinctivement un modèle mental du site; ce modèle sera utilisé pour prédire le contenu et la structure des pages. Il est important d'avoir une structure prévisible, avec une continuité claire et fonctionnelle entre les différents composants et sous-sections du site Web. Les graphiques fanion, les icônes de signature ou tout autre forme de dessin peut servir à renforcer l'identité du domaine, à établir la continuité, à clarifier la structure du site Web et soulager la charge cognitive de l'utilisateur.
La mise en place d'un bon site Web est une question d'équilibre entre d'une part la structure, les relations du menu (« home page ») et d'autre part les pages de contenu individuel, ou d'autres documents liés au menu. Il peut être intéressant de tenir compte des feed-back des utilisateurs. Le but étant de produire un arbre hiérarchiquement bien organisé qui facilite un accès rapide à l'information et aide l'utilisateur à comprendre comment est organisé le site.
Il est aussi important de rechercher l'équilibre optimal entre les sensations visuelles et graphiques, et l'information textuelle.
HTML est un système d'hypertexte qui met en évidence les liens interactifs entre le graphique, le texte ou des documents média. Avec HTML, on peut créer des liens directement sur une page cible n'importe où dans Internet, sans forcer l'utilisateur à traverser une série de menus imbriqués dans des menus (ou des répertoires dans des répertoires, comme avec un site Gopher ou FTP).
La meilleure mise en page pour l'instant tend à l'utilisation d'un groupe de petites bannières graphiques en haut de la page, avec des liens textuels en dessous; ces pages se chargent plus rapidement qu'un seul grand dessin sur un viewer, avec autant d'impact visuel.
Consistance et prédictabilité sont des attributs essentiels pour tout système d'information bien fait, qui aident l'utilisateur à identifier l'origine et les relations des pages Web.
Les pages longues nécessitent de l'utilisateur qu'il se souvienne de beaucoup d'information (tout ce qui n'est pas présentement à l'écran et qui peut le devenir en scrollant avec l'ascenseur); de plus il n'y a pas d'indications quant à la taille du document (sur l'ascenseur).
Si l'on veut faire à la fois une bonne interface online et laisser la possibilité à l'utilisateur d'imprimer ou de sauvegarder: on divise la page en plusieurs parties (2 ou 3) et on propose un lien sur un fichier séparé qui contient tout le texte.
Dans un système modulaire bien fait, on peut mettre à jour relativement rapidement sur le Web, sans avoir besoin de modifier de larges sections d'information ou reformatter des pages complexes.
Il n'existe pas un seul modèle, une seule grille appropriée pour toutes les pages Web. La première considération à prendre en compte dans un projet design de page Web, c'est d'établir la « grille de mise en forme » de toutes les pages.
Toute page doit contenir essentiellement: le nom de l'auteur ou celui d'un contact, un lien sur une page locale (un document sans lien local est un cul-de-sac; les liens dans un site Web doivent être bidirectionnels), l'institution, la date de création ou de révision, le copyright. Si possible, inclure aussi: l'URL du document, des liens reliant d'autres pages locales, le logo de l'institution, des boutons ou d'autres aides à la navigation (ce que j'ai fait pour ma page de garde: welcome.html).
Les menus graphiques ne doivent pas être trop compliqués; les icônes ne sont pas à priori plus simple à comprendre que des boutons avec du texte. Ne pas réinventer les hiéroglyphes...
Header graphic: utile aussi pour revenir en arrière au niveau précédent le plus haut. En plaçant constamment (par exemple à l'aide d'une frame) un titre et un, ou plus, lien dans le header, l'utilisateur a la possibilité de savoir immédiatement où il se trouve et peut se rendre rapidement à un autre matériel qui lui est relié, ou à un menu principal (ou à une home page).
Contraste visuel: entre une police et une autre, et entre les blocs de texte et l'espace vide environnant. Simplement faire les choses uniformément grande n'aide pas du tout. Conseil: utiliser les principaux niveaux de titre HTML de manière économique. Lorsque le contenu est principalement du texte, la typographie est l'outil que l'on utilise pour peindre des patterns d'organisation de la page; la première chose que le lecteur voit n'est pas le titre ou d'autres détails de la page, mais le pattern général et le contraste de la page.
Pieds-de-page: nom de l'auteur, son affiliation institutionnelle, lien(s) sur d'autre page locale, copyright, date de dernière révision; également utile: adresse email, adresse postale, marques officielles.
Mettre date sous forme: August 9, 1996. Car le format date varie d'un pays (d'une langue) à l'autre. En anglais on mettra le mois en premier, par exemple: 8.9.96 qui donnerait le 8 septembre en français.