Design UX - UI
12
February
2024

Recettage site web : 5 grandes étapes en fin de refonte

Chic, une bonne vieille recette de grand-mère ! 🥘 Ahem, si vous pensiez trouver ici des astuces de cuisine, c’est raté. 

En revanche, si vous pensiez atterrir sur un article donnant toutes les clés pour réussir un super site web, vous êtes au bon endroit ! Même si vous n’aviez pas tout à fait employé le mot recette au sens propre du terme. 😅

Commençons cette lecture par une petite définition… 

→ Le recettage d'un site web (ou la recette) l’une des dernières étapes d’une refonte de site ou d’une première création. L’objectif est de vérifier, qu’une fois l’intégration terminée, le site soit bel et bien conforme à vos attentes. En d’autres termes, il s’agit de tester le site en long, en large et en travers pour vérifier que tout fonctionne correctement.

Pourquoi faire le recettage d’un site web ?

L’erreur est humaine. Lors de la phase d’intégration, il peut y avoir des oublis, erreurs qui seront vues en phase de recette. Lors de la phase de conception, tout n’est pas totalement spécifié. Il y a des comportements ou enchaînements que le concepteur pense évident et qui a été compris différemment par l’intégrateur. La recette permet de rectifier le tir.

Durant la phase de recettage, vous allez pouvoir déceler : 

  • les éventuelles anomalies fonctionnelles sur les parcours clients,
  • les erreurs d’affichage ou delta avec les maquettes validées,
  • de façon générale ; les bugs qui compromettent l’expérience utilisateur.


Comment faire le recettage d’un site web ?

La recette nécessite donc toute la vigilance du monde ! 👀 Faire appel à d’autres personnes pour vous aider dans cette tâche n’est pas un luxe. Cela permet de ne rien laisser passer et de traiter la tâche plus rapidement.

Pour les projets d’une certaine taille, ce sont des métiers rompus à l’exercice qui accomplissent cette phase. Il y a également des organisations dédiées à la recette, processé et outillé pour que ce soit en agence ou en interne le plus souvent dans les directions informatiques des entreprises. 

Deux méthodes possibles pour réussir votre recettage ✌

La phase de recette s’inscrit dans un cycle projet. Il y a aujourd’hui deux grands types de méthode (en V et agile) qui conditionnent l’exercice de la recette. 

1. La méthode en V

La méthode en V, plébiscitée depuis de longues années dans le secteur industriel et plus récemment en informatique, consiste à développer un projet d’un seul tenant, depuis l’expression des besoins jusqu’à la phase de livraison du produit. Elle se déroule en 2 phases majeures

  • la conception (phase descendante) 
  • et la validation (phase ascendante). 

Ces 2 phases, représentées chacune par une branche du V et elles-mêmes subdivisées en 9 étapes, finissent comme pour la lettre V par se rejoindre. 

Une fois la phase de conception achevée, les équipes pivotent pour amorcer la phase de validation (tests unitaires, tests de régression, tests d’intégration).

Ses avantages : 

La méthode se veut gage de qualité voire de simplicité. Elle permet de suivre le projet de façon linéaire, de répartir et d’identifier les missions entre les équipes plus simplement (ce qui peut toutefois entraîner des problèmes de communication en interne). 

Ses inconvénients :

  • Chaque service aura tendance à vaquer  à ses occupations sans forcément penser à collaborer…
  • La méthode en V manque de flexibilité. Les process formatés de la méthode en V empêchent le projet de s’adapter aux changements rapides du marché. Or, durant les temps de conception parfois longs, de nombreuses évolutions ont lieu (besoins utilisateurs, réglementaires, économiques…) . 
  • Le risque de la méthode en V est donc de se retrouver avec un produit ne trouvant plus sa place sur son marché à l’arrivée…
  • Dans ce cadre, la phase de recette est plus longue et se base sur les livrables produits en amont (spécifications fonctionnelles générales, détaillées…)

2. Recetter son site en méthode agile

L’autre méthode pour mener son projet est la méthode agile. Souvent désignée comme l’antithèse de la méthode en V, cette méthode consiste à concevoir un service par itération (sprint). Les corrections sont apportées à l’issue des sprints et n’attendent pas la fin du projet.

