Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Qualité Web

Qualité Web

#1
Bonjour à tous. Aujourd'hui je vais vous parler de qualité web.

#2
Avant de rentrer dans le vif du sujet, je vais juste faire un point sur ce que ça représente de faire un site web.
Pour beaucoup de personnes – même lorsque celles-ci n’ont pas les connaissances ou les compétences pour le faire, c’est facile de faire un site web et les gens s’imaginent qu’on peut en faire un en deux coups de cuillères à pot.

#3
En vérité, faire un site web ça implique une grande variété de connaissances et de compétences : accessibilité, ergonomie, performance, référencement, formulaires, marketing, e-mails…
Si on veut faire un site de qualité, on ne peut ignorer aucun de ces thèmes.
Bref, faire un site web, c’est pas si simple.

#4
Au-delà des compétences, on doit aussi gérer des contextes d’utilisation sans limite : des supports différents, des tailles différentes, des systèmes différents, des rendus différents, des périphériques différents…
Faire un site web de qualité, ça veut dire être capable de gérer toutes ces différences. Bref, c’est pas si simple.
Et là, je n’ai même pas parlé de technologies ou d’outils.
Il y a 20 ans, on pouvait faire des sites web avec peu de moyens. Et c’est toujours le cas pour n’importe quelle personne qui veut bien se donner un peu de peine, c’est la grande force du web.
Mais pour une entreprise, on ne peut plus gérer des sites comme ça et on doit passer à un mode de fonctionnement industrialisé…

#5
C’est là que le sujet de la qualité web entre en jeu.
Oui mais, c’est quoi la qualité web ?

#6
Si on demande à quelqu’un ce qu’il faut pour qu’un site soit de qualité, les gens répondront qu’il faut qu’il soit beau, ergonomique, performant, etc.
Dans le fond, c’est pas faux. Dans la pratique, ça n’a aucun sens.
Beau, bien… ce sont des qualificatifs subjectifs qui dépendent fortement de la vision de chaque individu et donc leur culture personnelle. On peut pas évaluer la qualité d’un site dans ces conditions.
De plus, on ne peut pas ne pas avoir de défauts sur un site. Il y a en aura toujours. On ne peut pas faire un site parfait, la qualité d’un site sera toujours relative.
Bref, pour juger de la qualité d’un site web, il faut aller plus loin que ça.

#7
Ce qu’il faut, c’est trouver des critères d’évaluation qui soient objectifs.
En définitive, on a besoin d’outils et de méthodes pour appliquer l’équivalent de l’assurance qualité qu’on peut trouver dans n’importe quelle industrie.
Parce qu’aujourd’hui, le développement de sites ou d’applications est clairement à un niveau de maturité industrialisable.
Je précise bien industrialisable et pas industrialisé, car on en est très loin dans beaucoup d’entreprises.

Ça tombe bien, une entreprise française a vu le jour avec cet objectif : Opquast, pour Open Quality Standard.
Je vais en parler plus en détail dans la suite de ma présentation, mais pour brosser un bref historique du projet, ça a commencé en 1999 par la constitution d’un annuaire en ligne référençant des sites et articles dédiés au développement de sites de qualité.
En 2004, une liste de bonnes pratiques a été mise en place (on va en reparler) et surtout, une définition de ce qu’est la qualité web a été posée.
Il faut savoir que c’est un projet unique au monde et qu’aucun autre projet de ce type n’existe ailleurs. Opquast est vraiment précurseur et commence depuis quelques années à exporter son modèle en dehors de la France, notamment au Canada et aux États-Unis.

#8
Cette définition, la voici : « la qualité web représente l’aptitude d’un service en ligne à satisfaire des exigences explicites et implicites ».
Cela veut dire qu’on doit déterminer les attentes des utilisateurs telles qu’ils les formulent, mais aussi celles qui ne sont pas forcément en mesure d’exprimer d’une part.
Et d’autre part on doit définir comment évaluer les actions et pratiques mises en place pour servir ces besoins.

#9
Maintenant qu’on a une définition, on va rentrer un peu plus dans le concret et parler d’une caractéristique essentielle de la qualité web : la transversalité.
Les fondateurs du projet Opquast ont établi un modèle synthétique permettant de schématiser cet aspect.

#10
Il s’agit du modèle VPTCS, mis à plat dès 2001 !
Ce modèle synthétise l’ensemble des attentes des utilisateurs, en 5 catégories qui correspondent au sigle du modèle : V pour visibilité, P pour perception, T pour technique, C pour contenus et enfin S pour services.
Chacune de ces catégories formalisent une attente des utilisateurs.
En répondant à chacun de ces 5 besoins, on est en mesure d’assurer le niveau de qualité d’un site web.

#11
D’un point de vue de concepteur de site (concepteur au sens large), le modèle nous permet aussi de retrouver l’ensemble des métiers et des compétences nécessaires à réalisation d’un site ou d’une application.

#12
Enfin le modèle permet aussi d’illustrer l’expérience globale de l’utilisateur d’un site.

Les contenus et services représentent la raison pour laquelle on utilise un site.
La visibilité, la perception et la technique représentent comment on perçoit et on interagit avec le site.

On retrouve aussi dans ce modèle la temporalité de l’usage d’un site, dans l’ordre des catégories.
La visibilité représente la phase avant la visite du site. La perception, la technique et les contenus représente la phase pendant laquelle on utilise le site. Et les services représentent la phase après les visites.
En d’autres termes, on peut distinguer la phase d’interaction avec l’interface du site (pendant la visite) et la phase globale d’expérience du site (sur tout le parcours de l’utilisateur, depuis sa recherche dans Google jusqu’à la livraison de sa commande à la maison, par exemple).

#13
Maintenant qu’on a une vision globale de ce que recouvre la qualité web, comment on fait en pratique pour garantir la qualité d’un site ?

#14
Pour chaque thème, métier, compétence… on peut atteindre un certain niveau d’excellence, représenté par ces pyramides.
Mais on pourra faire tout ce qu’on veut, on ne pourra jamais atteindre un niveau d’excellence dans tous les domaines.
C’est tout simplement impossible, ne serait-ce que parce que des critères essentiels à l’atteinte de l’excellence dans un domaine viendront inévitablement en conflit avec des critères d’un autre domaine.
Par exemple les attributs alt entre accessibilité et référencement.

Si on ne peut pas assurer un niveau d’excellence à tous les niveaux, on peut en tout cas assurer un niveau minimal global et solide.
C’est la base pour assurer la qualité d’un site web et c’est le parti pris d’Opquast.

#15
Bref, revenons au socle de base. Pour assurer ce socle de base, Opquast a établi une liste de bonnes pratiques, découlant du travail de synthèse fait pour élaborer le modèle VPTCS.

Une première liste a été publiée dès 2004. Il s’agit en fait d’une checklist de critères à atteindre pour avoir un site de qualité.
Chacune des bonnes pratiques de cette checklist est une règle précise découlant des exigences explicites ou implicites des utilisateurs dont on parlait tout à l’heure.

Cette checklist est le fruit d’un travail communautaire de nombreux professionnels du web francophone et est diffusée sous licence Creative Commons.
C’est-à-dire que n’importe qui est libre de l’utiliser et la partager (à condition de citer les auteurs).

Enfin, cette liste de bonne pratique évolue dans le temps, parce que les pratiques changent notamment.
Par exemple si on parle de réseau, ça fait déjà quelques années que le protocole HTTP/2 existe et il est facilement utilisé et utilisable aujourd’hui. Mais comme il apporte de gros changements comparé à la première version du protocole, ce qui était considéré comme un bonne pratique en HTTP/1 ne l’est plus forcément en HTTP/2. C’est le cas de la concaténation des ressources notamment.

Bref, aujourd’hui, on en est à la 3ème version de la checklist Opquast, qui contient 226 bonnes pratiques. Et les premiers travaux pour la version 4 vont commencer cette année.

#16
Depuis tout à l’heure, je parle de bonnes pratique, mais c’est pas forcément très palpable. On va donc voir concrètement, ce qu’est une bonne pratique.
Dans le cadre du projet Opquast, il a été défini à quelles règles doit répondre une bonne pratique pour pouvoir être considérée comme telle.
Si une proposition ne répond pas à l’ensemble des critères que je vais vous détailler là, alors elle ne peut pas être retenue comme bonne pratique.

Pour commencer, elle doit avoir une valeur ajoutée pour l’utilisateur.
C’est-à-dire que l’application de cette bonne pratique rend service d’une manière ou d’une autre à l’utilisateur.
Par exemple il y a une BP qui est « L’information n’est pas véhiculée uniquement par la couleur ». Cette bonne pratique couvre notamment le cas des personnes qui peuvent avoir du mal à distinguer les couleurs, comme les daltoniens. Si on transmet une information uniquement avec de la couleur, un daltonien peut complètement passer à côté !

Une bonne pratique doit aussi être vérifiable.
C’est-à-dire qu’on doit pouvoir la mesurer et la contrôler sans difficulté. En termes d’outils bien sûr, mais aussi en termes pratiques.
Par exemple, on ne pourrait pas vérifier une bonne pratique qui serait « Le site doit disposer d’une page d’erreur 404 et d’une page d’erreur 403 » car elle comporte deux conditions. Et si l’une est juste, l’autre peut être fausse.

Ensuite, une bonne pratique doit être réaliste.
Réaliste, ça veut dire qu’elle peut s’appliquer à n’importe quel type de site ou application.
Si une proposition de bonnes pratique semble évidente pour le site d’une multinationale, elle ne le sera pas forcément pour le site d’une association.
Par exemple, si je disais « le site doit être disponible en français et en anglais », ça pourrait être appliqué pour une multinationale, mais ça n’a aucun intérêt pour un grand nombre de sites.

Un autre critère inébranlable pour faire une bonne pratique : elle doit être universelle.
Ça veut dire que peu importe la langue, le sens de lecture, la culture… une bonne pratique doit être applicable dans tous les contextes.
Par exemple, on ne peut pas définir une bonne pratique à partir d’une législation nationale, car la législation est par définition locale et pas universelle.

Enfin une bonne pratique doit faire consensus.
C’est un héritage direct du modèle communautaire pour élaborer la checklist Opquast. Ce sont des professionnels de tout bords qui ont participé à l’élaboration de ces bonnes pratiques. Dès lors qu’un seul de ces professionnels trouve à redire sur une proposition de bonne pratique, c’est qu’elle n’est pas satisfaisante et elle doit être revue, retravaillée ou tout simplement abandonnée.

Enfin à l’inverse une bonne pratique ne doit pas faire référence à une solution technique. Parce que la technologie évolue. Certaines techno apparaissent, d’autres disparaissent. On ne peut donc pas se baser sur ça pour définir une bonne pratique.

Une bonne pratique ne doit pas non plus faire référence à une valeur numérique.
Là aussi parce qu’une valeur jugée acceptable un jour ne le sera pas éternellement. Par exemple si on prend le poids d’une page web, il y a 20 ans on faisait des pages de quelques dizaines de ko tout au plus. Aujourd’hui la moyenne des pages tourne autour des 2 Mo… Bref une bonne pratique en 2004 fixant la taille d’une page serait obsolète depuis longtemps aujourd’hui.

Enfin une bonne pratique ne peut pas faire référence à une norme avec des exigences multiples.
Ça rejoint à la fois les caractères vérifiables et universels expliqués juste avant.

#17
Pour vous rendre compte très concrètement de ce à quoi ressemble une bonne pratique, voici la bonne pratique numéro 1 de la checklist Opquast.
Elle est composée d’un intitulé clair et concis.
Elle est accompagnée du ou des objectifs qu’on atteint si on applique cette bonne pratique.
Et elle est enfin complétée de la solution technique et des moyens de contrôles qui sont respectivement la ou les solutions pratiques pour appliquer la bonne pratique, et la méthodologie à suivre pour vérifier l’application de la bonne pratique.

Donc là vous avez la première bonne pratique complète. Il y en 225 autres comme ça !

#18
On va pas toutes les faire mais sachez qu’elles sont catégorisées dans les rubriques suivantes.
L’intérêt de ces regroupement est de pouvoir utiliser les bonnes pratiques en fonction du contexte.
Par exemple, il y a une catégorie de bonnes pratiques liées au e-commerce. Mais si on doit contrôler un site vitrine, on n’a pas besoin de se soucier de cette catégorie donc on peut passer outre ces critères.

#19
Comme je suis sûr que vous avez envie de plonger dans cette checklist, vous pouvez la trouver en ligne.
D’ailleurs en plus de la checklist Opquast et de ses 226 bonnes pratiques, vous pourrez y trouver d’autres listes de bonnes pratiques plus spécifiques et qui comportent des critères propres.
Enfin vous trouverez aussi l’ensemble des 226 bonnes pratiques dans le livre Qualité Web.

#20
Vous allez me dire : « c’est bien beau tout ça, mais comment on fait nous pour appliquer ça ? »

#21
Pour moi c’est l’action numéro 1 à mettre en application : passer la certification Opquast.
Elle permet d’acquérir les fondamentaux pour comprendre et maîtriser les bonnes pratiques de qualité web et être en mesure d’agir en conséquence.

La certification coûte 180 € TTC et une fois inscrit, on a accès à une plateforme d’entraînement pendant 3 mois.
Il y a tout un parcours composé d’un guide de certification à lire, des articles, des vidéos à regarder, des quiz pour vérifier l’acquisition des connaissances tout au long de l’entraînement, jusqu’aux examens blancs pour se préparer à l’examen final.

