Animação com propósito

• Animações podem, quando usadas adequadamente, aumentar a previsibilidade, a sensação de velocidade e o prazer da interface
• Porém, animações usadas sem critério podem causar imprevisibilidade e atraso, e até mesmo reduzir a confiança do usuário
• O primeiro passo importante é definir um propósito claro para a animação
• Quanto maior a frequência de uso da animação, mais desejável pode ser uma experiência sem animações
• A velocidade da animação também é decisiva para o desempenho cognitivo e a satisfação do usuário

---

O propósito da animação

• O uso correto de animações melhora a previsibilidade da interface, a sensação de velocidade e o prazer da experiência de uso
• Animações mal aplicadas tornam a interface lenta, confusa e desagradável, além de prejudicar a confiança do usuário no produto

A importância da intenção

• Antes de aplicar uma animação, é preciso perguntar: "qual é o propósito desta animação?"
• Como exemplo, a animação de marketing do Product Intelligence da Linear, em vez de usar uma imagem estática, ajuda o usuário a entender o recurso ao mostrar imediatamente como essa funcionalidade funciona
• O sutil efeito de scale down ao pressionar um botão faz a interface parecer mais viva e responsiva
• A animação de entrada do toast do Sonner tem os dois propósitos abaixo
  • Em vez de surgir de forma abrupta, ela aparece naturalmente, reduzindo a sensação de estranheza
  • Ela entra e sai na mesma direção, mantendo a consistência espacial e tornando mais intuitivo o gesto de swipe-down
• Às vezes, a própria "alegria" pode ser o propósito da animação, oferecendo uma experiência diferente e memorável em interações raras
• No entanto, quando a frequência de uso aumenta, a alegria inicial logo pode se transformar em irritação e atraso

Frequência de uso e animação

• Quanto mais frequentemente a animação é vista, maior pode ser o cansaço do usuário e o atraso nas tarefas
• Por exemplo, em situações de uso repetitivo do Raycast, animações desnecessárias se tornam um grande incômodo
• Em menus, listas e situações operadas por teclado que são usados repetidamente, é recomendável eliminar completamente as animações
• O texto apresenta inclusive exemplos em que as animações, ao usar o teclado, acabam reduzindo a velocidade de resposta
• Uma experiência sem animações pode ser a melhor escolha em certos cenários, como repetição e trabalho em grande volume

Percepção de velocidade e responsividade

• Fora de sites de marketing, todas as animações de UI devem ser rápidas para melhorar a percepção de desempenho e de responsividade
• Um spinner de carregamento que gira mais rápido faz o carregamento parecer mais veloz, mesmo quando o tempo real é o mesmo
• Uma animação de dropdown de 180ms parece muito mais responsiva do que uma de 400ms
• Em geral, o ideal é que animações de UI fiquem abaixo de 300ms
• Para tooltips, é bom haver um pequeno atraso na primeira exibição, mas, depois de abertas, o ideal é que reajam imediatamente, sem animações adicionais, para oferecer a melhor experiência (ver Radix UI e Base UI)
• Transições sem atraso entre tooltips melhoram a experiência do usuário sem comprometer o propósito

Construindo uma ótima interface

• O objetivo final não é a animação em si, mas a construção de uma interface de usuário excelente
• É importante criar experiências que as pessoas realmente queiram usar no dia a dia
• Às vezes a animação é necessária, mas, dependendo do contexto, "sem animação" pode ser a melhor escolha
• Saber quando e como aplicar animações é uma competência importante em design de UI/UX

Encerramento

• Para criar interfaces excelentes, é preciso ter uma compreensão profunda sobre o uso de animações
• Materiais adicionais de teoria e prática podem ser encontrados em "Animations on the Web"

[GN⁺]

Comentários do Hacker News

