lean-screen

Écran lean

Le premier écran est le travail, dessiné une fois, à la largeur du travail. Une seconde phrase, un second nombre ou un second panneau doit gagner sa place en changeant ce que la personne fait ensuite.

Cette compétence possède le template d'écran que les agents de codage émettent par défaut : héros métriques, sous-titres explicatifs, cartes égales, colonnes centrées compressées et listes déguisées en tableaux de bord. Elle ne possède pas la logique des tâches, les formulaires ou l'accessibilité. Ceux-ci restent dans ux-best-practices. Elle ne choisit pas d'identité visuelle. Si un système de design existe, utilisez-le. Ne restylez pas le produit pour appliquer cette compétence.

Exécutez la checklist dans references/tells.md avant de considérer un écran comme terminé. Une correspondance signifie couper la décoration ou déplacer le fait. Supprimer une fonction dont la personne a encore besoin, sans laisser de chemin pour y accéder, est un écran raté.

Avant de dessiner

Nommez le travail de cet écran à partir du produit qui est devant vous. N'empruntez pas le travail, les noms ou le verbe d'un projet précédent.

Associez l'écran à ce travail :

• Une action sur une surface existante → un bouton. Ne construisez pas une page.
• Une liste sur laquelle la personne agit → cette liste.
• Un enregistrement qu'elle lit ou modifie → cet enregistrement.
• Une valeur qu'elle est venue vérifier → cette valeur.

Le contrôle principal utilise le verbe du travail. "Nouveau", "Modifier" et "Supprimer" ne sont primaires que lorsqu'ils constituent le travail. "Ouvrir" n'est pas un verbe de travail. Les actions utilitaires restent discrètes et en dehors du premier groupe de lecture.

Où le reste vit

Sur demande signifie un endroit avec un nom que la personne peut anticiper. Un résumé, un historique, un ensemble de totaux ou un outil rare reçoit un panneau, une seconde vue ou une ligne discrète. Construisez cet endroit. Ne supprimez pas le fait parce qu'il n'était pas autorisé à être une carte héros.

Nommez l'endroit d'après ce qu'il contient. "Données", "Plus" et "Infos" ne sont pas des noms. Si l'écran précédent avait une fonction et que celui-ci n'a aucun moyen d'y accéder, l'écran n'est pas terminé.

Un onglet ou une seconde vue est un travail différent, pas une seconde copie des mêmes cartes. Ne mettez pas sur le premier écran un contrôle dont le seul but est de cacher le tableau de bord. Si le panneau a besoin d'un bouton de masquage, ce n'était pas le premier écran.

Le produit a une coque

Lorsque le produit a plus d'une zone, les zones vivent dans une navigation latérale persistante. Regroupez-les. Marquez la zone en cours. Mettez un compteur sur un élément lorsque ce compteur est un backlog sur lequel la personne agit. La page est une zone. Elle ne porte pas le reste du produit, et elle ne supprime pas le reste parce qu'il ne rentre pas.

Quelques modes de la même zone sont des onglets sous le titre, nommés d'après le mode. Quelques vues stables de la même liste (avec des compteurs) se trouvent avec la liste. Ce ne sont pas quatre menus déroulants, et ce n'est pas une seconde barre latérale.

La recherche globale appartient à la coque. La recherche de cette liste appartient à la liste. L'action principale de la zone se trouve là où le travail commence. Les utilitaires restent dans la coque, discrets.

Un catalogue long montre une fenêtre et un moyen honnête de voir le reste. Il ne déverse pas chaque ligne, et il ne cache pas le reste derrière un contrôle sans nom.

La personnalité est la composition

Utilisez la police, l'accent et la densité que le produit a déjà. S'il n'en a pas, utilisez une police de texte neutre et un accent. L'accent marque l'élément de navigation actif et l'action principale. Presque tout le reste est neutre.

Ce qui donne une impression de finition est l'alignement, une ligne claire, le texte secondaire atténué et l'emplacement actuel évident. Une police décorative, un dégradé ou une nouvelle palette ne corrige pas une page dont la structure est mauvaise. Ne restylez pas le produit pour qu'il ait l'air conçu.

Ce que le premier écran contient

Seulement ce dont ce travail a besoin maintenant. L'ordre, le statut et les verbes suivent le travail. Ce n'est pas une mise en page fixe.

