Como Melhorar UX Com Animações Fluídas

UX with fluid animations

Como Melhorar UX Com Animações Fluídas

Ter fluidez na experiência do utilizador, na web moderna, pode ter um impacto surpreendente em vários KPIs que indicam o nível de interação do público-alvo com o conteúdo do vosso site. Utilizadores visitam um site sobretudo pelo conteúdo, mas ficam e voltam pela experiência. Neste artigo, vamos abordar uma das formas de melhorar UX e de tornar o vosso website mais atraente, utilizando módulos de animação CSS3.
 

O que são animações CSS3 e quais as vantagens?

Os novos (ainda experimentais, embora aplicáveis) módulos de animação CSS3 definem um conjunto de propriedades que podem ser adicionadas ao markup do vosso site, permitindo articular a forma como os diferentes elementos são renderizados num documento HTML. Ao usar essas propriedades, podem mover elementos, ocultá-los ou mostrá-los, girá-los, distorcê-los, alterar sua cor, enfim, abre-se uma infinidade de possibilidades para melhorar a aparência do vosso site.

De acordo com Jake Rocheleau, que estudou testes A/B concebidos para medir o impacto destas técnicas, tratam-se de ferramentas poderosas que irão ajudar o utilizador a navegar o website com maior facilidade, executar determinadas ações de forma mais intuitiva e envolver o público com o conteúdo, tornando-o mais disposto a explorar e informar-se sobre o que têm para oferecer.

Há não muitos anos atrás, ter animações no site significava ter um cabeçalho intermitente na página, capaz de provocar convulsões nos visitantes mais (ou menos) susceptíveis, ou então um texto deslizante que circulava e distraía os utilizadores, fazendo-os perder foco de informações mais importantes, e ainda aquelas intros irritantes em Adobe Flash, que duravam 3 minutos e ninguém podia passar à frente, mesmo que apenas estivesse à procura dum contacto da empresa.

Obviamente, estes são exemplos que queremos evitar. Não são, nem devem ser os casos de utilização nos quais se aplicam animações.


Devemos estar atentos a problemas? Como evitá-los?

Existem problemas de senso comum e outros que podem não ser tão intuitivos. Vamos analisar alguns:

  • animação só pela animação - se estiverem a usar animação só porque acham que ter letras a saltar é divertido, mais vale não fazê-lo. A animação deve ter um propósito e ser subtil.
  • animação deve ser coerente - se optarem por animar uma secção da vossa página, e reutilizarem essa secção noutra página do site, devem manter a mesma animação. Se algo que estava a deslizar, de repente começar a desvanecer, poderão confundir o utilizador e este não gostar da experiência.
  • animação não deve atrapalhar - isso significa que não pode ser intrusiva. Não é bom quando o utilizador tem de esperar 3 segundos para que uma animação termine antes que ele possa navegar para outra página.
  • design com animação em mente - se já tiverem o layout do vosso site, mas não foi projetado para incluir animações, provavelmente não devem usá-las. Será difícil disfarçar que a animação não foi pensada de raiz o que irá resultar numa experiência menos boa para o utilizador.
  • menos é mais - um pouco de subtileza pode fazer toda a diferença. Não precisam de grandes salpicos de cor e muito movimento para impressionar. Posicionamento cuidado, temporização precisa e concisa e sugestões subtis serão mais do que suficiente, em 90% dos casos.
  • desempenho é importante - se toda a animação que estiverem a usar, mesmo que bonita, subtil e intuitiva, prejudicar o desempenho e a velocidade do vosso site, não estão a ajudar os vossos utilizadores. Nesse caso, será melhor pensar em reduzir a quantidade de animações.

Dito isto, a melhor forma para evitar estas dificuldades é ter um plano. Têm de tomar em consideração que tipo de ações e cenários serão apresentados aos utilizadores. Como podem fazer um design para essas especificações? Como podem ajudar as animações? Será que ajudam? Deverão fazer pop ou slide?

Sabemos que não são perguntas fáceis de responder. Felizmente, existem muitos recursos online que vos podem ajudar, por isso, pesquisem e informem-se ao máximo. Se preferirem optar pela ajuda de profissionais, entrem em contacto conosco
 

Simples casos de utilização de animações

 


Conclusão

Existem várias opções que devem explorar se pretendem desenvolver e inserir animações para melhorar a UX do vosso site. Espero que este artigo tenha servido para despertar a vossa curiosidade e indicar-vos o caminho certo.