Ce dernier se présente sous la même forme que le TOEIC : un QCM de 125 questions à traiter en 1h30.
À la fin on obtient une note entre 0 et 1000, avec des paliers d’expertises à partir de 500 points.

#22
Au-delà de la certification qui me paraît nécessaire, le mieux à faire est de se faire nos check-list qualité, en partant de la check-list Opquast v3 qui permet d’assurer le socle de base.
On n’est pas obligé de prendre en compte tous les critères dès le début, on peut n’en sélectionner qu’une portion qui nous semble prioritaire. Puis enrichir petit à petit.

Encore plus tard, on pourra imaginer enrichir ces check-list à partir d’autres bonnes pratiques plus spécifiques à certains domaines, en fonction de notre contexte à nous.

Enfin, le mieux est de se concentrer sur chaque bonne pratique en fonction de l’étape du projet ou du métier.
Il y a en effet des bonnes pratiques qu’il sera plus efficace d’intégrer à des moments précis du projet. Par exemple, une bonne pratique sur les contrastes de couleur, c’est à l’étape du design que c’est le plus intelligent de la traiter.

#23
Bref, améliorons !

557b15f15e7379c26d6dd3ea393bcdb9?s=128

Luc Poupard

January 31, 2019
Tweet

Transcript

  1. Qualité web - Luc Poupard Meetup #01 / 31 janvier

    2019
  2. 2 Faire un site web, c’est facile !

  3. 3 Des connaissances et des compétences variées Faire un site

    web c’est facile ! Contenus Design Ergonomie Référencement Performance Sécurité Marketing Code Relation client Traductions Formulaires Navigation Accessibilité Gestion de projets Documents Cookies Téléchargements E-commerce Serveur Mobile Standards Impression E-mails Médias c’est compliqué
  4. 4 Des contextes d’utilisation infinis Faire un site web c’est

    facile ! Desktop Mobile Montre Télévision Frigo Voiture Windows Mac Linux Android iOS Internet Explorer Firefox Chrome Souris Clavier Trackpad Tactile Lecteur d’écran Imprimante Plage braille Flux RSS Moteurs de recherche Frigo c’est compliqué
  5. 5 La qualité web, c’est quoi ?

  6. 6 La qualité web, c’est quoi… d’après vous ? Un

    site de qualité… • Est beau et donne envie de l’utiliser • Est ergonomique et fonctionne bien • N’a aucun défaut • Charge rapidement • … Oui mais non… • Beau, bien… c’est subjectif : ça dépend du point de vue de chacun • Il y aura toujours des défauts : on n’atteint jamais la perfection, mais on peut toujours améliorer davantage
  7. 7 Du jugement subjectif à l’évaluation objective Objectif : contrôle

    / assurance qualité appliqué au web • Mesurer, évaluer et estimer le niveau de qualité • Gérer, améliorer et contrôler • Garantir, certifier et assurer Réponse : projet Opquast • 1999 – Création d’un annuaire dédié à la qualité web • 2004 – Liste de bonnes pratiques et définition de la qualité web
  8. 8 Définition « La qualité web représente l'aptitude d'un service

    en ligne à satisfaire des exigences explicites ou implicites » Définition proposée en 2004 dans le cadre du projet Opquast inspirée de la norme ISO 8402:1994 (Management de la qualité et assurance de la qualité) elle-même révisée par la norme ISO 9000:2015 (Systèmes de management de la qualité) ISO 8402:1994 : https://www.iso.org/fr/standard/20115.html ISO 9000:2015 : https://www.iso.org/fr/standard/45481.html
  9. 9 La qualité web : un sujet transversal

  10. 10 Un modèle transversal : VPTCS Un modèle pour synthétiser

    les attentes des utilisateurs finaux conçu en 2001 par Élie Sloïm et Éric Gateau V Visibilité P Perception T Technique C Contenus S Services Être rencontré par ses utilisateurs potentiels Être utilisable et correctement perçu par ses utilisateurs Fonctionner correctement Délivrer de l’information de qualité Proposer, accompagner et/ou générer la réalisation de services de qualité
  11. 11 Un modèle transversal : VPTCS Vision des métiers contribuant

    à la qualité web V Visibilité P Perception T Technique C Contenus S Services Communication Marketing Référencement Positionnement Accessibilité Ergonomie Design Navigation Hébergement Sécurité Performance Conformité W3C Rédaction Traduction Stratégie éditoriale Architecture de l’information E-commerce Logistique E-services Relation client Support / SAV
  12. 12 Un modèle transversal : VPTCS Vision globale de l’expérience

    utilisateur V Visibilité P Perception T Technique C Contenus S Services Pourquoi utiliser le site ? Comment mettre en valeur les contenus et services ? Après la visite Avant la visite Pendant la visite UI UX
  13. 13 Comment évaluer, gérer et garantir la qualité d’un site

    web ?
  14. 14 Entre excellence et minimum vital WCAG AAA Accessibilité Tests

    utilisateurs Ergonomie Tests de charge Performance Tests d’intrusion Sécurité Conformité W3C Standards SEO SEM Référencement Etc. Etc.
  15. 15 Bonnes pratiques • Première liste de bonnes pratiques qualité

    en 2004 • Traductions d’exigences génériques en règles individuelles précises • Élaboration communautaire • Diffusion sous licence CC BY-SA • Attribution – Partage dans les mêmes conditions • Évolution dans le temps • Version 3 depuis 2015 : 226 bonnes pratiques • Premiers travaux pour la version 4 courant 2019
  16. 16 Une bonne pratique doit : • Avoir une valeur

    ajoutée pour l’utilisateur • Être vérifiable • Être réaliste • Être universelle • Faire consensus …mais ne doit pas : • Faire référence à une solution technique • Faire référence à une valeur numérique • Faire référence à une norme ou un standard avec des exigences multiples
  17. 17 Exemple de bonne pratique BP #1 – Chaque image

    décorative est dotée d’une alternative textuelle appropriée Objectif Éviter aux utilisateurs placés dans des contextes où les images ne sont pas perceptibles (navigateur texte, lecteur d’écran, navigateur avec images désactivées) d’être perturbés par des informations sur des images qui leur sont inutiles. Fournir aux robots d’indexation uniquement des informations pertinentes. Solution technique D’une manière générale, si un code (un attribut HTML, par exemple) est prévu pour l’alternative, il doit être présent, mais en restant vide. Pour les cas les plus courants : • Donner à chaque élément img décoratif un attribut alt vide (alt=""). • Donner à chaque élément area décoratif un attribut alt vide. • Laisser vide le contenu de chaque élément object concerné (entre les balises <object> et </object>). • Laisser vide le contenu de chaque élément canvas concerné. • Ne donner à chaque élément svg concerné aucun attribut ARIA qui lui confère un label (aria-labelledby, aria- describedby, etc.). Moyen de contrôle Cette vérification s’effectue dans le code HTML généré à l’aide d’un inspecteur de code ou d’une barre d’outils dédiée : • Tester au préalable la présence des attributs alt en vérifiant la validité du code HTML généré, par exemple avec le validateur du W3C (le validateur HTML signale les images privées d’alternative) : chaque image décorative doit avoir un attribut alt (présent mais vide). • Vérifier que chaque image img ne véhiculant pas d’information nécessaire à la compréhension du contenu a bien un alt vide. • Vérifier les éventuels autres objets graphiques du type object, canvas dont le contenu (entre les balises ouvrantes et fermantes) doit être vide. • Vérifier les éventuels autres éléments du type svg susceptibles de recevoir une alternative via un attribut ARIA.
  18. 18 Bonnes pratiques : thématiques • Alternatives • Code •

    Contact • Contenus • E-commerce • Espaces publics • Fichiers et multimédia • Formulaires • Hyperliens • Identification • Internationalisation • Mobile • Navigation • Newsletter • Présentation • Sécurité et confidentialité • Serveur et performances • Syndication • Tableaux
  19. 19 En livre « Qualité web » Toutes les bonnes

    pratiques En ligne https://checklists.opquast.com/fr/
  20. 20 Comment on fait ça, nous ?

  21. 21 Acquérir les connaissances et les compétences Certification Opquast :

    Maîtrise de la qualité en projet Web • Comprendre et maîtriser les bonnes pratiques qualité, ainsi que le vocabulaire et les risques associés • Être capable de décider et agir en connaissance de cause • Plateforme de formation accessible pendant 3 mois • Examen type TOEIC (Test of English for International Communication) • QCM de 125 questions en 1h30 • Note de 0 à 1000
  22. 22 Utiliser les check-lists • Utiliser la check-list Opquast v3

    comme base d’amélioration continue • Choisir les critères qu’on souhaite appliquer en priorité • Ajouter de nouveaux critères au fur et à mesure qu’on s’améliore • Construire ses propres check-lists, selon les besoins • Utiliser d’autres check-lists et ajouter ses propres critères • Fonctionner par étape de projet et/ou par métier • Cahier des charges, spécifications, design, développement, conception éditoriale, phase de test, audit…
  23. Améliorons !