Avaliar busca, conversão e padrões de comércio

Uma busca boa reduz dezenas de opções a uma decisão em poucos segundos. Ela cobra duas disciplinas: o estado guardado no endereço e o número de cada aviso com origem rastreável. Quem vende algo com data, vaga ou estoque pelo próprio site carrega essa conta a cada tela nova.

Booking e LATAM resolvem essa busca de formas diferentes, e cada uma cobra um preço distinto em troca. O que separa persuasão de armadilha é sempre o mesmo teste: de onde vem o número que a tela mostra.

A home da Booking é dominada por uma caixa de busca, porque quem chega já sabe o destino e quer digitar. A interface pede a intenção primeiro: destino, datas e quantidade de pessoas.

Os resultados oferecem dezenas de filtros, e cada pessoa usa dois ou três. O valor está na combinação, recalculada na hora, sem apagar o caminho de volta.

A LATAM vende a própria passagem, sem agregador no meio, e cada tela mal pensada vira venda perdida. São seis telas que removem alternativas, da busca ao calendário de preços, deste à lista de voos, à tarifa e ao assento.

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 cor, e o dia sem voo vira botão desativado. O rodapé diz 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; vira armadilha quando a restrição some da tela e reaparece no pagamento.

O que essa busca cobra primeiro é disciplina de estado. Filtro, aba e página moram no endereço, como o número da página no livro. É isso que faz o link filtrado abrir igual em outra aba, o voltar funcionar e o F5 devolver a mesma lista.

Testar isso é rápido: 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.

O manual confirma o nuqs para esse trabalho. É uma biblioteca (código pronto que o site importa, como uma peça de catálogo) que guarda filtro, aba e paginação no endereço. Use em toda lista com filtro, aba ou página; deixe fora o passageiro, como o menu aberto ou o texto sendo digitado.

O plano B sem a biblioteca é ler e escrever os parâmetros do endereço à mão. O manual lista aba, filtro e paginação fora do endereço como anti-padrão, porque o primeiro F5 apaga tudo.

Numa pousada, o filtro de piscina e de quarto para quatro fica no endereço, e a recepção manda o link pelo WhatsApp. Esse endereço filtrado também vira página que o buscador e o assistente de IA abrem e citam.

No celular, o filtro abre num modal (a janela que cobre a tela e pede decisão antes de voltar, como a porta do provador). O manual exige fechamento visível e tocável.

O botão de fechar fica na tela, com alvo de toque de 24 px. Esse piso é o critério 2.5.8 da WCAG 2.2, nível AA (a norma internacional de acessibilidade na web), que exige 24 por 24 pixels.

A régua AAA e a da Apple pedem 44 px; o Android, 48 dp. Tocar fora e a tecla Esc são atalhos, e o botão continua lá.

No celular não existe tecla Esc, e ninguém descobre o toque fora por conta própria. Abrir o filtro e procurar esse botão antes de publicar decide se o fechamento é real ou só um atalho escondido.

A mesma tela da Booking dispara cinco gatilhos ao mesmo tempo: escassez, prova social, atividade ao vivo, aversão à perda e ancoragem. Juntos, pesam mais que cada um isolado, e auditar um por um nunca revela o conjunto: revise a tela montada, como quem visita a vê.

O que separa persuasão de padrão enganoso é o dado por trás do selo. "Resta 1" honesto significa que resta um no sistema; o enganoso mostra um número decidido no código.

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 conversão chega meses antes da exposição.

A LATAM acrescenta duas linhas à régua. A caixa do seguro-viagem nasce desmarcada: o Senacon (o órgão federal que fiscaliza a defesa do consumidor) já multou companhia aérea pela caixa pré-marcada. A taxa aparece antes do último passo, porque a taxa revelada só no fim ninguém teve chance de comparar.

A mensagem de erro no pagamento separa produto maduro de protótipo. "Tente mais tarde" sem motivo é o pior padrão no momento mais frágil da compra.

Antes de desenhar, o agente (a IA que escreve o site a partir do seu pedido) lê a skill frontend-design, um roteiro de design. A regra dela para erro é direta: explicar o que falhou e como resolver, na voz da interface, sem pedir desculpa e sem vaguear.

O resultado vazio é um convite para 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 a ação mantém o nome no fluxo: "Reservar" produz "Reserva confirmada".

O aviso "resta 1 quarto" só entra quando o sistema de reservas devolve esse número. A busca vazia da pousada sugere o fim de semana seguinte, em vez de mostrar a tela em branco.

