Frontends com Vibecoding · Capítulo 21 de 35 · 29 min
Avaliar busca, conversão e padrões de comércio
Busca, filtro e card de produto passam pelo mesmo critério em Booking, LATAM, Mercado Livre e Temu, e o padrão enganoso é reconhecido antes de ir ao ar.
Este capítulo faz parte do curso gratuito Frontends com Vibecoding.
Uma busca boa reduz dezenas de opções a uma decisão em poucos segundos, e cobra duas disciplinas em troca. A primeira é guardar filtro e página no endereço da tela. A segunda é saber de onde vem o número de cada aviso que aparece.
Booking e LATAM resolvem essa busca por caminhos diferentes e pagam preços diferentes. Quem vende algo com data, vaga ou estoque pelo próprio site carrega a mesma conta a cada tela nova que publica.
Ao terminar, você testa a busca, os filtros e os cartões de produto do site da empresa e reconhece quando um aviso de urgência não tem origem conferível. Tempo de leitura: cerca de 29 minutos, e a auditoria no site real, mais 15.
A home da Booking é dominada por uma caixa de busca porque quem chega já sabe o destino e quer digitar. A tela pede a intenção primeiro: destino, datas e quantidade de pessoas.
Nos resultados aparecem dezenas de filtros, e cada pessoa usa dois ou três. O valor está na combinação recalculada na hora, sem que o caminho de volta se apague.
A lição para quem tem pousada, clínica ou escola está na ordem. Pergunte primeiro o que a pessoa já sabe, ou seja data e cidade, e só depois ofereça filtro. Filtro antes da intenção obriga o visitante a escolher no escuro.
Ver como texto
Funil de quatro degraus. No topo, a intenção: destino, datas e pessoas. Depois, dezenas de resultados. Depois, dois ou três filtros combinados, recalculados na hora. Na ponta, uma decisão. Um quadro tracejado embaixo lembra que filtro antes da intenção obriga o visitante a escolher no escuro.
Já a LATAM vende a própria passagem, sem agregador no meio, então cada tela mal pensada vira venda perdida. Neste exemplo, observe cinco etapas de decisão: busca, calendário de preços, lista de voos, tarifa e assento. A sequência pode variar conforme a rota e a versão do site.
O calendário de preços resolve uma dúvida antes que ela vire hesitação. Cada dia mostra a tarifa estimada, o mais barato vem marcado por texto e por cor, e o dia sem voo vira botão desativado. O rodapé declara a base: tarifa estimada por adulto, atualizada a cada 24 horas.
A mesma passagem sai em quatro níveis, e o mais barato leva só o básico. Cada nível mostra por escrito o que fica de fora: mala de mão, despacho, assento. Comparar é direito de quem compra, e vira armadilha quando a restrição some da tela e reaparece no pagamento.
Um negócio pequeno copia esse desenho sem software caro. Mostre o preço por data antes de pedir cadastro, e escreva o que cada opção inclui na mesma tela em que a pessoa escolhe.
Ver como texto
Calendário de preços por dia: cada célula é um botão com data e tarifa estimada; o dia mais barato é destacado como menor tarifa, dias regulares mostram preço maior e dias sem voo aparecem desabilitados, com legenda de cor reforçada por texto.
A primeira disciplina é o estado, que é a memória do que a pessoa escolheu na tela. Filtro, aba e página precisam morar no endereço, como o número da página num livro, porque é isso que faz o link filtrado abrir igual em outra aba.
O teste leva dez segundos. Marque um filtro na tela onde o cliente mais busca e recarregue a página. Se o filtro sumir, o estado ficou preso na peça que desenha o filtro e nunca chegou ao endereço.
Existe biblioteca pronta para isso, o nuqs, que é código de catálogo que o site importa e guarda filtro, aba e paginação no endereço. Use em toda lista com filtro; deixe de fora o que é passageiro, como o menu aberto ou o texto sendo digitado.
Sem a biblioteca, o caminho é ler e escrever os parâmetros do endereço à mão. O que nunca funciona é deixar filtro e página só na tela, porque o primeiro F5 apaga a escolha do cliente.
Numa pousada, o filtro de piscina e de quarto para quatro passa a caber no endereço, e a recepção manda esse link pronto pelo WhatsApp. O mesmo endereço filtrado vira página que o buscador e o assistente de IA conseguem abrir e citar.
Ver como texto
Duas faixas. Na de cima, o filtro preso na peça: filtro marcado, F5, lista sem filtro. Na de baixo, o filtro guardado no endereço com o nuqs, em busca com piscina igual a sim e quartos igual a 4. Desse endereço saem três resultados: depois do F5 a mesma lista, no WhatsApp o link abre igual, e buscador e IA podem citar a página.
No celular, o filtro abre num modal, a janela que cobre a tela e pede decisão antes de devolver o caminho, como a porta do provador. Ela precisa de um botão de fechar visível e tocável.
O alvo desse botão tem piso de 24 px, medida que vem da WCAG 2.2, a norma internacional de acessibilidade na web. Apple e Android pedem alvos ainda maiores, e seguir o maior nunca prejudica ninguém.
Tocar fora do modal e apertar Esc são atalhos, porque no celular não existe tecla Esc e ninguém descobre o toque fora sozinho. Abrir o filtro e procurar o botão antes de publicar separa fechamento real de atalho escondido.
Ver como texto
Wireframe de celular com o modal de filtro aberto sobre a lista. Marcador um no botão de fechar, visível, com alvo de 24 px ou mais, piso da WCAG 2.2. Marcador dois na área escurecida fora do modal: tocar fora é atalho que ninguém descobre sozinho. Item três da legenda: a tecla Esc não existe no celular. Apple e Android pedem alvos ainda maiores.
A mesma tela da Booking dispara cinco gatilhos ao mesmo tempo: escassez, prova social, atividade ao vivo, aversão à perda e preço de referência. Juntos pesam mais que cada um isolado, e auditar um por um nunca revela o conjunto.
Por isso a revisão acontece na tela montada, do jeito que o visitante a vê. O que separa persuasão de armadilha é o dado por trás do selo: "resta 1" honesto significa que resta um no sistema de reservas.
O contador que reinicia a cada recarga é o caso que a FTC, a agência americana de defesa do consumidor, cita como prova de urgência falsa. Reguladores de três continentes multam esse tipo de tela desde 2019, e o ganho de venda chega meses antes da multa.
A LATAM acrescenta duas linhas à régua, e as duas cabem em qualquer site. A caixa do seguro nasce desmarcada, porque o Senacon, o órgão federal que fiscaliza a defesa do consumidor, já multou companhia aérea pela caixa pré-marcada. E a taxa aparece antes do último passo, já que taxa revelada no fim ninguém teve chance de comparar.
| Aviso | O que você copia | O que você recusa |
|---|---|---|
| Escassez ("resta 1 quarto") | O número que sai do sistema de reservas ou do estoque | O número fixo no código, de pé mesmo sem estoque |
| Prova social (nota e contagem) | A contagem auditável, com a tabela de origem nomeada | A avaliação inflada ou o depoimento sem nome verificável |
| Atividade ao vivo ("pessoas vendo agora") | A medição real; sem medir, o aviso não entra | O número que ninguém sabe de onde veio |
| Aversão à perda (contador de oferta) | O prazo no servidor, que ao zerar encerra a oferta | O relógio criado no carregamento, que reinicia a cada F5 (FTC, 2022) |
| Ancoragem (preço riscado) | O preço anterior que existiu, com a data em que vigorou | O valor cheio inventado só para o desconto parecer maior |
| Adicional no pagamento (seguro, garantia) | A caixa desmarcada, que o cliente marca se quiser | A caixa pré-marcada, que já rendeu multa do Senacon |
| Taxa e restrição da tarifa | A taxa e a restrição escritas na tela de escolha | A taxa que só aparece no último passo do pagamento |
No pagamento, a mensagem de erro separa produto maduro de protótipo, porque chega no momento mais frágil da compra. "Tente mais tarde", sem dizer o motivo, deixa o cliente sem saída e devolve o carrinho cheio para a concorrência.
O agente (a IA que escreve o site a partir do seu pedido) segue a regra que você der. Dê esta: explicar o que falhou e como resolver, na voz da interface, sem pedir desculpa e sem rodeio.
Resultado vazio também convida a agir: "nenhum quarto livre de 12 a 14 de março; veja 10 a 12 ou tire o filtro de piscina". O botão diz o que acontece ao ser tocado, e "Reservar" produz "Reserva confirmada".
Ver como texto
Dois cartões de mensagem de erro no pagamento. Antes: tente mais tarde, sem motivo e sem saída, e o carrinho esfria. Depois: cartão recusado pelo banco emissor, use outro cartão ou pague por Pix, com dois botões, usar outro cartão e pagar com Pix. Cenário ilustrativo.
Na pousada que aplica as duas disciplinas, o aviso "resta 1 quarto" só entra quando o sistema de reservas devolve esse número. A busca vazia sugere o fim de semana seguinte, em vez da tela em branco.
Para cada aviso de escassez, prazo, contagem ou preço riscado que já esteja no ar, escreva de qual campo do sistema o número vem. Sem conseguir apontar o campo, o número foi digitado no código, e o selo sai hoje.
Depois aplique um filtro na tela de busca, aperte F5 e confirme que a lista continua filtrada. Se sumir, peça ao agente que filtro, aba e página passem a viver no endereço. Está pronto quando o link colado no WhatsApp abre a mesma lista.
Aprender cor e card com Mercado Livre e o truque da Temu
Booking e LATAM mostram a busca que reduz dezenas de opções a uma decisão, e o comércio de massa acrescenta cor como token, card por objeção e padrão enganoso.
Cor com cargo, card ordenado pela dúvida do comprador e urgência com origem rastreável separam a vitrine do Mercado Livre da roleta da Temu. As duas vendem, só que uma delas acumula processo de autoridade.
Um card sem ordem de leitura deixa a venda em aberto, porque o olho não sabe onde pousar. Um relógio de oferta que reinicia a cada F5 é a prova de urgência falsa que a FTC, a agência americana de defesa do consumidor, já multou.
Quem monta a vitrine do próprio site decide isso a cada tela. O agente (a IA que escreve o site a partir do seu pedido) entrega card, selo e cronômetro prontos, e quem aprova decide o que vai ao ar.
Ver como texto
Duas metades: à esquerda, uma vitrine de celular com cartões de produto alinhados e uma compradora tranquila; à direita, uma roleta colorida com confetes e relógios e um comprador ansioso.
O Mercado Livre guarda a cor da loja como token, o valor salvo com um nome, como a etiqueta na lata de tinta. São três camadas encadeadas, e cada uma existe para tornar barata uma mudança futura.
A primeira camada guarda o valor bruto, o código da cor, batizado de azul-500. A segunda é a paleta com cargos: a variável cor de ação aponta para aquele azul e descreve para que ele serve.
Já a terceira camada pertence ao componente, que é a peça da tela, como o botão ou o card. O preenchimento do botão principal aponta para a cor de ação, e o componente só conhece esse nome.
Ver como texto
Três camadas empilhadas com setas para baixo. Em cima, o componente: o botão aponta para cor de ação e só conhece esse nome. No meio, a paleta com cargo: cor de ação aponta para azul-500; o tema escuro redefine esta camada. Embaixo, o valor bruto azul-500; a nova marca edita esta camada.
O ganho aparece no dia da mudança. Trocar a marca inteira vira editar a camada de baixo, e criar o tema escuro vira redefinir a do meio, sem abrir um componente sequer.
Cada cor tem um cargo fixo. O amarelo chama atenção no cabeçalho, o azul assina todo botão e link clicável e o verde marca benefício conquistado, como o frete grátis. Ao pedir cor ao agente, diga o cargo antes do valor.
Para saber se as três camadas existem de fato, busque o símbolo # seguido de seis caracteres no código. Nenhum componente deveria escrever o valor da cor direto, sempre a variável com o cargo.
/* camada 1: valor bruto */
:root {
--azul-500: #3483fa;
}
/* camada 2: paleta semântica, o cargo da cor */
:root {
--cor-acao: var(--azul-500);
}
[data-theme="dark"] {
--cor-acao: #7cb4ff; /* só a camada do meio muda no tema escuro */
}
/* camada 3: token do componente */
.botao-primario {
background: var(--cor-acao);
color: #fff;
}
.link {
color: var(--cor-acao);
}A armadilha mais comum é o atalho. O Tailwind, o catálogo de classes de estilo usado por quase todo gerador, só enxerga a classe escrita por inteiro no código. Se o agente monta o nome da classe colando a cor na hora, ela some na publicação. Por isso o token vive numa variável de estilo.
O card de produto decide a venda na lista, porque boa parte de quem clica compra ali, sem abrir a página do produto. A ordem de leitura do comprador é a ordem de montagem. Imagem grande, marca com selo, nota com estrela, preço cheio riscado ao lado do atual, parcelamento e a linha de entrega.
Ver como texto
Antes e depois de um card de produto. À esquerda, o card sem hierarquia que o agente devolve quando o pedido não diz a ordem de prioridade: os dez elementos aparecem com o mesmo peso visual, todos no mesmo tamanho de letra, e o olho não sabe onde pousar. À direita, o mesmo card com hierarquia: a imagem ocupa o topo, o título fica pequeno em duas linhas, o preço atual aparece em corpo grande com o valor cheio riscado acima e o percentual de desconto ao lado, o parcelamento vem logo abaixo em corpo menor, e a linha de frete grátis fecha em verde com texto. A conclusão é que a diferença entre os dois cards está no pedido, e não no modelo.
Cada elemento responde a uma objeção antes de a próxima aparecer. O preço resolve se é caro, o parcelamento resolve se cabe no orçamento e a entrega resolve se demora. Ao descrever o card ao agente, liste os elementos nessa ordem e diga qual dúvida cada um resolve.
Sem essa ordem, o agente devolve um card mudo, com tudo no mesmo peso. Foi por isso que o Mercado Livre construiu a hierarquia com tamanho e peso da letra: o preço grande fala mais alto que qualquer moldura.
Borda, selo, numeração e divisória entram quando dizem algo sobre o conteúdo. Numerar seções como 01, 02 e 03 só cabe quando existe sequência, e o selo de frete grátis só cabe quando o frete é grátis mesmo.
O padrão genérico a recusar é o kit de cartões idênticos: conteúdo picado em cartões arredondados iguais, mesma sombra cinza em cada um e degradê como decoração. Tudo com o mesmo peso significa nada com destaque.
Ver como texto
Anatomia anotada de um card de produto, com seis marcadores na ordem de leitura: imagem, marca oficial, nota, preço cheio riscado ao lado do atual, parcelamento e linha de entrega em verde, seguidos do botão comprar. À direita, três balões ligam cada objeção ao elemento que a responde: é caro, ao preço; cabe no orçamento, ao parcelamento; demora, à entrega. Cenário ilustrativo.
No card, dois alvos recebem o dedo: o coração de favoritar e o botão de comprar. Vale o mesmo piso da aula anterior, 24 px, e um coração de 16 px colado no preço é toque errado garantido.
A rolagem infinita cobra caro justamente onde parece inofensiva. Sem endereço próprio, a página dois não existe para o buscador nem para o assistente de IA que cita fontes, e o rodapé nunca aparece. A paginação com número no endereço se indexa.
No outro extremo está a Temu. O aplicativo abre numa roleta girando, com cupom que expira em minutos e aviso de gente vendo o mesmo produto agora. O motor do ciclo é a recompensa variável, premiar de forma imprevisível para a pessoa voltar, o mecanismo do caça-níquel.
Construir isso leva uma tarde, e é por ser fácil que a decisão fica difícil. A venda sobe no mês em que o mecanismo entra, e o custo chega depois, espalhado em devolução, reclamação e procedimento de autoridade.
Foi por acumular essas práticas que a Temu passou a responder à Comissão Europeia. A pesquisa Dark Patterns at Scale, que varreu lojas online, contou 157 cronômetros enganosos em 140 delas.
Cada padrão enganoso tem uma gêmea verdadeira, com o mesmo efeito e sem a mentira. O teste tem três perguntas: de onde vem o número, se o selo sobrevive a um F5 e se você explicaria o mecanismo a um regulador. Corrija primeiro a fonte do prazo e do estoque, depois a arte.
Ver como texto
Cada padrão enganoso tem uma versão verdadeira que produz o mesmo efeito sem a mentira. A pesquisa Dark Patterns at Scale, de Mathur e colegas, achou cento e cinquenta e sete cronômetros enganosos em cento e quarenta lojas. Os cinco pares são estes: o cronômetro que reinicia vira prazo real guardado no servidor, que ao zerar encerra a oferta de verdade; a escassez fabricada, o resta um mentiroso, vira o número que sai do estoque; a avaliação inflada vira prova social com contagem verificável; o constrangimento na recusa vira gamificação cuja recompensa existe e cujas chances são declaradas; e a corrida de obstáculos para cancelar vira cancelamento tão fácil quanto a assinatura. Fechando, o teste de integridade em três perguntas: de onde vem o número, se o selo sobrevive a um reload e se o mecanismo é defensável diante de um regulador. A ordem da correção é trocar primeiro a fonte do prazo e do estoque, e só depois a arte.
Numa distribuidora de bebidas com catálogo para bares, o vermelho da marca vira o token cor de ação. Trocar a identidade passa a ser editar um valor só. O card mostra preço por caixa, quantidade mínima e prazo de entrega, nessa ordem, com o botão "Adicionar 12 unidades" em alvo grande.
Comece recarregando a página de qualquer selo de urgência que já esteja no ar. Se o cronômetro voltar ao início ou o estoque mudar sozinho, o número nasceu no código e sai hoje. Está pronto quando cada número da vitrine tem um campo do sistema por trás.
Guia prático: copiar a ordem das seções do seu setor
A estrutura de uma página de venda muda de setor para setor, e o agente sem instrução entrega a mesma sequência para todos. Nos 51 templates profissionais medidos em 07/10/2026, cada setor tem uma ordem própria, e a chamada para ação muda junto.
| Setor | Ordem típica | Chamada principal |
|---|---|---|
| Advocacia (5 templates) | Topo, empatia, áreas de atuação, como funciona, quem conduz, depoimentos, dúvidas, contato | WhatsApp com mensagem pronta |
| Clínica (5) | Topo, procedimentos, resultados, a clínica, equipe, investimento, depoimentos, dúvidas | Falar com a clínica |
| SaaS (9) | Topo, faixa de logos, recursos, números de caso, tela do produto, depoimentos, chamada final | Teste grátis ou demonstração |
| Restaurante (5) | Início, cardápio, história, galeria, reservas, em páginas separadas | Reservar mesa |
| Imobiliária (3) | Até 18 seções no lançamento, com plantas e cronograma de pagamento | Contato com corretor |
Dois padrões atravessam os setores. A seção de empatia logo depois do topo aparece nos cinco de advocacia: antes de vender o serviço, a página diz que entende a situação. E o canal muda com o público: nos 12 templates em português, o contato vai por WhatsApp e nenhum usa formulário; dos 10 sites com WhatsApp, 8 são esses. Dúvidas frequentes estão em 24 dos 51, depoimentos em 21 e preço ou planos em 32.
Copie a estrutura e adapte o conteúdo. Os 12 templates em português trazem registro profissional fictício, como número de OAB ou CRM de exemplo, e 40 dos 51 têm links que não levam a lugar nenhum. A ordem é aproveitável; o que está dentro de cada seção precisa ser do seu negócio.
Da ordem do setor à página do seu negócio
Cinco passos. A ordem vem do setor; prova, preço e contato vêm de você.
Passo 1: Peça a ordem do setor e o motivo de cada seção
Diga ao agente o setor e peça a sequência de seções com uma linha sobre a dúvida que cada uma responde. Seção sem dúvida associada sai da lista.
Deu certo quando: Cada seção tem uma pergunta do cliente ao lado.
Erro comum: Aceitar a sequência de SaaS, com faixa de logos e tela de produto, num escritório de advocacia.
Passo 2: Escreva a seção de empatia com as palavras do cliente
Logo depois do topo, descreva a situação de quem chega, com frases que ele usaria no WhatsApp. Peça ao atendimento as cinco perguntas que mais ouve.
Deu certo quando: A seção cita uma situação real que o cliente reconhece em três segundos.
Erro comum: Começar pela história do fundador antes de mostrar que entende o problema.
Passo 3: Monte a prova social só com material aprovado
Depoimento entra com autorização de quem falou; nota e contagem entram com a origem anotada. Sem material real, a seção espera em vez de ganhar texto inventado.
Deu certo quando: Cada depoimento tem nome autorizado e cada número tem origem.
Erro comum: Publicar o depoimento de exemplo que veio no template.
Passo 4: Faça as dúvidas frequentes com o elemento nativo
Use details e summary, que abrem e fecham pelo teclado sem JavaScript; com o mesmo atributo name, abrir uma fecha as outras. Responda primeiro preço, prazo e o que acontece depois do contato.
Deu certo quando: As dúvidas abrem por teclado e respondem às três perguntas mais comuns do atendimento.
Erro comum: Escrever dúvidas que ninguém fez só para preencher a seção.
Passo 5: Varra os marcadores antes de publicar
Procure registro profissional de exemplo, telefone fictício, link vazio e e-mail de teste. Cada ocorrência recebe o dado real ou sai.
Deu certo quando: A busca por marcadores volta vazia.
Erro comum: Publicar com um número de registro profissional que não é seu, o que expõe o negócio a problema ético e legal.
No fim você tem: Uma página com a ordem que o seu setor já testou, prova social verificável e nenhum dado de exemplo no ar.
Sócia de uma clínica de fisioterapia em Curitiba que monta a página de pacotes de tratamento
Saúde, agendamento por WhatsApp
Dor
A primeira versão gerada abria com a história da clínica e deixava preço e convênios no fim. As recepcionistas respondiam no WhatsApp as mesmas perguntas que a página não respondia.
Solução
Ela pediu a ordem de clínica: procedimentos, resultados, a clínica, equipe, investimento, depoimentos e dúvidas. As dúvidas vieram da lista das recepcionistas, e cada botão abriu o WhatsApp com uma mensagem diferente por tratamento.
Resultado do exemplo
A recepção passou a saber de qual tratamento vinha cada conversa, e a página respondeu antes as perguntas que mais se repetiam.
Cenário construído para fins didáticos. Números não correspondem a cliente específico.
Guia prático: a busca que conversa com quem procura, no /busca deste portal
Booking e Mercado Livre ensinaram a guardar o filtro no endereço e a nunca deixar a busca vazia. Este guia mostra os detalhes miúdos que fazem a busca falar com a pessoa: o anúncio da contagem para quem usa leitor de tela, a tecla Buscar no teclado do celular, a sugestão quando quase nada aparece e o contador do filtro que bate com a lista. Você sai com a busca de campanha pronta para link compartilhado.
Funções, casos de uso e aplicações
Funções
| Função ou recurso | O que faz | Quando usar | Referência |
|---|---|---|---|
| Elemento <search> | Marca a região de busca como ponto de referência (landmark), atalho que o leitor de tela oferece para pular direto | Em volta do campo e dos filtros; a lista de resultados fica no conteúdo principal | MDN, disponível em todos os navegadores desde outubro de 2023 |
| role="status" com aria-live="polite" | O leitor de tela anuncia "12 resultados" sem tirar o foco do campo | Só na frase curta da contagem; a lista inteira fica de fora | W3C, WCAG 2.2, critério 4.1.3 |
| inputmode e enterkeyhint iguais a search | O teclado do celular mostra a tecla Buscar no lugar de Enter | Todo campo de busca | Portal, src/app/busca/page.tsx |
| KeyboardEvent.isComposing | Diz se a pessoa ainda está compondo um caractere pelo IME, o sistema de entrada de teclados como o japonês | Antes de tratar Enter, Esc e setas no campo; não é recurso Baseline | MDN |
| Contagem do filtro no mesmo conjunto | O número no botão de categoria sai da mesma consulta que monta a lista | Toda busca com filtros e contadores | Portal, src/app/busca/search-results.ts |
| "Você quis dizer" | Sugere a grafia vizinha quando a busca devolve menos de três resultados | Catálogo com termo técnico ou nome de marca | Portal, src/lib/search/suggestions.ts |
Casos de uso
Gerente de marketing de uma rede de escolas de idiomas em Fortaleza
Educação
Dor
A busca de turmas devolvia tela vazia para "ingles noite", sem acento, e o link enviado por WhatsApp abria a busca em branco.
Solução
Pediu ao agente busca sem acento, sugestão quando houver menos de três turmas, consulta e filtros no endereço e a contagem anunciada por role="status".
Resultado do exemplo
O que observar: no relatório de pesquisa no site do Analytics, a fatia de buscas sem resultado nas duas semanas seguintes e os cliques em "Você quis dizer".
Cenário construído para fins didáticos. Números não correspondem a cliente específico.
Analista de mídia de uma editora de livros paradidáticos em Campinas
Marketing digital
Dor
O anúncio de volta às aulas levava para a busca do catálogo, mas o filtro por série escolar não ia para o link, e cada peça abria a mesma lista genérica.
Solução
Guardou consulta e série no endereço (?q=matematica&serie=6ano) e montou uma URL por anúncio, com o contador de cada série saindo da mesma consulta.
Resultado do exemplo
O que observar: por anúncio, a taxa de clique em um livro a partir da busca já filtrada, comparada à lista genérica, depois de sete dias de veiculação.
Cenário construído para fins didáticos. Números não correspondem a cliente específico.
Na prática
A busca deste portal fica em src/app/busca/page.tsx. O formulário tem role="search", o campo traz tipo search, teclado de busca e limite de tamanho, e a contagem mora num parágrafo com role="status". Teclas de navegação esperam o fim da composição de teclado (compondoNoTeclado, em src/lib/educacao/busca-robusta.ts). A consulta entra pelo endereço /busca?q=..., mas área e categoria ainda vivem só na memória da tela: levar as duas ao endereço é o próximo passo que a aula da Booking pede.
<form role="search" aria-label="Buscar no portal" onSubmit={(e) => e.preventDefault()}>
<label htmlFor="portal-search" className="sr-only">Buscar no portal</label>
<input
id="portal-search"
type="search"
aria-controls="portal-search-results"
aria-describedby="portal-search-status"
inputMode="search"
enterKeyHint="search"
autoComplete="off"
spellCheck={false}
maxLength={LIMITE_DO_CATALOGO}
value={query}
onKeyDown={handleKeyDown}
/>
</form>
<p id="portal-search-status" role="status" aria-live="polite" aria-atomic="true">
{allResults.length} resultados para "{query}"
</p><search>
<form id="busca">
<label for="q">Buscar curso</label>
<input id="q" name="q" type="search" inputmode="search" enterkeyhint="search">
<select name="turno"><option value="">Qualquer turno</option><option>noite</option></select>
</form>
</search>
<p id="status" role="status" aria-live="polite"></p>
<ul id="lista"></ul>
<script>
const form = document.getElementById("busca");
// 1. Abre já filtrada pelo link: ?q=ingles&turno=noite
const url = new URL(location.href);
for (const [k, v] of url.searchParams) if (form.elements[k]) form.elements[k].value = v;
function aplicar() {
const dados = new FormData(form);
const params = new URLSearchParams();
for (const [k, v] of dados) if (v) params.set(k, v);
// 2. Grava o estado no endereço sem recarregar
history.replaceState(null, "", "?" + params);
const n = filtrar(params); // sua função de filtro
// 3. Anuncia a contagem sem mover o foco
document.getElementById("status").textContent = n + " cursos encontrados";
}
form.addEventListener("input", aplicar);
form.addEventListener("submit", (e) => { e.preventDefault(); aplicar(); });
aplicar();
</script>Da caixa de texto à busca que conversa
Passo 1: Estado da busca no endereço
Consulta, filtro e página entram na URL. Copie o link, abra em outra aba e compare.
Deu certo quando: O link colado abre a mesma lista, com os mesmos filtros marcados.
Passo 2: Anuncie a contagem
Ligue o leitor de tela do celular (TalkBack ou VoiceOver), digite uma letra e escute.
Erro comum: Pôr aria-live na lista inteira e fazer o leitor ler trinta títulos a cada letra.
Passo 3: Teste o teclado do celular
No celular, a tecla do canto deve dizer Buscar. Com teclado japonês ou chinês, o Enter que confirma o caractere não pode abrir resultado.
Passo 4: Desenhe a busca quase vazia
Digite três termos com erro comum do seu público e veja se a sugestão aparece.
Deu certo quando: Nenhum termo comum termina em tela vazia sem saída.
Passo 5: Contadores que somam o total
A soma dos números dos filtros de categoria bate com o total de "Todos".
No fim você tem: Cada anúncio leva a uma busca já filtrada, e quem usa leitor de tela sabe quantos resultados há sem caçar a lista.
Armadilhas
Busca de campanha: o que evitar e o que pedir
Evitar
Coluna a evitar
- Filtro só na memória da tela, que some ao copiar o link
- Contagem que muda sem aviso para o leitor de tela
- Enter tratado durante a composição do teclado
- Contador do filtro calculado numa consulta e lista em outra
- Tela em branco quando a busca não acha nada
Recomendado
Coluna recomendada
- Consulta, filtros e página no endereço
- Frase curta de contagem com role="status"
- Teclas ignoradas enquanto isComposing for verdadeiro
- Contador e lista saindo do mesmo conjunto
- "Você quis dizer" e um caminho alternativo
O que os prints de 24/10/2026 ensinam
Não houve mudança de padrão relevante no trimestre, então use estes prints como exercício de leitura. Na busca da Booking por Lisboa, cada filtro traz a contagem ao lado, e o cartão de hotel mostra o preço anterior riscado. No Mercado Livre, a oferta do banner informa a data de validade. As duas telas cabem nos critérios do capítulo: urgência só vale com origem que se confere.
Ver como texto
Resultado de busca da Booking.com em português para Lisboa, de 10 a 12 de dezembro, para dois adultos, com 3.728 acomodações encontradas. À esquerda, o mapa, o filtro de orçamento por diária e a lista de filtros mais usados com a contagem de cada um, como Cancelamento grátis com 3186. À direita, cartões de hotel com nota, preço anterior riscado, preço atual e o aviso Temos mais 2 por esse preço.
Ver como texto
Página inicial do Mercado Livre com a barra de busca, o endereço de entrega em Goiânia, o banner amarelo 11.11 Ofertas que você viu na TV com pneus e um fone de ouvido, preços riscados e a frase Oferta válida até 24/10/2026, e seis cartões de atalho: Frete grátis, Entre na sua conta, Meios de pagamento, Menos de R$100, Mais vendidos e Compra garantida.
Ver como texto
Página inicial do nuqs, biblioteca descrita como gerenciador de estado de parâmetros de busca para React, com os botões Documentation e GitHub e, à direita, uma demonstração com um contador, um campo de nome e o código que usa useQueryState para guardar os dois valores no endereço da página.
| Elemento | Sinal bom | Sinal de alerta |
|---|---|---|
| Filtro | Contagem ao lado e filtro preservado no endereço | Filtro some ao recarregar a página |
| Preço riscado | O preço anterior foi praticado e há registro | Preço anterior que nunca existiu |
| Aviso de estoque | Vem do estoque real, atualizado na hora | Número fixo que aparece em todo produto |
| Prazo de oferta | Data escrita, igual para todos | Cronômetro que reinicia a cada visita |
| Convite ao login | Aparece depois que a pessoa vê o resultado | Escurece a lista antes de qualquer interação |
Fonte: Critérios do capítulo aplicados aos prints de 24/10/2026.
Faça agora: audite a busca do site da empresa em 15 minutos
Passo 1: Faça uma busca no site, aplique dois filtros e copie o endereço da página.
Deu certo quando: O endereço mostra os filtros escolhidos, algo como ?categoria=...&preco=...
Passo 2: Cole o endereço numa aba anônima e aperte F5.
Deu certo quando: A mesma lista aparece com os mesmos filtros.
Erro comum: Lista sem filtro: quem receber o link pelo WhatsApp vê outra coisa.
Passo 3: No celular, abra o painel de filtros e tente fechá-lo.
Deu certo quando: O botão de fechar é visível e fácil de tocar com o polegar.
Passo 4: Escolha um aviso de urgência ou preço riscado e pergunte ao time de onde vem o número.
Deu certo quando: Uma resposta com a fonte do dado e a regra escrita.
Erro comum: "É padrão do tema": número decorativo, que vira risco jurídico.
No fim você tem: Uma lista com até quatro correções, cada uma com o sinal de alerta que a motivou.
Seu caderno neste capítulo
Abrir o caderno completoSelecione um trecho do capítulo para destacar ou anotar. Nos vídeos e áudios, use Anotar este momento. No teclado, selecione com Shift e as setas e use Alt+Shift+D para destacar ou Alt+Shift+N para anotar.
Salvo neste navegador. Entre na sua conta para levar o caderno a outros aparelhos.
Entre na sua conta para compartilhar o que aprendeu e convidar alguém para estudar com você.
Conexões deste capítulo
Veja o que estudar antes e para onde seguir depois, explore os conceitos e compare abordagens em outros cursos. Sugestões marcadas como “sugerido pelo grafo” vêm dos assuntos em comum, não do índice do curso.
Estude antes
- CursoClaude Code: do zero à prática
- CursoSíntese e didática com IAsugerido pelo grafoDepois de escolher a informação essencial e desenhar hierarquia, gráficos e fluxos compreensíveis, o aluno pode aplicar esses critérios às interfaces do curso de frontend. A ponte conecta clareza da mensagem, acessibilidade e decisões de apresentação.
- CursoNode.js: JavaScript no Servidorsugerido pelo grafo9 capítulos de “Frontends com Vibecoding” usam conceitos apresentados em “Node.js: JavaScript no Servidor”.
- CursoSkills e delegação com IAsugerido pelo grafo9 capítulos de “Frontends com Vibecoding” usam conceitos apresentados em “Skills e delegação com IA”.
Conceitos deste capítulo
O mesmo assunto em outros cursos
- CRO: Otimização de Conversão e ExperimentaçãoÉtica e risco: as táticas que viraram processoExaminar conexões de Ética e risco: as táticas que viraram processo
- Motor de crescimento para IAO que corrigir primeiro na página do anúncioExaminar conexões de O que corrigir primeiro na página do anúncio
- Meta Ads 2027Preparar perfil, página e atendimento para não perder o cliqueExaminar conexões de Preparar perfil, página e atendimento para não perder o clique
- SEO e GEO para TurismoOTAs e canal direto: onde a reserva gera mais receitaExaminar conexões de OTAs e canal direto: onde a reserva gera mais receita
Terminou a leitura?
Leve uma ideia para a prática
Escolha uma atividade no painel e volte a este curso quando quiser.
Atividades e evolução ficam reunidas no painel da sua conta.
Laboratórios ao vivo deste curso
Cada laboratório monta a biblioteca real dentro da aula, com controles para você mexer e o código do exemplo para copiar. O texto de reserva descreve a demonstração para quem lê sem JavaScript. O link abre o capítulo já no ponto do laboratório.
Base UI
Prenda o foco num diálogo sem escrever o comportamento
Abra a janela Agendar visita, percorra os campos com Tab, feche com Esc e acompanhe no painel onde o foco está e para onde ele volta.
Pacote
Abrir no capítuloConstruir componentes, usar o registro e publicar o catálogo@base-ui/reactLucide e Iconify
Mantenha uma família de ícones coerente e nomeie cada botão
Mude tamanho, traço e cor da barra, veja o símbolo do Iconify acompanhar o Lucide e rode a auditoria de nomes acessíveis.
Pacote
Abrir no capítuloProjetar uma linguagem de ícones e ilustraçãolucide-react, @iconify/reactMotion
Testar os três sinais que autorizam o terceiro degrau
Reproduza a entrada em sequência, aperte o botão com mola e arraste o cartão; ajuste rigidez e amortecimento e veja o que muda.
Pacote
Abrir no capítuloProjetar movimento, assinatura e narrativas por rolagemmotionVidstack
Ver o que separa um player de um vídeo cru
Dê o play, troque a velocidade e ligue a legenda; o painel ao lado mostra o estado que o player publica e que a etiqueta crua esconde.
Pacote
Abrir no capítuloProjetar movimento, assinatura e narrativas por rolagem@vidstack/reactcmdk
Achar um destino entre quarenta digitando três letras
Abra a paleta, digite fat e escolha um item só pelo teclado; o painel embaixo conta o que o filtro deixou passar e quanto tempo levou.
Pacote
Abrir no capítuloConstruir formulários e estados de interaçãocmdknumber-flow
Animar indicadores que mudam ao vivo com formato pt-BR
Veja três indicadores fictícios rolarem a cada troca e compare com o número em texto puro. Pause, reinicie e observe o separador de milhar.
Pacote
Abrir no capítuloProjetar gráficos e painéis pela decisão@number-flow/reactApache ECharts
Medir o custo de desenhar 200 mil pontos com o ECharts
Troque o tipo de gráfico e o volume de pontos, leia o tempo de desenho e alterne o eixo em zero. Mude o tema do site e veja as cores refazerem.
Pacote
Abrir no capítuloProjetar gráficos e painéis pela decisãoechartsApache ECharts
Painel grande com visões coordenadas
Clique num canal para filtrar todas as visões, troque a densidade entre 6, 9 e 12 visões, alterne tema e movimento e abra a tela cheia.
Pacote
Abrir no capítuloProjetar gráficos e painéis pela decisãoechartssharp e svgo
Escolher a variante certa da imagem e conferir o teto de 150 KB
Arraste a largura da tela simulada, troque a densidade entre 1x e 2x e veja qual arquivo o navegador escolhe, quanto ele pesa e se cabe no orçamento.
Pacote
Abrir no capítuloValidar desempenho, autenticação e segurançasharp, svgoReact Flow (xyflow)
Disparar um pedido e ver o orquestrador distribuir, conferir e responder
Alterne paralelo e sequencial, ligue e desligue a verificação e use a medição real; observe o tempo de parede em cada combinação.
Pacote
Abrir no capítuloConstruir as cenas do orquestrador, do paralelismo e do robô@xyflow/reactGSAP, Web Workers e number-flow
Dividir mil tarefas entre trabalhadores reais e correr três ritmos de geração
Execute com um trabalhador, depois com quatro e oito, e compare o tempo; em seguida percorra a corrida e separe a espera inicial do ritmo.
Pacote
Abrir no capítuloConstruir as cenas do orquestrador, do paralelismo e do robôgsap, @number-flow/reactThree.js com React Three Fiber, drei, Rapier e XR
Carregar o braço robótico, ver a física trabalhar e entrar na cena com o visor
Carregue a cena pelo botão, inicie o ciclo, mostre os ângulos das juntas, troque a câmera e a velocidade; com visor, entre em realidade virtual.
Pacote
Abrir no capítuloConstruir as cenas do orquestrador, do paralelismo e do robôthree, @react-three/fiber, @react-three/drei, @react-three/rapier, @react-three/xrMotion
Ver quatro agentes em raias trocando mensagens e a revisão devolvendo um trecho
Reproduza os 60 s de modelo, percorra o tempo pelo controle e esconda as mensagens para comparar a leitura; repare no tempo de parede contra a soma.
Pacote
Abrir no capítuloEspecificar, medir e produzir as cenas da máquinamotionMediaRecorder, Canvas 2D e Long Animation Frames (plataforma)
Medir o quadro da cena e gravar seis segundos dela em vídeo
Suba as partículas, force um bloqueio de 300 ms e leia o medidor; depois grave seis segundos, veja o codec escolhido e baixe o arquivo.
Pacote
Abrir no capítuloEspecificar, medir e produzir as cenas da máquinasem pacotesigma.js, graphology com ForceAtlas2 e cosmos.gl
Ver o grafo real do curso e um grafo de milhares de nós se organizarem em aglomerados
Rode o layout no grafo real, passe o mouse pelos nós e busque uma entidade; troque para 20 mil nós e leia o medidor; depois carregue o modo massivo na placa de vídeo.
Pacote
Abrir no capítuloAnimar um grafo de conhecimento amplo em movimentosigma, graphology, graphology-layout-forceatlas2, graphology-generators, @cosmos.gl/graph