Les avantages : 

  • Cette méthode offre une plus grande maîtrise des risques et une grande flexibilité.
  • En cas d’évolution du marché, il est possible de revoir sa stratégie en cours de route. 
  • La méthode agile oblige les équipes à communiquer et à prendre des responsabilités, ce qui leur permet de se sentir intégrées et mieux considérées par la direction en charge du projet. 
  • Dans le cadre d’une refonte de site, elle permet au client qui représente l’utilisateur de donner régulièrement son avis sur les fonctionnalités définies, le design et de participer à son projet sans se sentir écarté.

Un inconvénient en particulier ?

Dans le cas d’un recettage en méthode agile, les phases de recette sont plus nombreuses et portent sur les user stories décrites. 

Paré au recettage de votre nouveau site web ?

Voyons maintenant ensemble quelles sont les différentes étapes du recettage. 

  • Dans le cadre d’une méthode en V, comprenez que ces étapes interviendront à la toute fin de votre projet. 
  • Mais que dans le cadre d’une méthode agile, vous allez devoir suivre ces étapes à chaque fin de sprint. 

Nous allons nous donner quelques principes, en considérant que vous êtes seul sur le projet (car de petite envergure).  

Pour faire la recette du site, mieux vaut :

  1. se munir de 2 ou 3 navigateurs à minima ! 
  2. vider la mise en cache avant de procéder à l’opération. 
  3. contrôler le nouveau site sur plusieurs devices (tablette, mobile, desktop)
  4. utiliser un outil d’assistance comme Markup.io pour rassembler les anomalies identifiées lors du recettage.

Étape 1 du recettage : Contrôler la conformité fonctionnelle 

Durant cette toute première étape, il vous faut vérifier que les fonctionnalités demandées se réalisent bien. Les fonctionnalités sont parfois complexes :

  • Création d’un compte 
  • Téléchargement d’une attestation
  • Obtention d’un devis en ligne

Et peuvent être plus simple :

  • Ajout d’un email dans un CRM, 
  • Téléchargement d’une ressource (guide gratuit, livre blanc), 
  • Inscription à la newsletter,
  • Etc.

Tout est primordial dans votre site, mais un fonctionnel balbutiant sera soumis plus facilement à la critique et l’apparition d’avis négatifs. Vous devez donc vous assurez que tout fonctionne parfaitement et surtout retester à chaque modification qu’il n’y a pas de régression. 

Un outil de test automatisé de type Saas pourra prendre tout son sens sur des dispositifs riches.

Etape 2 du recettage : Contrôler la conformité visuelle

Cette étape doit s’opérer sur à minima 5 grands types de devices

  • écran 24 pouces, 
  • écran portable, 
  • tablette, 
  • mobile grand écran, 
  • mobile petit écran…

Si vous n’avez pas le temps, limitez-vous au support le plus souvent utilisé par vos personas (Cette information peut par exemple s’obtenir sur Google analytics).

Prenez votre temps. Inutile de vous hâter dans l’espoir de vous débarrasser de la phase de recettage. Il est possible que de tout petit élément n’apparaissent pas de la façon voulue. Attardez-vous sur chaque détail. L’interface doit correspondre aux résultats prévus sur les maquettes de conception.

Nous vous conseillons fortement de travailler sur 2 écrans avec sur l’un, la version maquettée, et sur l’autre, la version intégrée. Pour les devices mobiles, tablettes and Cie, l’idéal est de le faire sur un vrai terminal. Maintenant sachez que des émulateurs existent. Vous pouvez trouver des extensions chrome ou des produits plus abouties et payant comme Browerstack.

N’oubliez pas les images. Si le site et son design sont parfaits mais que celles-ci sont étirées, floues, déformées, aucun intérêt ! Leur format doit être tel que vous l’imaginez.

Etape 3 du recettage : Contrôler le maillage du site 

Votre header, les ancres, les éléments du footer… Tout doit être linké ! 🔗

