Motion design como instrumento de melhor usabilidade

Ao interagir com produtos ou serviços digitais, uma boa experiência é o que todos nós buscamos: resolver nossos problemas com apenas alguns cliques, automatizar tarefas repetitivas ou até mesmo nos distrair depois de um dia cansativo. Só que vamos além disso: por que muitas vezes preferimos sites e aplicativos mais bonitos e com motion, mesmo que com alguns problemas? Será que o motion é realmente tão importante assim? Existe alguma explicação para isso?  

O que são Microinterações?  

As microinterações tem o poder de transformar ações simples em experiências significativas. Desde o feedback sonoro quando você usa a seta do carro, a luz piscando na televisão quando usamos o controle remoto, ou até mesmo as luzes dos semáforos de pedestres piscando: tudo isso são pequenas interações que acontecem e que podem melhorar bastante nossa experiência, como usuário. Afinal, é importante que os produtos mantenham o pessoas usuária informado sobre o que está acontecendo a todo momento.  

Ligar ou desligar uma função ou recurso, gerenciar uma tarefa em andamento, conectar dispositivos. As microinterações podem ser extremamente úteis nesses casos.

Uma frase muito famosa do grande Don Norman, considerado Pai do termo “UX”, diz:  

“The “micro” in “microinteractions” implies it is about the small things. Small? Yes. Unimportant? Absolutely not! Microinteractions is about those critical details that make the difference between a friendly experience and traumatic anxiety.”

Agora sabemos da importância das microinterações nas nossas soluções, e como o uso adequado delas pode deixar a experiência bem mais agradável, por mais que, por vezes, passem despercebidas, podem ajudar a pessoa usuária a evitar decepções. Um ótimo exemplo é quando a internet está lenta: às vezes aquele tempo de espera deixa tudo extremamente frustrante. O Youtube e o Linkedin apresentam uma solução interessante para este problema, já deixando os elementos na tela em carregamento, levando o pessoas usuária a entender qual o posicionamento do conteúdo, também conhecido como Skeleton.  

Imagem 1: Skeleton youtube      

Imagem 2: Skeleton linkedin

Tipos de Microinteração

Existem dois tipos de microinterações: as microinterações em tempo-real e a assíncrona. De forma simples, as interações em tempo-real são as que estão diretamente relacionadas a uma ação da pessoa usuária (um scroll em uma lista, ou o arrastar de um elemento). Já as assíncronas, são telas de carregamento e outras interações que não tem necessariamente relação com as ações das pessoas usuárias.

Imagem 3: Microinteração tempo-real

 

Imagem 4: Microinteração assíncrona

 

Motion design e microinterações

O Motion Design se trata de design em movimento, então esses profissionais entram em cena para dar mais vida, estilo e sentimentos à essas microinterações, trazendo animações breves e simples, mas que tornam a experiência muito mais interessante. 

O que difere o seu produto dos demais, o que o torna realmente autêntico, são esses pequenos detalhes que fazem toda a diferença. Um produto funcional, bem feito, e com microinterações que realmente são úteis e agregam muito valor a usabilidade do produto digital. 

A pergunta é: por que as microinterações com Motion fazem tanta diferença? Um estudo feito por Masaaki Kurosu e Kaori Kashimura com 252 estudantes mostrou como as pessoas relacionam usabilidade com estética. Os dois pesquisadores japoneses chegaram à seguinte conclusão:

“Users often perceive aesthetically pleasing design as design that’s more usable.” 

O Motion por sua vez consegue deixar as aplicações mais agradáveis e fluidas, suavizando transições, mostrando progresso, definindo hierarquia visual antes do carregamento, e muito mais. 

Entretanto, é importante saber usar muito bem essa ferramenta. Imagine querer fazer uma simples transferência PIX, e ter uma transição bonita, porém demorada a cada nova ação? Isso tornará o produto completamente irritante. Sendo assim, vamos entender um pouco sobre o uso de Motion em produtos digitais.

Uso de motion em Produtos Digitais

Para Issara Willenskomer, existem quatro pilares do Motion no UX: expectativa, continuidade, narrativa e relacionamento. Vamos entender como cada um deles funciona. 

Expectativa  

A maneira como as pessoas usuárias percebem um elemento, e como ele espera que esse elemento se comporte. Podemos usar novamente como exemplo a tela de loading do Youtube. O motion de carregamento auxilia o pessoas usuária a compreender o que está havendo e o que está por vir. 

 

Imagem 5: Exemplo do pilar de expectativa

Continuidade   

Trata-se do fluxo de pessoas usuárias e da consistência de sua experiência. Fluidez e padronização são atributos essenciais para desenvolver e aplicar animações. Imagine, por exemplo, uma plataforma que possui uma transição animada a cada mudança de tela e, em um momento específico, porém, essa animação não acontece. Isso pode induzir a pessoa usuária a pensar que fez algo de errado, ou que a plataforma apresenta problemas.

Imagem 6: Exemplo do pilar de continuidade

Narrativa  

Qualquer história possui início, meio e fim. A jornada das pessoas usuárias não é diferente. É interessante aproveitar As animações para guiar o fluxo das pessoas usuária, desde uma simples barra de progresso evoluindo, até mesmo um motion mais complexo para indicar mudanças de seção de um formulário. 

Imagem 7: Exemplo do pilar de narrativa

Relacionamento 

Algo muito comum no design de produtos é o relacionamento entre elementos: Um texto acompanhado de um botão, um link acompanhado de um ícone, uma ilustração acompanhada de uma call-to-action. São as representações espaciais, temporais e hierárquicas entre objetos de interface, os quais devem guiar as pessoas usuárias e auxiliá-lo nas tomadas de decisão. Isto é, utilizar o motion ao relacionar elementos pode ser uma vantagem e tanto. 

Imagem 8: Exemplo do pilar de relacionamento

Fazendo uso desses pilares do Motion no UX, podemos ajudar a pessoa usuária a compreender melhor a interface, além de fazer seus olhos brilharem com a fluidez e beleza da solução. Esta pode ser uma diferença crucial entre seu produto e os de seus concorrentes.

Aplicação do motion

Agora que sabemos da importância do motion no UX, quais os tipos e o que considerar quando for usá-lo, a pergunta que fica é:  Devo aplicá-lo em todos os meus projetos?  

A resposta pode até parecer clichê, mas depende.  

Existem hoje profissionais especializados em Motion para aplicativos e sites, inclusive a dti digital tem especialistas, porém são escassos e bastante caros. Contratar um Motion Designer para trabalhar exclusivamente em conjunto com um UI/UX ou um Product Designer é uma opção, mas pode envolver um alto custo agregado.  

Outro ponto a ser considerado, é se seu público reage bem o motion design mais trabalhado, e até mesmo se os seus dispositivos vão suportar essas interações. Cada público tem uma forma de pensar e dia-a-dia diferentes. Lembre-se de levar esse ponto em consideração também. 

E por último mas não menos importante: “Minha equipe é capaz de implementar as animações de forma fluida e perfeita?” 

Sim, são muitos detalhes a serem ponderados antes de transformar seu produto através dessas animações, porém é importante conhecer essa possibilidade, e usá-las com sabedoria quando necessário.

Por: Alana Resende e José Bernardino