Elie Sloïm @ElieSL Bonnes pratiques qualité Web Optimiser et rentabiliser les sites et leur production
Plan de l intervention Faisons connaissance Qualité Web Bonnes pratiques Les outils Améliorer massivement le Web Quel retour sur investissement? Et après? Vos questions Bonnes pratiques Bayonne - Septembre 2013 Page 2
Elie Sloïm - Président - Fondateur - @ElieSL Auteur d ouvrages de référence Mémento «Site Web : les bonnes pratiques», Eyrolles (10 000 ex. vendus). Auteur du livre «Qualité Web» (40 / 500 ex. vendus) et de plus de 150 articles Préfacier d ouvrage techniques et ergonomiques «CSS2» par Raphaël Goetter, Eyrolles «Ergonomie Web» par Amélie Boucher, Eyrolles «Tri par cartes» par gautier barrère et Eric Mazzone, Eyrolles «Intégration Web» par Corinne Schillinger, Eyrolles Conférencier Parisweb, Confoo Montreal, World Usability Day, Webdesign International Festival, Open data on the Web (Londres), a11y Québec FEVAD, expert forum des droits de l internet, membre CA ISOC (Internet Society). Prix du meilleur conférencier au SisQual 2005 (CNIT la Défense). Conférencier d honneur à a11y Québec (Octobre 2013) Formateur et enseignant Paris Dauphine, HEC/Telecom Paris, Paris 5, Université de la Réunion, Institut International du Multimedia (Pôle de Vinci), Idheap Lausanne, CNRS, Universités numériques Paris île de France... Consultant et expert Société générale, DGME, Co-rédacteur du Référentiel Général d Accessibilité pour les administrations, Schneider electric, Dexia, Opéra de Bordeaux, Services du premier ministre (Direction du Développement des Médias)... Bonnes pratiques Bayonne - Septembre 2013 Page 3
Temesis, des experts qualité et accessibilité web Pôle d expertise Production de chartes et référentiels ; Audit, assistance & mise en conformité ; Formation qualité et accessibilité Web. Temesis est prestataire et fournisseur de solutions de l Élysée, du Service d information du gouvernement, de l Etat du Luxembourg, du cabinet d audit US The paciello Group, de Carrefour banque et plus d une centaine de clients prestigieux. Edition de logiciels Services en ligne d évaluation et de pilotage Web ; Développements d applications et d extensions. Bonnes pratiques Bayonne - Septembre 2013 Page 4
L équipe de la société Temesis Elie Sloïm, Président, Qualiticien DESS techniques de contrôle et assurance qualité - Bordeaux. Auteur d ouvrages de référence, Préfacier d ouvrage techniques et ergonomiques (4 ouvrages chez Eyrolles) Conférencier (Parisweb, Confoo Montreal, World Usability Day, Webdesign International Festival, Open data on the Web (Londres), a11y Québec etc.). Formateur et enseignant (Paris Dauphine, HEC/Telecom Paris, Paris 5, Université de la Réunion, Idheap Lausanne, CNRS, ) Consultant et expert. Société générale, DGME, Co-rédacteur RGAA, Schneider electric, Dexia, Opéra de Bordeaux, Services du premier ministre... Aurélien Levy, Directeur Général, expert DEUG d Arts Plastiques à l Université Panthéon-Sorbonne, concepteur réalisateur multimédia à l IESA (Institut d Etudes Supérieures des Arts). Expert accessibilité de très haut niveau, notamment sur les technologies vidéo, ARIA, JS, PDF, formateur d experts Accessiweb en évaluation. Co-auteur du RGAA. Conférencier international (CSun San Diego, ParisWeb, Accessibilité Québec...) Muriel de Dona, experte qualité Web m a s t e r a u d i t e t c o n s e i l e n communication à l ISIC de Bordeaux. Spécialiste des fonctions d audit, d assistance à maitrise d ouvrage (de la rédaction du cahier des charges à la recette finale). Muriel est co-auteur du livre «qualité web». Eric Gateau, Ergonome Co-fondateur de la société Temesis. Au sein de la société, il prend en charge des missions d expertise Qualité, Ergonomie et Accessibilité. Il contribue à toutes les missions de création ou de personnalisations d interface. Il assure également de nombreuses formations sur la qualité et l accessibilité. Laurent Denis, expert référentiels P a r i s I V S o r b o n n e - D E A h i s t o i r e contemporaine. Spécialisé sur l accessibilité, les formats Web standards et les technologies CSS. Conjuguant une forte expertise technique et une compréhension méthodologique hors norme, iil a proigressivement pris en main l ensemble des chantiers de création de référentiels. Laurent est co-auteur du livre «qualité web». Cyrille Harnay Responsable commercial Mickael Hoareau responsable technique Olivier Meunier Responsable projets Open source Julie Morana Responsable administrative Fabrice Bonny responsable R et D Samuel Martin Ingénier architecte Web Bonnes pratiques Bayonne - Septembre 2013 Page 5
Tour de salle, tour de chauffe Qui êtes vous? Qu attendez-vous de cette présentation? Bonnes pratiques Bayonne - Septembre 2013 Page 6
Plan de l intervention Faisons connaissance Qualité Web Bonnes pratiques Les outils Améliorer massivement le Web Quel retour sur investissement? Et après? Vos questions Bonnes pratiques Bayonne - Septembre 2013 Page 7
Définition de la qualité Web La qualité Web est l'aptitude d'un service en ligne à satisfaire des exigences implicites ou explicites. Bonnes pratiques Bayonne - Septembre 2013 Page 8
Qualité Web : une approche multidisciplinaire La qualité Web vise à satisfaire l ensemble des exigences des internautes Elle permet de détecter et supprimer les défauts sur les sites Elle permet d améliorer l attraction, la fidélisation et la conversion Infographie @nissone http://w3qualite.net/outils/qualite-web-les-bonnes-pratiques-pour-ameliorer-vos-sites-une-premiere-impression Bonnes pratiques Bayonne - Septembre 2013 Page 9
Qualité Web : une approche multidisciplinaire Infographie @nissone http://w3qualite.net/outils/qualite-web-les-bonnes-pratiques-pour-ameliorer-vos-sites-une-premiere-impression Bonnes pratiques Bayonne - Septembre 2013 Page 10
Qualité Web : une approche multidisciplinaire Infographie @nissone http://w3qualite.net/outils/qualite-web-les-bonnes-pratiques-pour-ameliorer-vos-sites-une-premiere-impression Bonnes pratiques Bayonne - Septembre 2013 Page 11
Plan de l intervention Faisons connaissance Qualité Web Bonnes pratiques Les outils Améliorer massivement le Web Quel retour sur investissement? Et après? Vos questions Bonnes pratiques Bayonne - Septembre 2013 Page 12
Qualité Web : les sujets à traiter Contenus Formulaires Navigation Hyperliens Traductions Sécurité Moteur Cookies Standards Accessibilité Plug-ins Serveur Code Téléchargement Ergonomie E-commerce Référencement Design Relation client Impression Bonnes pratiques Bayonne - Septembre 2013 Page 13
Formaliser les bonnes pratiques du Web Référentiel qualité Transversal, collaboratif, public, ouvert. 217 bonnes pratiques Bonnes pratiques Bayonne - Septembre 2013 Page 14
Une fiche par bonne pratique Libellé Objectif Mise en œuvre Moyens de contrôle Bonnes pratiques Bayonne - Septembre 2013 Page 15
Quelques exemples : utilisabilité Les sons et vidéos sont déclenchés par l'utilisateur. En cas de rejet des données saisies dans un formulaire, les champs contenant les données rejetées sont indiqués à l'utilisateur. L'étape en cours d'un processus complexe est indiquée Les hyperliens sont visuellement différenciés du reste du contenu. La navigation sur le site ne provoque pas l'ouverture de fenêtres surgissantes ("popups") Les contenus sont présentés avec un contraste suffisant par rapport à leur arrière-plan Bonnes pratiques Bayonne - Septembre 2013 Page 16
Quelques exemples : e-commerce Une adresse de livraison différente de l'adresse de facturation peut être spécifiée. Les certificats de sécurité sont signés et en cours de validité Chaque demande d'information fait l'objet d'un accusé de réception Le site accepte au moins deux moyens de paiement Les horaires et tarifs de fonctionnement des services mis à la disposition des utilisateurs sont indiqués La disponibilité des produits est indiquée avant la validation définitive de la commande. Bonnes pratiques Bayonne - Septembre 2013 Page 17
Quelques exemples : référencement Le titre de chaque page permet d'identifier son contenu Le site n'interdit pas la mise en place de liens entrants La racine du site contient des instructions pour les robots d'indexation Le site propose un fichier sitemap indiquant les contenus à explorer Bonnes pratiques Bayonne - Septembre 2013 Page 18
Quelques exemples : technique Les certificats de sécurité sont signés et en cours de validité Le serveur envoie les informations permettant la mise en cache des contenus. Le serveur envoie une page d'erreur 404 personnalisée. Les fonctions de scripts sont placés dans des fichiers externes. Bonnes pratiques Bayonne - Septembre 2013 Page 19
Check-lists accessibles en ligne https://checklists.opquast.com/ Bonnes pratiques Bayonne - Septembre 2013 Page 20
Exemples de bonnes pratiques Opquast V2 https://checklists.opquast.com/fr/opquastv2 Bonnes pratiques Bayonne - Septembre 2013 Page 21
Mémento «Sites Web : les bonnes pratiques» - Eyrolles Février 2007 Opquast V1 1e édition Janvier 2009 Opquast V1 2e édition Novembre 2011 Opquast V2 3e édition Bonnes pratiques Bayonne - Septembre 2013 Page 22
Qualité Web : le livre Octobre 2012 Elie Sloïm Muriel de Dona Fabrice Bonny Laurent Denis 39 Version numérique offerte pour l achat de la version papier ou 19 seule http://qualite-web-lelivre.com/ Bonnes pratiques Bayonne - Septembre 2013 Page 23
Egalement disponible sur checklists.opquast.com Qualité Web La checklist de référence SEO 80 bonnes pratiques Webperf 41 bonnes pratiques Open data 72 bonnes pratiques GreenIt Simples recommandations Steps Deux checklists Web mobile En cours de conception https://checklists.opquast.com/ https://checklists.opquast.com/fr/workshops/ Bonnes pratiques Bayonne - Septembre 2013 Page 24
Plan de l intervention Faisons connaissance Qualité Web Bonnes pratiques Les outils Améliorer massivement le Web Quel retour sur investissement? Et après? Vos questions Bonnes pratiques Bayonne - Septembre 2013 Page 25
Opquast desktop : extension open source pour firefox desktop.opquast.com Analyse une page Web 500 tests. Extension Open source Analyse instantanée Détection des erreurs Export résultats vers reporting Bonnes pratiques Bayonne - Septembre 2013 Page 26
Opquast reporting Analyser la qualité d un parc de sites («web governance») Service SaaS reporting.opquast.com Audit automatique de site Indicateurs à la volée Génération de baromètres Bonnes pratiques Bayonne - Septembre 2013 Page 27
Plan de l intervention Faisons connaissance Qualité Web Bonnes pratiques Les outils Améliorer massivement le Web Quel retour sur investissement? Et après? Vos questions Bonnes pratiques Bayonne - Septembre 2013 Page 28
Améliorer massivement le Web Des bonnes pratiques Des outils Quelle reconnaissance? Bonnes pratiques Bayonne - Septembre 2013 Page 29
Un réseau, une marque : opquast partner Fédérer et valoriser les agences web engagées dans la qualité Web ; Apporter des outils et services de soutien à la démarche commerciale, marketing et technique ; Favoriser les échanges et le partage de connaissances au sein du réseau. Bonnes pratiques Bayonne - Septembre 2013 Page 30
Le réseau et la marque opquast partner Améliorer la rentabilité de leurs activités Améliorer la compétence de leurs personnels et recruter Valoriser et faire reconnaître la qualité de leurs prestations et réalisations Bonnes pratiques Bayonne - Septembre 2013 Page 31
Opquast partners : les conditions d accès au programme Formation d un «responsable qualité Web» (3j) Mise en conformité d un site Opquast reporting Pro Droit d apposition marque Opquast partners Droit de délivrer la marque Opquast Website Avantage réseau (liste de diffusion, sponsoring, etc..) Bonnes pratiques Bayonne - Septembre 2013 Page 32
Agences Web et SSII : Opquast partners Bonnes pratiques Bayonne - Septembre 2013 Page 33
Plan de l intervention Faisons connaissance Qualité Web Bonnes pratiques Les outils Améliorer massivement le Web Quel retour sur investissement? Et après? Vos questions Bonnes pratiques Bayonne - Septembre 2013 Page 34
Retour sur investissement de la qualité Web Amélioration du référencement Elargissement de la cible utilisateurs Augmentation du taux de conversion Economies d hébergement Diminution des risques juridiques Développement de la notoriété et de l image Amélioration des processus de production Amélioration des performances Bonnes pratiques Bayonne - Septembre 2013 Page 35
Détection en amont Plus les défauts sont détectés tard, plus ils coûtent cher. Coût des erreurs détectées Spécifications Prototypes Design Intégrations Développement Vie du site Bonnes pratiques Bayonne - Septembre 2013 Page 36
Retour sur investissement attendu : quelques postes fondamentaux Détecter les défauts en amont Diffuser les bonnes pratiques (interne) Diffuser les bonnes pratiques (externe) Améliorer la qualité des sites Réduire coûts de production et de correction Réduire le temps de dévéloppement et la productivité Diminuer le temps de conception et de spécification Accélerer la formation des personnels Améliorer la communication entre équipes Améliorer le travail avec les clients Diminuer les échanges avec les clients Augmenter le taux de conversion Diminuer le nombre de retours clients Diminuer le temps de chargement Améliorer l accessibilité et le référencement Améliorer les performances et les temps de réponse Améliorer l image des sites et se positionner sur la qualité Web Bonnes pratiques Bayonne - Septembre 2013 Page 37
Plan de l intervention Faisons connaissance Qualité Web Bonnes pratiques Les outils Améliorer massivement le Web Quel retour sur investissement? Et après? Vos questions Bonnes pratiques Bayonne - Septembre 2013 Page 38
Et après? Obtenir des garanties sur la qualité des sites achetés Prévenir les risques juridiques et financiers Websites Qualifier et choisir des prestataires Intégrer la qualité Web aux enseignements Améliorer l image et le positionnement des écoles Développer les relations écoles / agences Faire reconnaître les compétences professionnelles Ajouter une compétence formelle sur leur CV Augmenter leur valeur sur le marché du travail Bonnes pratiques Bayonne - Septembre 2013 Page 39
Plan de l intervention Faisons connaissance Qualité Web Bonnes pratiques Les outils Améliorer massivement le Web Quel retour sur investissement? Et après? Questions : c est à vous Bonnes pratiques Bayonne - Septembre 2013 Page 40
Contact SAS au capital de 111 776-18, rue Lucien Granet - 33150 Cenon - France Tél : +33 5 56 401 402 - Fax : +33 5 56 401 403 www.temesis.com www.opquast.com qualité-web-lelivre.com checklists.opquast.com desktop.opquast.com reporting.opquast.com et bientôt partners.opquast.com Bonnes pratiques Bayonne - Septembre 2013 Page 41