Module 13 - Ã?crire et communiquer sur le web
Ecrire pour le web - focus sur la forme
Le support numérique révolutionne nos manières d'écrire ; story telling, réaction à chaud, écrit journalistique, tweet, buzz... autant de formes d'écritures spécifiques au développement des usages numériques. Mais sur le web, la forme du discours est tout aussi importante que le fond. Ainsi par exemple, le design de votre site est une clé déterminante dans le rapport de confiance et de professionnalisme que vous aurez avec vos interlocuteurs. Une mise en page mauvaise, une mauvaise impression, trop de textes... rebuteront vos internautes. Voici quelques règles pour vous accompagner dans la mise en forme de vos écrits sur le web.La charte graphique : première étape de conception
De l'intérêt d'une charte graphique
La charte graphique est l'ensemble des règles fondamentales d'utilisation des signes graphiques. Elle définit l'identité visuelle d'une organisation, d'un projet, d'une entreprise.
L'intérêt premier d'une charte graphique est de conserver une cohérence entre les contenus. La réalisation d'une charte graphique apporte ainsi deux avantages certains :
- L'identité graphique reste intacte à travers les différents supports (site Web, carte de visite, dossier de presse, ...)
- Le récepteur identifie facilement l'émetteur et se repère dans ses différentes réalisations
Les règles d'une charte graphique
Comme pour une charte graphique papier, il ne s'agit pas d'appliquer les codes dans leur intégralité mais de définir quelques règles à respecter. Elle s'applique notamment à définir :- le logotype,
- les polices de caractères,
- les jeux de couleurs,
- l'utilisation des éléments graphiques,
- les principes guidant le choix des images et des illustrations.
La matrice graphique sur internet
En complément des éléments ci-dessus, l'identité graphique sur internet doit prendre en considération :- la sémantique des couleurs,
- le vécu collectif, les références historiques,
- l'imaginaire populaire.
Il y a donc plusieurs éléments à définir pour créer une matrice graphique :
- Le gabarit, également appelé template ou layout (conseil : 960px de largeur).
- La combinaison des couleurs : l'important est de vous assurer que votre choix colorimétrique est lisible. Les couleurs doivent être au service de la lisibilité et de la convivialité. Un convertisseur de couleurs peut aussi s'avérer utile pour générer les codes hexadécimaux de couleurs (adaptés aux pages Web).
- Le bandeau, ou header, avec le logo et le nom de la structure, l'objet du site.
- Les menus rapides : entre 3 et 5. Pour les rendre davantage visibles, ils peuvent être placés dans le bandeau, si le fond le permet, ou en haut à droite de votre page.
- Les menus : les menus communs se placent généralement en haut. Il faut veiller à la clarté des mots et à l'espacement entre les rubriques. Il est conseillé de ne proposer qu'un sous-menu pour chaque rubrique.
- La page contenu : il est important de faire des pages concises, d'où l'importance de définir comment se présentent le contenu, les polices, les titres, les images et les liens.
- Le pied de page, ou footer avec les mentions légales, les technologies utilisées.
En plus de cela, la charte graphique Web s'attache à définir la position des différents éléments et à valider les fondations de votre site : accessibilité, lisibilité et ergonomie.
Accessibilité, lisibilité et ergonomie : les 3 fondamentaux d'un site web
L'accessibilité englobe plusieurs notions : choix du nom de domaine, compatibilité des navigateurs, choix des applications, standards W3C...Au départ de votre projet se posent 3 questions qui vont construire les bases de votre site :
- Ã? quoi sert le site (objectifs, cibles, ...) ?
- Quels sont les contenus proposés ?
- Comment faire en sorte qu'ils soient accessibles à tous ?
La lisibilité découle souvent des choix faits lors de l'établissement de la charte graphique. Il convient donc d'être toujours très vigilant à cette notion.
Posez-vous la question de la lisibilité en fonction de :
- votre nom, votre logo et l'objet de votre site,
- la taille du site,
- la taille des caractères de police et la largeur des paragraphes,
- le choix des couleurs : fond et textes...
Enfin, l'ergonomie correspond à la facilité d'utilisation de votre site. Il convient de déterminer au préalable :
- l'arborescence : logique, vulgarisée,
- le menu : repérable, mot clairs et concis,
- le mode de navigation : souple et harmonisé. L'internaute doit trouver en 3 clics l'information recherchée.
La charte graphique internet correspond donc à l'ensemble des règles (accessibilité, lisibilité, ergonomie) auxquelles se rajoutent l'identité graphique.
Mise en page : une page d'accueil trop agressive et chargée ne donne pas envie à l'internaute de naviguer plus loin. Cependant, les internautes sont plus patients lorsque le contenu est de qualité. Ainsi, si une bonne mise en page n'augmente pas les performances, elle contribue cependant largement à la satisfaction de l'internaute.
L'utilisation d'espaces blancs entre les paragraphes et pour les marges gauche et droite augmente la compréhension de 20 %.
Liens hypertextes VS icônes : il est important de prendre en compte la catégorie de vos utilisateurs dans le choix de mettre une icône, un lien ou les deux.
Les liens sous format texte sont plus souvent cliqués car compris plus rapidement. Enfin, un lien colorisé est plus cliqué qu'un lien noir car il est plus facilement repérable. De façon générale, une page dense avec beaucoup de liens met plus de temps à être assimilée. Par ailleurs, un alignement répétitif n'augmente pas la compréhension.
Un bon principe pour les icônes : les faire les plus grandes possibles, les mettre dans une zone permanente et les disposer horizontalement.
Indications de navigation : L'acceptation et l'impact d'une animation (vidéo, animation flash, audio etc...) sont augmentés lorsque l'usager est prévenu et invité à lancer son démarrage quand il le souhaite. Attention cependant à la multiplication des menus qui entraîne l'internaute à parcourir votre site plus que ça ne l'aide à trouver une information !
[Mise à jour du Centre de ressources Hauts Pays Alpins - janvier 2018]