Duas regras bastam para uma interface calma, propõe guia
A tese: duas regras para uma interface calma
Em um guia prático, o desenvolvedor Max Schmitt propõe que duas regras bastam para tornar interfaces simples mais calmas, demonstrando cada ponto com comparações interativas entre versões "antes" e "depois" de listas e diálogos.
A primeira regra é não mostrar estados de carregamento em cascata: ao salvar, o botão deve permanecer em estado de carregamento até que a lista em segundo plano seja atualizada, em vez de encadear múltiplos carregamentos visíveis. A segunda é evitar toasts (notificações flutuantes), que ele classifica como má experiência de uso. Em vez de confirmar a ação com uma notificação, a interface deve mostrar a ação surtindo efeito - por exemplo, o novo item aparece diretamente na lista. Ele nota que o mesmo princípio vale para exclusão de itens: menos estados de carregamento discretos e nenhuma notificação produzem uma interface mais calma.
Regras adicionais
Schmitt complementa com quatro regras de bônus:
Não usar toasts para erros também. Embora a notificação pareça mais limpa, ela aparece longe de onde o usuário clicou originalmente, especialmente em telas grandes, e desaparece após um tempo, deixando o usuário confuso se não estava prestando atenção.
Fixar no topo os modais que mudam de altura. Quando o modal é centralizado, o botão de envio muda de posição ao exibir ou ocultar a mensagem de erro - algo que ele considera irritante. A solução simples é ancorar o modal ao topo.
Permitir que a tecla Enter envie o formulário. Ao digitar o nome de um item, o usuário deveria poder pressionar Enter para enviar. Em React, ele explica, isso vem de graça ao usar
<form onSubmit={addItem}>em vez de<button onClick={addItem}>.Focar o primeiro campo ao abrir um diálogo. É irritante, segundo ele, clicar para abrir um diálogo e precisar clicar novamente para começar a digitar.
Contexto e limites da proposta
Na conclusão, Schmitt reconhece que há design engineers escrevendo sobre o lado mais sutil do design - ele cita Jakub Krehel ("The invisible side of design engineering") e Emil Kowalski ("7 Practical Animation Tips") - e diz admirar esse conteúdo. Porém, argumenta que muitas vezes é preciso construir interfaces simples e sólidas sem o luxo de refinar cada detalhe.
Ele também admite que os próprios exemplos "depois" poderiam ser ainda mais polidos com animações, atualizações otimistas, edição inline e outros recursos. O objetivo do artigo, segundo ele, era mostrar algumas regras básicas que fazem interfaces simples ficarem bem melhores, sem custo extra de tempo (ou de tokens).
Schmitt se apresenta como desenvolvedor web freelance da Alemanha, especializado em React e Node.js.