UI et produits numériques · Guide pratique
Préparer une recette visuelle responsive avec des captures identifiables
Fixez le contenu de démonstration, la largeur de fenêtre, le zoom et les navigateurs réellement utilisés.
Préparer les pièces et leurs relations
Donnez un identifiant à chaque combinaison. Attendez l’état prévu des images, fontes et données avant de capturer. Distinguez largeur de fenêtre et caractéristiques de l’appareil ; une réduction manuelle du navigateur n’est pas une preuve que le site a été testé sur tous les téléphones.
Effectuer le contrôle ciblé
Comparez les captures sur des points précis : navigation, rupture de ligne, débordement et ordre des blocs. Localisez les écarts par composant et contexte. Reproduisez un défaut avant de demander une correction, puis refaites la capture avec les mêmes paramètres. Signalez toute zone non examinée et les différences de contenu qui empêchent une comparaison directe.
Donner un contexte vérifiable à la revue
Délimitez les écrans et composants concernés par la remise, puis indiquez les contenus et environnements de comparaison. Gardez les décisions acceptées séparées des questions ouvertes. Une référence de design reste utile lorsqu’elle permet à l’équipe de reproduire un contrôle précis ; elle devient ambiguë si les données, les états ou le contexte changent sans être notés. Consignez ce périmètre dans la fiche jointe.
La recette visuelle ne prouve ni toutes les fonctions ni toute l’accessibilité. Ne déclarez que les environnements effectivement observés. Gardez les résultats non vérifiés en attente au lieu de remplir la matrice comme si tous les tests étaient passés.
| Pièce ou zone fictive | Rôle dans le dossier | Contrôle à effectuer |
|---|---|---|
| accueil-large | Contexte fictif largeur à noter | Navigation complète |
| accueil-etroit | Contexte fictif largeur à noter | Débordement et ordre |
| formulaire-erreur | Même contenu fictif | Message visible |
EXEMPLE FICTIF
Cas fictif : accueil-large
L’équipe fictive Horizon compare deux captures avec des titres différents et attribue à tort un décalage au responsive. Elle stabilise les textes, reprend les mesures et ne conserve comme défaut que le débordement reproductible du menu.
- Créer une fiche de contrôle pour accueil-large en conservant l’état de référence.
- Examiner accueil-etroit selon le contrôle indiqué, puis noter l’écart et la prochaine action.
- Rattacher formulaire-erreur à l’inventaire retenu et demander le retour précis du destinataire.
Avant de poursuivre
- Identifier accueil-large et sa version sans écraser la référence précédente.
- Contrôler accueil-etroit selon la consigne notée dans le registre.
- Relier formulaire-erreur à l’usage et au destinataire prévus.
- Marquer les points ouverts et la personne chargée de les résoudre.
- Conserver le résultat observé et les limites du contrôle effectué.
Les questions utiles
Une capture mobile suffit-elle ?
Elle décrit une situation. Complétez selon les cibles du projet avec les appareils, navigateurs, contenus et interactions nécessaires à la recette.