Na imensidão de apps que existe atualmente, bons visuais e user interfaces com pixéis perfeitos não são suficientes para se conseguir ter algum destaque. As boas animações têm o poder de levar a experiência do utilizador para o nível seguinte, proporcionando-lhes uma experiência agradável, satisfatória e suave.
Neste âmbito, o Product Designer da InVision, Daniel Korpai, partilha os princípios chave indispensáveis sobre o product design na criação de interfaces animadas, independentemente da ferramenta, framework ou técnicas usadas.
Os objetivos mais importantes de qualquer animação numa app são fornecer contexto e direcionar o foco do utilizador para uma experiência guiada e fluida. A animação ajuda a conectar ecrãs de forma a que o utilizador nunca se sinta perdido, enquanto navega na app ou website. Para se obter os melhores resultados é importante saber restringir: ou seja, não deve ser animado tudo no ecrã, pois irá anula o valor central de incorporar motion.
Animar todos os elementos de uma vez, numa user interface, cria bastante confusão. Assim, quando há necessidade de animar múltiplos elementos num ecrã, deve-se utilizar um pequeno delay entre eles, sendo importante assegurar que a flexibilização e duração das animações são as mesmas, para que tudo seja consistente.
A velocidade da animação normalmente é controlada ao mudar a duração da animação – quanto tempo dura a transição – e através da flexibilização (aceleração ao longo do tempo). Regra geral, devem ser utilizadas animações entre 0.3 a 1 segundo de duração.
Animações mais curtas do que 0.3s podem parecer quase inexistentes, uma vez que é fácil falhar a transição e, quando o utilizador não repara nelas, a velocidade pode causar-lhe stress e confusão. Contudo, as animações mais longas não são melhores, pois se tiverem mais do que 1 segundo podem parecer lentas e atrapalhar a interação com a interface.
Um grande benefício de utilizar animações mais rápidas, é que pode passar a sensação de a própria app ser mais rápida. Infelizmente, também se verifica o oposto: se as animações estiverem atrasadas, a aplicação irá parecer que tem quebras, globalmente lenta e desagradável de usar.
A velocidade não é aplicável apenas à duração da animação, mas também ao atraso entre o gesto de gatilho e o início da animação. Por exemplo, ao passar entre as imagens, se houver um atraso entre o ato de deslizar e o início da animação, a experiência completa será arruinada.
No mundo real, nada começa ou para instantaneamente. As coisas demoram para acelerar e desacelerar, graças a forças naturais, como o atrito. Quanto mais naturalmente uma animação se comporta, menos carga cognitiva é necessária ao utilizador para se acostumar com ela e entender a sua finalidade. Por isso, além da duração de uma animação, deve haver familiaridade com os diferentes tipos de
abrandamento/atenuação. Existem vários no design, desde o linear, ao ease-in e ease-out, ao ease-in-out.
As animações normalmente são acionadas em dois cenários dentro das aplicações: durante/após o carregamento de um ecrã, e quando os utilizadores interagem com a interface, deslizando, tocando ou arrastando.
O tipo de interação determina sempre o tipo de animação que será acionada. Por exemplo, se o utilizador desliza para cima no ecrã, a animação irá revelar o novo elemento com uma animação que surge da parte inferior do ecrã. Ou quando um novo ecrã desliza da direita, o utilizador irá esperar que, para voltar ao ecrã anterior, tenha de fazer um swipe para a esquerda.
Ao desenhar e implementar animações, deve-se pensar sempre primeiro nas diferentes interações que acionam essas animações.
Implementar animações, especialmente as personalizadas, é sempre um desafio e requer um esforço adicional, tanto dos designers como dos developers. Para tornar este processo o mais fácil possível, muitos designers usam protótipos de alta fidelidade que podem ser partilhados com os developers, onde podem inspecionar e copiar o código das animações. Esta é a forma mais eficaz para os designers comunicarem as suas ideias de animação, soluções, e requisitos, com os developers.
É importante fazer uso de animações de um modo consistente, como qualquer outro elemento visual. Integrar as animações no design system poderá ser um desafio para a experiência geral do utilizador e do processo de design.
Como se pode concluir, as animações são uma peça chave na criação de grandes experiências do utilizador, e devem ser pensadas logo de início, para que se possam depois concentrar na experiência geral do utilizador em todo o processo de design do produto.
Estes princípios das animações são intemporais, e se se está apenas a familiarizar com as animações ou se já sabem tudo sobre elas, estas são algumas das principais regras que devem sempre ser lembradas ao desenhar novas animações e interações.
As animações são a parte mais lúdica do design de produto! Esperamos que, com estas técnicas, possas elevar o UX design para o próximo nível.
Partilhar:
