Il y a quelques temps j’avais lu le livre : Qualité Web : La référence des professionnels du Web. Un livre qui liste l’ensemble des bonnes pratiques à respecter lorsque tu développes un site web. Ces bonnes pratiques ont pour but de d’améliorer la qualité de ton site web, ainsi que l’expérience utilisateur (UX). Le livre aujourd’hui recense plus de 240 bonnes pratiques permettant d’améliorer les sites et mieux prendre en compte les utilisateurs.
C’est un des livres que je trouve essentiel d’avoir. En tant que développeur il n’est pas toujours facile de se mettre du coté de l’utilisateur et se rendre compte de ses attentes en termes de navigation et d’expérience utilisateur. Ainsi le livre d’Opquast devient une aide précieuse à garder toujours sous le coude, à feuilleter si besoin, et à relire de temps en temps pour se rafraichir la mémoire.
J’avais lu la version 2 du livre et la version 3 est désormais disponible. A cette occasion, un certain nombre de bonnes pratiques ont été modifiés, supprimées, corrigées. Je voulais donc partager avec toi les modifications essentielles qui ont été apportées dans cette nouvelle version.
Parmi ces modifications. Je t’ai listé 14 bonnes pratiques que je trouvais les plus essentielles à respecter et à mettre en place sur tes sites web.
Pour retrouver toutes les bonnes pratiques web à respecter, je te conseil de lire le livre disponible sur Amazon.
Quelques commentaires client
Bruno
LA référence pour tous ceux qui travaillent sur et avec le Web
« Ce qui se conçoit bien s’énonce clairement. » Il s’agit clairement d’un manuel, d’un guide à consulter au quotidien, le genre d’ouvrage qui sera rapidement annoté, corné, rempli de post-it et de signets qui dépassent de partout. Bref, une bible qui a bien plus de chance de se retrouver continuellement coincée entre la souris et l’imprimante plutôt que sagement rangée sur une étagère. Indispensable, ce livre devient une évidence pour tous ceux qui travaillent sur Internet, ou qui veulent devenir des professionnels du Web. Grâce à cet ouvrage, concevoir de « mauvais » sites n’est plus une fatalité ; pire, ça ne peut même plus être une option car, à ce prix-là (dérisoire pour un outil de cette portée), plus personne ne pourra dire qu’il ne savait pas comment (bien !) faire.
Olivier Keul
Un « must-have »
On assiste depuis des années à la complexité croissante des technologies ainsi qu’à l’apparition des nouveaux usages. Dans ce contexte, la checklist Qualité Web V3 d’Opquast permet de suivre et de s’assurer de la qualité de son service. C’est une démarche globale de qualité qui enrichit directement l’expérience utilisateur.
Ce livre permet non seulement d’appréhender mais aussi de comprendre les bonnes pratiques web. Pourquoi est-ce que ces bonnes pratiques web sont-elles indispensables ? Quelles sont leurs valeurs ajoutées ? Leurs objectifs ? Comment initier une démarche d’assurance qualité ? Vous trouverez toutes ces réponses dans cet ouvrage que je recommande vivement à toute personne travaillant dans l’univers du Web.
SCHAPIRA Boris
Un ouvrage de référence
Quel que soit votre rôle dans la chaine de valeur du Web, je ne saurais que trop vous conseiller l’achat de cet ouvrage qui vaut largement son prix et vous permettra d’en découvrir les faces cachées. L’explication de l’ensemble des bonnes pratiques web, dont la pérennité n’est plus à démontrer, vous aidera, chaque jour, à rendre le web meilleur et les checklists vous permettront d’identifier rapidement les règles à vérifier suivant le besoin (référencement, performance, accessibilité…).
Un ouvrage de référence qui devrait faire partie de la bibliothèque de tous les professionnels.
Cliques ici pour lire plus de commentaires clients
1 – Chaque image doit avoir un texte alternative approprié
Lorsque tu intègres une image dans une des pages de ton site web, il faut toujours lui mettre une description alternative appropriée. C’est-à-dire un texte qui décrit ce que l’image représente. Cette description apparaîtra si l’image n’arrive pas à s’afficher correctement sur le navigateur ou pour des questions d’accessibilité. En effet, il existe des logiciels qui lisent uniquement le texte de votre page. Par exemple, pour que les aveugles puissent accéder au contenu des sites, des logiciels leurs lisent le texte. Ainsi, ces logiciels liront la description de l’image.
Comment faire ?
La description d’une image se fait grâce à l’attribut « alt » de la balise « img »
<img src="chemin/vers/mon/image.png" alt="Ceci est la description de l'image">
2 – Chaque identifiants HTML n’est utilisé qu’une seule fois
Tu as surement dû commencer à utiliser les identifiants et les classes dans ton code. Ils sont généralement utilisés pour attribuer du CSS à un élément ou encore dans le JavaScript. Il se traduisent ainsi dans le code HTML :
<div class="col" id="estUnique"> <p>Ceci est un paragraphe</p> </div>
Les classes peuvent être communes à plusieurs éléments. En revanche l’id ne doit être utilisé qu’une seule fois sur la page. C’est un identifiant unique. Il sert à identifier un seul élément.
3 – Utiliser les bons types de champ dans les formulaires
Dans les formulaires que tu vas créer, tu vas être amené à manipuler différents types de données, chaîne de caractère, date, nombre, …
Pour faciliter la compréhension de l’utilisateur sur ce ce qu’il doit remplir dans chaque champ, il faut utiliser les bons types de champs.
Ainsi, lorsque l’utilisateur validera le formulaire, si les informations rentrées dans les champs ne sont pas correctes, le navigateur en informera l’utilisateur.
Comment faire ?
Dans chaque champs input, utilises l’attributs « type » pour indiquer quel type de champs tu souhaites utiliser. Tu peux retrouver l’ensemble des types en cliquant ici.
<form method="POST" action="action.php"> <label for="nom">Nom</label> <input type="text" name="nom" required> <label for="age">Age</label> <input type="number" name="age" required> <label for="email">Email</label> <input type="email" name="email" required> <label for="naissance">Naissance</label> <input type="date" name="naissance" required> <input type="submit" value="Valider"> </form>
4 – Indiquer les erreurs du formulaire à l’utilisateur
Rien de plus pénible que de ne pas pouvoir valider un formulaire car il y a une erreur mais ne pas savoir où. Tu vois cette situation ? C’est chiant non ?
Du coup, on va essayer de ne pas faire subir cela à nos utilisateurs.
Dans tes formulaires, tu doit gérer les erreurs possibles de l’utilisateur et lui afficher clairement. Éventuellement en haut du formulaire, ou en dessous du champ en erreur. Essayes de faire en sorte que l’erreur soit claire à comprendre pour l’utilisateur. Qu’il ne passe pas trop de temps à comprendre ce qui bloque.
5 – Sur les formulaires longs, pouvoir revenir à l’étape précédente et garder les données enregistrées
Là aussi un point à peu près aussi chiant que le point précédent. Quand ça fait 5 minutes que tu passes toutes les étapes d’un formulaire et qu’un moment, pour une raison ou une autre tu perds toutes les informations rentrées dans le formulaire et que tu dois TOUT réécrire ! C’est horrible. D’ailleurs dans ces cas-là, beaucoup d’utilisateur abandonnent et tu viens de perdre un utilisateur.
A chaque étape d’un formulaire, enregistre les données quelques part. Soit dans une base de données, soit dans un système de cache, soit dans le « local storage » des navigateurs. De façon à ce que tu puisses ré-afficher facilement les données rentrées par l’utilisateur en cas de problème.
6 – Mettre un moteur de recherche pour atteindre une page
Pour faciliter la navigation des utilisateurs sur ton site, et leurs permettent de trouver des articles, des produits, des pages facilement avec un simple mot clé, tu peux mettre en place un moteur de recherche.
Tous les sites fait avec WordPress possèdent un système de moteur de recherche intégré.
7 – Pages de recherches atteignables avec l’URL
Pour ce point, je vais te donner un exemple concret qui m’est arrivé. Je fais quelques recherches immobilières en ce moment. J’ai donc, dans mes favoris, toutes les URL des agences immobilières avec mes recherches prédéfinis.
Dans la majorité des cas, lorsque je vais sur un de mes favoris, je tombe sur ma recherche grâce aux paramètres passés dans l’URL. Quelque chose ressemblant à ceci : https://www.bourse-immobilier.fr/achat-immobilier-paris-01?quartiers=75101&surface=0&sterr=0&prix=-500000&typebien=1-2-3-7-9-10&nbpieces=1-2-3-4-5&og=0&where=Paris-01-__75001_&_b=1&_p=1&tyloc=2&neuf=1&ancien=1&ids=75101
On retrouve dans l’URL tous les paramètres nécessaires à l’affichage de la recherche effectuée.
En revanche certaines agences immobilières ne fournissent aucun paramètres dans l’URL et ressemble plutôt à ceci : https://nomdelagence.com/recherche
Dans ces cas-là, je tombe sur la page de recherche avec un formulaire vide, et je suis bon pour tout recommencer.
Du coup, sur tes pages de recherches, penses à utiliser la méthode « GET » pour passer les paramètres d’un formulaire directement dans l’URL. Ainsi les utilisateurs pourront plus facilement retrouver leurs recherches.
8 – Pouvoir afficher le mot de passe en clair
Dans les champs de type « password », donne la possibilité aux utilisateurs de pouvoir afficher leur mot de passe.
Là on est plus sur une une question pratique pour l’utilisateur. Pour le moment, peu de sites le proposent mais c’est bien pratique de pouvoir voir ton mot de passe afin de savoir si tu ne t’ai pas louper dans sur un caractère.
La sécurité étant de plus en plus complexe aujourd’hui, les mots de passe sont souvent plus longs, contiennent des majuscules, chiffres, caractères spéciaux. Il peut être compliqués pour l’utilisateur de le taper sans le voir.
Tu peux retrouver un exemple en cliquant ici.
9 – Proposer un processus de réinitialisation de mot de passe
Oublier son mot de passe, ça arrive même au meilleur…
Si ton site web possède un espace où les utilisateurs peuvent s’inscrire avec un mot de passe, il faudra aussi leur proposer un système pour pouvoir le réinitialiser.
C’est bête comme conseil car tous les sites le proposent aujourd’hui mais je peux t’assurer que quand tu es développeur, que tu es plonger dans le développement des fonctionnalités essentielles, tu peux vite oublier d’ajouter cette fonctionnalité à ton site web.
10 – Processus de validation de l’adresse email des utilisateurs
Si tu mets en place un système d’inscription pour tes utilisateurs, mets aussi en place un processus de validation de leurs adresses email afin de vérifier que l’adresse renseignée est la bonne. Une faute de frappe est vite arrivée.
Comment faire ?
Lorsque qu’un utilisateur s’inscrit, tu peux par exemple lui envoyer un email avec un lien de conformation.
11 – Pour se désinscrire, pas de confirmation par mail
Un utilisateur est libre de se désinscrire de ton site ou de ta newsletter. Donne-lui la possibilité de se désinscrire facilement. Il ne doit pas être obligé de valider sa désinscription par email.
12 – Un plan du site est accessible sur chaque page
Un plan du site ou « sitemap » doit être accessible depuis chaque page. Un plan du site et une simple page sur laquelle tu listes l’ensemble des pages qui sont présentes sur ton site. Le mien se trouve ici.
Comment faire ?
Pour que le plan du site soit accessible depuis n’importe quel page, tu peux le mettre soit dans ton menu de navigation, soit dans un pied de page, en petit, qui se retrouvera ainsi sur toutes les pages.
A quoi ça sert ?
Tout d’abord pour que les utilisateurs puissent avoir un aperçu rapide de tous ce qui est disponible sur le site et pouvoir rejoindre une page facilement.
Puis surtout, pour les robots des moteurs de recherches, pour le référencement de ton site. Lorsqu’un robot de moteur de recherche passe sur ton site, il va analyser les pages, puis suivre les liens qui sont sur cette page. Le fait d’avoir un sitemap, permets ainsi de faciliter le travail aux robots et leurs permettent de n’oublier aucune page à indexer sur ton site.
13 – Minifiés les scripts
Les scripts (JavaScript ou CSS) sont souvent de long fichiers et peuvent facilement devenir volumineux. De plus, avec l’arrivée des frameworks CSS ou JS, le nombre de fichiers se multiplie rapidement et peux rendre le site web plus lourd et donc plus long.
Il faut donc minifer les scripts.
Qu’est-ce que ça veut dire « minifés » ?
Minifier est le fait de compacter le code, de le réduire au maximum en enlevant les espaces, les tabulations, en renommant les variables (maVariableUnPeuLongue devient mv) … Mais rassures-toi, tu ne vas pas le faire à la main, il existe des outils qui le font très bien tout seul.
Comment faire ?
- https://cssminifier.com/
- https://www.minifier.org/
- https://javascript-minifier.com/
- https://jscompress.com/
Avec quelques recherches sur internet, tu trouves très facilement des outils qui le feront à ta place.
14 – Les mécanismes de fermeture des fenêtres sont immédiatement disponibles et au même emplacement sur chaque page
Nos amis les pop-up ! En tant qu’utilisateur les pop-up sont un peu agaçantes. Elles arrivent en plein milieu de la navigation et parfois il est compliqué de trouver comment s’en échapper.
Pour les développeurs et webmasters, les pop-up (ou autre mécanisme de fenêtres) sont un vrai avantage pour capturer l’attention des utilisateurs et pouvoir leur proposer un produit, un service, une promo, une inscription.
Du coup, il faut trouver un compromis entre l’utilisation des pop-up et une navigation agréable pour l’utilisateur. Ainsi, il faut que l’utilisateur puisse comprendre facilement et rapidement comment il peut sortir de cette fenêtre.
Le mécanisme de fermeture des fenêtres (petite croix, cliquer à coté, appuer sur « echap ») doit être le même sur chaque page. Il ne faut pas s’amuser à lui mettre une fois la croix à droite, une fois à gauche, une fois pas de croix …
A toi de jouer !
Maintenant que tu as un aperçu des différents changements qui ont été apportées, dans cette troisième version du livre Qualité Web, la référence des professionnels du Web, tu peux retrouver l’ensemble des bonnes pratiques recensés par Opquast en cliquant ici.
Acheter Qualité Web 2e édition: La référence des professionnels du Web
Merci beaucoup d’avoir partagé 14 bonnes pratiques Web. Aujourd’hui, le référencement n’est plus le même qu’il y a dix ans. Avec le temps, Google se restreint, à terme, de l’expérience utilisateur. Google introduit de nouvelles normes pour les développeurs Web et les experts en référencement. Voici un autre lien, je souhaite partager https://url-decode.com/cat/. Ici, vous obtiendrez plusieurs outils qui vous aideront non seulement dans le développement Web, mais aussi dans l’optimisation Web pour obtenir un meilleur classement SEO.