Skip to content

Instantly share code, notes, and snippets.

@joachimesque
Last active March 25, 2019 15:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save joachimesque/288a45dae4e7b6550e3b1b164ae70a8b to your computer and use it in GitHub Desktop.
Save joachimesque/288a45dae4e7b6550e3b1b164ae70a8b to your computer and use it in GitHub Desktop.

✨ Penser la qualité, pour le web


✨ La Qualité, kézako ?


Dans l’industrie, l’ingénierie et les affaires, la qualité a une interprétation pragmatique comme étant la non–infériorité ou la supériorité d'une chose ; elle est également définie comme étant l’adaptation à l’usage auquel elle est destinée (aptitude à l’usage) tout en répondant aux attentes des clients. La qualité est un attribut perceptif, conditionnel et plutôt subjectif qui peut être compris différemment par différentes personnes.

Wikipedia, Quality (business) https://en.wikipedia.org/wiki/Quality_(business)


La qualité est d’abord définie par son antithèse.

Chercher la qualité c’est maitriser les risques de non-qualité.

Pour le web, c’est viser la non-pourritude de l’expérience utilisateur.


L’industrie automobile a un siècle d'avance en matière de standards et processus pour améliorer la qualité de leur production.

Le web est jeune, on n’a pas de bonnes pratiques communément reconnues à l’échelle de l'industrie.


💡 Pourquoi se soucier de qualité ?


« With great powers come great responsibilities. »

Notre responsabilité envers la population du monde, c’est de rendre leur expérience du web moins pourrie.


Éviter la non-qualité peut rapporter des revenus perdus :

  • grâce à une meilleure position dans les moteurs de recherche
  • en améliorant la compatibilité, la vitesse et l’accessibilité de manière à diminuer le taux de rebond
  • en offrant un excellent service après vente pour améliorer le bouche à oreille

La confiance est dure à gagner, rapide à perdre. Plus on respectera les humains derrière les écrans, plus ils reviendront vers nous.


🖋 Comment définir la qualité
pour le web ?


La qualité est un attribut […] plutôt subjectif qui peut être compris différemment par différentes personnes.

Chacun a des attentes différentes, implicites ou non. Ces attentes ont pour base notre culture, notre expérience et notre maitrise de l’outil numérique, donc identifier des attentes communes va être dur.


Trouver des bonnes pratiques c’est se demander quelles attentes quantifiables sont cachées implicitement derrière des demandes floues.

Souvent, il n’y a pas besoin de chercher très loin : beaucoup de demandes sont logiques, les pratiques qui en découlent vont de soi.


👀 Identifier des Bonnes Pratiques


Une bonne pratique doit être :


Une bonne pratique doit être :

  • utile
    on va pas commencer à perdre notre temps à suivre des règles inutiles

Une bonne pratique doit être :

  • utile
  • universelle elle doit pouvoir s’appliquer partout, sans se baser sur des lois ou des cultures

Une bonne pratique doit être :

  • utile
  • universelle
  • réaliste si c’est pas possible à implémenter, c’est pas une bonne pratique

Une bonne pratique doit être :

  • utile
  • universelle
  • réaliste
  • consensuelle les professionnels comme les utilisateurs peuvent être d’accord sur les mêmes choses

Une bonne pratique doit être :

  • utile
  • universelle
  • réaliste
  • consensuelle
  • vérifiable on doit pouvoir faire des tests unitaires (mais pas forcément automatisés)

Le meilleur moyen de découvrir des bonnes pratiques serait de rassembler plein de professionnels et d’usagers du web, et de leur demander ce que ça veut dire pour eux.


📘 Opquast

Projet français qui produit des listes de bonnes pratiques (distribuées sous licences Creative Commons By-SA) et d’autres outils d’audit qualité.

La liste Opquast V3 regroupe 226 bonnes pratiques
et 70 recommandations.


n° 39. L'achat d'un produit ou service est possible sans création de compte.

  • Permettre à l’acheteur de commander immédiatement.
  • Lever la barrière de la création de compte.
  • Augmenter le taux de conversion.

Risques : abandon de panier, taux de rebond élevé


n° 82. Les sons et vidéos sont déclenchés par l'utilisateur.

  • Laisser à l'utilisateur le contrôle de l'interface sonore et visuelle lors de la consultation du site.
  • Ne pas surprendre l'utilisateur par la diffusion inattendue d'un contenu audio.
  • Ne pas imposer à l'utilisateur le déclenchement d'un contenu animé.

Risques : perte de confiance de l’utilisateur, taux de rebond élevé


n° 32. Le titre de chaque page permet d'identifier le site.

  • Permettre aux utilisateurs d'identifier immédiatement le site dans les onglets, les favoris, dans la fenêtre du navigateur ou encore dans les lecteurs d'écran.
  • Améliorer le référencement du site et sa présentation dans les moteurs de recherche.

Risques : mauvais référencement, confusion des utilisateurs


🔩 La démarche qualité dans la pratique


On commence par définir les bonnes pratiques qu’on suit, et celles qu’on ne veut pas suivre.

Certaines bonnes pratiques ne s'appliquent pas selon le type de site, d’autres peuvent être considérées comme trop peu risquées pour la non-qualité.

Cette sélection de bonnes pratiques est ajouté aux specs de tout nouveau développement, et est utilisé pour les audits.

Attention, chercher la surqualité (dépasser les attentes des utilisateurs) fait perdre du temps.


Idéalement, on pense à la qualité dès le cahier des charges.

Dans la pratique… c’est plus compliqué.


🔬 L’audit sur un site déjà en ligne.

Version rapide : le site est exploré et évalué rapidement, pour en tirer des indicateurs globaux.

Version expert : les pages du site sont échantillonnée pour obtenir des données précises.

L’audit résulte en un rapport qui documente la conformité ou non-conformité par rapport aux bonnes pratiques sélectionnées, ainsi que les recos pour arriver à la conformité.


📝 L’audit en suivi de production.

C’est une démarche de détection de risques, qui s’applique aux différentes étapes :

  • Wireframing (navigation, accessibilité…)
  • Design (structure, couleur, formulaires, accessibilité…)
  • Intégration (accessibilité, sémantique, alternatives…)
  • Développement (référencement, performance, sécurité…)
  • Contenus (informations de transparence, alternatives…)

🌐 La recherche de qualité est universelle,
le référentiel Opquast n’en est qu’un aspect


🧮 D’autres référentiels existent

  • Web Mobile
  • SEO
  • Performance
  • Green IT
  • Accessibilité (RGAA, WCAG)

🚀 Aller plus loin

  • Logiciel de vocalisation, navigation au clavier
  • Tests sur différents navigateurs ou Browserstack
  • Tests fonctionnels
  • Enquêtes auprès des usagers
  • Analyse de l’audience
  • Tests validateurs
  • A/B Testing

😴 En conclusion


On fait du web pour des humains

👩🏻 👩🏽‍🍳 👨🏻‍🦰 👩🏼‍🌾 🎅🏽

👵🏼 👱🏻‍♀️ 👨🏻‍🚀 👴🏿 👩🏾‍🦱

🧕🏽 🧔🏻 👨🏼‍🦲 🧑🏽 👩🏻‍🎤

Leur offrir une expérience de qualité une marque de respect. Évitons de pourrir leur expérience du web !


🤗 Merci !

Joachim Robert Février 2019, pour KissKissBankBank & Co.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment