UI et produits numériques · Guide pratique
Livrer les variantes claire et sombre d’une interface
Construisez une correspondance par rôle : surface, texte, contour, accent et information.
Préparer les pièces et leurs relations
Repérez les images et logos qui nécessitent une variante spécifique. Comparez les mêmes écrans avec le même contenu dans les deux thèmes. La variante sombre demande des décisions propres ; inverser toutes les couleurs mécaniquement peut rendre des illustrations ou des états difficiles à comprendre.
Effectuer le contrôle ciblé
Inspectez états de focus, erreurs, éléments désactivés et contenus superposés. Mesurez les contrastes avec les valeurs effectivement retenues et vérifiez leur contexte d’utilisation selon les critères applicables. Notez les exceptions avec leur motif et l’action à prévoir. Contrôlez aussi le passage d’un thème à l’autre dans l’implémentation lorsque ce comportement fait partie du périmètre de recette.
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.
Aucune conformité générale n’est déduite de deux captures ou d’une mesure isolée. La table décrit les choix de design et les points de contrôle, tandis que le produit final doit être examiné dans ses situations réelles.
| Pièce ou zone fictive | Rôle dans le dossier | Contrôle à effectuer |
|---|---|---|
| surface-page | Deux valeurs fictives à noter | Rôle constant |
| logo-navigation | Variantes fictives claire et sombre | Lisibilité |
| erreur-formulaire | Même message fictif | Contraste et repérage |
EXEMPLE FICTIF
Cas fictif : surface-page
Le produit fictif Noctule affiche un logo sombre sur la barre de navigation du thème sombre. L’équipe fournit une variante autorisée, vérifie ses états et rattache les deux exports au même identifiant de composant.
- Créer une fiche de contrôle pour surface-page en conservant l’état de référence.
- Examiner logo-navigation selon le contrôle indiqué, puis noter l’écart et la prochaine action.
- Rattacher erreur-formulaire à l’inventaire retenu et demander le retour précis du destinataire.
Avant de poursuivre
- Identifier surface-page et sa version sans écraser la référence précédente.
- Contrôler logo-navigation selon la consigne notée dans le registre.
- Relier erreur-formulaire à 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é.
Registre fictif : les thèmes clair et sombre d’une interface
Les questions utiles
Dois-je inverser les couleurs des images ?
Examinez chaque image. Certaines restent identiques, d’autres demandent un fond ou une variante ; conservez la décision et les sources correspondantes.