Améliorer ses sites : et si on passait à un Web de qualité ?

Temps de lecture : 12 minutes

Quels critères de qualité prendre en compte pour améliorer son site Web ? C’est le but de l’ouvrage Qualité Web : les bonnes pratiques pour améliorer vos sites. En feuilletant l’ouvrage, je m’attendais à trouver un livre axé sur le code et la programmation. Hé bien non ! Quelle ne fut pas ma surprise en constatant que ce livre plaçait les contenus et services au cœur de sa démarche. En fait, il donne les fondamentaux à appliquer pour ses sites Web. Il présente 217 bonnes pratiques qualité. Je l’ai donc lu à travers le prisme contenu. Et comme je pense aux autres… je partage avec vous mes notes de lecture.

La qualité Web – définition

Commençons tout d’abord par une définition de la qualité Web : c’est l’aptitude d’un service en ligne à satisfaire des exigences explicites ou implicites :

• Visibilité : aptitude à être trouvé – référencement
• Perception : aptitude à être utilisé et être correctement perçu – ergonomie
• Technique : aptitude à fonctionner correctement- sécurité
• Contenus : aptitude à délivrer de l’information de qualité – rédaction
• Services : aptitude à proposer accompagner ou générer des services de qualité –e-commerce

Partie 1 – Bonnes pratiques

Rubrique 1 – Alternatives

L’alternative textuelle d’une image ‘Alt’ sert à comprendre le sens des images que les internautes ne peuvent voir.
Elle permet aux robots d’exploiter l’information véhiculée par les images à des fins de référencement, indexation, traduction automatique. Son format est de 120 caractères maximum.
En aucun cas, les alt doit servir à mettre en avant les droits d’auteur ou de copyright.
Distinguez bien

• les images liens : elles ne doivent pas avoir d’alternatives vides, mais bien indiquer la cible du lien plus que la description de l’image
• les images textes : le alt doit donc reprendre le texte qu’elles mentionnent. Ne pas oublier qu’il est préférable d’écrire le texte en HTML et de lui appliquer une police particulière via un style précis plutôt que d’utiliser une image.
• les images complexes : l’alternative résume l’essentiel. Une description étendue devrait accompagner l’image, par exemple avec un tableau de contenus.

Alt Vide = pour les images qui ne véhiculent pas d’informations. Par exemple les images faisant partie des gabarits de page ou rédactionnelles, ajoutées au fil de la production du contenu du site, qui sont uniquement là à titre d’illustration, mais n’apportent rien de plus.
Chaque contenu vidéo et audio doit être accompagné de sa transcription textuelle intégrale ou synthétique. C’est meilleur pour le référencement.

Rubriques 2 – Code

• Hiérarchisation de la page : H1, H2, etc.
  Indiquez bien les différents niveaux de titre : un titre de niveau h1 qui correspond à la section principale du contenu de la page ainsi que des sous-titres h2, h3 jusque h6 (si nécessaire) correspondant à chaque sous-section de contenu principal de la page.
  Attention à ce que la structure ne comporte pas d’interruption : un titre h2 ne doit pas être suivi de h4, mais de h3.
  La présence d’un titrage rigoureux des sections de contenu permet aux outils d’extraire une table des matières du document.
• Présentez les dates de manière explicite
  11/12/15 fait-il référence au 11 décembre 2015 ou au 12 novembre 2015 (format US). Il est préférable d’écrire le mois en toutes lettres ou en abrégé et d’indiquer les 4 chiffres de l’année. Cette exigence doit se retrouver également dans le système de gestion qui automatise la date.
  Donnez des repères absolus aux lecteurs et toujours mentionner l’année. Préférer à « ce jeudi 12 février » à « demain ».
• Les éléments visuellement présentés sous forme de liste à puces doivent être balisés de façon appropriée dans le code source
  • Avec ul et li pour les listes pour les listes ordonnées
  • Ol et li pour les listes non ordonnées
  • Dl, dt et dd pour les listes de définition ou de description

Attention au copier coller de Word et ne conservez les puces extraites d’un fichier texte type word. De la même manière, balisez les citations avec q et blockquote pour les blocs de citations.

Rubrique 3 – Contact

Le site doit proposer au moins un moyen de contact : adresse e-mail ou formulaire.
Pour une super qualité, il peut proposer téléphone et mail.

Indiquez les coordonnées postales et téléphoniques du siège social des sociétés et organisations. C’est plus rassurant. On peut les faire figurer sur la page mentions légales, à propos ou contact, ou encore dans le pied des pages.
De la même manière, le numéro d’immatriculation délivré aux sociétés (SIRET en France) peut figurer dans les mentions légales ou à la page contact, avec l’identification de l’entité responsable des contenus et des services.