• Sempre que designers discutem animação, tendem a usar palavras como “polimento” ou “encanto” e a ponderar esses elementos contra o atraso perceptível; isso não está totalmente errado, mas deixa algumas ressalvas

  1. Acho que a parte do encantamento (delight) é exagerada; quem realmente fica impressionado com animações chamativas, na maioria das vezes, são outros designers
  2. Acima de tudo, é útil focar em “estado” (state) ao decidir quando usar animação; se houver risco de o usuário não perceber bem uma mudança de estado, aí a animação serve como apoio visual; acho que esse é o principal propósito da animação, o resto é vaidade

  • Sobre a opinião de que “encantamento é exagerado”, animações significativas em software, quando bem usadas e sem atrapalhar, têm sim um efeito positivo claro para os usuários; só que talvez seja um pouco diferente do efeito que muitos imaginam
    Uma animação bem projetada é aquele último 20% que separa algo “bom” de algo “excelente”; não é indispensável, mas vira um fator de diferenciação frente aos concorrentes
    Um motivo realista para a animação ter valor é parecido com o que acontece em produtos físicos, quando as pessoas usam sensação de peso ou durabilidade como critério de produto premium
    Porém, nos últimos 10 anos, o design de UI ficou enviesado para “clima”, “impacto visual” e “branding”, enquanto pesquisa séria e utilidade prática no uso eficaz de animações vêm sendo negligenciadas
    Já passou da hora de o design de UI voltar para a usabilidade prática

  • Me surpreende ver o sutil efeito de redução de escala ao clicar num botão ser tratado como um tipo de animação; isso é um feedback visual bem básico para indicar que algo é clicável e que o clique foi reconhecido

  • A valorização do próprio delight no design de software aparece muito entre fãs da Apple da era antiga, por exemplo na saudade da redução do lado divertido da Apple depois de Jobs
    Não conheço um texto de referência que organize esse tema de forma completa, mas ele é mencionado neste texto curto
    Esse apreço por detalhes assim não é só gosto de alguns designers nem um fenômeno restrito; é uma das características centrais do fandom da Apple

  • Vejo com frequência designers em ambientes B2B desenhando com uma pegada B2C
    Em B2B, especialmente enterprise, isso vira apenas a ferramenta de trabalho diária do usuário, então animações chamativas, gradientes coloridos (que hoje em dia às vezes até significam AI) e afins não ajudam no trabalho real e só distraem
    Esses elementos decorativos apenas atrapalham o usuário a navegar com eficiência por dashboards centrados em texto
    Se você quer criar uma experiência “bonita e agradável”, então empresa de workflow como CRM/ERP não é o lugar certo; isso só faz sentido em empresas onde a satisfação emocional do usuário se conecta diretamente ao valor do negócio

  • Não concordo que delight seja exagerado
    Por exemplo, se um usuário de Apple/iPhone passar uma semana usando Android, provavelmente vai dizer que algo “parece estranho e irritante”
    Isso vem do fato de o iOS ter animações cuidadosamente refinadas ao longo de toda a interação
    O consumidor comum talvez não descreva a experiência com o termo delight, mas percebe claramente quando passa a ter uma experiência pior do que antes

• Acho que a Apple tem coisas a aprender nesse ponto; muitas vezes se perde tempo esperando animações inúteis
  Por exemplo, depois de rolar até o fim e tocar num botão, às vezes é preciso tocar várias vezes antes de reagir, porque a animação de bouncing ainda não terminou
  Deslizar entre apps, fechar notificações, abrir o dock ou a gaveta e a maioria das ações baseadas em gestos são processadas de forma lenta demais
  As animações rodam em sequência: uma precisa terminar, depois vem a próxima, e só então dá para interagir
  É até irônico que você precise desligar essas animações nas configurações de Acessibilidade para conseguir usar com mais conforto

  • Fico irritado quando o Apple Wallet se conecta ao celular e dispara uma animação inútil em tela cheia, durante a qual não dá para fazer absolutamente nada
    Bastaria conectar e dar um pequeno retorno háptico

  • As animações de navegação do iOS foram todas projetadas para poderem ser interrompidas no meio e permitir outra ação; não é preciso esperar até o final obrigatoriamente

  • No macOS, ao trocar de desktop/space, toda entrada continua indo para o space anterior até a animação terminar, o que é extremamente frustrante
    A Apple hoje não está cuidando direito de UI/UX; numa organização desse tamanho, é difícil fazer uma boa experiência de usuário sem alguém com poder de decisão forte como Steve Jobs
    E muitas vezes designers não percebem que o “usuário médio” não é fã deles nem do produto; ele só quer funcionalidade básica e consistência
    Sempre que forem mudar algo, deveria haver a postura de só mudar se você mostrar para sua avó e ela disser “uau, isso realmente ficou muito melhor”

