Microinterações: qualidade e exclusividade para a sua interface

Interações com a interface que se concentram em resolver uma única e simples tarefa são consideradas microinterações. Sim, isso existe e você interage com elas o tempo todo.

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. Elas estão em todo lugar: nos dispositivos que carregamos, nos eletrodomésticos da nossa casa, nos aplicativos de celular e desktop, e até embutidas nos ambientes nos quais vivemos e trabalhamos. (Dan Saffer, 2013)

Pequenas e quase invisíveis, as microinterações tornam seu produto mais humano, pessoal e divertido. São capazes de criar fortes laços emocionais
e se tornam fator decisivo para a diferenciação entre um produto que você realmente ama e um que você apenas consegue tolerar.

É cada vez mais comum encontrarmos interações — muitas vezes divertidas e extremamente úteis — que buscam resolver apenas uma tarefa. Por exemplo, o novo e polêmico botão "Like" do Twitter, um coração que acende no status hover e explode em confetis quando recebe o clique, isso é um caso de microinteração.

Talvez a primeira impressão não seja a mais explendida de todas, mas pare e pense, é um simples ícone animado que carrega consigo diversos significados, abstraindo uma linguagem mais complexa ao mesmo tempo que transmite as intenções dos usuários.

Há diversos exemplos bem construídos de microinterações, que mesmo imperceptíveis aos olhos menos treinados, são fundamentais para a experiência do usuário na interface. Contudo, é preciso entender a estrutura por trás de uma microinteração, afim de evitar erros desnecessários e frustrações não previstas.

A estrutura das microinterações

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.

Estrutra de uma microinteração eficiente

Trigger: a microinteração começa com um gatilho. Pode ser um ação manual, que requer uma interação do usuário com a interface (clique em um botão ou ícone) ou pode ocorrer por meio de um system trigger, que é acionado quando determinadas condições se encontram. Por exemplo, toda vez que você recebe uma notificação ou mensagem, o celular vibra.

Rules: determinam o fluxo da microinteração, definindo regras para o que pode e o que não pode acontecer na sequência de eventos.

Feedback: é a forma como o usuário entende a interação realizada, já que as regras são invisíveis (rules)

Loops & Modes: são a última parte de uma microinteração. Os loops determinam se haverá um prolongamento na interação, uma mudança ou a repetição. Já o modes é utilizado apenas quando surge a necessidade de uma interrupção crítica como, por exemplo, solicitar o nome da cidade para obter dados metereológicos.

Seguir a estrutura é fundamental, mas leve em consideração que seu app, site ou produto não precisa ser uma árvore de Natal com vários elementos piscando ou respondendo as interações. Antes de começar, procure fazer uma pesquisa prévia para entender o que o usuário faz antes, durante e depois de usar seu produto, e compreender suas emoções, desejos e interesses. Fazendo isso, você está criando um propósito para sua microinteração.

UI com microinterações animadas

Com o propósito definido, você precisa saber que nem todas as microinterações são animadas, mas é comum elas aparecem nessa forma. 
As animações ajudam a criar um dinamismo na interface, transformando a resposta de um botão comum, por exemplo, em algo mais empático e divertido, fugindo do padrão de acender, escurecer e afundar.

Submit button — by Colin Garven

É importante destacar que as animações devem ser fluídas, como se fossem parte de um processo natural. O usuário não vai perceber a microinteração, 
e isso é bom. Mas tenha certeza que ele vai começar a dar importância se algo estiver errado, ocasionando um ruído 
na experiência que você havia planejado para a interface.

Busque sempre a perfeição, por mais irrisório que pareça, as microinterações vão ajudar a estabelecer um sentimento de exclusividade e qualidade no seu produto, diferenciando de todos os outros que existem no mercado. Além disso, demonstram o esforço detalhado que você desempenhou para deixar sua aplicação melhor. No final, o esforço será reconhecido pelo usuário e pela experiência que ele vai criar ao usufruir o seu produto.


Assine a newsletter do UI Lab e receba artigos exclusivos como esse em primeira mão.
Assinar.