$30 off During Our Annual Pro Sale. View Details »

Faire un site web c’est bien. Un site de qualité c’est mieux ! – Webmardi 2 novembre 2021

Faire un site web c’est bien. Un site de qualité c’est mieux ! – Webmardi 2 novembre 2021

Diapositive # 1

Bonjour à tous et à toutes, merci d'être venu pour ce 116e épisode de Webmardi !
Aujourd'hui je vais donc vous parler de qualité web.

Diapositive # 2

Quelques personnes me connaissent déjà mais pour les autres je vais me présenter brièvement, avant de commencer.
Je m'appelle donc Luc Poupard, je suis français et je vis en Suisse depuis bientôt 10 ans.

Actuellement, je suis développeur WordPress chez Proton.
On recrute à tour de bras d'ailleurs, donc n'hésitez à jeter un œil aux postes ouverts, il y a en a pour tous les goûts : https://careers.protonmail.com/

Je fais aussi partie de l'organisation de Paris Web depuis quelques années, et j'en suis président depuis l'an dernier.
Pour ceux qui ne connaissent Paris Web est une association dont la mission et de promouvoir le développement d'un web accessible de qualité et ça prend principalement la forme d'une conférence annuelle dont la 16e édition a eu lieu le mois dernier.
https://www.paris-web.fr/

Voilà pour ma pomme, passons aux choses sérieuses.

Diapositive # 3

Au programme de cette présentation, on va parler très vite de la facilité de faire un site web.
On enchaînera sur la définition de la qualité web et de ses enjeux.
On verra comment évaluer et gérer la qualité web en pratique, en théorie et en pratique.

Diapositive # 4

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.

Diapositive # 5

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.

Diapositive # 6

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é des technologies et des outils de développement.
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é…

Diapositive # 7

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

Diapositive # 8

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 ne 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.

Diapositive # 9

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.

Diapositive # 10

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.

Diapositive # 11

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.

Diapositive # 12

Il s’agit du modèle VPTCS et il a été conçu par Élie Sloïm and Éric Gateau en 2001 et sous licence CC BY-SA 4.0 International.

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.

Diapositive # 13

D’un point de vue des concepteurs que nous sommes, 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.

Diapositive # 14

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).

Diapositive # 15

Maintenant qu’on a une vision globale de ce que recouvre la qualité web, la question c'est comment fait-on pour garantir la qualité d’un site ?

Diapositive # 16

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

Diapositive # 17

Pour assurer ce socle de base, Opquast a établi une liste de règles 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 checklist é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 4ème version de la checklist Opquast, qui contient 240 règles : https://checklists.opquast.com/fr/assurance-qualite-web/

Diapositive # 18

Depuis tout à l’heure, je parle de règles, mais ce n’est pas forcément très palpable. On va donc voir concrètement, ce qu’est une règle.
Dans le cadre du projet Opquast, il a été défini à quels critères doit répondre une règle pour pouvoir être considérée comme telle.

Pour commencer, elle doit avoir une valeur ajoutée pour l’utilisateur.
C’est-à-dire que l’application de cette règle 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 règle 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é !

Ensuite, une règle 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 règle 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.

Une règle 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 règle 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.

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

Enfin règle 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 règles. Dès lors qu’un seul de ces professionnels trouve à redire sur une proposition de règle, c’est qu’elle n’est pas satisfaisante et elle doit être revue, retravaillée ou tout simplement abandonnée.

Enfin à l’inverse une règle 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 règle.
Une règle 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 règle en 2004 fixant la taille d’une page serait obsolète depuis longtemps aujourd’hui.

Diapositive # 19

Pour vous rendre compte très concrètement de ce à quoi ressemble une règle, voici un exemple concret de règle Opquast.
Elle est composée d’un titre clair et concis.
Elle est accompagnée du ou des objectifs qu’on atteint si on applique cette règle.
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 règle, et la méthodologie à suivre pour vérifier l’application de la règle.
Et il y a donc 239 autres règles définies sur le même modèle !

Diapositive # 20

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

Diapositive # 21

Le plus simple est de s'appuyer sur la checklist Opquast qui permet d’assurer le socle de base.
On n’est pas obligé de prendre en compte toutes les règles dès le début, on peut n’en sélectionner qu’une portion qui nous semble prioritaire. Puis enrichir petit à petit.
Pour aller un peu plus loin, on peut ensuite enrichir cette checklist avec des règles ou bonnes pratiques plus spécifiques à certains domaines ou métiers, en fonction du contexte dans lequel on évolue.
Enfin, comme l'un des grands intérêts d'Opquast est la vision transversale des projets web, une choses très intéressante à faire dès lors qu'on maîtrise un peu les règles, c'est de répandre la bonne parole auprès des personnes avec qui on travaille sur nos projets.
Personnellement je profite de la moindre occasion pour mettre en avant une règle auprès des collègues.

Diapositive # 22

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 règles de qualité web et être en mesure d’agir en connaissance de cause
La certification coûte 300 € 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 forme d'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.

Diapositive # 23

En complément de la checklist en ligne, je conseille le livre Qualité Web que vous allez pouvoir gagner dans quelques minutes.
Il détaille toute la philosophie et la démarche d'Opquast, et reprend aussi tous les contenus des règles de la checklist Opquast. C'est vraiment la bible de la qualité web.
À noter que le livre qu'on a aujourd'hui correspond à la version précédente des checklists et qu'une nouvelle version basée sur la version 4 va sortir le 3 décembre : https://www.editions-eyrolles.com/Livre/9782416000096/assurance-qualite-web-3e-edition

