Sites chamativos: estrutura vale mais que visual

Estrutura e organização de sites: os três níveis que decidem se a página é entendida Três níveis de organização — e cada um falha de um jeito 1. ENTRE PÁGINAS Quais páginas existem e como se conectam menu · caminho · nomes RESPONDE: onde estou e para onde posso ir 2. DENTRO DA PÁGINA A ordem em que a informação aparece tamanho · peso · espaço · posição RESPONDE: o que é mais importante aqui 3. DENTRO DO TEXTO Se dá para percorrer a página rapidamente subtítulos · blocos curtos · listas RESPONDE: consigo achar o que me interessa Chamar "organização" aos três esconde o problema real Cada nível falha de um jeito diferente — e tem solução diferente
TL;DR — Resumo em 4 pontos:
  • Correção: "chamativo" é a métrica errada. Quem abriu a página já deu a atenção — o site precisa não perdê-la.
  • Organização são três coisas diferentes: entre páginas, dentro da página e dentro do texto.
  • Correção: não é a cor vibrante que prende o olhar — é o contraste. A função da cor é hierarquizar.
  • O teste dos 5 segundos revela o problema sem ferramenta nenhuma.

O texto anterior definiu "chamativo" com as mesmas palavras

A versão anterior perguntava "o que faz um site ser chamativo?", respondia "simples!" e definia: "um site chamativo é aquele que atrai e mantém a atenção dos usuários" — exatamente a mesma frase que já havia usado dois parágrafos antes. Em seguida escrevia que "entender a importância de um site chamativo é entender a importância de uma boa experiência do usuário", que é uma frase circular fechada em si mesma.

O texto também se contradizia: afirmava que "um visual atraente por si só não basta" e listava, logo depois, "design atrativo, cores vibrantes e imagens de alto impacto" como os ingredientes essenciais. E encerrava com uma seção sobre como escolher uma agência, indicando a própria, mais a promessa de "transformar seu site de medíocre a magnífico".

A palavra "organização" aparecia oito vezes sem que o texto dissesse, uma única vez, o que organizar. Este texto responde a isso — e começa desmontando o pressuposto do título.

Correção: "chamativo" é a métrica errada

"Site chamativo" sugere que a tarefa do site é chamar atenção. Não é — e essa confusão leva a decisões caras.

Quem abriu a sua página já deu a atenção. Ela foi conquistada antes: no resultado de busca, no anúncio, na indicação de alguém, no link enviado por mensagem. No instante em que a página carrega, a atenção está no seu bolso. O trabalho do site não é conquistá-la — é não perdê-la.

E ela se perde por confusão, não por falta de impacto visual. A pessoa não vai embora porque a página é discreta demais; vai embora porque não entendeu o que a empresa faz, não achou o que procurava ou não soube qual o próximo passo. Nenhum desses três problemas se resolve com mais cor.

Trocada a métrica, a pergunta certa aparece: quanto esforço a minha página exige de quem chega? Estrutura e organização existem para reduzir esse esforço — e é por isso que valem mais que o visual.

Correção: não é a cor vibrante que segura

O texto anterior recomendava "cores vibrantes" e "imagens de alto impacto". O mecanismo não é esse.

O olho não é atraído por saturação — é atraído por diferença. Numa página em que tudo é forte, nada se destaca, inclusive o botão que interessa. É por isso que sites bem resolvidos usam pouca cor de destaque: para que ela signifique algo quando aparecer.

A função da cor em um site é hierarquizar e informar: dizer o que é clicável, o que é o caminho principal, o que é secundário, o que é alerta. Cor usada para enfeitar deixa de cumprir esse papel — e o visitante passa a ter de descobrir sozinho onde clicar.

Há ainda a parte que a recomendação antiga ignorava: contraste suficiente entre texto e fundo é o que permite ler a página no celular, sob o sol ou por quem enxerga menos. Isso é requisito, não estilo — e está detalhado em curiosidades sobre criação de sites.

Os 3 níveis de organização

Chamar tudo de "organização" esconde o problema. São três coisas diferentes, que falham de maneiras diferentes e têm soluções diferentes:

  • Entre páginas. Quais páginas existem e como se conectam. Responde a "onde estou e para onde posso ir".
  • Dentro da página. A ordem em que a informação aparece e o peso visual de cada bloco. Responde a "o que é mais importante aqui".
  • Dentro do texto. Subtítulos, tamanho dos blocos, listas. Responde a "consigo achar o que me interessa sem ler tudo".

Um site pode ter um nível impecável e outro quebrado — e o sintoma é sempre parecido: a pessoa sai sem fazer nada. Diagnosticar qual dos três falhou é o que evita refazer a coisa errada.

O menu não é decoração do topo: é o índice do site e a promessa do que existe ali dentro. Três regras resolvem quase tudo.

Poucos itens. Entre quatro e sete no menu principal, porque essa é a quantidade que se lê de uma vez. Mais que isso vira parede de texto e ninguém lê.

