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

Qualité Web – Meetup CDI

Qualité Web – Meetup CDI

#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 !

Luc Poupard

January 31, 2019
Tweet

More Decks by Luc Poupard

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

  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é

    View full-size slide

  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é

    View full-size slide

  5. 5
    La qualité web,
    c’est quoi ?

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  9. 9
    La qualité web :
    un sujet transversal

    View full-size slide

  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é

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  13. 13
    Comment évaluer, gérer
    et garantir la qualité
    d’un site web ?

    View full-size slide

  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.

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  19. 19
    En livre
    « Qualité web »
    Toutes les bonnes pratiques
    En ligne
    https://checklists.opquast.com/fr/

    View full-size slide

  20. 20
    Comment on fait ça,
    nous ?

    View full-size slide

  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

    View full-size slide

  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…

    View full-size slide

  23. Améliorons !

    View full-size slide