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.
É 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.
