Signaler un bug avec une capture d’écran annotée : le guide complet

« Le site ne marche pas. » Pour la personne qui doit corriger, ce message est le début d’une enquête : quelle page, quel bouton, sur quel appareil, depuis quand ? Souvent, la correction prend cinq minutes, et la compréhension du problème une heure. Un bon signalement inverse la proportion.

Ce guide vaut pour un développeur, une agence, un client qui fait ses retours sur un site, ou une équipe qui teste son propre outil.

Pourquoi « ça ne marche pas » ne suffit pas

Un signalement vague provoque presque toujours un aller-retour : « Tu peux m’envoyer une capture ? », « C’était sur quelle page ? », « Tu étais sur ton téléphone ? ». Chaque question ajoute une journée. Et quand le problème ne se reproduit pas chez celui qui corrige, il est classé « impossible à reproduire » alors qu’il existe bel et bien.

Les six informations d’un bon signalement

1. Un titre précis : « Le bouton Envoyer du formulaire de contact ne réagit pas sur téléphone » plutôt que « Bug formulaire ».
2. La page concernée : l’adresse exacte, copiée depuis la barre d’adresse.
3. Ce que tu as fait : les étapes, dans l’ordre.
4. Ce qui s’est passé : le message d’erreur, ou l’absence de réaction.
5. Ce qui devrait se passer : le résultat attendu.
6. L’appareil et le navigateur : ordinateur ou téléphone, et lequel.

Et, presque toujours, une capture d’écran. Elle montre en une image ce que trois paragraphes décrivent mal.

Faire une capture d’écran

• Sur Windows : Windows + Maj + S, puis sélectionne la zone. La capture est copiée, prête à être collée.
• Sur Mac : Cmd + Maj + 4 pour capturer une zone (le fichier arrive sur le bureau). Ajoute Ctrl (Cmd + Ctrl + Maj + 4) pour la copier directement, prête à être collée.
• Sur téléphone : le plus souvent, appuie en même temps sur le bouton de mise en veille et un bouton de volume. La combinaison exacte dépend du modèle.

Capture seulement la zone utile, avec un peu de contexte autour : le bouton seul ne dit pas où il se trouve dans la page.

Annoter : une annotation, une information

Une capture brute oblige le lecteur à chercher ce qui ne va pas. Une capture annotée le lui montre. Quatre outils suffisent :

• le cadre pour entourer la zone concernée ;
• la flèche pour pointer un détail précis ;
• le texte pour écrire ce qui ne va pas, directement sur l’image (« trop petit », « devrait être aligné ») ;
• le stylo pour souligner, barrer ou dessiner à main levée.

La règle : peu d’annotations, deux ou trois au maximum, et une capture par problème. Si une capture montre quatre problèmes, fais quatre signalements : ils ne seront pas corrigés par la même personne, ni au même moment. Et évite de capturer des informations personnelles : recadre sur la zone utile.

Dans Flopilot : « Signaler / proposer »

Flopilot a un bouton prévu pour ça dans chaque projet, Signaler / proposer :

1. tu choisis le type : bug, modification ou idée ;
2. tu donnes un titre, l’adresse de la page concernée, ce qui ne va pas et ce qui devrait se passer ;
3. tu colles ta capture avec Ctrl+V (plusieurs si besoin) et tu l’annotes avec le cadre, la flèche, le stylo et le texte ;
4. tu choisis le groupe (« Responsive », « Boutons », « Formulaires »), la priorité et la personne à qui confier la correction.

Le signalement devient une tâche du projet, avec son type, sa page et ses captures annotées, rangées automatiquement dans le dossier « Pièces jointes ».

Trier les signalements

Quand les retours arrivent nombreux (pendant la recette d’un site, par exemple), le tri est essentiel :

• Urgente : ça bloque (le paiement, le formulaire de contact, la connexion).
• Haute : ça gêne visiblement les visiteurs.
• Moyenne : ça mérite d’être corrigé, mais ça peut attendre quelques jours.
• Basse : un détail cosmétique.

Range ensuite par groupe (une zone du site, un type de problème), et suis la correction dans un kanban avec des colonnes « À corriger », « En cours », « À vérifier » et « Corrigé ». La vue liste se filtre aussi par type : tous les bugs, toutes les idées.

Du côté de celui qui corrige

• Reproduis d’abord le problème, avec les étapes données.
• Pose tes questions en commentaire de la tâche, pas par e-mail : l’historique reste au même endroit.
• Explique en une ligne ce qui a été fait une fois la correction faite, puis passe la tâche en « À vérifier » : la personne qui a signalé contrôle et clôt.
• Regroupe les doublons : deux signalements du même problème, c’est une seule correction.

Les erreurs à éviter

• Un seul message pour tout : « Voici mes retours » suivi de vingt points dans un e-mail.
• Pas d’adresse de page : sur un site de trente pages, c’est un jeu de piste.
• Des captures sans annotation : on ne sait pas quoi regarder.
• Tout en priorité haute : si tout est urgent, rien ne l’est.

Questions fréquentes

Que doit contenir un bon rapport de bug ?

Un titre précis, l’adresse de la page concernée, les étapes suivies, ce qui s’est passé, ce qui aurait dû se passer, l’appareil et le navigateur utilisés, et une capture d’écran annotée.

Comment faire une capture d’écran annotée rapidement ?

Fais la capture (Windows + Maj + S sur Windows, Cmd + Ctrl + Maj + 4 sur Mac), colle-la dans ton outil, puis ajoute un cadre, une flèche ou un texte. Dans Flopilot, tu colles la capture avec Ctrl+V dans « Signaler / proposer » et tu l’annotes sur place.

Peut-on coller plusieurs captures dans un même signalement ?

Oui. Dans Flopilot, tu peux coller plusieurs captures dans un signalement et annoter chacune avec le cadre, la flèche, le stylo et le texte. Elles sont rangées avec la tâche.

BugsCaptures d’écranRetours clients