Como criar Micro Interações em ReactJS?

Pode ser que você não esteja familiarizado com o termo Micro Interações, mas elas estão ao seu redor o tempo todo e fazem diferença no jeito que você utiliza uma aplicação.

Elas são pequenas e sutis, mas servem um grande propósito na web: manter o usuário interessado.

[adrotate banner=”4″]

Você se lembra daquela animação executada quando você curte post do Instagram?

Se a resposta foi não, ela cumpriu sua função. Na verdade, o Instagram é mestre em micro interações, na próxima vez que estiver navegando pela plataforma, tente contar quantas animações existem. Isso porque praticamente toda ação do usuário dispara uma micro interação.

Micro interações podem ser disparadas pelo usuário ou pelo sistema, sempre visando informar algo ao usuário. Nós podemos dividir as micro interações em classes de acordo com seu objetivo. Neste artigo, vamos ver algumas das principais.

Progresso

Pode ser frustrante preencher algo sem saber quando se deve parar. Assim, podemos utilizar micro interações para deixar claro para o usuário quando ele atingiu o objetivo. Por exemplo: criação de senha.

Visualização do estado de um campo

Existem casos em que o usuário precisará preencher um campo complexo, com muitos números. Por isso, ele pode facilmente se perder e gastar mais tempo tentando consertar um erro do que utilizando a aplicação.

Dessa forma, podemos utilizar as micro interações para facilitar essa tarefa.

Por exemplo: preenchimento de um boleto ou cartão de crédito.

Feedback

Toda vez que o usuário realizar uma ação na aplicação, deve ficar claro para ele que a ação foi realizada.

Por exemplo: clique de um botão.

Estado do sistema

Naturalmente, existirão momentos em que o usuário deve esperar a aplicação realizar uma ação. Pensando nisso, é importante manter o usuário informado que algo está acontecendo e ele precisa esperar.

Por exemplo: carregamento de imagem.

Aplicando Micro Interações em ReactJS

Hoje, iremos ver 3 maneiras diferentes de criar/utilizar micro interações em React:

• CSS Animations;
• Bibliotecas de componentes;
• React Simple Animate.

O primeiro exemplo que vamos ver será utilizando CSS Animations. No tutorial, vamos demonstrar isso utilizando o pacote styled-components. Porém, você pode utilizar um arquivo .css ou .module.css.

Para utilizar o styled-components, instale os pacotes necessários com os comandos:

npm install --save styled-components
npm install -D @types/styled-components

Criação de componente

Em seguida, vamos criar um componente chamado ConfirmButton e dar um estilo simples:

Desenvolvimento do botão

Agora, devemos ter um simples botão verde. Para adicionar nossa animação, vamos utilizar o seletor :hover e mudar o backgroundColor. Além disso, vamos utilizar uma tonalidade mais escura:

Agora, se você passar o mouse sobre o botão, vai perceber a mudança de cor. Entretanto, esse efeito não é nada natural. Por isso, para atingirmos nosso objetivo, precisamos utilizar a propriedade transition presente no CSS:

Com isso, teremos um botão que ligeiramente altera sua cor quando o mouse paira sobre ele.

Assim, com esses poucos passos, temos nosso primeiro componente com micro interação.

Bibliotecas de componentes

Em seguida, veremos como bibliotecas de componentes podem facilitar nosso desenvolvimento. Nesse exemplo, vamos utilizar a biblioteca Material UI, que já disponibiliza vários componentes com micro interações, para criar um Skeleton que será visível enquanto alguma informação é carregada.

Para isso, instale a biblioteca com o comando:

npm install @material-ui/lab

Vamos adicionar dois Skeletons: um que representa uma imagem e outro para representar um texto.

Para saber mais sobre o Skeleton acesse a documentação do Material UI. Após adicionar uma lógica para mostrar o Skeleton, enquanto a imagem e texto não são carregados, nosso componente estará pronto:

Por último, iremos mostrar como criar uma animação em Javascript utilizando o framework react-simple-animate.

Para instalar o framework, utilize o comando:

npm install --S react-simple-animate

Vamos criar um botão de curtir com uma animação simples de aumentar e diminuir seu tamanho quando tocado. Para isso, iremos criar um botão com uma imagem dentro, sendo essa imagem um svg de um coração.

Utilizando o hook useAnimateKeyframes, podemos definir os estágios da animação e ligar essa animação ao clique do botão.

Com isso, teremos o resultado:

Veja também:

O que é e como utilizar Path Mapping

Conclusão

O react-simple-animate é um pacote poderoso e eu encorajo você a explorar suas funcionalidades. Contudo, ele não é o único e talvez você encontre o que precisa em outro pacote. Em nosso blog, o Matheus Medeiros fez um post demonstrando o uso do Lottie em React, clique aqui para acessar.

Espero que este artigo tenha te ajudado a entender melhor a filosofia por trás das micro interações e sua utilização. Como podemos concluir, sua implementação não necessita de um conhecimento avançado em animações, apenas uma boa noção de User Exprience.

Caso você queira experienciar essa demo, ela está disponível no meu GitHub, acesse clicando aqui.

Autor: Gustavo de Oliveira Marques

[adrotate banner=”5″]