Animações na Interface: Grande recurso para otimização de UX

As animações na interface podem levar para dois lados. Se usadas com planejamento e nos lugares certos podem ser positivas, mas se não forem aplicadas corretamente podem causar alguns problemas.

Mas os designers não podem ter medo de utilizá-las, pois hoje elas podem hoje um aliado incrível na busca da melhor experiência para quem usa a solução, diferente de tempos atrás quando eram utilizadas na web de forma grotesca e sem sentido, com simulações mal feitas ou apenas para “enfeitar” a interface.

Usadas no contexto certo elas adicionam significado a determinadas partes ou ações da interface, apontam caminhos, além de oferecer uma experiência muito mais imersiva e divertida.

Algumas práticas que podem melhorar uma interface:

- Fornecer informações adicionais

A interface do usuário ideal nunca pode confiar somente nas habilidades do mesmo para encontrar as informações. A interface ideal procura sempre facilitar a apresentação das ações que o usuário pode fazer além de dar indicações de onde as ações vão levá-lo. Por isso a maioria dos designers sempre mantém um certo padrão de posicionamento de elementos já conhecidos.

No entanto nem sempre o padrão pode ser mantido ou é conhecido por determinado usuário. Para facilitar a navegação em um ambiente que ele não conhece podemos usar animações estrategicamente planejadas para indicar e guiá-lo pelo caminho.

Um exemplo seria uma seta com um movimento sutil indicando que o usuário deve rolar a página para visualizar mais conteúdo.

- Dar indicações de modificação

Os usuários não gostam de ficar perdidos sem saber o que aconteceu após uma ação. É preciso então criar indicativos visuais que os mostrem quais modificações ocorreram na interface decorrentes da sua última atividade.

Para alcançar esse resultado podemos criar transições animadas que mostrem claramente o que a ação inicial “startou” e o seu resultado final.

- Informar alteração de estado

Como dito anteriormente o que deixa o usuário irritado e perdido é uma mudança da qual ele não é informado. Não deixar claro o que mudou é muito prejudicial para a experiência do usuário pois ele fica sem saber o que aconteceu e como reagir na sequencia.

Fica então a cargo do designer fornecer animações que indiquem que um estado mudou.

Um exemplo seria o ícone de menu, que ao ser acionado além de exibir o menu, se transforma em um ícone “X” que mostra perfeitamente que o estado mudou e agora ao clicar nele novamente o menu vai ser fechado.

- Indicar comportamento do Scroll

Hoje em dia existem muitos sites “one page”, ou seja, um site inteiro em uma única página.

Colocar animações que indiquem em qual lugar o usuário está pode ajudar para que mais uma vez ele não fique perdido durante a rolagem

- Dar mais informações no Hover

Se o usuário posiciona o mouse sobre determinado elemento, é porque este elemento já chamou sua atenção. Então porque não dar um pouco mais de informação para ele? Exibir essas informações com uma sutil animação pode prender ainda mais sua atenção.

Vamos animar!!

As animações na interface não podem ser usadas para mostrar habilidades extravagantes do designer ou técnicas de animação espalhafatosas. Mas como você pode perceber se usadas de forma elegante e sutilmente podem tornar a experiência de navegação muito mais clara e imersiva. Portanto, vamos animar =D

Fonte: uxmag.com