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

Faire un site web c’est bien. Un site de qualité c’est mieux ! – L’École Multimédia

Faire un site web c’est bien. Un site de qualité c’est mieux ! – L’École Multimédia

Faire un site web, ça paraît souvent facile même pour ceux qui ne savent pas comment faire. Un peu de texte, deux ou trois images, une vidéo… il n’y a rien de compliqué. Et c’est vrai qu’il existe de nombreux outils facilitant la vie des créateurs de contenus en ligne de nos jours.

Mais produire un site web de qualité, c’est une autre histoire !
Derrière l’apparente simplicité d’un site ou d’un service web, nous verrons qu’il y a un très large spectre de sujets et de thématiques à prendre en compte pour assurer à nos utilisateurs une expérience réussie. Nous verrons donc ensemble comment évaluer et s’assurer de la qualité d’un site web.

Luc Poupard

June 05, 2019
Tweet

More Decks by Luc Poupard

Other Decks in Programming

Transcript

  1. Qualité web
    Produire un site web, c’est bien.
    Un site de qualité, c’est mieux !
    Luc Poupard / 5 juin 2019 / L’École Multimédia

    View full-size slide

  2. Qui-suis-je ?
    • Designer front-end en Suisse romande
    • Membre du staff de Paris Web
    • Promouvoir le développement d’un web de qualité
    • 2 jours de conférences et 1 jour d’ateliers
    • 2019 : 14e édition
    • Association à but non lucratif

    View full-size slide

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

    View full-size slide

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

  5. Des contextes d’utilisation infinis
    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
    Faire un site web
    c’est facile !
    c’est compliqué

    View full-size slide

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

    View full-size slide

  7. 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
    La qualité web, c’est quoi… d’après vous ?

    View full-size slide

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

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

  10. La qualité web :
    un sujet transversal

    View full-size slide

  11. 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
    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é
    V
    Visibilité

    View full-size slide

  12. Un modèle transversal : VPTCS
    Vision des métiers contribuant à la qualité web
    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
    V
    Visibilité

    View full-size slide

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

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

    View full-size slide

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

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

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

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

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

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

    View full-size slide

  21. Comment on fait ça ?

    View full-size slide

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

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

  24. Améliorons !
    Paris Web
    10-12 octobre 2019
    www.paris-web.fr

    View full-size slide