N’oubliez pas de mentionner le pays et d’écrire le format international des numéros de téléphone.

Toujours dans le souci de son utilisateur, chaque demande d’information doit faire l’objet d’un accusé de réception, confirmation archivable de sa requête. Il est bienvenu d’indiquer les délais de réponse aux demandes d’information (en général, entre 1 et 3 jours).

Rubrique 4 – Contenus

• Droits d’auteur
  Indiquez les informations relatives aux droits de copie et de réutilisation dans les mentions légales accessibles depuis chaque page : dans quelles conditions sont publiés les contenus, quelles contreparties à leur copie et à leur utilisation.
  Précisez les contenus publicitaires ou sponsorisés, pour lever toute ambiguïté.
• Le titre de pages TITLE doit permettre d’identifier le site et son contenu
  Cette pratique améliore le référencement de votre site.
  Title = Titre du contenu – Nom du site
  Étape 3 de votre inscription- Cyclop éditorial
  Le champ description doit également décrire le contenu de chaque page.
• Mise à jour du site
  Pour un site orienté utilisateur, il est important qu’il puisse connaître les nouveaux contenus ou services afin de trouver rapidement ce qu’il cherche. Il peut s’agir de la mise à disposition d’un flux RSS des actualités du site, d’indiquer un compte Twitter, Google ou autres où sont publiés les actus du site ou encore… d’avoir une rubrique actualités.
• Évitez le contenu dupliqué.
  SI pour une raison ou pour une autre, vous devez dupliquer des contenus, utilisez un code indiquant leur adresse de référence dite canonique
• N’utilisez pas le caractère UNICODE mais l’HTML.
  Par exemple →ou ≤ sont à proscrire, car non disponibles pour le navigateur
• Un lexique ou un glossaire adapté au public visé permet d’expliquer le vocabulaire sectoriel ou technique. C’est également bon pour le référencement.
  C’est aussi une manière de montrer qu’on s’adapte à son public, qu’on reste accessible.
• Attention à l’orthographe pour éviter les difficultés de compréhension des contenus.
  Accentuez les majuscules : sinon, cela peut conduire à la lecture d’un résultat aberrant.
  Marche au lieu de Marché par exemple.
  Voici quelques raccourcis qui fonctionnent dans un WYSIWIG :
  • Alt 183 : À
  • Alt 128 : Ç
  • Alt 144 : É

Rubrique 5 – E-commerce

Je détaille moins ici, mais cette partie est néanmoins à ne pas négliger.

• Indiquez les conditions de financement (taux global de crédit, conditions de réserves et délais d’acceptation) ainsi que les conditions de vente ou d’utilisation par exemple sur toutes les pages du site
• Indiquez la disponibilité des produits, le délai de livraison estimé avant la validation définitive de la commande
• Affichez les prix avec le détail des taxes et suppléments ainsi que le montant hors taxes
• Indiquez les périodes et les conditions de validité des offres spéciales
• Précisez les moyens de paiement disponibles et proposer au moins 2 moyens de paiement
• Spécifiez les conditions de garantie, du SAV
• Différenciez adresse de facturation et de livraison
• Indiquez la référence de la transaction après la validation de la commande
• Précisez l’adresse et les conditions de retour des produits et les conditions de remboursement
• Chaque réclamation fait l’objet d’un accusé de réception
• Proposez un moyen de contacter le responsable des réclamations

Rubrique 6 – Espace publics

Il est appréciable de pouvoir contacter facilement le modérateur pour signaler un abus.
Indiquez de manière visible quelles sont les conditions de modération. De la même manière, l’utilisateur appréciera de visualiser ses contenus pour les vérifier avant envoi définitif.

Rubrique 7- Fichiers et multimédias

Indiquez la durée des contenus vidéo et audio : pour laisser l’internaute décider du meilleur moment pour visionner un tel contenu.
Indiquez également le format des fichiers proposés en téléchargement et leur taille (proposez le lien vers l’installation du plug-in le cas échéant). Plus l’utilisateur a d’informations, plus il sera attentif au contenu que vous diffusez.

Les sons et les vidéos sont déclenchés par l’utilisateur pour ne pas le surprendre. Nous tous avons eu affaire à un son qui se déclenche au moment de l’ouverture du site. Personnellement, je bannis de tels sites, car selon moi, c’est vraiment intrusif.

Le texte des documents PDF est sélectionnable pour en permettre le référencement. Les documents PDF sont balisés pour mieux naviguer en leur sein.

Rubrique 8 – Formulaire

Les processus complexes sont accompagnés de la liste de leurs étapes. L’utilisateur est ainsi rassuré et il peut identifier le degré d’avancement. Cela évite un abandon en plein milieu d’une transaction.
En cas de rejet des données saisies dans un formulaire, indiquez les raisons de ce rejet à l’utilisateur.
N’oubliez pas, lorsque la soumission d’un formulaire est achevée, de prévoir un message confirmant la réussite ou non de l’action souhaitée.
Pour une utilisation plus aisée, regroupez selon un découpage intellectuel cohérent les éléments d‘une liste déroulante.

Rubrique 9 – Hyperliens

Le soulignement est réservé aux hyperliens. Ils sont visuellement différenciés du reste du contenu du site.
Chaque lien doit être doté d’un intitulé, ce n’est pas une simple URL. Il doit également comporter un libellé qui décrit sa fonction ou la nature du contenu vers lequel il pointe.
Normalisez ces libellés.
Pour une meilleure visibilité, séparez visuellement les hyperliens consécutifs.
Enfin, vérifiez la validité des liens internes aux sites pour éviter les erreurs 404.

Rubrique 10 – Identification

En France, c’est une obligation légale d’indiquer l’identité de la personne ou du service responsable des contenus dans les mentions légales. Et quoiqu’il en soit, c’est plus agréable de savoir à qui l’on s’adresse. Quoi de plus appréciable que d’avoir également accès à l’adresse complète et au numéro de téléphone plutôt qu’un formulaire de demande de contact.
Parce qu’effectivement la notion de proximité peut entrer en compte dans le choix d’un prestataire.
Je me demande d’ailleurs quel est le taux de conversion d’un formulaire anonyme par rapport au contact d’une personne.
N‘oubliez pas de choisir une extension cohérente avec l’identité, l’activité et la zone géographique couverte : évitez le .org pour un site d’e-commerce, un .com sera peu clair pour le site d’une association.
Dans tous les cas, vérifiez que l’adresse du site fonctionne avec ou sans 3w.

Rubrique 11 – Internationalisation

Précisez le pays dans les adresses postales et indiquez le téléphone au format international, comme précédemment indiqué.
Identifiez la langue principale d’une page cible lorsqu’elle diffère de celle de la page d’origine – de même pour des fichiers en téléchargement.

Rubrique 12 – Navigation

Chaque page affiche une information permettant de connaître son emplacement dans l’arborescence du site : fil d’Ariane.
Le site ne contient pas de liens internes vers des pages en construction. Le retour à la home page doit toujours être accessible, en général en haut à gauche via le logo du site.

Rubrique 13 – Newsletter

L’inscription aux newsletters est soumise à confirmation : envoyez un e-mail permettant l’inscription définitive.
N’hésitez pas, également, à envoyer un message de bienvenue expliquant les enjeux de la newsletter, sa fréquence d’envoi.
À chaque envoi, indiquez la date de diffusion dans le sujet des messages.
N’oubliez pas de proposer un lien de désinscription dans chaque newsletter, et depuis le site dans le formulaire d’abonnement.

Rubrique 14 – Présentation

Pour une bonne vision d’ensemble, la charte graphique doit être cohérente sur l’ensemble du site. Je rajouterai également qu’elle doit être en accord avec le reste des supports de communication : qu’il soit imprimé ou en ligne.
Pour plus de cohérence, je pense qu’il est également important de mettre en place des gabarits pour structurer les pages de la même manière.
Cela donne de bons repères à l’utilisateur et cela aide également les contributeurs, comme guide pour produire les contenus.
Attention : ne jamais mentionner ‘en haut à droite de l’écran’ : c’est dénué de sens pour l’utilisateur d’un logiciel de synthèse vocal ou sur mobile. Il faut proposer une autre manière d’identifier le contenu

Rubrique 15 – Serveurs et performances

Personnalisez la page d’erreur 404.
À défaut, proposez au moins le plan du site !

Rubrique 17 – Sécurité et confidentialité

La politique de confidentialité et de respect de la vie privée est accessible depuis toutes les pages.

Enfin, voici les pages à auditer en premier pour vérifier leur exemplarité :

• Accueil
• Sommaire de rubrique
• Page type
• Plan du site
• Formulaires et résultats de recherches
• Pages contenant une vidéo ou des fichiers en téléchargement
• Formulaire de contact
• Pages d’erreurs
• Pages de mentions légales, d’aide

Dans les parties suivantes, l’ouvrage donne ensuite d’autres indications, notamment les principaux aspects à prendre en compte pour faire un audit et consolider un cahier des charges. il propose aussi une check list super utile en suivi de production.
Bref, un ouvrage fondamental pour des sites de qualité à avoir comme bible dans sa bibliothèque avec Bien rédiger pour le Web d’Isabelle Canivet :-).

À se procurer rapidement : Qualité Web : les bonnes pratiques pour améliorer vos sites