Tela Enxuta

O que Tela Enxuta faz?

A primeira tela é o trabalho, desenhada uma vez, na largura da tarefa. Uma segunda frase, um segundo número ou um segundo painel tem que ganhar seu lugar alterando o que a pessoa faz em seguida.

Esta skill é dona do template de tela que os agentes de codificação emitem por padrão: heróis de métricas, subtítulos explicativos, cards iguais, colunas centrais comprimidas e listas vestidas de dashboards. Ela não é dona da lógica de tarefas, formulários ou acessibilidade. Esses permanecem em ux-best-practices. Ela não escolhe uma identidade visual. Se existir um sistema de design, use-o. Não reformate o produto para aplicar esta skill.

Execute a lista de verificação em references/tells.md antes de considerar uma tela como concluída. Uma correspondência significa cortar a decoração ou mover o fato. Deletar uma função que a pessoa ainda precisa, sem deixar caminho para ela, é uma tela falha.

Antes de desenhar

Nomeie o trabalho desta tela a partir do produto que está à sua frente. Não pegue emprestado o trabalho, os substantivos ou o verbo de um projeto anterior.

Case a tela ao trabalho:

• Uma ação em uma superfície existente → um botão. Não construa uma página.
• Uma lista sobre a qual a pessoa age → aquela lista.
• Um registro que ela lê ou edita → aquele registro.
• Um valor que ela veio verificar → aquele valor.

O controle primário usa o verbo do trabalho. "Novo", "Editar" e "Excluir" são primários apenas quando são o trabalho. "Abrir" não é um verbo de trabalho. Ações utilitárias ficam discretas e fora do primeiro cluster de leitura.

Onde o resto vive

Sob demanda significa um lugar com um nome que a pessoa pode prever. Um resumo, um histórico, um conjunto de totais ou uma ferramenta rara ganha um painel, uma segunda visualização ou uma linha discreta. Construa esse lugar. Não delete o fato porque ele não pôde ser um card herói.

Nomeie o lugar pelo que está dentro. "Dados", "Mais" e "Info" não são nomes. Se a tela anterior tinha uma função e esta não tem como alcançá-la, a tela não está concluída.

Uma aba ou uma segunda visualização é um trabalho diferente, não uma segunda cópia dos mesmos cards. Não coloque um controle na primeira tela cujo único propósito seja esconder o dashboard. Se o painel precisa de um botão de ocultar, ele não era a primeira tela.

O produto tem uma casca

Quando o produto tem mais de uma área, as áreas vivem em uma navegação lateral persistente. Agrupe-as. Marque a atual. Coloque uma contagem em um item quando a contagem for um backlog sobre o qual a pessoa age. A página é uma área. Ela não carrega o resto do produto e não deleta o resto porque não cabem.

Alguns modos da mesma área são abas sob o título, nomeadas pelo modo. Algumas visualizações estáveis da mesma lista (com contagens) ficam junto com a lista. Elas não são quatro menus suspensos e não são uma segunda barra lateral.

A busca global pertence à casca. A busca desta lista pertence à lista. A ação primária da área fica onde o trabalho começa. Utilitários ficam na casca, discretos.

Um catálogo longo mostra uma janela e uma maneira honesta de ver o resto. Ele não despeja todas as linhas e não esconde o resto atrás de um controle sem nome.

Personalidade é a composição

Use o tipo, o acento e a densidade que o produto já tem. Se não tiver nenhum, use uma face de texto neutra e um acento. O acento marca o item de navegação ativo e a ação primária. Quase todo o resto é neutro.

O que parece acabado é alinhamento, uma linha clara, texto secundário suave e o lugar atual sendo óbvio. Uma face de exibição, um gradiente ou uma nova paleta não consertam uma página cuja estrutura está errada. Não reformate o produto para parecer projetado.

O que a primeira tela contém

Apenas o que este trabalho precisa agora. Ordem, status e verbos seguem o trabalho. Eles não são um layout fixo.

