Redesenho do componente de banner: menos fricção, mais ativação

Contexto

O carrossel de banners abre a home da UniBB. É o espaço de maior destaque da plataforma: anuncia lançamentos, campanhas e cursos prioritários para os funcionários do banco.

Três grupos dependem dele:

• Alunos

  Precisam entender rapidamente o que é novo e o que é prioritário.

• Clientes

  As áreas do banco que pedem a publicação. Produzem as artes com agências ou, muitas vezes, sem experiência em design digital.

• Equipe interna

  Governança, conteúdo e suporte, que recebem os arquivos, ajustam e publicam tudo manualmente.

Quando o banner falha, falha justamente no primeiro contato do aluno com a plataforma.

O pedido e a pergunta que mudou o escopo

A demanda veio do time de Arquitetura de Solução. Os clientes enviavam artes fora do tamanho, e a equipe interna corrigia peso e proporção à mão antes de publicar. A resposta óbvia seria definir uma medida e divulgá-la.

Antes de aceitar esse recorte, fiz uma pergunta: a distorção vem da imagem ou do componente? Para responder, segui o caminho completo de um banner, do arquivo enviado até a tela do aluno. Encontrei problemas nas duas pontas.

No processo, não havia uma medida de referência

O formulário de upload recomendava 2500 × 500 px, uma proporção de 5:1. Mas os arquivos chegavam em medidas como 1200 × 270 e 555 × 225, com proporções diferentes entre si, de cerca de 4,4:1 e 2,5:1. Como cada arte tinha um formato, cada uma era cortada ou distorcida de um jeito, e a equipe interna ajustava os arquivos manualmente para compensar.

Na interface, o componente escondia a mensagem

Mesmo com o arquivo certo, o componente atrapalhava a leitura. A imagem abaixo mostra a home com zoom de 150%, um ajuste comum para quem precisa de letras maiores na tela, como pessoas com baixa visão.

1. 1

   O título da arte era cortado. Para caber na tela, o componente recortava as laterais da imagem. Como o texto fazia parte da arte, o título "PIT+" perdia letras na borda esquerda.

2. 2

   A seta ficava sobre o texto. As setas de navegação ficavam por cima da arte, sem considerar onde estava a mensagem. Aqui, a seta de voltar cobre a palavra "Identificação".

3. 3

   O indicador de posição parecia outra seção. A fileira de pontos ficava fora do banner, numa faixa cinza entre ele e as Notícias. Separado da arte, ele não parecia parte do carrossel, e a relação entre os pontos e os banners se perdia.

Ou seja, mesmo uma arte perfeita seria prejudicada pelo componente. O pedido descrevia um sintoma; a causa estava dividida entre o processo e a interface.

Investigação: ouvir antes de desenhar

Para separar fatos de suposições, ouvi quem opera o banner e olhei os dados de quem o usa.

1. Kick-off com Produto e Engenharia: Facilitei uma dinâmica para separar o que o time sabia, supunha e ainda não sabia sobre componente, guia e gestão. As dúvidas viraram a pauta da investigação.
2. Entrevistas com o time de governança: Mapeamos juntos o cadastro de um banner: sete etapas, todas manuais. Dali saíram perguntas que ninguém tinha feito, como “por que os banners aparecem na ordem de cadastro?” e “dá para ver uma prévia antes de publicar?”.
3. Conversa com o time de conteúdo: Entendi como os padrões chegavam aos clientes: de forma oral, nas reuniões de início de cada projeto. Quem não participava não tinha onde consultar.
4. Dados, avaliação e referências: Analisei um mês de cliques na home, avaliei o componente com critérios de usabilidade e comparei carrosséis de produtos como Apple, Itaú, Coursera e Mercado Livre.

Esse último dado mudou a conversa. Entre os elementos mais clicados, havia mais de seis cliques nas setas para cada clique em um banner. O carrossel parecia engajar, mas funcionava como um botão de passar slides.

O problema, definido

A investigação separou o problema em duas partes:

Classificamos os problemas por criticidade. Os que afetam o aluno receberam criticidade alta; os da operação, média; a falta de métricas de engajamento, baixa. Com isso, o time decidiu:

1. Agora

   Redesenhar o componente

   Ele afeta o aluno no primeiro contato com a plataforma.

2. Em paralelo

   Criar um guia de criação

   Para reduzir erros na origem com pouco esforço.

3. Depois

   Estudar uma área de gestão para o cliente publicar sozinho

   Exige mais maturidade técnica e de processo.

Solução: o que mudou no componente e por quê

Cada decisão partiu de um problema observado. O objetivo era um só: tirar da frente da mensagem tudo o que competia com ela.

A crítica de design mudou a primeira versão

No início, as setas apareciam só ao passar o mouse, para reduzir distrações. Na crítica com o time de design, revimos a escolha: em telas de toque não existe “passar o mouse”, e controle escondido é controle difícil de encontrar. Os controles passaram a ficar sempre visíveis, agrupados e centralizados na base.

Na mesma rodada, testamos a proporção 3:1 e mantivemos a 4:1, que dá destaque ao banner sem ocupar demais a parte visível da home.

A documentação para desenvolvimento cobriu o comportamento, não só a aparência

Descrevi a anatomia, os três estados (inicial, em reprodução e pausado) e as regras de interação. Um exemplo: a animação da barra e a troca de slide usam a mesma contagem de tempo, para nunca saírem de sincronia.

O documento ainda especifica o comportamento em tablet, em telas muito largas e no celular, onde o gesto de deslizar substitui as setas.

Guia de criação: levar a regra a quem cria

Um componente melhor não corrige um arquivo errado. Por isso escrevi um guia para designers, agências e qualquer pessoa que produza banners para a UniBB, inclusive quem não tem experiência em design.

Cinco escolhas orientaram a escrita:

• Partir das perguntas de quem cria. As seções respondem dúvidas reais, como “quais tamanhos de imagem funcionam melhor?”.
• Explicar o porquê de cada regra. Quem sabe que as laterais podem ser cortadas no celular não coloca texto ali.
• Criar uma imagem mental simples. As áreas de segurança viraram um semáforo: verde para o essencial (1220 px centrais), amarelo para o cenário (350 px em cada lateral) e vermelho para a faixa dos controles (cerca de 80 px na base).
• Trocar adjetivos por números. Em vez de “use uma fonte legível”, o guia pede no mínimo 32 pt no título, 18 pt no texto de apoio e contraste de 4,5:1.
• Mostrar o que fazer e o que evitar. As orientações vêm em pares, como “uma mensagem por banner” e “no máximo duas famílias de fonte”.

Para a transição, adaptei ao novo formato os banners que estavam no ar, como Certificação ANBIMA e Trilha Estratégica 2026, no desktop e no celular. Assim, nenhuma arte ficaria fora do padrão com a troca do componente.

A validação com o cliente ampliou o guia

O time do banco concordou com todas as orientações e sugeriu incluir acessibilidade cognitiva, pensando em pessoas neurodivergentes. E pediu que o texto não ficasse repetitivo.

Cruzei as oito sugestões com o que o guia já dizia. Três já estavam cobertas, como “uma mensagem por banner”. As outras entraram como orientações novas, entre elas evitar animações intensas, manter título e chamada em posições previsíveis e evitar fontes decorativas.

Resultados e próximos passos

A primeira versão do componente ficou pronta para desenvolvimento em março de 2026, com estados, fluxos e regras de comportamento documentados. O guia de criação e os banners adaptados acompanharam a entrega.

Como os clientes receberam o guia

O retorno foi muito positivo. Os clientes destacaram o valor desse tipo de documentação, contaram que o guia era fácil de entender e de aplicar e pediram o mesmo tipo de guia para outros formatos de criativos.

Próximo passo

A área de gestão para o cliente publicar sozinho. A proposta inclui upload com validação de tamanho e peso, prévia no desktop e no celular, definição de ordem e período de exibição e aviso de banners prestes a expirar.

Aprendizados