Spécifier une interface
Le dossier de spécification : inventaire des écrans, zoning, graphe de navigation, états d'un composant (vide, chargement, erreur, désactivé), table événement, action, retour, charte graphique.
- 26 cartes
- 4 thèmes
- Gratuit
Le programme, thème par thème
Le poids de chaque thème suit celui que lui donne l'examen.
- Notions
- Questions
- Ranger et relier
- Mises en situation
Quelques cartes du deck
Inventaire des écrans : de quoi s'agit-il ?
Voir la réponse
Liste de tous les écrans de l'application, chacun nommé et décrit par son rôle en une phrase, qui ouvre le dossier de spécification.
Les autres pièces du dossier (zoning, graphe de navigation, états) renvoient aux écrans par leur nom : sans inventaire, un écran oublié n'est spécifié nulle part.
Une spécification décrit le bouton Envoyer d'un formulaire dans un seul état : actif. Quel état manque le plus clairement ?
- Désactivé tant que les champs obligatoires ne sont pas remplis
- Vide, avec un message « aucun résultat à afficher »
- Rempli, avec les valeurs déjà saisies dans le formulaire
- Masqué, tant que l'utilisateur n'a pas fait défiler la page jusqu'en bas
Voir la réponse
Désactivé tant que les champs obligatoires ne sont pas remplis
Un bouton d'envoi a un état désactivé (champs invalides) et souvent un état en cours d'envoi. Vide et rempli sont des états d'une liste ou d'un champ, pas d'un bouton ; masquer le bouton cache l'action au lieu d'en expliquer l'indisponibilité.
La spécification d'une interface relie chaque … à l'… déclenchée et au … montré à l'utilisateur.
Voir la réponse
La spécification d'une interface relie chaque événement à l'action déclenchée et au retour montré à l'utilisateur.
La table événement, action, retour supprime les ambiguïtés : le développeur sait quoi faire, et le testeur quoi vérifier.
Zoning : de quoi s'agit-il ?
Voir la réponse
Découpage d'un écran en grandes zones (en-tête, navigation, contenu, pied de page), établi avant tout détail.
Il fixe le rôle de chaque région avant d'y placer des composants, et permet de comparer les écrans entre eux.
La maquette d'une page de commandes ne montre qu'une liste remplie. En production, un nouveau client voit une page blanche. Quelles sont la cause et la correction ?
- Le chargement est trop lent ; ajouter un indicateur de progression sur toute la page
- L'état vide n'était pas spécifié ; afficher « Aucune commande » et inviter à commander
- La liste est cassée ; la remplir avec des commandes d'exemple pour les nouveaux clients
- Le client a mal configuré son compte ; le prévenir de contacter l'assistance
Voir la réponse
L'état vide n'était pas spécifié ; afficher « Aucune commande » et inviter à commander
La maquette n'avait que l'état rempli. Quand la liste est vide, personne n'a décidé de ce qu'on affiche : la page reste blanche. Il faut spécifier l'état vide.