Microinterações acessíveis: estratégia, práticas e ferramentas que usamos no Itaú

UX Motion nasce de uma convicção simples: movimento é linguagem.

Ilustrações animadas do Itaú

No Itaú, cada microinteração, transição ou gesto animado comunica uma intenção. Quando bem construído, o movimento se integra à jornada, tornando a experiência mais fluida e intuitiva.

Falar de UX Motion acessível é falar de algo feito de pessoas para pessoas. É projetar uma linguagem que respeita diferentes formas de perceber, interagir e compreender.

E é aqui que fortalecemos nosso papel estratégico enquanto designers de movimento: orientando decisões, qualificando interações e incorporando critérios técnicos com responsabilidade.

Dessa forma, sustentamos vínculos mais cuidadosos e duradouros com quem usa nossos produtos digitais e constrói, no dia a dia, sua conexão com a marca.

Esse artigo foi escrito por Thaís Miranda e Fernanda Szeremeta, com a contribuição de todo o time de acessibilidade do Itaú.

Quando o movimento deixa de ser estética e vira comportamento

No motion design tradicional, o objetivo costuma ser comunicar uma mensagem em formato audiovisual: vídeos publicitários, institucionais ou para redes sociais. O resultado é um conteúdo fechado, exportado para ser assistido do começo ao fim.

No UX Motion, o movimento não é um conteúdo pronto e entregue. É uma resposta. Ele surge a partir da interação da pessoa com o produto digital: um toque, uma escolha, uma ação. O movimento está vivo, reagindo em tempo real e acompanhando cada etapa da experiência. Por isso, a pergunta deixa de ser “como tornar essa animação bonita?” e passa para:

“Como esse movimento ajuda alguém a entender o que está acontecendo?”

Um botão que afunda para mostrar que recebeu um toque. Uma tela em transição que desliza para indicar continuidade. Um micro movimento que confirma um preenchimento correto.

Movimento vira clareza.

Demonstração de feedback visual de afundar aplicado em botão

Acessibilidade: não como limitação, mas como ampliação

Durante muito tempo, o movimento foi tratado como um risco para acessibilidade. Ainda hoje, é comum ver design systems em que motion e acessibilidade não conversam.

O resultado costuma cair em dois extremos:

• Excesso de animações: distrai, sobrecarrega e tira o foco;
• Remoção do movimento: elimina fluidez, dificulta a navegação e gera secura visual.

A parceria estratégica resolve esse dilema. O problema nunca foi o movimento. Foi o movimento sem intenção. Qualquer movimento mal planejado, atrapalha a experiência de uma pessoa.

Quando a acessibilidade é considerada desde o início, antes mesmo do primeiro keyframe, o movimento passa a guiar a interação sem ocasionar nenhum tipo de confusão, sobrecarga cognitiva ou desconforto sensorial.

O movimento se torna acessível e passa a:

• Ajudar na compreensão espacial;
• Manter o foco;
• Indicar causa e efeito;
• Reforçar relações;
• Dar ritmo à navegação.

A acessibilidade corretamente aplicada, não é impeditiva, não simplifica e nem enfraquece o visual.

A acessibilidade refina o movimento e cria conectividade.

Microinterações: pequenos elementos que fazem a jornada respirar

Microinterações são pequenas respostas animadas que acontecem dentro de um fluxo:

• Um botão que confirma um clique;
• Uma animação de personagem que suaviza a espera enquanto a aplicação carrega;
• Um loader que comunica progresso;
• Uma transição entre telas ou elementos.

Elas duram milésimos de segundos, mas são capazes de reduzir a ansiedade, aumentar a previsibilidade e tornar o produto mais humano.

No entanto, microinterações só cumprem esse papel quando têm contexto. Elas não existem só “porque ficam legais”.

Existem porque fazem sentido para aquela ação, naquele momento, para aquela pessoa.

O equilíbrio entre encantamento e conforto

Um dos exemplos mais marcantes sobre o impacto do movimento aconteceu com o lançamento do iOS 7, quando muitas pessoas começaram a sentir desconforto com as animações intensas da época. A solução foi oferecer o recurso Reduce Motion, permitindo reduzir transições complexas e eliminar efeitos que geravam vertigem.