Il y a aussi une communauté très active qui a développé ou mis en place des outils autour des checklists notamment, comme des extensions pour WordPress (https://fr.wordpress.org/plugins/quality-checklist-opquast/) ou Drupal (https://www.drupal.org/project/opquast_checklist) par exemple, qui permettent de faciliter l'usage au quotidien sur un projet.

Tous les outils sont référencés sur le site d'Opquast : https://www.opquast.com/rendre-le-web-meilleur/outils/

Diapositive # 24

Merci de m'avoir écouté et rendons le web meilleur !

Luc Poupard

November 02, 2021
Tweet

More Decks by Luc Poupard

Other Decks in Programming

Transcript

  1. CONFIDENTIAL Proton Faire un site web c’est bien. Un site

    de qualité c’est mieux !
  2. Qui suis-je ? Développeur WordPress On recrute ! careers.protonmail.com 2

    Faire un site web c’est bien. Un site de qualité c’est mieux ! Organisateur et président L’événement pour un web accessible et de qualité paris-web.fr
  3. 3 Programme • Faire un site web, c’est facile !

    • La qualité web, c’est quoi ? • Évaluer et gérer la qualité d’un site web • Comment faire en pratique ? Faire un site web c’est bien. Un site de qualité c’est mieux !
  4. Faire un site web C’est facile ! 4

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

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

    bien. Un site de qualité c’est mieux ! Desktop Mobile Voiture Faire un site c’est facile ! c’est compliqué Moteurs de recherche Firefox Plage braille Trackpad Souris Lecteur d'écran Chrome Objets connectés Windows iOS Imprimante Clavier Télévision Tactile Bas débit Linux Mac Flux RSS Android Montre
  7. La qualité web C’est quoi ? 7

  8. Qu’est-ce que la qualité web ? Un site de qualité…

    • Est beau et donne envie de l’utiliser • Est ergonomique et fonctionne bien • N’a aucun défaut • Charge rapidement • … 8 Faire un site web c’est bien. Un site de qualité c’est mieux ! Oui mais non… • Beau, bien… c’est subjectif : ça dépend du point de vue • Il y aura toujours des défauts : on n’atteint jamais la perfection, mais on peut toujours améliorer davantage
  9. 9 Objectif : contrôle et assurance qualité appliqués au web

    • Mesurer, évaluer et estimer le niveau de qualité • Gérer, améliorer et contrôler • Garantir, certifier et assurer Du jugement subjectif à l’évaluation objective • 1999 – Création d’un annuaire dédié à la qualité web • 2004 – Liste de bonnes pratiques et définition de la qualité web • 2021 – L’écosystème Opquast est traduit en anglais et en espagnol Faire un site web c’est bien. Un site de qualité c’est mieux ! Réponse : Opquast (Open Quality Standard)
  10. 10 Définition proposée en 2004 dans le cadre du projet

    Opquast. Inspiré de la norme ISO 8402:1994 Management de la qualité et assurance de la qualité). Definition La qualité web représente l’aptitude d’un service en ligne à satisfaire des exigences explicites ou implicites Faire un site web c’est bien. Un site de qualité c’est mieux !
  11. La qualité web Un sujet transversal 11

  12. 12 VPTCS : un modèle transversal V Visibilité P Perception

    T Technique C Contenus S Services L’internaute veut trouver le site L’internaute veut utiliser, naviguer L’internaute veut que le site fonctionne L’internaute veut des contenus de bonne qualité L’internaute veut que tout se passe bien après la visite Conçu par Élie Sloïm and Éric Gateau en 2001. Sous licence CC BY-SA 4.0 International. Faire un site web c’est bien. Un site de qualité c’est mieux !
  13. 13 VPTCS : une vision des métiers V Visibilité P

    Perception T Technique C Contenus S Services Référencement Positionnement Marketing Communication Ergonomie Graphisme Design Navigation Sécurité Hébergement Performance Conformité W3C Rédaction Traduction Juridique Éditorial E-commerce Logistique Support Relation client Faire un site web c’est bien. Un site de qualité c’est mieux !
  14. 14 VPTCS : vision globale de l’expérience utilisateur V Visibilité

    P Perception T Technique C Contenus S Services Avant la visite Pendant la visite Après la visite Comment mettre en valeur les contenus et services ? Pourquoi utiliser le site ? UI UX Faire un site web c’est bien. Un site de qualité c’est mieux !
  15. Évaluer et gérer la qualité d’un site web 15

  16. 16 Philosophie : assurer le minimum vital Accessibilité Ergonomie Performance

    Vie privée Etc. Securité Marketing Faire un site web c’est bien. Un site de qualité c’est mieux !
  17. 17 • Première checklist en 2004 • Élaboration communautaire •

    Diffusion sous licence CC BY-SA • Évolution dans le temps ◦ Version 4 depuis 2020 : 240 règles Checklist d’assurance qualité Faire un site web c’est bien. Un site de qualité c’est mieux ! https://checklists.opquast.com/fr/assurance-qualite-web/
  18. 18 • Avoir une valeur ajoutée pour les utilisateur·ices •

    Être réaliste • Être vérifiable • Être universelle • Faire consensus dans la communauté Chacune des 240 règles doit… Faire un site web c’est bien. Un site de qualité c’est mieux !
  19. 19 Exemple de règle Ce qu’on trouve pour chaque règle

    : • Objectif Valeur ajoutée pour l’utilisateur·ice • Mise en œuvre Réaliste • Contrôle Vérifiable Faire un site web c’est bien. Un site de qualité c’est mieux !
  20. Génial ! Comment on fait ça ? 20

  21. 21 • Partager les bonnes pratiques avec les autres intervenants

    avec qui on travaille ◦ Design, communication, marketing, service client… Utiliser les checklists • Construire ses propres checklists en fonction de ses besoins ◦ Utiliser d’autres checklists et ajouter ses propres règles • Utiliser la checklist Opquast comme une base d’amélioration continue ◦ Définir une liste limitée de règles que l’on souhaite appliquer en priorité ◦ Ajouter de nouvelles règles au fur et à mesure que l’on maîtrise les précédentes Faire un site web c’est bien. Un site de qualité c’est mieux !
  22. 22 • Examen final ◦ QCM de 125 questions en

    1h30 ◦ Note de 0 à 1000 ; niveau d'expertise à partir de 500 points Certification « Maîtrise de la qualité en projet Web » • Acquérir un savoir commun et améliorer ses compétences ◦ Obtenir un socle de connaissances transversales ◦ Apprendre un vocabulaire commun ◦ Comprendre les exigences fondamentales des utilisateur·ices ◦ Maîtriser les risques majeurs et agir en connaissance de cause ◦ Tenir compte de la diversité des utilisateur·ices • Plateforme de formation en ligne accessible pendant 3 mois Faire un site web c’est bien. Un site de qualité c’est mieux !
  23. Quelques outils complémentaires Le livre 23 Faire un site web

    c’est bien. Un site de qualité c’est mieux ! Les outils de l’écosystème 3e édition le 2 décembre !
  24. Rendons le web meilleur ! 24