Animações e UI: Ganhando a Atenção do Usuário
Este artigo é uma tradução oficial autorizada pelo Autor. Artigo Original: https://medium.muz.li/animations-and-ui-gaining-users-attention-cf6517002635
Um usuário moderno navega na internet estrategicamente ignorando distrações e conteúdos que considera irrelevante. Uma maneira de fazer o usuário parar e olhar é o uso inteligente de animações customizadas na UI. Vamos discutir porque e como podemos fazer isso.
Ferramenta, não um enfeite
Quando começamos um novo projeto, a agência deve identificar os problemas chave que o cliente precisa resolver. Entender as tarefas finais ocultas do projeto ajuda a melhorar o desenvolvimento e oferece as melhores soluções.
Existem mais e mais soluções prontas a cada dia que permitem fazer sites e apps baratos e rápidos, sem qualquer ajuda profissional. Nessas situações, as agências devem fornecer um serviço diferente — opinião de especialista sobre as soluções necessárias e realização de meios tecnológicos não padronizados para essas soluções.
Agências como a M2H devem atuar como auditores para as metas de negócios dos clientes. Atualmente, quando o mercado está cheio de soluções prontas, websites e apps devem comunicar o usuário de uma nova maneira, causando emoção, revelando o conteúdo do cliente e vender isso como experiências. Para atingir isso, o uso de animações customizadas na UI é uma ferramenta útil.
De acordo com as tendências modernas, ótimas animações trazem mais crédito para produtos visuais, incluindo sucessos de marketing e prêmios prestigiados. Uma animação é mais que um simples ferramenta, é uma elemento que define o design, capaz de levar informação para o usuário por conta própria — dando dicas visuais e levando o usuário a certas decisões.
Como a animação muda o fluxo do projeto
Geralmente, o desenvolvedor passa por esses estágios:
- Início do projeto (briefing e escopo)
- Um conceito de design
- Design das telas internas seguindo o conceito
- Programação
- Teste e lançamento
Adicionando animações ao mix, cria-se um cenário completo — animando o design. O movimento dos elementos são, indiscutivelmente, muito mais importante no design do que as posições estáticas dos elementos.
Geralmente fazer animações é uma tarefa definida para o designer ou desenvolvedor de aplicativo, seja quem for mais adepto com as ferramentas necessárias. Resultados, obtidos por esses métodos frequentemente são menos satisfatórios.
Todo especialista deveria ter responsabilidades da sua área. Um designer que faz uma solução visual geral não vai ter uma visão nova nas mecânicas de movimento e psicologia. Eles podem controlar o processo, mas a qualidade da animação é melhor entregue por uma especialista. Essencialmente, motion design é uma tarefa separada para um designer separado, que é habilitado para dar vida a uma cena inicialmente estática.
Os programadores geralmente são especialistas em tecnologia que estão envolvidos em desafios de usabilidade em vez de nuances criativas da UI.
Não ter um motion designer restringe o processo, já que o designer será sobrecarregado com tentativas de fazer uma animação de qualidade sem uma nova visão, ou os programadores terão que refazer quaisquer erros durante o desenvolvimento, aumentando os custos.
É por isso que o motion designer é uma necessidade em uma equipe de produção digital moderna. Subordinado a líderes de arte e designers, o especialista em movimento criará uma animação adequada, fácil de entender pelos desenvolvedores — já que terá informações técnicas como timecodes. Desta forma, toda a equipe economiza tempo e dinheiro, ao mesmo tempo em que fará um produto superior
Não exagere
Para os clientes, esse passo adicional na produção é frequentemente visto como uma tentativa desnecessária de obter mais dinheiro deles.
Persuadi-los de outra maneira é, entretanto, mais fácil do que parece. Quando o cliente vê uma animação, eles vêem uma prévia em movimento do produto final, uma promessa de resultados. Eles começam a perceber como a lógica do produto funcionará e como os usuários irão entender. As animações demonstram o cenário do comportamento do usuário que o produto final irá induzir.
As animações facilitam a venda de um conceito de design e economizam tempo resolvendo muitas das perguntas do cliente. Além disso, a animação é mais fácil de ajustar do que o produto final.
No entanto, o motion design não é tão simples. É importante ter alguns limites e não animar tudo o que for possível. Ninguém precisa de um site ou aplicativo com scripts pesados que leve horas para ser carregado. A animação deve transmitir dicas simples da UI para os usuários entenderem o que é necessário deles. Os designers usam apenas algumas fontes para todo o branding, e o motion designer deve seguir a mesma ideologia — apenas alguns padrões-chave predominantes no projeto.
Algumas palavras em software
O habitual conjunto de ferramentas do animador já vem com o Adobe Creative Cloud — o Adobe After Effects e o Adobe Animate são os atuais reis da colina, substituindo o antigo Flash. Software, no entanto, não é tão importante quando se trata de motion design — basta escolher o que melhor se adequar ao seu motion design e pode ser facilmente entendido pelo resto da sua equipe. O software da Adobe é uma escolha sólida, pois a maioria dos designers trabalham no Adobe Photoshop, e os motion designers podem extrair arquivos de origem diretamente. Para equipes pesadas em Sketch no Mac OS, o Principle pode ser uma alternativa sólida.
Uma maneira de fazer animações é a criação de um protótipo interativo para permitir que o cliente descubra o caminho que o usuário leva clicando nas telas. Outra opção é animar um caminho percebido através de telas principais e sequências. Descobrimos que o último é uma opção muito melhor, pois o cliente gosta mais de ver como a interface funcionará, em vez de descobrir por si mesmo. Além disso, vários vídeos de animação facilitam o envio da interface para codificação adicional.
O aspecto mais importante da mudança do design estático para as animações é a cooperação da equipe. Designers, motion designers e programadores devem ter canais claros para trocar idéias e criar soluções, adequando as necessidades de negócios do cliente.
Faça parte do nosso Grupo do Facebook sobre UX Motion Design:https://www.facebook.com/groups/uxmotiondesign/
