O bom uso de animações em UX Design

Tais

Tais Semensato

20/09/2018

O bom uso de animações em UX Design

Como a aplicação de Motion Design pode melhorar a experiência do usuário — ou não.

Pensar e projetar a experiência do usuário com a sua marca/produto envolve uma série de fatores, este conjunto é chamado UX Design (User Experience Design), muito confundido com UI Design (User Intelligence Design). Embora parecidos, são conceitos diferentes que se complementam.

Citando o blog Design Culture:

É muito comum confundir UI Design com UX Design, e por mais que os nomes sejam parecidos, suas abordagens são bem diferentes. UX está relacionado com a experiência do usuário e com seus sentimentos, já UI é a maneira como o usuário alcançará essa experiência.

Imagem: uxinmotion.net

No desenvolvimento de um site ou aplicativo, por exemplo, um recurso cada vez mais bem explorado é o Motion Design, ou seja, o design de animações de movimento em ações específicas.

Uma animação de qualidade, no lugar e momento certo, pode mudar completamente a percepção do usuário sobre seu negócio.

Imagem: uxinmotion.net

Tão importante quanto o projeto digital final (seja site, landing page ou app), é a qualidade e funcionalidade dos elementos que o compõem. Uma animação bem projetada é muito mais do que um reflexo em movimento das ações na tela. Um efeito de movimento realmente funcional torna a interface do usuário consideravelmente mais atraente e apelativa (no bom sentido).

Qualidade em animação é, sobretudo, movimentos sutis, com propósitos claros e lógicos, que podem reduzir a carga cognitiva da ação (ou seja, o usuário não precisa “pensar” muito para entender o que foi feito) e estabelecer uma maior percepção espacial, ou seja tem o poder de dar mais “vida” e compreensão à interface do usuário.

Função do motion design

Imagem: uxinmotion.net

Em UX as animações podem ter múltiplas funções: podem indicar funcionalidades, influenciar ações, adicionar uma pitada de diversão e garantir segurança e significado às interações do usuário.Geralmente você fica mais confortável quando executa uma ação e uma animação indica claramente que o resultado esperado acontece. Ex: quando você apaga um item e ele desaparece ou desliza para fora da tela

As animações assumem papel complementar no conteúdo de um site ou app e servem para tornar o UX mais claro, pois funcionalidade, layout e navegação devem ser pensados para fins de usabilidade e o motion design preenche as lacunas restantes.

 

Aplicações de motion design em UX

O blog do InvisionApp listou algumas maneiras simples de incorporar animações ao UX design, confira agora:

1. Opte por telas de carregamento que mantenham os usuários interessados.

“Vários estudos mostram que mais de 40% dos usuários esperam que uma página da Web ou um aplicativo seja carregado em 2 segundos ou menos. Se demorar mais de 4 segundos, o usuário começa a ficar frustrado. Após 8 segundos, eles saem.” — Blog Invision App

Portanto, o uso de animações criativas e atraentes para manter o usuário envolvido nessa fase pode fazer toda a diferença na taxa de rejeição de sua página.

2. Animar com base em onde o usuário deve se concentrar

Geralmente, sites e aplicativos possuem vários itens já na tela inicial. Uma boa maneira de guiar seu usuário a ação que você deseja que ele execute ou apenas para mostrar as funcionalidades da página, é utilizar animações sutis que deem “pistas” sobre elas.

“Se você tiver uma lista de postagens, deslize-as (em vez de apenas exibi-las) para ajudar os usuários a entenderem que podem continuar passando para ver mais. Você pode até adicionar outra camada de animação, cronometrando a aparência dos itens para que eles deslizem um após o outro. Esse estilo de animação pode servir para reforçar que esses itens são separados e o usuário pode interagir com cada um individualmente.” — Blog Invision App

Imagem: blog.prototypr.io

3. Evite que os usuários se percam

Logo no início do post falamos algo sobre percepção espacial, que, aplicada nesse contexto, é justamente você entender o que tem na sua tela neste momento, de onde vieram essas informações/itens e os caminhos/ações que você pode tomar a partir daí. O uso de animações bem construídas dentro deste objetivo, pode auxiliar, e muito, o usuário a entender os recursos e origens de informação do seu site/app.

“Considere isso: se um objeto sair da tela para a esquerda, ele deverá entrar novamente (se necessário) no espaço de onde saiu. Isso ajudará seus usuários a entender como seu aplicativo funciona e ajudará a se sentir mais à vontade ao interagir com ele.” — Blog Invision App

Imagem: blog.prototypr.io

4. Utilize como forma de “feedback” sobre a ação realizada

Animações podem fornecer uma resposta/confirmação visual sobre ações realizadas. Como também já foi citado antes, isso garante mais confiança e conforto ao executar qualquer comando, gerando experiências positivas para o usuário.

De acordo com o designer da TomTom, José Torre:

“Em um mundo onde seu dedo geralmente cobre o botão que você está pressionando, a animação desempenha um grande papel em fornecer ao usuário a segurança de que ele precisa”.

 

Imagem: TheKineticUI.com

A tendência é que as empresas apostem cada vez mais em UX. Quem conseguir formas atrativas e orgânicas de melhorar essa experiência, mesmo nos detalhes, se destacará na multidão. Apresentamos aqui algumas ideias de como contribuir com esse movimento utilizando motion design, mas lembre-se:Animações mal projetadas podem ter um efeito contrário e prejudicar o desempenho de seu site ou aplicativo.

Use com sabedoria.

Tais
20/09/2018

Tais Semensato

CONTINUE LENDO...
Para mais concentração, adicione molho de tomate

Para mais concentração, adicione molho de tomate

Spoiler: isso não é um texto sobre culinária (mas se quiser pode). Já estamos cansados de escutar sobre os...

Marjorie
Marjorie Dal'Negro
Quem sabe faz ao vivo e quem não sabe plagia

Quem sabe faz ao vivo e quem não sabe plagia

Tutorial rápido e prático de como não cair nesta cilada. Todo mundo já está saturado de saber que plagiar...

Bruna
Bruna Rafaela
Contém surpresas recheadas para todo publicitário

Contém surpresas recheadas para todo publicitário

Mais que uma caixinha de surpresas, a publicidade pode ser também um ovinho de surpresas!  Que o mundo publicitário...

Bruna
Bruna Rafaela

Ao navegar neste site, você aceita os cookies que usamos para melhorar sua experiência. Mais informações.