• Lorsque la personne doit agir sur des éléments, montrez les éléments et l'action. Mettez le travail non terminé en premier seulement lorsque le travail est de terminer le travail. Un répertoire reste dans l'ordre demandé.
• Lorsque la personne doit lire ou comparer, montrez cette lecture. Plusieurs mesures comparables peuvent se trouver sur une ligne compacte lorsque les comparer est le travail. Chacune porte une comparaison réelle (période précédente, objectif ou un vide honnête). Un sparkline ou un graphique est le corps uniquement si la série existe. Une légende ne répète pas le nombre. Un badge sur la carte ne remplace pas la comparaison. Une mesure qui est le travail entier apparaît une fois, pas comme une paire avec trois décorations.
• Lorsque le travail est une action unique, l'écran est cette action.
• Un mot de statut apparaît uniquement lorsqu'il change ce que la personne fait ensuite. Un mot, et il doit être vrai. Le style de succès sur un travail partiel est un mensonge. Le partiel reste partiel.

Un compteur est autorisé une fois, petit, à côté de la chose qu'il compte, lorsqu'il change l'action suivante. Un nombre plus grand que le travail est vanité lorsque le nombre n'est pas le travail. Deux grands nombres qui signifient des choses différentes et se ressemblent sont une fausse rime. Gardez le seul fait qui décide du clic suivant.

Ce qui quitte le premier écran

Totaux supplémentaires, graphiques, historique, champs vides, filtres rares, explications et un formulaire qui modifie chaque champ. Ils se déplacent vers l'endroit nommé ci-dessus. Ils ne disparaissent pas, et ils ne se déversent pas tous dans l'objet comme une taxe pour chaque action de ligne.

Gardez un total supplémentaire, un graphique ou un historique sur le premier écran lorsque c'est le travail. Ne rétrogradez pas le travail dans une divulgation pour donner à la page un aspect minimal.

Un gestionnaire n'est pas un tableur

Lorsque le travail est de gérer une collection, la ligne est l'objet plus l'action. Le nom est le texte le plus lourd. Le verbe du travail est sur la ligne. Les champs que la personne compare restent. Les champs vides pour la plupart des lignes, et les champs rarement comparés, ne sont pas des colonnes.

L'échec du tableur est chaque propriété comme une colonne, un tiret là où les données manquent, une icône de copie sur chaque valeur, une catégorie collée sous le nom, et un seul bouton qui ouvre l'enregistrement. Utiliser la pleine largeur pour ajouter ces colonnes est la même erreur que le tableau de bord étroit. La largeur appartient à l'identité et à l'action.

Une ligne se lit comme un objet. Le nom est le plus fort. Un statut ou un montant se tient discret à la fin. Une seconde ligne est un aperçu que la personne scanne, atténué, pas une pile d'étiquettes. Le moyen d'accéder à l'enregistrement est la ligne elle-même ou un indice final, et il ne remplace pas le verbe du travail.

Supprimer un élément est une action de liste lorsque la personne gère la liste. Gardez-le sur la ligne, nommé et discret, dans un menu sur cette ligne s'il doit rester en dehors du primaire. Ne forcez pas un écran de détail juste pour supprimer. Confirmez avec le nom de l'objet, et dites si l'enregistrement disparaît ou si la chose qu'il pointe disparaît. La suppression reste hors de la ligne uniquement lorsqu'elle est rare et plus dangereuse que la gestion de la liste. Alors le détail la contient, et le verbe du travail est toujours sur la ligne.

Composition

