7 erros comuns de sites de IA que são fáceis de evitar

O sócio geral da Y Combinator, Aaron Epstein, foi acompanhado por Raphael Schaad, fundador do Cron que foi vendido para a Notion, para discutir erros comuns cometidos com sites projetados por IA. Eles identificaram sete erros comuns cometidos pelos codificadores de vibração em seus sites que devem ser evitados.

Positivos e negativos

O podcast começou reconhecendo que ser capaz de codificar um site com vibração é uma coisa positiva que não precisa dar errado só porque eles não são designers. Então eles começaram a visitar sites codificados por vibe e a encontrar vários problemas que se enquadravam nas sete categorias a seguir.

1. Tendências genéricas de design

O primeiro problema destacado é a tendência de deixar a IA decidir a aparência. Uma discussão recente no Twitter chamou a atenção para pessoas que recorrem à IA e perguntam: “me dê algo moderno” e o que acabam conseguindo é algo genérico. E isso não deveria ser surpreendente, porque se você deixar as escolhas para um LLM, obterá 100% as opções de design mais comuns.

O design pode parecer moderno isoladamente, mas perde valor de marca porque carece de exclusividade, parece familiar, genérico e pouco original.

Eles citaram cinco exemplos de tendências genéricas de design:

1. Uso excessivo de gradientes roxos
2. Repetindo padrões genéricos de design de IA
3. Usando layouts de bento-box sem originalidade
4. Usando clichês visuais de painel falso
5. Baseando-se em ícones padrão ou elementos semelhantes a emojis

Todas essas tendências de design nas quais os LLMs se apoiam acabam criando uma experiência visual semelhante a outros sites construídos com IA.

Rafael explicou:

“Tudo isso começou quando eu pensei tarde da noite e twittei que vejo muitos efeitos idiotas de pairar nas páginas de destino de startups hoje em dia, presumivelmente codificados por vibração. E então eu estava curioso para descascar a camada lá atrás.

É tipo, como esses efeitos, como eu pensei, eram idiotas, como eles chegaram aos LLMs e por que estão em toda parte agora?

Algumas outras tendências que então eram como gradientes roxos. De repente, todos os sites de startups tinham gradientes roxos em todos os lugares. Ou essas seções que desaparecem conforme você entra, conforme você rola, e elas aparecem e desaparecem.

Aaron observou que todas essas tendências de design não são inerentemente ruins. O que os torna ruins agora é que os LLMs os estão tornando comuns, drenando-os assim de qualquer originalidade que costumavam ter.

Raphael concordou com a avaliação de Aaron, explicando como isso acontece:

“E uma das coisas principais foi que quando havia um bom site estabelecendo uma tendência, demorava um pouco no velho mundo para que outros copiassem essas tendências.

Mas agora com os LLMs, se houver um bom site com gradiente roxo, ele entra no LLM porque o LLM é treinado como os bons exemplos que são vinculados a muitos. E então, de repente, como na semana seguinte, todos os sites de startups parecem iguais.”

2. Feedback inesperado sobre a interação do usuário

O feedback da interação do usuário é importante porque elimina a incerteza ao reconhecer que um clique fez alguma coisa. O feedback da interação do usuário sinaliza que algo é clicável. Todas essas coisas fazem parte de uma linguagem de design que os visitantes do site esperam ver.

O feedback de interação inesperado é uma experiência ruim para o usuário porque quebra o padrão que o usuário espera quando visita um site. É como andar por um saguão e esbarrar em uma parede de vidro no meio da sala. Não deveria estar lá e distrai e desorienta, uma experiência ruim para o usuário.

O podcast recomendou evitar estas sete interações:

1. Linhas seguindo o usuário na página
2. Luzes de seguimento do cursor
3. Efeitos de fundo estilo meteoro
4. Fade-ins automáticos
5. Mover botões ou alterar elementos da UI
6. Efeitos de foco que movem elementos sem um propósito claro
7. Animações que chamam mais atenção que o produto

3. Padrões UX quebrados ou confusos

São erros em que a página fica mais difícil de usar porque o modelo de interação não é claro.

• Levantamento de rolagem
• Navegação fora do padrão
• Menus que saltam ou se comportam de maneira inconsistente
• Elementos de aparência clicável que não se comportam de maneira clara
• Botões que se movem ou avançam automaticamente
• Interações apenas ao passar o mouse
• Funcionalidade oculta por trás do foco
• Comportamento de cabeçalho fixo duplicado ou estranho

O sequestro de rolagem foi um dos problemas mais comuns encontrados, parando quatro vezes para comentar sobre outro site que estava sequestrando a rolagem do navegador.

A certa altura, Raphael comentou:

“Mas ainda é como passar por melaço… Como sequestrar a… rolagem nativa real do navegador para fazer alguma coisa sofisticada com JavaScript para realmente ter os ganchos para fazer todas essas animações.”

Outro exemplo de sequestro de rolagem foi o subproduto de uma animação que carregava e impedia o progresso do usuário.

Aaron Epstein comentou enquanto rolava uma página:

“O que acontece quando descemos mais?

…Valorizados e confiáveis, ok, temos um monte de linhas circulando por toda parte. Tudo bem, então temos essa linha seguindo você no padrão da página novamente.”

