4 maneiras de usar animação funcional no design da interface do usuário
Apenas uma década atrás, interfaces de usuário que usavam animações eram evitadas, sendo mais frequentemente associadas a pop-ups e anúncios intermitentes, mas isso mudou. Hoje, os detalhes do design de interação e animação fazem uma diferença fundamental em sites modernos e em aplicativos modernos. Essa mudança de mentalidade é claramente expressa na declaração da Zurb:
Não estamos mais apenas projetando telas estáticas. Estamos projetando como o usuário obtém dessas telas para realmente visualizar o conteúdo.
Se quisermos projetar produtos digitais melhores, precisamos abraçar a natureza interativa do aplicativo e dos sites desde o início.
Por que trabalhos de animação
Motion, por sua natureza, tem o maior nível de destaque em uma interface de usuário. Nem cópia de texto nem imagens estáticas podem competir com o movimento. Nossos olhos estão programados para prestar atenção em objetos em movimento - é quase um reflexo. Podemos aproveitar isso com essa animação funcional.
O que é animação funcional?
A animação funcional é uma animação sutil incorporada na interface do usuário como parte da funcionalidade desse design. Tem um propósito muito claro e lógico:
- Reduzir carga cognitiva
- Evite a cegueira da mudança
- Estabelecer uma melhor recordação nas relações espaciais
Em uma abordagem de design centrada no usuário, onde o usuário é o foco principal, uma interface de usuário precisa ser intuitiva, responsiva e humana. A animação funcional ajuda você a atingir esses objetivos.
Como a animação funcional melhora o UX
Nossa experiência e impressão de um aplicativo ou site são moldadas por uma combinação de fatores, com interação desempenhando um papel fundamental. Adicionar movimento ao nosso design pode ser significativo e funcional, quando encontramos as circunstâncias certas. A animação funcional bem pensada e testada tem o potencial de cumprir várias funções, incluindo:
1. Feedback Visual
Um bom design de interação fornece feedback. O feedback reconhece que o sistema recebeu uma ação do usuário e demonstra o resultado da interação, tenha sido bem-sucedido ou não. A animação neste grupo precisa ser muito sutil e deve ser projetada de forma responsiva.
Feedback de botão
Na vida real, os botões respondem à nossa interação e é assim que esperamos que as coisas funcionem. Para ser previsível, a interface digital do usuário deve agir da mesma maneira.
Fonte: Jaron Pulver
Visualize o resultado de uma ação
Seguindo o princípio show, não diga , você pode usar o feedback animado para destacar que algo deu errado. Por exemplo, animação de tremor visual na entrada de senha incorreta. É como balançar a cabeça como se dissesse “não, tente de novo”. O usuário percebe a animação e compreende instantaneamente o status atual.
Você também pode reforçar as ações que um usuário está realizando. No exemplo abaixo, quando o usuário clica em "Enviar", um giratório aparece brevemente antes que o aplicativo mostre o estado de sucesso. A animação de marca de seleção faz com que o usuário se sinta como se o processo fosse concluído com êxito.
Crédito da imagem: Colin Garven
2. Alterações do estado de amaciamento
Outros bons lugares para adicionar animação no design são em momentos de mudança. Mudanças de estado na interface do usuário, especialmente na Web, envolvem frequentemente cortes duros que podem dificultar sua execução. Nada parece mais antinatural do que uma mudança repentina. Mudanças abruptas em uma interface são difíceis de serem processadas pelos usuários. Esses momentos de mudança devem ser suavizados adicionando algumas animações à interface do usuário.
Estabelecendo Conexões
As transições animadas devem atuar como intermediárias entre os diferentes estados da interface do usuário, ajudando os usuários a entender o que está acontecendo quando o estado da tela muda. O usuário simplesmente segue o movimento e entende como os dois estados da interface do usuário estão relacionados.
Créditos de imagem: Anish Chandran
Ele também funciona bem para associar exibições de miniaturas e detalhes:
O cartão é animado de sua posição original para uma posição no modal, deixando claro que é o mesmo item, apenas com mais detalhes.
Créditos de imagem: Charles Patterson
Chame a Atenção para Mudanças
A animação pode ajudar o olho a ver de onde um novo objeto vem ao revelar ou aonde um objeto oculto vai, e pode ser encontrado novamente. Podemos usá-lo para chamar a atenção para alterações que ocultam ou revelam informações, como abrir gavetas laterais de conteúdo. No exemplo abaixo, a navegação principal desliza para fora quando você clica no ícone do hambúrguer. Esse movimento permite que você saiba que o menu principal não desapareceu.
Créditos de imagem: Tamas Kojo
3. Visibilidade do status do sistema
Como um dos originais das 10 heurísticas de usabilidade de Jakob Nielsen, a visibilidade do status do sistema permanece entre os princípios mais importantes no design da interface do usuário. Para os usuários, é muito importante conhecer e entender seu contexto atual no sistema a qualquer momento.
Indicadores de progresso
Os processos de upload e download de dados são ótimas oportunidades para uma animação funcional. As barras de carregamento animadas definem uma expectativa de quão rápido a ação será processada. A animação pode ser útil no caso de falhas. Mesmo uma notificação não agradável, como o download de um dado falhar, deve ser entregue de uma forma agradável.
Créditos de imagem: xjw
Puxar para Atualizar
O tempo de espera de um usuário começa no momento em que ele inicia uma ação, e o pior caso é quando ele não tem nenhuma indicação de que o sistema o recebeu. A atração para atualizar a ação deve ter uma reação imediata . É essencial dar um feedback visual imediatamente após receber a solicitação do usuário para indicar que o processo foi iniciado. Animação irá ajudá-lo com isso.
Créditos de imagem: Tony Babel
4. Animação Explicativa
Às vezes, os usuários precisam de ajuda extra para entender o fluxo do usuário ou como interagir com determinados elementos da interface. Isso é especialmente verdadeiro para interfaces de usuário que contêm recursos ou interações novas ou desconhecidas para o usuário.
Onboarding
A integração do usuário exige um UX sem falhas, e as animações em um fluxo de integração têm um tremendo impacto sobre como os usuários iniciantes se envolverão com um aplicativo. A animação lhe dá liberdade ilimitada para transmitir qualquer coisa, não importa o quão complexo ou seco o assunto, de uma forma divertida.
Créditos de imagem: Anastasiia Andriichuk
Dicas visuais
A animação pode oferecer algumas dicas visuais úteis. A animação explicativa é vista com mais frequência quando uma página é aberta pela primeira vez e a animação mostra como certos elementos da página devem ser usados. Esse tipo de animação pode ser encontrado em jogos que geralmente lidam muito bem com revelações progressivas, revelando a mecânica dos jogos à medida que você avança em um jogo. Tais dicas são acionadas somente quando o usuário atinge o ponto apropriado em sua experiência.
Conclusão
A animação é uma ferramenta poderosa quando usada de maneira sofisticada.
Precisamos abraçar o movimento desde o início e pensar nele como parte natural do nosso design, porque o design é mais do que apenas uma apresentação visual. Como Steve Jobs disse sobre design: não é apenas o que parece e se sente. Design é como funciona.