O poder do motion design e micro-interações em produtos digitais
A diferença entre um produto que você ama ou apenas utiliza, frequentemente tem a ver com as micro-interações que você tem com ele.
Trecho retirado do livro “Microinteractions: Designing with Details”.
Enquanto a atenção dos stakeholders e usuários estão focadas nas grandes funcionalidades do produto. O olhar do designer deve estar nos detalhes. Nesse contexto, as micro-interações ganham valor. Elas são pequenos pedaços de features que tornam a experiência do usuário incrível.
As micro-interações possibilitam o usuário interagir de alguma forma com uma interface. Elas obrigatoriamente possuem um gatilho (trigger) e um retorno (feedback). Os gatilhos são quaisquer circunstâncias que podem iniciar uma micro-interação. Podem ser controles, ícones, formas, voz, toques ou comandos gestuais.
Ligar ou desligar um interruptor de luz gera uma interação entre o usuário e a interface física. Nesse caso o interruptor é o gatilho à ser ativado e o feedback imediato é a luz acendendo.
O elemento “pull-to-refresh” que é utilizado em time-lines infinitas como Linkedin e Instagram indica uma requisição para o sistema e que uma atualização está acontecendo. Existe o gatilho (a necessidade de puxar a timeline para baixo) e o feedback (elemento girando/carregando na sua tela).
Quando você recebe um novo e-mail e uma badge indica uma atualização na sua caixa de entrada. O load após clicar em um botão. Aumentar ou diminuir o volume do seu celular.
Gatilhos existem por toda parte. Eles podem ser, inclusive, invisíveis.
Ativar a Alexa através de um comando de voz é uma micro-interação. O aplicativo fitness do iPhone, a partir do momento que a sua velocidade média aumenta e você começa percorrer uma distância maior que o usual, ele entende que você está correndo, trazendo depois seus dados de corrida.
O motion design como ferramenta de micro-interação.
As micro-interações possuem uma base heurística e podem servir como feedbacks para o usuário. O WeTransfer, por exemplo, utiliza muito bem as animações para informar que seu upload está sendo executado. Imagine você subir um arquivo e não visualizar na tela a animação de loading. Com certeza você teria muitas dúvidas se ele foi enviado corretamente para o site.
Esta é precisamente a primeira das 10 heurísticas de Nielsen, que trata sobre “Visibilidade do Status do Sistema” e está intimamente ligada às micro-interações. Essa heurística prevê que o usuário deve ser informado sobre onde ele se encontra, de onde veio e para onde vai. Além disso, precisa receber constantemente respostas sobre o que está acontecendo à sua frente. A falta de uma resposta visual pode gerar ansiedade no usuário e dúvidas a respeito do bom funcionamento do sistema.
O motion design é uma ferramenta para construção de micro-interação, ela não é por si só a própria interação. Um gif na sua tela, por exemplo, pode ser motion design mas não gera uma interação com o usuário. Não existe um gatilho à ser ativado.
Como esse exemplo do Farmácias App, onde aproveitamos um espaço de avaliação do aplicativo para utilizar micro-interação e o motion para reforçar o estilo de comunicação.
Existe um elemento clicável (trigger) e o retorno (feedback) é a modal abrindo na tela para que o usuário continue sua avaliação.
O motion design, além de tudo, também é reforço de branding.
Quando estamos trabalhando com experiência do usuário, aplicar uma personalidade ao produto pode ser o fator determinante para a identificação do público com a sua marca ou a do concorrente. Principalmente quando estamos em um cenário onde as tecnologias estão equivalentes e cada detalhe pode definir o sucesso do seu produto ou de outro player do mercado.
Cores, elementos, tom voz, consistência em movimentos (curvas) podem estar representados em todos os pontos de contato com o usuário do seu produto. É crucial é ter unidade.
Utilizando o exemplo do Farmácias App, a aceleração dos elementos que foi utilizada nas animações de onboarding (fig 06.) também foram replicadas nas micro-interações de loading, splash e spinner do aplicativo.
Todas as animações seguem o mesmo padrão de aceleração trazendo um conceito de leveza e fluidez que foi absorvido do tom de voz da marca.
Retomando…
Micro-interações são pequenos pedaços de features e podemos aproveitar como oportunidade para imprimir a personalidade do produto. O motion design pode ser usado para esse contexto e também como uma ferramenta de reforço de branding.
Colocaremos em prática.
Após vermos que explorar esse recurso fantástico vai muito além de uma tela bonita. No próximo artigo trataremos de forma mais técnica e prática de como podemos utilizar das melhores práticas e exportar nossas animações em códigos otimizados que não pesam o nosso produto.
Obrigado! :)
