Quand on aborde la création ou la refonte d’un site internet d’entreprise, une question revient régulièrement : sur quels critères s’appuyer pour juger objectivement de sa qualité ?

L’évaluation d’un site web reste trop souvent cantonnée à des jugements superficiels (« j’aime » ou « je n’aime pas »). Un site peut générer des demandes avec une interface simple ou datée si le besoin existe. L’enjeu d’une conception exigeante n’est pas de faire du beau pour le beau, mais de faciliter l’usage et la compréhension de l’offre. Dieter Rams résumait sa philosophie de design par l’utilité, la simplicité et la précision d’exécution.[5]

C’est ici que les standards web interviennent : ils fournissent des critères vérifiables pour évaluer l’accessibilité, la performance et la structure d’un site.[2][3][4]

1. Des repères partagés plutôt qu’une autorité unique

Contrairement à d’autres secteurs industriels, il n’existe pas d’organisme mondial unique qui régenterait le web ou certifierait obligatoirement les sites internet. La qualité web est le résultat d’une recherche collective de consensus et de référentiels ouverts développés par la communauté technique, les ergonomes et les acteurs de l’écosystème :

  • Le World Wide Web Consortium : organisation internationale qui publie des standards du web. Le standard langage de balisage hypertexte Living Standard est maintenu par le groupe de travail sur les technologies des applications hypertextes du web.[3][4]
  • Les Core Web Vitals (Google) : métriques d’expérience de page pour le chargement, la réactivité et la stabilité visuelle. Google recommande de bons résultats, tout en précisant que cela ne garantit pas une position élevée dans les résultats.[2]
  • L’accessibilité numérique : les recommandations internationales pour l’accessibilité des contenus web guident la conception de contenus accessibles aux personnes en situation de handicap. La France dispose aussi du référentiel français d’amélioration de l’accessibilité.[4][8]
  • Opquast (Open Quality Standards) : référentiel français de bonnes pratiques vérifiables en qualité web.[1]
  • Le règlement général sur la protection des données : il encadre notamment la minimisation des données et la protection des données dès la conception.[7]

À ces repères s’ajoutent les travaux reconnus sur l’ergonomie des interfaces (Jakob Nielsen, Amélie Boucher, Bastien & Scapin) et les critères d’éco-conception numérique.[6][9]

2. Le modèle de visibilité, de perception, de technique, de contenus et de services : les 5 dimensions de l’expérience utilisateur

Pour appréhender la qualité web de manière globale sans se perdre dans le jargon, on peut s’appuyer sur le modèle de la visibilité, de la perception, de la technique, des contenus et des services. Créé par Élie Sloïm et Éric Gateau, il structure l’expérience d’un internaute en cinq dimensions chronologiques.[13]

Diagramme officiel du modèle en cinq dimensions d'Opquast : visibilité, perception, technique, contenus et services. Une flèche reliant perception, technique et contenus représente l'interface utilisateur; une flèche globale de la visibilité aux services représente l'expérience utilisateur.
Figure 1 — Le modèle de la visibilité, de la perception, de la technique, des contenus et des services (Opquast® / licence Creative Commons Attribution-ShareAlike, version 4), créé par Élie Sloïm et Éric Gateau. Source : Opquast (lien externe, nouvelle fenêtre).
  1. Visibilité (avant la visite) : permettre à l’internaute de trouver le service recherché grâce à une architecture sémantique comprise par les moteurs de recherche.
  2. Perception (à l’ouverture) : accueillir confortablement le visiteur avec une hiérarchie visuelle claire et des contrastes adaptés dès les premières secondes.
  3. Technique (pendant la consultation) : un site rapide et stable sur tous les appareils, sans surcharge de code qui ralentit le navigateur.
  4. Contenus (pour informer et rassurer) : des explications soignées, des preuves concrètes et une transparence totale sur l’éditeur du site.
  5. Services (pour agir) : un accès direct aux moyens de contact et aux fonctionnalités utiles, sans parcours d’obstacles ni formulaires démesurés.

Comme le synthétise le schéma, les étapes Perception, Technique et Contenus circonscrivent l’interface utilisateur, tandis que la chaîne complète, de la Visibilité aux Services, embrasse l’expérience utilisateur globale.

3. Qualité web et CRO : lever les premiers freins à la conversion

Pour Tanea, une démarche CRO sérieuse doit partir d’une expérience accessible et fiable : les référentiels aident à repérer et lever les premiers obstacles, puis l’analyse des besoins et des parcours oriente les améliorations à tester.

A. La vitesse perçue et la stabilité (Core Web Vitals)

  • temps d’affichage du plus grand élément de contenu ≤ 2,5 secondes : mesure le délai d’affichage du plus grand élément visible. Google classe cette valeur comme bonne à 2,5 secondes ou moins.[2]
  • décalage cumulatif de mise en page < 0,1 : mesure la stabilité visuelle pendant le chargement.[2]
  • délai entre une interaction et le prochain affichage < 200 millisecondes : mesure la réactivité d’une page aux interactions.[2]

B. L’ergonomie mobile et l’accessibilité tactile

  • Cibles de pointeur (critère 2.5.8, niveau intermédiaire de conformité) : ce critère d’accessibilité fixe une taille minimale de 24×24 pixels définis par les feuilles de style, sauf exceptions prévues. Le critère 2.5.5 de niveau le plus exigeant de conformité fixe une cible minimale de 44×44 pixels, avec ses propres exceptions.[4]
  • Contrastes de couleurs (critère 1.4.3) : le texte courant doit atteindre un ratio de contraste de 4,5:1, sous réserve des exceptions prévues par le critère.[4]
  • Formulaires accessibles (critères 3.3.1 et 3.3.2, niveau de base de conformité) : le critère 3.3.1 demande d’identifier et de décrire en texte les erreurs de saisie détectées automatiquement ; le critère 3.3.2 demande de fournir des étiquettes ou des instructions pour les champs de saisie.[4]

C. La transparence et les signaux de réassurance (Opquast & cadre légal)

  • Identification de l’éditeur (Opquast / loi française pour la confiance dans l’économie numérique) : afficher les informations qui permettent d’identifier l’éditeur et l’hébergeur selon les obligations applicables.[1][11]
  • Clarté du périmètre de service : indiquer avec précision ce que l’entreprise prend en charge (et ce qu’elle ne fait pas) permet de qualifier les contacts en amont et de lever les doutes avant le premier échange.

D. La sobriété de parcours et l’éthique des données

  • La sobriété du parcours : une fenêtre de consentement qui masque le contenu peut gêner la consultation. Le respect de la vie privée commence aussi par limiter les données collectées au besoin poursuivi et respecter les règles applicables aux traceurs.[7][12]

4. Comment ces exigences guident nos choix de design et d’ingénierie

Pour une consultante ou une équipe de développement axée sur les résultats, ces standards ne sont pas de simples cases à cocher après coup : ils déterminent l’architecture même du projet, du design au code.

Côté Design : la structure avant l’artifice

  • Un système de design tokenisé : plutôt que de définir des tailles au jugé selon les maquettes, nous structurons les interfaces autour de jetons de design stricts (design tokens). Les échelles typographiques, les hauteurs de ligne et les rythmes d’espacement verticaux sont mathématiquement calibrés pour garantir une hiérarchie visuelle reposante et prévisible.
  • La rareté visuelle de la couleur d’action : pour guider le regard sans ambiguïté, la couleur d’accent vive est réservée exclusivement aux déclencheurs d’action prioritaires (demande d’audit, appel direct). Elle n’est jamais diluée dans des badges décoratifs, des bordures secondaires ou des éléments de remplissage.
  • La lisibilité de lecture : les longs textes explicatifs sont systématiquement alignés à gauche pour respecter le balayage oculaire naturel, le centrage étant réservé aux titres courts et aux appels à l’action finaux.

