Padrões de tela
Ajuda da tela
Um gesto que a tela não diz sozinha se ensina num modal em passos, aberto por um “?”. Nunca abre sozinho e nada fica fixo na tela esperando ser lido: quem quer tirar a dúvida clica, quantas vezes quiser.
components/ui/ajuda-da-tela.tsxcomponents/funil/ajuda-do-funil.tsx--animate-ajuda-cartao
A peça viva
A primeira tela com ajuda é o Funil: como mover os cartões, em três passos.
Clique no “?” pra abrir a ajuda do Funil.
A forma
Uma ideia por passo: a cena animada em cima, o título e uma frase embaixo, e o rodapé com os pontos e os botões.
| Parte | Regra |
|---|---|
| Cena | Desenho, não a tela de verdade: aria-hidden, porque a frase diz tudo. Anima em laço; com menos movimento, parada no fim. |
| Título do passo | Uma ordem curta, no imperativo: "Arraste o cartão pra outra coluna". |
| Frase | Uma ou duas frases, o como e o porquê. É a descrição do diálogo pro leitor de tela. |
| Pontos | Um por passo, o atual cheio. Somem com um passo só. |
| Botões | "Voltar" some no primeiro passo; "Próximo" vira "Entendi" no último e fecha. Reabrir começa do primeiro. |
Onde mora o ?
Na barra da tela, ao lado das ferramentas, só o ícone. Onde a barra não tem espaço, a ajuda vira um item do menu mais próximo.
No Funil, o “?” fica depois do Resumo a partir de 2xl. Abaixo disso a barra não comporta mais um botão (medido com a barra lateral aberta), e a ajuda vira o último item do Exibir, “Como mover os cartões”.
NotaSem o gesto, sem o passo
Os passos se adaptam ao que a pessoa consegue fazer. Sem mouse, o passo do arrasto sai do Funil: ensinar um gesto que o dedo não faz seria mentira.
NuncaAbrir sozinho
A ajuda não abre na primeira visita nem depois de uma novidade. Quem decide abrir é a pessoa.