Nomes que alguém de fora entende. É aqui que a maioria falha, e por um motivo específico: quem escreve o menu conhece a empresa por dentro. Nomes de produtos internos, siglas e criações de marca não dizem nada para quem chegou agora. O teste é direto — mostre só o menu para alguém e peça que descreva o que espera encontrar em cada item.

Contato sempre visível. Não escondido em uma única página no fim do menu: presente no topo, no rodapé e ao fim de cada página de serviço. A decisão de falar com você não acontece num lugar previsível.

O mito dos três cliques

Existe uma regra repetida há décadas segundo a qual tudo precisa estar a no máximo três cliques da home. Ela não se sustenta.

As pessoas não contam cliques nem desistem no quarto. Elas desistem quando um clique não parece levar a lugar nenhum — quando o item não corresponde ao que prometia, quando a página seguinte não tem relação com o esperado, quando não fica claro onde se está.

Na prática, um caminho de cinco passos óbvios funciona melhor que dois passos confusos. O critério útil não é a distância, e sim a previsibilidade: a cada clique, a pessoa precisa saber onde chegou e qual o próximo passo possível.

Nível 2 — dentro da página: hierarquia visual

Hierarquia visual é o que decide para onde o olho vai primeiro, e ela é construída com cinco ferramentas — nenhuma delas é "cor bonita":

  • Tamanho. Maior é lido antes. Por isso o título principal precisa ser visivelmente maior que os demais.
  • Peso. Negrito e traço mais grosso pesam mais que o texto comum — e por isso perdem efeito quando tudo está em negrito.
  • Espaço. O que tem espaço em volta parece mais importante. É a ferramenta mais barata e a menos usada.
  • Contraste. O elemento que destoa do padrão da página chama atenção — desde que o padrão exista.
  • Posição. O que está mais acima e mais à esquerda é visto antes, na maioria dos casos.

A pergunta que organiza a página é uma só: se a pessoa vir apenas um elemento desta tela, qual deve ser? A resposta define o que recebe tamanho, peso e espaço — e o que precisa recuar.

Um elemento principal por tela

Este é o erro mais comum em páginas de empresa: três ou quatro botões disputando destaque na mesma tela. "Fale conosco", "Peça uma proposta", "Conheça os planos", "Baixe o material" — todos coloridos, todos do mesmo tamanho.

O efeito é o oposto do pretendido. Quando tudo é prioridade, nada é, e a pessoa que precisaria decidir uma coisa acaba decidindo nenhuma. Excesso de opção não amplia a escolha; ela paralisa.

A regra prática: uma ação principal por tela, com destaque real, e as demais em segundo plano — texto simples, botão discreto, link. Não significa esconder as outras: significa deixar claro qual é a recomendada.

Seu site é bonito e ninguém entra em contato? A Agência Fort resolve estrutura antes de estética — porque é a confusão, e não a discrição, que faz as pessoas saírem. Fale pelo WhatsApp.

Nível 3 — dentro do texto: escaneabilidade

O terceiro nível é o mais ignorado em sites de empresa, porque parece assunto de redação e não de estrutura. É dos dois.

Ninguém lê uma página de site palavra por palavra na primeira passada: percorre, procurando um sinal de que aquilo responde à dúvida que trouxe a pessoa até ali. Uma página sem subtítulos, com parágrafos longos e sem listas, não pode ser percorrida — só lida do começo ao fim, o que quase ninguém faz.

O mínimo funcional: um subtítulo a cada bloco de assunto, parágrafos de duas a cinco linhas, listas quando houver enumeração, e negrito apenas na informação que decide — não em frases inteiras. As regras completas de escrita estão em como escrever bem para um blog, e valem igualmente para páginas de serviço.

O espaço em branco não é desperdício

Existe um impulso natural, sobretudo de quem paga pelo site, de preencher cada centímetro: mais um banner, mais um bloco, mais um depoimento. O raciocínio parece razoável — espaço vazio é espaço não aproveitado.

Só que é o espaço que cria hierarquia. Sem ele, todos os elementos parecem ter a mesma importância, e o olho não sabe onde pousar. Uma página cheia não comunica mais: comunica pior, porque o item que decide fica tão visível quanto o aviso de cookies.

Vale inverter o instinto: em vez de perguntar "o que mais cabe aqui?", perguntar "o que posso tirar sem prejuízo?". Quase sempre é possível remover um bloco inteiro e a página melhora — porque o que sobrou ganhou destaque.

O supermercado, levado a sério

A versão anterior comparava o site a um supermercado e parava aí. A analogia é boa e merece ser desenvolvida, porque cada peça tem um correspondente exato.

As placas dos corredores são o menu: escritas na linguagem de quem compra, não na do estoque. Ninguém procura o corredor de "itens de conveniência não perecíveis".

A altura das prateleiras é a hierarquia visual: o que está na altura dos olhos é visto primeiro, e essa posição é escolhida, não sorteada.

A etiqueta do produto é o texto: quem quer só o preço, encontra o preço; quem quer os ingredientes, encontra os ingredientes — sem precisar ler tudo.

E há o ponto que a comparação revela melhor do que qualquer argumento: ninguém elogia a organização de um supermercado. Ela só é percebida quando está ruim — e aí a pessoa não reclama, apenas desiste da compra. Estrutura de site funciona igual: quando está boa, é invisível.

