Leo FernandesDando continuidade ao artigo anterior, vamos fala sobre algumas regras básicas para criarmos animações que façam sentido dentro do contexto UX/UI, pois aqui a animação obrigatoriamente tem uma função específica que ultrapassa a estética.
O Senior Principal User Experience Designer da Oracle, Issara Willenskomer adaptou os 12 princípios do design para a otimização de produtos digitais, intitulado de The UX in Motion Manifesto. É fundamental entendermos que quando falamos de interfaces e produtos digitais devemos mudar a chave do nosso pensar como animadores, pois estamos falando de objetivos e finalidades diferentes. O artigo UI Animation Principles — Disney is Dead, do mesmo autor traz um panorama completo sobre o assunto, mas vamos falar dos pontos principais do The UX in Motion Manifesto.
Usabilidade em primeiro lugar
Quem aqui nunca se irritou com um app ou site com navegação pouco intuitiva e extremamente confusa? Ai que entra o conceito da usabilidade, que é facilitar ao máximo o uso e entendimento da interface, costumo dizer que a interface perfeita é aquela que uma pessoa que não sabe ler ou com pouco contato com a tecnologia use sem maiores dificuldades.
Segundo o manifesto, existem quatro pontos que dão o devido suporte para a usabilidade, expectativa, continuidade, narrativa e relação.
1-Expectativa– A animação vai atender a expectativa do usuário ou vai trazer confusão? Quando clicamos em um botão de confirmação é fundamental que a animação converse com a ação, e para isso usamos elementos de entendimento universal. Reinventar a roda não funciona muito bem quando falamos de UX/UI.
2-Continuidade– Dentro de uma interface temos todo um fluxo de informações, temos inicio, meio e fim. As animações propostas dentro de um projeto de UX/UI devem ajudar a dar continuidade a este fluxo, fazendo com que o usuário sempre saiba onde se encontra e onde deve ir.
3-Narrativa– Pense no arco narrativo, toda boa história vai evoluindo e conduzindo o leitor/espectador até chegar ao ápice. Existe uma progressão, e esta progressão tem que se tornar presente dentro das interfaces.
4-Relação– Associe direção de arte com a relação, onde todos os elementos de um projeto obedecem uma hierarquia e um intuito comunicacional e um objetivo específico. Estes elementos diversos quando estão bem relacionados, promovem boas tomadas de decisões por parte dos usuários.
Velocidade e fluidez
Não adianta termos as melhores informações do mundo se na hora de exibi-las proporcionamos momentos de extremo tédio e vazio, fazendo com que o foco se perca. Transições suaves ajudam muito no processo de fluidez entre telas, assim como as animações nas telas de carregamento, tudo pensado para amenizar os processos que tendem a ter uma resposta mais demorada, e assim diminuindo a perda de foco.
Criar experiências únicas
Pode parecer algo pretensioso, mas se pensarmos que muitas ações obvias e simples podem ganhar um ar diferenciado e criativo, logo a experiência do usuário vai ser tornar única. Existem vários elementos interativos existentes nas interfaces que podem sim se beneficiar do motion, mas sempre lembrando que o objetivo não é ser espalhafatoso, e sim trazer soluções simples e criativas através das animações. Nunca se esqueça que o foco é sempre o usuário e a sua experiencia, não adianta fazer uma super animação para um usuário que só quer resolver rapidamente um problema.
Acessibilidade
Na minha opinião esta é a parte primordial de qualquer projeto, criar interfaces acessíveis para usuários com as mais diversas deficiências, baixa acuidade visual, neuronite vestibular dentre outros. Existem alguns cuidados que podemos tomar para poder proporcionar uma acessibilidade maior em nossas animações, vamos a elas.
1- Evite o uso de parallax, pois pessoas que sofrem de neuronite vestibular ou labirintite podem sofrer náuseas e desorientação.
2- As animações devem sempre responder a um evento, e nunca de forma inesperada, isso pode gerar desconforto. É melhor que a animação aconteça ao clicar de um botão do que ela surgir do nada e sem gerar relação ou continuidade.
3- Seja simples, o intuito da animação é manter o foco e direcionamento, lembre-se que existem usuários com baixa acuidade visual, então seja o mais direto possível.
4- Use as cores de forma técnica, sabemos que a cor é um elemento que vai além do estético, é informação, ela pode ser usada para criar associações poderosas, então seja coerente e se preocupe com os contrastes dentro do padrão mínimo de 4.5:1 que é o recomendado pelo WCAG (Web Content Accessibility Guidelines)
Conclusão
O motion pode ser um aliado poderoso na construção de interfaces mais acessíveis e intuitivas, porém é fundamental entendermos como funciona este mercado tão promissor e próspero, e assim ampliarmos nosso campo de atuação profissional.
Fonte da imagem- Freepik