Captura de tela: “E agora estamos com a rolagem”

Nesse momento a página parou de responder por causa de todas as animações que estavam rolando e o Raphael disse:

E agora estamos com a rolagem.

Estamos presos nesta posição aqui do site para construir essa animação.

E eu me pergunto o que isso quer me dizer, por que é importante me capturar aqui neste ponto para construir esta animação, onde é como mostrá-la já no estado de construção?”

Aaron observou que a animação e o scroll jacking o estão distraindo do que a página está tentando comunicar.

Ele observou:

“E acho que a animação está chamando toda a minha atenção, e não o que está escrito aqui no lado esquerdo. Então, nem estou percebendo nada disso.

E isso não é, do lado certo, não está me dando informações visuais suficientes para comunicar algo valioso sobre o que eles fazem ou como o produto funciona.

Então eu meio que sinto falta de tudo aqui do lado.

A animação é muito perturbadora.”

O principal problema aqui é que o site para de se comportar como os usuários esperam. Isso cria atrito, confusão e, às vezes, desconfiança, mas certamente confusão, que é o oposto do que um site deveria fazer: oferecer clareza e comunicar.

4. Mensagens fracas e explicação do produto

São erros onde o design parece impressionante, mas o visitante ainda não entende o produto.

• Proposta de valor pouco clara
• Explicação ausente ou vaga sobre o que o produto faz
• Não deixar claro para quem é o produto
• Não explicar por que o público deveria se importar
• Poucas informações úteis acima da dobra
• Demonstrações de produtos ou exemplos sem contexto suficiente

Vejo muito esse tipo de coisa em sites do tipo B2B onde você lê o conteúdo e nada na página se conecta com a explicação do que é o produto ou serviço, muito menos com a comunicação por que devo me importar. No passado, era um lixo humano escrito por alguém que está mais preocupado em soar técnico e avançado. Mas hoje em dia é um desperdício de IA onde o conteúdo carece de propósito e é propenso a usar palavras ambíguas que têm mais de um significado ou palavras que são basicamente preguiçosas porque não fazem nenhum trabalho, não realizam nada, não conseguem mover a bola no campo.

Uma landing page é um canal de aquisição de clientes. Se os visitantes não conseguirem compreender rapidamente o produto e o seu valor, o design falhou.

5. Hierarquia e estrutura de informações deficientes

São erros em que a página contém muitos elementos visuais ou textuais concorrentes. O principal aqui são os elementos visuais ou de texto que competem pela atenção do visitante do site.

• Muitos estilos de texto
• Rótulos extras que não acrescentam significado
• Hierarquia fraca entre logotipo, título, subtítulo e texto de apoio
• Seções que parecem visualmente sobrecarregadas
• Elementos decorativos que acrescentam espaço vertical sem melhorar a clareza

A IA pode adicionar uma estrutura que parece projetada, mas a estrutura pode não ajudar o leitor a processar a página. Esteja sempre ciente de que a IA tende a produzir elementos de conteúdo que parecem estar ocupados trabalhando, mas não estão fazendo nenhum trabalho. E quando digo trabalho, quero dizer fazer algo com propósito, por um motivo. Cada palavra e elemento visual deve funcionar, realizar alguma coisa. Isso é algo que você deve estar ciente ao projetar com IA.

6. Marca e sistema visual inconsistentes

São erros em que o site não possui uma identidade unificada. O site pode conter recursos de imagem atraentes, mas eles não parecem fazer parte de uma marca ou estilo visual coerente. Essas são características de uma IA que é solicitada a fazer algo moderno, moderno ou estiloso, mas sem ter uma linguagem visual ou sistema estabelecido.

• Linguagem visual inconsistente entre seções
• Cores que não parecem coordenadas com o logotipo ou marca
• Visuais do produto que não correspondem ao estilo da página de destino
• Seções que parecem ter sido geradas separadamente
• Escolhas de marca que parecem herdadas de padrões de IA, em vez de intencionais

7. Falta de julgamento baseado na experiência e excesso de confiança na IA

Este é o problema subjacente por trás de cada categoria de problema com sites mal codificados. A IA permite que qualquer pessoa projete um site e crie ativos de imagem e texto. Mas precisa de orientação firme de alguém com experiência e conhecimento. A qualidade da saída depende inteiramente da qualidade do prompt, do que foi inserido.

O problema não é que a IA torne a IA um desperdício. A falta de experiência, de expertise é o que leva ao desleixo.

Aqui estão os problemas que levam a sites com código de vibração mal projetados:

• Aceitando todas as alterações de IA
• Terceirizando o gosto para o LLM
• Deixando a IA decidir a direção da marca
• Começando pela produção de IA em vez da estratégia de marca
• Gastar tempo economizado em mais efeitos em vez de pensar com mais clareza
• Esquecendo que o humano agora é o editor

O insight e a conclusão da revisão de sites mal codificados é que a IA remove o atrito técnico, mas não substitui o julgamento que vem da experiência e do conhecimento. A pessoa que codifica um site ainda precisa decidir o que melhor atende ao visitante do site e ao objetivo do negócio.

Assista ao podcast: Erros comuns em sites codificados pelo Vibe

Imagem em destaque da Shutterstock/Cast Of Thousands