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. Até questão de respeito com o usuário, né? Imagine quanto tempo você investe esperando as respostas de sistemas? Agora pense se ao invés de loading tivesse um frame com uma narrativa que te envolvesse no contexto da sua 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.
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.
Fique atento para não confundir, microinterações que seguem esses critérios e precisam de gatilhos ativados pelo usuário para acontecer, tem regras de condução, história, com motions ou animações. Transições de telas animadas ou composição de telas com motions, não são considerados microinterações. Veja exemplos:
…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.
