Animações UI com LottieFiles

Animações UI com LottieFiles
Laís Cavalcanti
Laís Cavalcanti

Compartilhe

Quando ouvimos falar sobre animação, automaticamente podemos pensar em filmes, desenhos e videogames, mas as animações vem ganhando bastante espaço entre aplicativos e sites. Elas facilitam nossa experiência com produtos digitais, como por exemplo, quando recebemos uma notificação no celular ou quando estamos lendo um artigo em um site e, uma barra de leitura nos mostra em que parte do texto estamos. Resumindo, as animações não são apenas dinâmicas e divertidas, mas também úteis para seus aplicativos.

Neste artigo vamos falar sobre o que são Animações em UI e como utilizá-las dentro da interface de usuário através do LottieFiles no Figma.

O que é animação na interface do usuário?

Animações em UI não são muito diferentes das animações da TV ou do cinema, trata-se de camadas de imagens rapidamente sobrepostas ao longo do tempo e que, visualmente, criam a ilusão de movimento. UX e UI designers usam animações para guiar a experiência do usuário em uma interface, seja para alertar usuários de uma mudança, influenciar decisões e indicar interatividade. Por isso, elas contribuem para o apelo e facilidade do usuário na web e nos aplicativos mobile. Quando aplicadas devidamente, animações são capazes de construir uma conexão entre usuários e o conteúdo que está na tela.

Em UI Design, a animação pode ser funcional ou decorativa. A animação funcional serve algum propósito específico, como, por exemplo, avisar que o nível da bateria do celular está baixo, já a animação decorativa tem o foco na marca do produto, como

Vejamos alguns dos principais tipos de animações:

Carregamento e Progresso

Gif de carregamento, de 0% até 100%.

Animações de carregamento e progresso ajudam a manter os usuários informados, demonstrando o processo de conclusão de uma ação (como carregamento de vídeo, um upload de um arquivo, download de um aplicativo, etc) ou informando quanto tempo levará até que a ação seja concluída.

Navegação

Gif de navegação: quatro ícones de navegação.

Animações de navegação ajudam o usuário a se guiar e tornam a plataforma intuitiva. Ao oferecer prompts como setas, animações flutuantes ou elementos de layout deslizantes, a hierarquia visual fica mais clara e o usuário se sente confiante para dar o próximo passo na plataforma.

Animações de Boas-Vindas

Gif de um robô dizendo "Hello" e acenando.

A primeira impressão do usuário é significativa, e criar saudações animadas pode ajudar a engajar os usuários desde o começo. Além disso, elas “prendem” a atenção dos usuários enquanto o produto digital não inicia e contribui para um aspecto amigável fazendo com que o usuário queira usar o produto novamente.

Marca

Gif de um celular apresentando funções e janelas de aplicativos e propagandas.

As animações são uma ótima forma de promover o reconhecimento da marca e a interação dos usuários com o produto. Designers costumam usar animações de logotipo divertidas para dar “vida” à marca.

Narrativa

Gif que mostra um desenho de um calendário e uma solicitação de chamada de voz.

Animações sobre narrativas tem caráter informativo e normalmente ilustram um procedimento em ação. Esse tipo de animações são bastante úteis em funcionalidades complexas que demandam do usuário algum nível de apreensão de procedimentos, como por exemplo efetuar uma compra de ações na bolsa valores.

Banner da Escola de UX e Design: Matricula-se na escola de UX e Design. Junte-se a uma comunidade de mais de 500 mil estudantes. Na Alura você tem acesso a todos os cursos em uma única assinatura; tem novos lançamentos a cada semana; desafios práticos. Clique e saiba mais!

Acessibilidade na Animação

Mão usando um mouse de computador.

Designers devem considerar a acessibilidade no momento de construir a animação. Para pessoas com distúrbios vestibulares, o movimento de uma animação pode causar tontura, vertigem e náusea. Os efeitos de paralaxe são um bom exemplo (efeito onde o fundo se move mais devagar que o primeiro plano) pois são problemáticos para pessoas que tenham sensibilidade ao movimento animado. Como no exemplo abaixo:

Animação onde as palavras e cores mudam de forma vertical rapidamente.

