Spécifier un écran avant qu'il soit dessiné

Quand l’employer

À employer quand le parcours est spécifié et qu'il faut décrire l'écran qui le porte. À ne pas employer avant la spécification du parcours : vous obtiendriez un joli écran qui ne sert aucun enchaînement connu.

Les 5 trous à remplir avant d’envoyer

Chaque trou est une décision déjà prise. Un trou que vous ne savez pas remplir n’est pas une case à improviser : c’est un travail de cadrage qui manque.

{ECRAN}

Quel écran, et quelle étape du parcours spécifié porte-t-il ?

Pourquoi ce trou existe. Un écran sans étape rattachée devient un fourre-tout où l'on ajoutera tout ce qui ne trouve pas sa place ailleurs.

Si vous ne savez pas répondre. Retournez à la spécification du parcours et pointez la ligne. Si aucune ligne ne correspond, l'écran n'a pas lieu d'exister.

{ACTION_PRINCIPALE}

Quelle est l'unique action que l'utilisateur doit pouvoir accomplir ici ?

Pourquoi ce trou existe. Deux actions principales sur un écran donnent deux actions secondaires : l'utilisateur hésite et l'agent multiplie les boutons.

Si vous ne savez pas répondre. Demandez-vous ce que l'utilisateur dirait s'il devait résumer sa visite en un verbe. Ce verbe est l'action principale.

{INFORMATIONS_AFFICHEES}

Quelles informations doivent être visibles sans défilement, et lesquelles peuvent attendre ?

Pourquoi ce trou existe. Sans hiérarchie déclarée, l'agent affiche tout ce qu'il a sous la main, et l'écran devient un formulaire administratif.

Si vous ne savez pas répondre. Écrivez ce que l'utilisateur doit savoir pour décider. Le reste est du confort et se range plus bas.

{ETATS_DE_LECRAN}

Que montre l'écran quand il charge, quand il est vide, et quand il échoue ?

Pourquoi ce trou existe. Les trois états oubliés par défaut sont le chargement, le vide et l'erreur, et ce sont ceux que l'utilisateur rencontre le premier jour.

Si vous ne savez pas répondre. Imaginez le tout premier utilisateur, dont le compte ne contient rien. Ce qu'il voit est votre état vide, et il doit lui dire quoi faire.

{CONTRAINTES_DUSAGE}

Sur quel matériel et dans quelles conditions cet écran sera-t-il utilisé ?

Pourquoi ce trou existe. Un écran conçu pour un grand moniteur et utilisé sur un téléphone d'entrée de gamme avec une connexion instable ne remplit pas sa fonction.

Si vous ne savez pas répondre. Regardez sur quoi travaillent réellement vos utilisateurs, pas sur quoi vous travaillez, vous. La différence est souvent totale.

Le corps du gabarit

Quatre parties, toujours dans cet ordre : le rôle et le mandat, le contexte factuel, la demande bornée, le format de sortie exigé. Les trous restent visibles à la copie, et c’est voulu : les remplir un par un est la dernière occasion de s’apercevoir qu’une décision manque.

## 1. RÔLE ET MANDAT

Tu es concepteur d'interface. Ton mandat est de décrire un écran par écrit, dans un texte qu'un développeur peut construire et qu'un tiers peut contrôler, avant que quiconque ouvre un outil de dessin. Tu ne produis pas d'image, tu ne choisis pas de bibliothèque de composants, tu n'écris pas de code.

## 2. CONTEXTE FACTUEL

Écran et étape rattachée : {ECRAN}
Action principale unique : {ACTION_PRINCIPALE}
Informations à afficher, par ordre d'importance : {INFORMATIONS_AFFICHEES}
États à couvrir : {ETATS_DE_LECRAN}
Conditions d'usage réelles : {CONTRAINTES_DUSAGE}

L'action principale est unique et n'est pas négociable. Tout ce que tu proposerais en plus se range explicitement en action secondaire, et tu justifies chacune en une ligne.

## 3. DEMANDE BORNÉE

Produis la description écrite de l'écran.

Ce que je veux :
1. le contenu de l'écran en une liste ordonnée de haut en bas, chaque bloc nommé et décrit en une phrase ;
2. l'action principale : son intitulé exact, ce qui se passe quand on la déclenche, et ce qui la rend indisponible ;
3. les actions secondaires, au plus trois, chacune justifiée par une ligne ;
4. les quatre états de l'écran : chargement, contenu, vide, erreur, avec le texte affiché dans chacun ;
5. le comportement sur petit écran : ce qui reste visible, ce qui se replie, ce qui disparaît ;
6. ce que l'écran ne fait pas, en toutes lettres.

Ce que je ne veux pas : aucune couleur, aucune police, aucun nom de bibliothèque, aucun code, aucune image.

## 4. FORMAT DE SORTIE EXIGÉ

Six sections titrées comme ci-dessus. Tous les textes destinés à l'utilisateur sont écrits en français, entre guillemets, dans leur formulation finale, y compris le texte de l'état vide et celui de l'état d'erreur. Aucun texte de remplissage.

Ta réponse est refusable si elle propose une seconde action principale, si un état est décrit sans son texte, ou si elle contient un texte de remplissage au lieu du texte réel.

Ce que vous devez recevoir

• Une liste ordonnée des blocs de l'écran, de haut en bas, chacun nommé et décrit.
• L'intitulé exact de l'action principale, son effet, et les conditions qui la rendent indisponible.
• Trois actions secondaires au plus, chacune justifiée en une ligne.
• Les quatre états couverts, chacun avec son texte final entre guillemets.
• Le comportement sur petit écran, bloc par bloc.
• Une liste explicite de ce que l'écran ne fait pas.

Ce qui doit vous faire refuser

Ces motifs sont écrits comme des constats : « un fichier hors périmètre a été modifié » se vérifie, « le travail manque de rigueur » ne se vérifie pas.

• L'écran porte deux actions principales, ce qui rend la hiérarchie invérifiable.
• L'état vide est mentionné sans le texte que verra le premier utilisateur.
• L'état d'erreur renvoie à un message générique au lieu de dire ce que l'utilisateur doit faire.
• La description contient du texte de remplissage à la place du texte réel.
• Le comportement sur petit écran est absent alors que les conditions d'usage l'exigent.
• L'agent a choisi une bibliothèque de composants, ce qui n'était pas demandé.

Selon pour qui vous construisez

Pour moi.

Testez l'état vide sur vous-même en repartant d'un compte neuf. C'est le seul état que vous ne verrez jamais autrement.

Pour un client.

La description écrite précède la maquette et lui survit. Quand le client demandera un changement, c'est ce texte qui dira si le changement est un ajout.