Tem interesse em fazer parte de um time que fomenta o aprendizado constante e te dá a chance de atuar diretamente na cultura ágil e com base no Manifesto Ágil? Então acesse nossa página de carreiras, escolha a vaga que mais se encaixa no seu perfil e venha ser dti!
Motion design como instrumento de melhor usabilidade
Por dti digital|Atualizado: Jul 2023 | Publicado: Fev 2022
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?
Sumário
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
Quer ver mais conteúdos como esse?
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
User Experience
Confira outros artigos
Desenvolvimento Android x iOS: 10 recomendações para o desenvolvimento produtivo
Entre agosto de 2022 e junho de 2023, o mercado de aplicativos móveis experimentou um crescimento notável, projetando um aumento anual de 13,4% até 2030, alcançando um mercado estimado em US$ 187,58 bilhões. E, certamente, a tendência é que essa expansão continue exponencialmente nos próximos anos. Portanto, agora é a hora de explorar as oportunidades […]
User Experience
Desk Research (Pesquisa Desk): como utilizar no processo de Design Thinking
Uma das etapas mais importantes para garantir o sucesso de um produto ou de uma interface dentro do Product Design, é a de Desk Research. Nesse artigo, vamos falar sobre o que é Desk Research (ou Pesquisa Desk) quais são os tipos de desk research existentes e muito mais. Confira: Sumário1 Product Discovery: o processo […]
User Experience
Atuação do Design e Produto na construção do Produto Certo
O que é um produto certo? Produtos Digitais que concilie a necessidade de quem irá utilizá-lo com o que é mais estratégico para uma empresa, gerando valor e um retorno concreto que justifique o investimento no produto. Na dti, construímos os Produtos Certos por assegurar que os princípios de Design e de Produto estão presentes […]
User Experience
Veja outros artigos de User Experience