• Quando a pessoa deve agir sobre itens, mostre os itens e a ação. Coloque o trabalho inacabado primeiro apenas quando o trabalho é finalizar trabalho. Um diretório permanece na ordem que eles pediram.
• Quando a pessoa deve ler ou comparar, mostre essa leitura. Várias medidas comparáveis podem ficar em uma linha compacta quando compará-las é o trabalho. Cada uma carrega uma comparação real (período anterior, meta ou um vazio honesto). Um sparkline ou um gráfico é o corpo apenas se a série existir. Uma legenda não repete o número. Um distintivo no card não substitui a comparação. Uma medida que é todo o trabalho aparece uma vez, não como par de três decorações.
• Quando o trabalho é uma ação única, a tela é essa ação.
• Uma palavra de status aparece apenas quando muda o que a pessoa faz a seguir. Uma palavra, e tem que ser verdadeira. Estilização de sucesso em trabalho parcial é mentira. Parcial permanece parcial.

Uma contagem é permitida uma vez, pequena, ao lado da coisa que conta, quando altera a próxima ação. Um número maior que o trabalho é vaidade quando o número não é o trabalho. Dois números grandes que significam coisas diferentes e parecem um par são uma rima falsa. Mantenha o único fato que decide o próximo clique.

O que sai da primeira tela

Totais extras, gráficos, histórico, campos vazios, filtros raros, explicações e um formulário que edita todos os campos. Eles se movem para o lugar nomeado acima. Eles não desaparecem e não são todos despejados no objeto como um imposto para cada ação de linha.

Mantenha um total extra, gráfico ou histórico na primeira tela quando esse é o trabalho. Não rebaixe o trabalho para uma divulgação para fazer a página parecer minimalista.

Um gerenciador não é uma planilha

Quando o trabalho é gerenciar uma coleção, a linha é o objeto mais a ação. O nome é o texto mais pesado. O verbo do trabalho está na linha. Campos que a pessoa compara permanecem. Campos que estão vazios para a maioria das linhas e campos que raramente são comparados não são colunas.

A falha da planilha é toda propriedade como coluna, um traço onde faltam dados, um ícone de cópia em todo valor, uma categoria colada sob o nome e um único botão que apenas abre o registro. Usar a largura total para adicionar essas colunas é o mesmo erro do dashboard estreito. A largura pertence à identidade e à ação.

Uma linha lê como um objeto. O nome é mais forte. Um status ou valor fica discreto no final. Uma segunda linha é uma prévia que a pessoa escaneia, suavizada, não uma pilha de rótulos. O caminho para o registro é a própria linha ou uma dica final, e não substitui o verbo do trabalho.

Remover um item é uma ação de lista quando a pessoa está gerenciando a lista. Mantenha-o na linha, nomeado e discreto, em um menu nessa linha se precisar ficar fora do primário. Não force uma tela de detalhes apenas para excluir. Confirme com o nome do objeto e diga se o registro desaparece ou a coisa para a qual ele aponta desaparece. Excluir fica fora da linha apenas quando é raro e mais perigoso do que gerenciar a lista. Então o detalhe o segura, e o verbo do trabalho ainda está na linha.

Composição

