La recette d’un site web consiste à tester l’ensemble du site internet pour vérifier sa parfaite exécution avant la mise en ligne (design, intégration, développement)
Qu’est-ce que le recettage d’un site internet ?
Vous vous apprêtez à finaliser votre site web, mais êtes-vous sûr de sa qualité et de son bon fonctionnement ? Pour répondre au mieux aux besoins exprimés au travers du cahier des charges, avez-vous pensé à effectuer le recettage de votre projet digital ?
Le recettage (la recette du site internet) ou encore appelé test d’acceptation correspond à l’étape finale mais aussi la plus importante dans le cadre de la gestion d’un projet web. Son objectif est d’évaluer la conformité du projet avec le cahier des charges. Pour cela, un ensemble de tests définis, établis et réalisés de manière empirique sont attendus. Un cahier de recette peut-être établi en interne mais aussi être dirigé par une agence web disposant de l’expertise nécessaire à sa réalisation.
Avant de se lancer dans une phase de recettage, il est nécessaire de disposer des éléments dits « référentiels » qui serviront de base comparative entre le produit en phase de recettage et le produit attendu.
Munissez-vous du cahier des charges du projet ainsi que des maquettes graphiques et documents techniques fournis pour sa réalisation. Une fois ces documents à disposition, vous pouvez vous lancer dans la mise en place du cahier de recette.
Établir le cahier de recette, les étapes :
Tout comme pour une recette de cuisine, il est nécessaire de lister nos ingrédients se rapportant ici à l’ensemble des fonctionnalités du projet. Quelles sont les fonctionnalités à tester pour vérifier la conformité de mon projet web ?
Le défilement des images dans le slider, le déroulement du rich menu, la lecture des vidéos (image et son), le formulaire de contact, le fonctionnement de l’agenda, l’inscription à la newsletter, la remontée des mails, l’enregistrement en base de données dans le back office, la surbrillance des call to action, les effets hover, la modification de la langue du site, etc…
Bien que ce listing varie en fonction de la complexité de votre projet digital, il n’en reste pas moins essentiel. En plus de prêter attention aux moindres détails, attention à ne pas négliger certaines fonctionnalités de base (ex : le formulaire de contact détaillé plus loin). Ces éléments de base échappent souvent à la vigilance du recettage de part leur redondance sur chaque projet web. Une attention suffisante doit leurs être consacrée au vu de leur rôle essentiel sur votre site internet. Ces fonctionnalités seront des éléments clefs pour votre taux de transformation (CTR) ou retour sur investissement (ROI).
Exemple détaillé du recettage de la page « formulaire de contact »
1. Attardez-vous en premier lieu sur le graphisme :
– Vérifiez que la page s’affiche correctement sur votre navigateur, conformément à la maquette graphique fournie (jpg) au préalable. Quelques exemples d’éléments à regarder : les dimensions, les couleurs, le ratio, etc…
2. Testez ensuite l’intégration HTML :
– Vérifiez que votre page web s’affiche et fonctionne correctement sur tous les navigateurs utilisés au quotidien. Chaque navigateur garde une interprétation différente de certains styles CSS. Testez sur les navigateurs principaux : Internet Explorer, Mozilla Firefox, Google Chrome, Safari, Opéra, etc… Et dans leurs différentes versions : pour Internet Explorer IE9, IE 10, IE 11, etc…
– Testez ensuite la page sur les différents terminaux : ordinateur, tablette, smartphone, … Et également dans différentes versions, IOS (pour Apple), Android, BlackBerry, etc…
3. Enfin, testez le développement :
– Lorsque vous changez de langue sur votre page, restez-vous sur la page courante ? Retournez-vous à l’accueil ? À noter qu’il est préférable de rester sur la page courante.
– Les champs obligatoires fonctionnent-ils ? Pour le savoir, validez le formulaire sans remplir un seul champ, tous les champs obligatoires devront alors afficher un message d’erreur.
– Le champ « Email » dispose-t-il d’une routine de vérification qui permet la vérification de l’email renseigné. Par exemple, dans le cas où l’internaute saisi son mail sans « @ » ou avec un espace, le formulaire ne peut-être valide.
– Si dans cette page vous avez renseigné votre adresse postale, téléphone ou email de contact, vérifiez que les robots ne puissent pas récupérer votre email grâce au JavaScript.
– Un champ caché dans le code, empêchera les robots de valider votre formulaire (Adieu les vilains Captcha Code).
– Lors d’un enregistrement réussi, le formulaire est-il bien envoyé par email à l’administrateur du site ? L’enregistrement du formulaire se fait-il bien en base de données (dans le back office) ?
– Si l’export est prévu dans le cahier des charges, vérifiez son bon fonctionnement dans le back-office. Avez-vous la possibilité d’exporter la base sur des dates particulières, etc… ?
Voilà un aperçu des éléments à prendre en compte lors de votre recettage. Pour votre page « formulaire de contact » vous avez passé 30 min à tout vérifier. Vous pouvez maintenant prévoir quelques journées et quelques collègues…
Outils pour recetter un site web
Une fois la sélection de nos ingrédients établie, il nous faut définir les outils nécessaires à la réalisation des tests de fonctionnalités listés ci-dessus.
Avez-vous pensé à définir sous quel OS et quelle version OS faire les tests ? Sous quel navigateur ? Sous quel terminal ? Certains éléments n’ayant pas les mêmes compatibilités en fonction du support de test peuvent influencer les résultats du recettage.
Bien qu’il soit difficile pour une entreprise de quantifier le temps nécessaire pour ce listing, il est possible d’être réalisé en interne mais aussi d’être confié à une agence digitale.
Des outils tels que Mantis ou Redmine sont des références dans le cadre du recettage de site web. Ils permettent de lister, quantifier, attribuer les différentes tâches et d’avoir une vision globale, par équipe, de tous les problèmes rencontrés.
Suivre et déléguer le recettage
Vous avez du mal à être dans les délais pour le recettage ?
Dans le cadre d’une démarche interne, n’hésitez pas à déléguer le recettage à une équipe en lui affectant les outils nécessaires pour gagner du temps. Ceci vous permettra d’avoir un regard neutre sur votre site web.
Vos listings fonctionnalités et outils sont prêts ?
Si vous ne disposez pas d’un outil tel que Redmine, munissez vous d’un tableau Excel dans lequel vous y indiquerez l’évolution de votre recettage : fonctionnalités, bugs rencontrés… Sans oublier d’utiliser un code couleur qui vous donnera une meilleure visibilité sur le statut des fonctionnalités recettées. Il vous permettra d’établir un rapport d’anomalie avec l’ensemble des bugs rencontrés à soumettre au développeur avec plus de facilité.
Le recettage terminé, évaluez si le site internet répond de manière satisfaisante au cahier des charges et quels sont les points à améliorer. Quantifiez le temps nécessaire aux modifications et donnez un brief détaillé afin d’assurer une visibilité sur l’évolution du projet digital.
Conclusion
Tantôt négligé, tantôt oublié, le recettage d’un projet web est une étape essentielle permettant d’assurer une livraison du site web en toute garantie mais aussi d’améliorer votre image de marque. Il est très important que cette étape soit organisée et réalisée de manière empirique afin de ne négliger aucun détail.
Chez Smart Seven chaque site internet est établi suivant un cahier des charges et recetté de manière à assurer la qualité optimale du site web.