Para cada aviso de escassez, prazo, contagem ou preço riscado, escreva de qual campo do sistema o número vem. Se você não souber apontar o campo, o número foi digitado no código, e o selo sai do ar.

Antes de publicar a próxima tela de busca, aplique um filtro, aperte F5 e confirme que a lista continua filtrada. Se o filtro sumir, peça ao agente que filtro, aba e página passem a viver no endereço, com nuqs ou os parâmetros nativos.

Mercado Livre e Temu: cor como token, card por objeção, padrão enganoso

Um card sem ordem de leitura deixa a venda em aberto. Um relógio de oferta que reinicia a cada F5 é a prova de urgência falsa que a FTC já multou. Cor com cargo, card ordenado pela dúvida do comprador e urgência com origem separam a vitrine do Mercado Livre da roleta da Temu.

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.

O Mercado Livre guarda a cor da loja como token (o valor salvo com um nome, como a etiqueta na lata de tinta), em três camadas encadeadas. A primeira guarda o valor bruto, o hexadecimal numerado como azul-500. A segunda é a paleta semântica: a variável cor de ação aponta para aquele azul e descreve a função.

A terceira camada é o token do componente (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, nunca para o hexadecimal. O componente só conhece o nome. Trocar a marca vira editar a camada de baixo; criar o tema escuro vira redefinir a do meio.

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. Quando pedir cor ao agente, diga o cargo antes do valor: uma de marca, uma de ação, uma de sucesso.

Contar o hexadecimal solto revela se as três camadas existem de fato. Busque o símbolo # seguido de seis caracteres em todo o código: nenhum componente deveria escrever o valor direto, sempre a variável com o cargo da cor.

A armadilha mais comum é o atalho. O Tailwind (o catálogo de classes prontas de estilo) só enxerga a classe escrita por inteiro no código. Se o agente monta o nome da classe colando a cor em tempo de execução, ela some na publicação. O manual lista o caso como anti-padrão; o token vive numa variável de CSS.

O card de produto decide a venda na lista: 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.

Cada elemento responde a uma objeção antes da próxima aparecer: o preço resolve se é caro, o parcelamento se cabe no orçamento e a entrega se demora. Quando descrever o card ao agente, liste os elementos nessa ordem e diga qual dúvida cada um resolve. Sem a ordem, o agente devolve um card mudo, com tudo no mesmo peso.

Estrutura visual é informação, diz a skill frontend-design (o roteiro de design que o agente lê antes de desenhar). Borda, selo, numeração e divisória entram quando dizem algo sobre o conteúdo. Numerar seções como 01, 02, 03 só cabe quando o conteúdo é uma sequência, e o selo de frete grátis só cabe quando o frete é grátis.

O padrão genérico que a skill nomeia é o kit de cartões idênticos. O conteúdo vem picado em cartões arredondados iguais, mesmo raio de canto em tudo, mesma sombra cinza em cada um e degradê como decoração. A hierarquia do card do Mercado Livre nasce de tamanho e peso da letra; o preço grande fala mais que qualquer moldura.

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 é o segundo anti-padrão do manual. Sem endereço próprio, a página dois não existe para o buscador nem para a IA que cita, e o rodapé some. Isso pesa onde SEO (a otimização para o buscador achar a página) e acessibilidade importam. A paginação com número no endereço, da aula sobre Booking e LATAM, 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. O que sustenta o 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; a decisão difícil é até onde ir.

A venda sobe no mês em que o mecanismo entra. O custo chega depois, espalhado em devolução, reclamação e, no limite, num procedimento de autoridade. Foi por acumular essas práticas que a Temu passou a responder à Comissão Europeia. A pesquisa Dark Patterns at Scale contou 157 cronômetros enganosos em 140 lojas.

Cada padrão enganoso tem uma gêmea verdadeira, com o mesmo efeito e sem a mentira. O teste tem três perguntas, nesta ordem: de onde vem o número, o selo sobrevive a um F5 e você explicaria o mecanismo a um regulador. Falhou uma, é risco disfarçado. Corrija primeiro a fonte do prazo e do estoque, depois a arte.

Numa distribuidora de bebidas com catálogo para bares, o vermelho da marca vira o token cor de ação, e trocar a identidade vira editar um valor só. O card mostra o preço por caixa, a quantidade mínima e o prazo de entrega, nessa ordem, com o botão "Adicionar 12 unidades" de 44 px.

Antes de publicar qualquer selo de urgência, recarregue a página. Se o cronômetro voltar ao início ou o estoque mudar sozinho, o número nasceu no código. Troque pela versão real: o prazo guardado no servidor e a contagem lida do estoque verdadeiro.