• Un poids. Plissez les yeux. Un groupe est plus lourd, et ce groupe est le travail. Des cartes égales, des badges égaux et des boutons d'en-tête égaux signifient qu'il n'y a pas de focus. Corrigez le poids avant d'ajouter quoi que ce soit.
• Pleine largeur de la zone de travail. Un outil, un tableau, une file d'attente ou une console utilise la région de contenu à côté de la coque. Ne l'enveloppez pas dans max-w-4xl, max-w-6xl, max-w-7xl ou une colonne étroite centrée qui laisse de larges marges vides alors que les données sont à l'étroit. Limitez la longueur de ligne uniquement pour la prose que vous attendez de quelqu'un qu'il lise (environ 65-75 caractères).
• Pas de mobilier de page qui répète la page. Un titre, le nom de l'endroit ou de l'objet. Pas de sourcil en petites capitales au-dessus. Pas de sous-titre qui définit le titre ("Bibliothèque — là où vit votre bibliothèque"). Pas de badge à côté du titre qui répète le produit. Une seconde ligne n'est autorisée que pour un fait que le titre ne dit pas déjà, et seulement si ce fait change l'action.
• Pas de ligne d'instruction. "Cliquez sur un chip pour filtrer instantanément" signifie que le contrôle ne ressemble pas à un contrôle. Corrigez le contrôle et supprimez la phrase. Ne vous vantez pas qu'une interaction est instantanée.
• Regroupement par position, pas par boîtes. Proximité et un en-tête. Une carte est pour un objet répété que la personne scanne comme une unité, ou pour une véritable frontière (une modale, une tuile déplaçable). Une statistique, une bande de filtre et un tableau n'ont pas chacun une carte. Jamais une carte dans une carte. Une liste de sept ne devient pas sept grandes cartes.
• Une colonne principalement vide n'est pas une colonne. Réduisez-la. Un tiret n'est pas une donnée. Une valeur obligatoire manquante ne doit pas ressembler à un blanc facultatif. Montrez l'écart lorsqu'il change l'action. Omettez-le lorsqu'il ne le fait pas.
• Ne triplez pas le codage. Une fraction, un pourcentage et une barre pour deux éléments sont un fait trois fois. Préférez les éléments, nommés, vérifiables, lorsque la personne doit les compléter. Une barre qui ne peut pas être distinguée d'un coup d'œil (50 % contre 67 % de trois) n'a pas sa place.
• Ne décorez pas la ligne. Tuiles de monogramme alors que le nom est déjà là, une catégorie répétée sous chaque nom, une icône de copie permanente, une pilule plus une barre plus un pourcentage. Copie et autres actions rares apparaissent au focus. La ligne est aussi haute que ses données.
• Les actions destructrices sont discrètes, nommées et accessibles. Une icône de corbeille non étiquetée collée au seul bouton est un mauvais clic. De même qu'une suppression qui n'existe qu'après Ouvrir. Suivez la règle du gestionnaire ci-dessus.
• Les filtres gagnent leur place. La recherche et les filtres apparaissent lorsque la liste est suffisamment longue pour que le scan échoue. Un tri déguisé en filtre ("Nom A–Z" à côté de "Statut (Tous)") est un tri. Un chip de filtre avec zéro correspondance n'est pas un pair des vrais.
• Pas d'objets de remplissage. N'inventez pas une ligne, un compartiment ou un enregistrement d'exemple pour que la mise en page paraisse peuplée. Ne montrez pas une valeur tronquée ou incertaine comme si elle était confirmée.

Quand le template d'administration apparaît

Le réflexe est une pile d'en-tête, une rangée de cartes métriques, des chips, une barre de filtre, un tableau rayé et Modifier plus Supprimer. Utilisez-le uniquement lorsque c'est réellement le travail. Sinon :

1. Un titre. Le nom de l'endroit ou de l'objet.
2. Le travail lui-même, à la largeur du contenu. Une liste, un enregistrement, une valeur ou une action unique. Pas une file d'attente de substitution.
3. Le chrome qui répète le travail sort du premier écran.
4. Les totaux et l'historique se déplacent vers un endroit nommé à moins qu'ils ne soient le travail. Ils ne sont pas supprimés.

Ne faites pas

• N'ajoutez pas un tableau de bord à une tâche qui est un bouton.
• Ne transformez pas une lecture, un enregistrement ou une action unique en une file d'attente d'objets non terminés.
• N'enseignez pas l'écran avec un sous-titre.
• N'utilisez pas le préréglage de police sourcil + titre + phrase de soutien sur des sections, des cartes ou la page.
• Ne commencez pas par des métriques qui ne sont pas le travail.
• Ne centrez pas un outil à l'étroit dans une mer de marges vides.
• Ne faites pas de chaque région une carte.
• N'utilisez pas la couleur de succès pour un travail incomplet.
• Ne donnez pas plusieurs noms à une même idée à moins que la différence ne change l'action. Choisissez un mot.
• Ne livrez pas un écran où une personne ne peut pas pointer le clic suivant, ou la chose qu'elle est venue lire, en une seconde.
• Ne répondez pas à un écran surchargé en supprimant ses fonctions. Déplacez ce qui est secondaire. Gardez ce dont le travail a besoin en surface.
• Ne transformez pas un gestionnaire en grille de base de données dont la seule action est Ouvrir.
• Ne mettez pas chaque zone du produit sur une seule page, et ne supprimez pas ces zones parce que la page est lean. Donnez-leur la barre latérale.
• N'inventez pas une police de caractères ou une palette pour fabriquer de la personnalité. Corrigez la coque, la ligne et l'accent.