Para não provocar essas sensações indesejadas é importante evitar a reprodução automática das animações. Outra boa prática é garantir que o conteúdo animado seja descrito em palavras, através de uma legenda ou um texto alternativo, isso permite que não só pessoas sensíveis ao vestíbulo possam usufruir do conteúdo como também deficientes visuais.

O que é o LottieFiles

Gif apresentando o logo da LottieFiles

LottieFiles é um dos repositórios gratuitos mais populares de animações na web. As animações são concedidas por designers em formato JSON (acrônimo de JavaScript Object Notation - um formato de arquivo compactado de padrão aberto) que permite envio dos arquivos de forma bastante simples. Além de serem arquivos leves, eles podem ser aumentados ou diminuídos sem ter efeito de pixelização.

Além de animações no formato JSON, no LottieFiles temos acesso a outros tipos de formatos como GIF, MP4 ou em arquivo ZIP. Além disso, é possível editar as cores de fundo no momento em que for fazer o download da animação.

Como usar LottieFiles no Figma

A plataforma LottieFiles dispõe de um plugin gratuito para o Figma, de fácil utilização. Basta acessar o link com o Figma aberto e fazer a instalação do plugin.

Abaixo, veja um um exemplo da utilização de uma animação, que mostra o sucesso do envio de uma mensagem de contato.

Animação que mostra o Figma com um projeto aberto, que contém duas telas de login para entrar em contato com uma empresa. Na sequência é aberto a funcionalidade do LottieFiles e pesquisado uma imagem de “avião de papel”, que simboliza o envio da mensagem. Depois mostra a cor da imagem sendo alterada e por fim, a animação selecionada para o projeto.

Uma vez selecionado o plugin do LottieFiles, você pode abrir o arquivo JSON previamente baixado ou ir na aba “search” e procurar pela animação que mais se encaixa no contexto em que será usado. Quando escolhido, pode ser alterada a cor de fundo, inserido como SVG ou convertido como GIF.

Na aba ‘Prototype’ podemos desenhar as interações das telas, isso é, interligar as telas a partir da interação do usuário. Por exemplo, ao clicar na tecla “Enter” a animação deve se iniciar.

Tela que mostra um zoom no Figma, detalhando a aba do lado direito superior, que mostra a funcionalidade “prototype”.

A animação usada no exemplo tem uma característica funcional, já que ela foi pensada para trazer conforto e segurança ao usuário, sinalizando-o que sua mensagem foi enviada corretamente.

GIF animado que mostra a tela do Figma, primeiramente com dois rascunhos de tela de login para entrar em contato com uma empresa. Na sequência a animação se movimenta e mostra algumas edições do projeto dentro do Figma, e por fim, projeta a tela criada, com o ícone de “avião” ao lado do botão “enviar”, mostrando como a tela final ficará.

Conclusão

Contudo, a animação não é a solução para todos problemas e garantir a usabilidade da aplicação. Saber usá-la de forma coerente é de suma importância. Antes de adicionar uma animação ao produto, tenha em mente o objetivo ou propósito desta animação. Animar com objetivo significa saber o que se quer comunicar evitando distrações desnecessárias que podem atrapalhar a pessoa usuária na sua experiência.

As animações cumprem bem esse papel de apoiar na resolução de problemas de design, ajudando a reduzir a carga cognitiva e até melhorar a tomada de decisões das pessoas que por ali navegam, além de encantar e informar esses usuários.

Você também viu que os LottieFiles tem um papel fundamental em aplicações que tenham animações em projetos, pois designers e desenvolvedores têm facilidade no seu uso além de possuir uma gama enorme de opções de animações que podem ser aplicadas.

Curtiu esse artigo e quer conhecer ainda mais a ferramenta LottieFiles? Que tal acessar o curso de After Effects, que mostra sua aplicação na prática?

Também temos aqui na Alura, um podcast exclusivo sobre o tema de LottieFiles!

E pra mergulhar ainda mais nesse mundo de tecnologia, acesse nossas formações em Figma e em Motion Design, que você encontra aqui na Alura.

Te encontro no próximo artigo! :}

Laís Cavalcanti
Laís Cavalcanti

Como uma boa curiosa, gosto de ler, ver, ouvir e experimentar. Uma entusiasta da web acessível a todos. Hoje, faço parte da Escola de UX e Design na Alura.

Veja outros artigos sobre UX & Design