• Eu gostaria que a velocidade das animações fosse ainda mais rápida
  300ms é lento demais para mim
  Prefiro animações tão curtas que quase não sejam percebidas
  Na verdade, talvez você só note que elas existem quando elas são removidas
  Acima disso, já me parece lento demais

  • Eu também usava algo em torno de 250ms, mas recentemente reduzi para 200ms
    200ms é a velocidade ideal de transição de UI para entender o que mudou, como mudou e por quê
    Se isso não puder ser atendido, o melhor é remover a transição
    Também é prático no CSS, porque dá para escrever simplesmente .2s
    Abaixo de 150ms pode parecer glitch de renderização; quando fica curto demais, a animação perde justamente sua vantagem

  • A primeira coisa que faço ao usar um celular Android é ir no modo desenvolvedor e configurar a velocidade das animações para o dobro
    Ver aquilo funcionando na velocidade padrão é sofrido demais

• Na prática, animação em web design não é muito diferente dos efeitos de apresentação do PowerPoint
  Na maioria dos casos, um ou dois cross-fades rápidos já bastam para criar uma UI limpa e organizada, e raramente é preciso mais do que isso

• Eu acho que animação só faz sentido para confirmar algo que o usuário já sabe; ela não deveria ser o meio pelo qual a informação é transmitida
  Ou seja, mesmo com as animações desligadas, o usuário deveria conseguir trabalhar na mesma velocidade e entender o fluxo do mesmo jeito
  O objetivo da animação é costurar suavemente a jornada de UX e dar um pequeno sinal de que o estado está como o esperado
  Por exemplo, um destaque rápido no hover do mouse evita que eu precise prestar atenção extra para saber se o cursor está sobre o controle
  Como no exemplo de um tooltip: depois que ele apareceu uma vez, passar a surgir instantaneamente em 0ms transmite a sensação de que houve uma compreensão real do fluxo de UX do usuário
  Esse é um exemplo clássico de animação que entende bem a jornada de UX

• Meu princípio é: se o usuário precisa esperar a animação terminar para continuar interagindo, então essa animação deveria ser removida
  E acho obrigatório oferecer uma opção de acessibilidade para desligar todas as animações

  • Para isso, a media query CSS prefers-reduced-motion é realmente muito útil
    Veja a documentação relacionada

• Sobre a animação de apresentação do recurso Product Intelligence da Linear, eu entendo a intenção do designer, mas vendo na prática isso não ajuda em nada a compreensão
  A animação naquele ângulo 3D estranho não parece ter relação com a UI real
  Esse efeito 3D até sugere que aquela caixa específica na tela (ou seja, o produto) não é a página que estou lendo, mas ainda assim não ajuda muito a entender o recurso em si
  O efeito de fade-in chama a atenção para a área, mas não contribui tanto para transmitir o conteúdo

• Animações “encantadoras” ficam boas na minha tela (por exemplo, um M1 MacBook Pro), mas em outras telas (por exemplo, um monitor IBM ThinkVision de baixa resolução) parecem muito estranhas e lentas
  Vídeo de demonstração no MacBook
  Vídeo de demonstração no monitor de baixa qualidade
  Dependendo do monitor em que se vê, a percepção pode ser completamente diferente

  • Fiquei curioso se esse monitor IBM está sendo usado na resolução nativa

• Sobre a ideia de que “um spinner girando rápido passa a sensação de carregar mais rápido”, eu, pelo contrário, já vi tanto design ruim abusando de spinner rápido quando nada de fato está acontecendo que um spinner lento me parece mais confiável

  • Eu só confio em barras de carregamento que mostram progresso de forma não linear; nesses casos dá para ver claramente um sinal de que algo real está avançando em etapas

  • Um spinner lento me passa mais confiança justamente porque dá a sensação de que está lidando com um trabalho pesado e engasgando por causa disso

• Um exemplo imediato que estraga meu dia é quando o estado fica inconsistente durante a animação
  Por exemplo, no Windows, quando surge um popup de notificação de um app, se eu tento clicar no X para fechar antes de a animação terminar, eu acabo abrindo a notificação
  No Mac, ao trocar de desktop, às vezes um app aparece de relance e depois muda bruscamente para outro, e como a animação é lenta eu acho que já terminou, interajo com algo e fico confuso
  Às vezes isso acontece até de forma aleatória
  Para os designers: se vocês realmente querem colocar animações, elas precisam ser totalmente robustas; caso contrário, eu imediatamente deixo de confiar naquele app