• Um peso. Aperte os olhos. Um cluster é mais pesado, e esse cluster é o trabalho. Cards iguais, distintivos iguais e botões de cabeçalho iguais significam que não há foco. Corrija o peso antes de adicionar qualquer coisa.
• Largura total da área de trabalho. Uma ferramenta, uma tabela, uma fila ou um console usa a região de conteúdo ao lado da casca. Não o envolva em max-w-4xl, max-w-6xl, max-w-7xl ou uma coluna estreita centralizada que deixa margens largas vazias enquanto os dados estão apertados. Limite o comprimento da linha apenas para prosa que você espera que alguém leia (cerca de 65–75 caracteres).
• Sem mobiliário de página que reafirme a página. Um título, o nome do lugar ou do objeto. Nenhuma sobrancelha em letras minúsculas acima dele. Nenhum subtítulo que defina o título ("Biblioteca — onde sua biblioteca vive"). Nenhum distintivo ao lado do título que repita o produto. Uma segunda linha é permitida apenas para um fato que o título já não diz, e apenas se esse fato alterar a ação.
• Sem linha de instrução. "Clique em um chip para filtrar instantaneamente" significa que o controle não parece um controle. Corrija o controle e delete a frase. Não se gabe de que uma interação é instantânea.
• Agrupamento por posição, não por caixas. Proximidade e um cabeçalho. Um card é para um objeto repetido que a pessoa escaneia como uma unidade, ou para um limite verdadeiro (um modal, um bloco arrastável). Uma estatística, uma faixa de filtro e uma tabela não ganham cada uma um card. Nunca um card dentro de um card. Uma lista de sete não se torna sete cards grandes.
• Uma coluna que está principalmente vazia não é uma coluna. Recolha-a. Um traço não é dado. Um valor obrigatório ausente não deve parecer um espaço em branco opcional. Mostre a lacuna quando ela altera a ação. Omita-a quando não alterar.
• Não codifique três vezes. Uma fração, uma porcentagem e uma barra para dois itens são um fato três vezes. Prefira os itens, nomeados, verificáveis, quando a pessoa precisa completá-los. Uma barra que não pode ser distinguida à primeira vista (50% versus 67% de três) não pertence.
• Não decore a linha. Blocos de monograma quando o nome já está lá, uma categoria repetida sob cada nome, um ícone de cópia permanente, uma pílula mais uma barra mais uma porcentagem. Cópia e outros atos raros aparecem no foco. A linha é tão alta quanto seus dados.
• Atos destrutivos são discretos, nomeados e acessíveis. Um ícone de lixeira sem rótulo colado ao único botão é um clique errado. Também é uma exclusão que existe apenas depois de Abrir. Siga a regra do gerenciador acima.
• Filtros ganham seu lugar. Pesquisa e filtros aparecem quando a lista é longa o suficiente para que a varredura falhe. Uma classificação disfarçada de filtro ("Nome A–Z" ao lado de "Status (Todos)") é uma classificação. Um chip de filtro com zero correspondências não é par dos reais.
• Sem objetos de preenchimento. Não invente uma linha, um balde ou um registro de amostra para que o layout pareça povoado. Não mostre um valor truncado ou incerto como se estivesse confirmado.

Quando o template de administrador aparece

O reflexo é uma pilha de cabeçalho, uma linha de cards de métricas, chips, uma barra de filtro, uma tabela listrada e Editar mais Excluir. Use-o apenas quando esse for realmente o trabalho. Caso contrário:

1. Um título. O nome do lugar ou do objeto.
2. O trabalho em si, na largura do conteúdo. Uma lista, um registro, um valor ou uma ação única. Não uma fila substituta.
3. O cromatismo que reafirma o trabalho sai da primeira tela.
4. Totais e histórico vão para um lugar nomeado a menos que sejam o trabalho. Eles não são deletados.

Não faça

• Não adicione um dashboard a uma tarefa que é um botão.
• Não transforme uma leitura, um registro ou uma ação única em uma fila de objetos inacabados.
• Não ensine a tela com um subtítulo.
• Não use o preset de tipo de sobrancelha + título + frase de apoio em seções, cards ou na página.
• Não lidere com métricas que não são o trabalho.
• Não centralize uma ferramenta apertada em um mar de margem vazia.
• Não transforme toda região em um card.
• Não use cor de sucesso para trabalho incompleto.
• Não dê vários nomes a uma ideia a menos que a diferença altere a ação. Escolha uma palavra.
• Não entregue uma tela onde uma pessoa não possa apontar para o próximo clique, ou a coisa que veio ler, em um segundo.
• Não responda a uma tela lotada deletando suas funções. Mova o que é secundário. Mantenha o que o trabalho precisa na superfície.
• Não transforme um gerenciador em uma grade de banco de dados cuja única ação é Abrir.
• Não coloque toda área do produto em uma página, e não delete essas áreas porque a página é enxuta. Dê a elas a barra lateral.
• Não invente uma face de tipo ou uma paleta para fabricar personalidade. Conserte a casca, a linha e o acento.