O teste dos 5 segundos

Não é preciso ferramenta paga nem consultoria para descobrir se a estrutura está funcionando. O teste mais útil leva um minuto.

Mostre a página para alguém que não conhece a empresa. Depois de cinco segundos, feche. Pergunte três coisas: o que essa empresa faz? para quem? o que dá para fazer nesta página?

Se a pessoa não responder as três, o problema é de estrutura — e não se resolve com um visual mais bonito. Cada resposta errada aponta um nível diferente: não saber o que a empresa faz é falha do texto principal; não saber para quem é falta de qualificação do público; não saber o que fazer é ausência de ação principal.

Repita com três pessoas diferentes, de fora da empresa. Quem trabalha ali já sabe a resposta e por isso não consegue avaliar — é o mesmo motivo pelo qual ninguém revisa bem o próprio texto.

Os 6 erros de estrutura mais comuns

  1. Menu com nomes internos. Itens que só fazem sentido para quem trabalha na empresa.
  2. Informação principal abaixo da primeira tela. Quem chega precisa rolar para descobrir do que se trata — e parte não rola.
  3. Vários botões disputando destaque. Nenhuma ação parece a recomendada.
  4. Blocos de texto sem subtítulo. A página não pode ser percorrida, só lida inteira.
  5. Contato só numa página. A decisão de falar com você acontece em qualquer ponto da visita.
  6. Páginas idênticas entre si. Sem título claro nem indicação de onde a pessoa está, todas parecem a mesma — e a navegação perde o sentido.

Nenhum desses seis custa caro para corrigir. Todos custam caro para manter — e, ao contrário de um redesign, a correção deles aparece no número de contatos.

Perguntas frequentes

O que é um site chamativo?

A expressão engana, porque sugere a tarefa errada. Quem abre uma página já deu a atenção — ela foi conquistada antes, no anúncio, na busca ou na indicação. O site não precisa chamar atenção: precisa não perdê-la. O que segura alguém não é o impacto visual, é entender rapidamente onde está, o que a empresa faz e para onde ir.

Cores vibrantes deixam o site mais atraente?

Não é a saturação que prende o olhar, é o contraste com o que está em volta. Numa página com muitas cores fortes, nada se destaca — inclusive o botão que interessa. A função da cor num site é hierarquizar: indicar o que é clicável, o que é principal e o que é secundário. Cor usada para enfeitar deixa de informar.

O que é estrutura de site?

São três coisas diferentes que costumam ser tratadas como uma só: a organização entre páginas, ou seja, quais existem e como se conectam pelo menu; a organização dentro da página, que é a ordem em que a informação aparece e o peso visual de cada bloco; e a organização do texto, que decide se a página pode ser percorrida rapidamente.

A regra dos três cliques é verdadeira?

Não como regra. As pessoas não desistem por causa do número de cliques, e sim quando um clique não parece levar a lugar nenhum. Um caminho de cinco passos óbvios funciona melhor que dois passos confusos. O que importa é que, a cada clique, fique claro onde se está e qual o próximo passo.

Quantos itens o menu deve ter?

Poucos o bastante para serem lidos de uma vez — em geral entre quatro e sete no menu principal. Mais importante que o número é o teste: alguém de fora consegue prever o que encontra em cada item? Nomes criativos e internos, como o nome de um produto que só a empresa conhece, quebram esse teste.

Espaço em branco é desperdício de espaço?

É o contrário: é o que cria hierarquia. Sem espaço, todos os elementos parecem ter a mesma importância e o olho não sabe onde pousar. O impulso de preencher cada centímetro produz páginas cansativas em que nada se destaca — e o item mais importante fica tão visível quanto o aviso de cookies.

Como saber se meu site está bem organizado?

Pelo teste dos cinco segundos: mostre a página para alguém que não conhece a empresa, feche depois de cinco segundos e pergunte o que ela faz e o que dá para fazer ali. Se a pessoa não responder as duas, o problema é de estrutura — e não se resolve com um visual mais bonito.

Design bonito aumenta as vendas?

Não diretamente. Design bem feito reduz o esforço de entender e de agir, e é isso que aparece no resultado. Beleza sozinha não convence ninguém a comprar; confusão, porém, faz muita gente desistir. É mais seguro pensar em clareza do que em beleza — e a clareza, quando existe, costuma ser bonita.

Quais os erros de estrutura mais comuns?

Seis: menu com nomes internos que ninguém entende; a informação principal só depois de rolar bastante; vários botões disputando destaque na mesma tela; blocos de texto sem subtítulo; contato escondido em uma única página; e páginas que parecem iguais entre si, sem indicar em qual delas a pessoa está.

Estrutura primeiro, estética depois

A Agência Fort organiza menu, hierarquia e texto para que a página seja entendida em segundos. Conheça a criação de sites.

Começar Agora Falar com Especialista

Continue lendo sobre sites

Site para empresas

Curiosidades sobre criação de sites

Como criar o conteúdo ideal para o meu site

Como escrever bem para um blog