Retorno no lugar
O retorno de uma ação acontece onde ela aconteceu: o container mostra que está fazendo e como terminou, e as palavras vêm logo acima.
Nesta página
A regra
Toda ação que leva tempo ou muda um estado responde no próprio container onde aconteceu: enquanto roda, o container esmaece e um traço à mão gira no meio; no fim, um certo em musgo ou um X em vinho, e o Notice entra logo acima, com as palavras. Nada de toast num canto da tela.
Resultado do teste:
Os três estados
Salvando…
Salvo
Não salvou
A sequência
- Carregando: o esmaecido entra (320ms) e o traço gira até a resposta chegar. O container não recebe toque, e um segundo envio é ignorado.
- Deu certo: o certo é desenhado em musgo, fica um instante, e o esmaecido sai. O Notice de sucesso entra logo acima.
- Deu errado: o X é desenhado em vinho, fica um instante, e o esmaecido sai. O Notice de erro entra acima e recebe o foco; o que a pessoa escreveu continua lá.
- Movimento reduzido: nada gira nem é desenhado; o desenho aparece pronto, e a palavra diz o resto.
Bons e maus padrões
Faça assim
O formulário esmaece e mostra o certo; o aviso "Lembrete salvo" aparece logo acima dele.
O retorno aparece onde a pessoa está olhando, em qualquer tamanho de tela.
Não faça
Um toast "Salvo!" no canto de baixo da janela, que some em 3 segundos.
Num 4K, o canto está a meio metro do formulário: a pessoa salva e não vê se deu certo.
Como escrever
- Carregando: o verbo no gerúndio ("Salvando…", "Apagando…").
- Fim: uma ou duas palavras ("Salvo", "Não salvou"). O Notice traz a frase inteira e o que fazer.
Componentes
- StatusOverlay: o esmaecido, o desenho e a palavra.
- Notice: as palavras do resultado, acima do container.
- Telas grandes: por que o retorno não vai para o canto.