Si vous avez réalisé un travail de maillage interne pour optimiser votre référencement naturel et que vous disposez de CTA (boutons d’appel à l'action) un peu partout sur votre site web (espérons-le), nous ne pouvons que vous encourager à tous les tester un par un. Y compris ceux qui redirigent vers vos réseaux sociaux ou votre chaîne YouTube ! 

Un lien rompu (erreur 404) a de grandes chances de pousser vos clients à déserter votre site web. Courage, cette opération demande du temps mais est nécessaire pour garantir la satisfaction de vos utilisateurs. Utilisez un crawler pour gagner du temps et repérer les éventuels liens morts.

Pour éviter d’avoir à rouvrir la même page plusieurs fois depuis votre navigateur, dans le cas où elle contiendrait de nombreux liens, utilisez la fonction clic droit de votre souris pour ouvrir les contenus dans un nouvel onglet.

Etape 4 du recettage : L’audit technique du site

L’audit technique consiste à vérifier que le site est “propre”. 

  • L’ordonnancement des balises doit être carré (Un H1 par page, jamais de H3 avant un H2, etc.)
  • Les attributs alt doivent tous être renseignées sur chaque image
  • Vos titres de pages et méta description renseignés. 
  • Les images ne doivent pas dépasser 500 ko ou les temps de chargement pourraient bien être ralentis... À ce propos, testez la rapidité de votre site avec cet outil bien connu : PageSpeed Insight. 

En résumé, investiguez dans chaque recoin de votre site et traquez le moindre petit défaut qui fait tâche ! 😄

Pour gagner du temps, faites passer un crawler sur le nouveau site, vous aurez rapidement tous les warning en visu.

Etape 5 du recettage : Contrôler la conformité, la gestion du consentement, les mentions légales et les CGV

On les oublie souvent et pourtant, ces petites pages sont obligatoires. Leur affichage doit être instantané et clair. Ces pages doivent être repérables en un clin d'œil. Profitez-en pour contrôler leur lisibilité. 

La masse de contenus présents y est souvent très importante. Séparez vos textes en plusieurs paragraphes distincts et ordonnez la structure par un balisage html réussi.

Enfin depuis 2021, la réglementation concernant la gestion du consentement concernant les cookies s’est renforcée.  Assurez-vous que tous les cookies non techniquement obligatoires sont soumis à un dépôt suivant une autorisation explicite et éclairée. 

Pour en savoir plus sur le sujet, allez à la source https://www.cnil.fr/fr/cookies-et-autres-traceurs ou contactez-nous. 

 

Le recettage de mon site web est terminé : que faire maintenant ?

Vous avez examiné votre site internet sous toutes les coutures, avez peut-être relevé des failles et les avez corrigées. Et maintenant, que faire ? 

Premièrement, félicitez-vous ! Vous venez d’arriver au bout d’un travail de longue haleine et vous pouvez être fier de vous.

Deuxièmement, communiquez sur vos réseaux et annoncez officiellement la sortie de votre nouveau site ! Exposez-le fièrement sur votre compte LinkedIn, Facebook ou où que vous voulez pour montrer à votre communauté votre talent (même si ce n’est pas vous qui pilotiez le projet 😉 Qu’importe, susciter l’admiration ne mange pas de pain).

Enfin

  • Continuez d’alimenter votre nouveau site en contenus pour prouver à Google votre dynamisme. 
  • Surveillez régulièrement dans les jours qui suivent que le site réagit bien. 
  • Vérifiez son indexation sur les Serps. 
  • Et n’oubliez pas de faire un audit technique régulier pour corriger la remontée d’erreurs au fur et à mesure.

Avez-vous tout bien compris ?

Last but not least !” 

La phase de recettage est une étape incontournable dans tout projet de refonte de site. Pour être réussie, vous devez faire preuve de vigilance et testez le site sur plusieurs supports, plusieurs aspects, plusieurs navigateurs et avec le soutien de plusieurs de vos collaborateurs ! 😉

  • Un projet de refonte de site ? Contactez-nous directement
  • Pour connaître le budget d’une refonte de site, cliquez ICI
  • Pour voir des exemples de refonte de sites qui déchirent, rendez-vous sur cette page !
On s'appelle ?
Gwenaël Guilloux
CEO & Co-founder Luneos
Passionné de stratégie digital, entrepreneuriat, aventures humaines...

Toute l'actu du moment!