Esse episódio reforçou para o mercado algo importantíssimo:

Nem todo movimento funciona para todos os corpos.

Estar atento aos efeitos dos distúrbios vestibulares, condições que afetam o equilíbrio corporal e a orientação espacial, é primordial, especialmente ao desenvolver um produto bancário.

Daí nasce um dos nossos compromissos: criar microinterações que encantam, mas sem desrespeitar limites sensoriais.

A função de reduzir movimentos é disponibilizada pelo sistema operacional

O que a WCAG fala sobre animação?

Não se trata de achismo. Existem critérios claros sobre como animações devem se comportar para não prejudicar ninguém:

• Evitar flashes perigosos (principalmente flashes vermelhos);
• Garantir controle de pausa em conteúdos que se movem;
• Oferecer alternativas de interação (gestos, botões etc.);
• Permitir tempo suficiente para ler, entender e agir;
• Construir transições suaves, sem provocar desconforto.

Quando combinados com a estratégia de UX Motion, esses princípios deixam de ser restrições e se tornam potência.

Tecnologia também é acessibilidade

As microinterações precisam ser leves e ter uma resposta rápida, garantindo que todos os dispositivos rodem bem. A performance deve sempre ser considerada, por isso a comunicação entre os times de design e tecnologia precisa ser clara.

Para garantir consistência, nossas microinterações são documentadas e executadas com base em tokens previamente definidos. Isso evita “interpretações criativas” e assegura que o que foi desenhado é realmente o que vai para a mão das pessoas.

Como pensamos UX Motion dentro do Itaú?

O que orienta nossas decisões não é o “impacto visual”, mas sim o impacto humano.

1) A animação precisa ter propósito Ela deve resolver um problema real: clareza, orientação, transição, feedback.

2) O movimento precisa ser suave e respeitoso Nada abrupto sem necessidade. Desejamos conforto, não surpresas.

3) A implementação precisa ser acessível Conteúdos como texto, ícones, barras de progresso são nativos, não escondidos dentro de um JSON animado.

4) O código é parte do design Se a animação depende do uso no dia a dia, ela precisa responder ao ambiente, ao dispositivo, às configurações do sistema.

5) Performance também é inclusão Uma animação pesada exclui não pela estética, mas pela lentidão. E lentidão também é uma barreira.

Exemplo de uso de JSON com microinterações construídas em código

Não existe microinteração perfeita sem dados

Mesmo com toda documentação e intenção, existe algo que só a percepção humana revela.

Por isso sempre recomendamos testes e pesquisas com:

• Pessoas neurodivergentes;
• Diferentes níveis de letramento;
• Sensibilidades sensoriais variadas;
• Diferentes dispositivos e modos de interação.

Como o movimento dialoga diretamente com a percepção, equipes diversas se tornam um excelente termômetro. Mesmo sem orçamento para testes e pesquisas estruturadas, ter etapas de validações com times internos já eleva significativamente a qualidade e diferencia muito o produto final.

Essa é a beleza do processo: motion é vivo.

Ele evolui com as pessoas.

O encantamento está na parceria

Por muito tempo, o mercado tratou UX Motion e Acessibilidade como forças opostas.

Ou a experiência era “uau”, ou era “acessível”.

Hoje sabemos que isso nunca fez sentido. O verdadeiro “uau” está na experiência que:

• É fluida;
• É clara;
• É confortável;
• É guiada;
• E funciona para todas as pessoas.

Quando motion e acessibilidade caminham juntas, o resultado é mais do que apenas ser bonito: é sobre respeito. É humano.

E é por isso que continuamos estudando, testando, refinando e provocando o mercado a olhar para o movimento como algo que informa, acolhe e inclui.

Se o movimento não funciona para todo mundo, ele não funciona de verdade.

E é esse caminho que escolhemos trilhar todos os dias aqui no Itaú.

Ser acessível é ser Itaú.

Faça parte da Comunidade de Talentos Itaú!

Inscreva-se e receba mais informações sobre nossas vagas, artigos e eventos de Design.