Côté Code : la frugalité technique au service de la performance

  • L’approche static-first (langage de balisage hypertexte et feuilles de style) : générer le code de balisage à l’avance peut réduire le travail demandé au navigateur avant l’affichage du contenu. La performance doit toutefois être mesurée sur les pages réelles, car elle dépend aussi des ressources et de l’environnement de consultation.[10]
  • Astro comme illustration moderne de cette philosophie : c’est précisément pour cette raison que nous privilégions des architectures modernes orientées composants comme Astro, aux côtés des générateurs statiques modernes. En livrant du code de balisage pur par défaut (zéro kilo-octet de JavaScript client superflu sur les pages de contenu) tout en conservant une grande modularité de développement, ce type d’outillage assure que la vitesse de chargement n’est pas négociée au détriment de la qualité de conception.
  • L’exploitation des standards natifs du navigateur : recourir aux fonctionnalités natives de la plateforme web (balises <dialog> pour les fenêtres modales accessibles, <details> pour les sections dépliables, validation native des formulaires) plutôt que d’empiler des bibliothèques externes tierces qui alourdissent les pages et introduisent des failles de sécurité potentielles.
  • L’hébergement local des ressources : auto-héberger les polices de caractères et optimiser les médias à la source élimine les allers-retours vers des serveurs tiers, supprime les latences liées au système de noms de domaine et protège la confidentialité des visiteurs.

5. Grille d’évaluation : les signaux d’alerte à surveiller sur son site

Si vous souhaitez évaluer l’état de votre site actuel ou challenger un prestataire lors d’une refonte, quatre tests concrets permettent de mesurer la réalité du dispositif sans connaissances en programmation :

  1. Le test plein soleil sur mobile : sortez à l’extérieur en plein jour et naviguez sur votre site depuis votre téléphone. Les textes sont-ils immédiatement lisibles sans zoomer ? Les numéros de téléphone sont-ils cliquables d’une seule main avec le pouce ?
  2. Le test du premier écran sur réseau mobile : videz le cache de votre navigateur mobile et chargez votre page d’accueil. Devez-vous attendre plus de 2 à 3 secondes avant de pouvoir lire le premier paragraphe ? L’affichage saute-t-il pendant que les images finissent de charger ?
  3. Le test de réassurance : un visiteur peut-il trouver en moins de 5 secondes votre identité, votre adresse réelle et le statut de votre structure ?
  4. Le test de fluidité d’accueil : l’accès à l’information est-il immédiat, ou l’écran est-il obstrué par une bannière de cookies agressive ou une fenêtre surgissante dès la première seconde ?

6. Pour aller plus loin

Pour les lecteurs souhaitant approfondir ces référentiels et consulter les travaux des spécialistes mentionnés, les principales publications de référence sont listées ci-dessous :

Références & Publications

  1. Élie Sloïm et Laurent Denis, Qualité et conformité des services numériques – Fondamentaux, méthode et référentiel Opquast, Éditions Eyrolles.
  2. Google Search Central, Core Web Vitals et résultats de recherche (lien externe, nouvelle fenêtre).
  3. Groupe de travail sur les technologies des applications hypertextes du web, standard vivant du langage de balisage hypertexte (lien externe, nouvelle fenêtre).
  4. World Wide Web Consortium, initiative pour l'accessibilité du web, recommandations internationales pour l'accessibilité des contenus web version 2.2 (lien externe, nouvelle fenêtre).
  5. Dieter Rams, ten principles for good design (lien externe, nouvelle fenêtre).
  6. Nielsen Norman Group, 10 usability heuristics (lien externe, nouvelle fenêtre).
  7. Règlement général sur la protection des données, articles 5 et 25 (lien externe, nouvelle fenêtre).
  8. Direction interministérielle du numérique, référentiel général d'amélioration de l'accessibilité (lien externe, nouvelle fenêtre).
  9. World Wide Web Consortium, recommandations pour la durabilité du web (lien externe, nouvelle fenêtre).
  10. Astro documentation, pages and static rendering (lien externe, nouvelle fenêtre).
  11. Loi pour la confiance dans l'économie numérique, article 6 (lien externe, nouvelle fenêtre).
  12. Commission nationale de l'informatique et des libertés, règles applicables aux cookies et autres traceurs (lien externe, nouvelle fenêtre).
  13. Opquast, le modèle de la visibilité, de la perception, de la technique, des contenus et des services : origine et présentation (lien externe, nouvelle fenêtre).