fbpx

Microinterações: animando experiências

O Lottie é um plugin criado pela equipe do Airbnb para instalar no After Effects. Esse plugin ajuda na construção de protótipos de tela. Claro, como todo compilador, tem diversos problemas para quem faz o front-end, mas agora para validar na interface faz todo sentido. Uma pequena reflexão que podemos fazer aqui é que não temos mais paciência de ficar vendo um loading enquanto um sistema carrega, ficar sem feedback também é muito ruim do ponto de vista do usuário. Por isso, as microinterações tem sido bem utilizadas.


Mas antes de colocar a mão na massa, vamos refletir um pouco sobre as microinterações…

Imagine em um ambiente de viagem, enquanto o sistema faz uma busca sobre datas, as microinterações podem contar uma história. Dessa maneira, o usuário tem uma sensação de que o tempo dele está sendo investido em alguma coisa. Isso eleva a questão de respeito com o tempo do usuário, né? Imagine quanto tempo você investe esperando as respostas de sistemas? Agora pense, ao invés de loading tivesse um frame com uma narrativa que te envolvesse no contexto de espera? Vejam alguns exemplos!

 

 

 

 

 

 

Dan Saffer, em seu livro sobre

Microinterações, afirma que “cada vez que você muda uma configuração, sincroniza arquivos ou dispositivos, ajusta o alarme, faz login em um site, muda o status do seu comunicador instantâneo ou “curte” alguma coisa, você está engajando com uma microinteração.” São oportunidades de cativar seu usuário e mostrar a ele que o tempo tem seu valor. Lembre-se sempre que confiança em um produto vem da experiência, a falta dela vem da falta de entendimento e controle. 😉

Em um olhar mais técnico as microinterações atuam beneficiando na condução do usuário, fornecem feedbacks, direcionam a atenção para os gatilhos necessários para uma ação, tornam o produto mais orgânico e fluido. Agora tratando de questões mais subjetivas, a utilização da microinteração trabalha as questões de confiança, respeito ao tempo, condução, se bem trabalhada, mostra qualidade do produto e acima de tudo impacta de maneira positiva a experiência.

Ele também afirma que a eficácia da microinteração não é baseada pela sua perceptividade ou tamanho, mas sim pela sua forma e pela atenção dedicada em cada uma das quatro partes que compõem a interação: Trigger, Rules, Feedback e Loops & Modes.

Imagem construída pelo Ideativo Design com objetivo de conduzir um workshop sobre microinterações. Fonte: Microinterações, Dan Saffer

 

Segundo o Tubik Studio, os designers precisam estar atentos as questões de carregamento, deve-se pensar sob a ótica de diferentes dispositivos e condições do usuário, acessibilidade, nunca deve tirar a atenção daquilo que importa e considerar os conceitos estéticos do produto em geral e ficar harmônico com o contexto geral do produto.

Fique atento para não confundir, microinterações que seguem os critérios apresentados acima e precisam de gatilhos ativados pelo usuário para acontecer, tem regras de condução, história, com motions ou animações. Agora, transições de telas animadas ou composição de telas com motions, são considerados de outras categorias. Alguns autores como Saffer, abordam que as microinterações utilizam motions e animações para serem construidos. Veja exemplos:

 

Espero que aproveitem os materiais, no entanto, muito mais do que fazer acontecer bom entender como a camada de UI pode auxiliar e impactar nas questões de uso da ferramenta, ou seja, o UX Design. Lembre-se sempre que as microinterações são bonitas e causam muito impacto visual, mas use com critério. A banalização do recurso pode deixar sua aplicação cansativa e não alcançar o momento “Wow”que todos queremos que o produto tenha.

Esse foi apenas um resumo do que são as microinterações, como aplicar, quais os pontos que devem ser considerados, mas isso é apenas o início do papo. O Livro do Dan Saffer foi que baseou esse material, se você tiver algo para contribuir e evoluir, comente aí 😉


…Agora, voltando ao Lottie

Existem diversas maneiras de construir microinterações, no entanto o mais importante é conhecer bem as etapas de construção e entender como aplicá-las de maneira rápida e clara. Os assets que foram utilizados no exemplo estão disponíveis para todos que queiram estudar e colocar em prática.

As ferramentas são apenas uma maneira de concretizar e existem muitas por aí. Abaixo fizemos um passo a passo para instalar e configurar o Lottie, via plugin chamado BodyMovin no After Effects que exporta animações em .json.

 

Tutorial da instalação e configuração do Lottie no After Effects

Conteúdo recente

 

Patricia Prado
patricia@ideativodesign.com.br

Co-fundadora do Ideativo Design e do UX Overtake. Doutoranda em Linguística (UFSC), mestre em Interfaces e Interações Comunicacionais (UDESC), especialista em UX Design (UFSC). Trabalha com design há mais de 15 anos, já foi líder local do IxDA, Diretora da ADG Brasil e organizadora geral do Interaction South America - Florianópolis.

GOSTOU? CADASTRE-SE PARA RECEBER NOSSOS CONTEÚDOS EXCLUSIVOS.