Uma tabela de preços, não uma lista de preços. Este é o ponto onde um visitante decide pagar ou sair. O design deste ponto ou incentiva a ação ou enterra a conversão.

Não se trata de botões chamativos. Trata-se de como a estrutura, a hierarquia visual e a psicologia dos preços se conjugam. Uma técnica e a página funciona. Outra e o visitante vai embora.

Abaixo estão 16 exemplos, do Dropbox ao BigCartel, com análise: porque é que as suas tabelas são memoráveis e que técnicas funcionam.

💡 Visão geral rápida:

• Percorra os exemplos e repare nos padrões que se repetem
• Consulte a tabela comparativa e escolha uma abordagem adequada
• Aplique a matriz de técnicas da secção final

Tabela comparativa: 16 abordagens ao design de tabelas de preços

1. Dropbox

Página de planos do Dropbox, um dos exemplos mais limpos. Três cartões, imagens descritivas dos pacotes, separação entre "personal" e "teams" com uma linha fina, não com cor.

Em vez de ícones de funcionalidades, ilustrações contextuais. O cartão de equipa mostra colaboração; o pessoal mostra ficheiros organizados. O fundo integra-se com a página, para que os visitantes comparem planos em vez de lutarem contra o design.

• Vantagens: ilustrações em vez de ícones; separação por linha, não por cor; integração com o fundo
• Desvantagens: com muitas funcionalidades, o minimalismo pode fornecer pouca informação
• Onde observar: 🔗 Planos do Dropbox

2. Wufoo

O Wufoo utiliza uma matriz a cores com um alternador mês/ano através de um slider. As funcionalidades são mostradas por comparação: a lista completa apenas no plano popular Bonafide, enquanto a esquerda e a direita mostram marcas de verificação verdes ao lado dos itens disponíveis.

Botões CTA no topo e no fundo. Para páginas com scroll, isto é crítico. Fez scroll para estudar as funcionalidades? O botão já está à sua espera.

• Vantagens: matriz com slider; comparação de funcionalidades através do plano popular; CTA no topo e no fundo
• Desvantagens: sobrecarregado de cor, pode parecer confuso em mobile
• Onde observar: 🔗 Preços do Wufoo

3. Freshdesk

O Freshdesk adiciona um elemento animado: o plano popular está assinalado com um GIF de um balão de ar quente flutuante, o único movimento numa página estática. Os olhos são atraídos instantaneamente.

O tema "vegetação a crescer" percorre tudo: imagens dos pacotes, ícones de funcionalidades, botões, tons de verde. Os visitantes associam subconscientemente o verde à ação.

• Vantagens: a animação foca o plano popular; tema de cor consistente
• Desvantagens: o GIF pode distrair em visitas repetidas
• Onde observar: 🔗 Preços do Freshdesk

4. Plugmatter

O próprio exemplo da Plugmatter: uma matriz em vermelho e branco a condizer com a marca. Funcionalidades à esquerda, planos à direita, plano central «destacado» por brilho, não por uma cor nova.

O mesmo design está disponível como modelo no plugin de tabelas de preços deles, um caso raro de «comer da sua própria comida» em ação.

• Vantagens: estilo de marca rigoroso; centro destacado por brilho; o design equivale a uma demonstração do produto
• Desvantagens: o vermelho de alto contraste não é universal
• Onde ver: 🔗 Plugmatter

5. Pulse

A Pulse prova que menos texto permite um design mais arrojado. Layout espaçoso, botão grande, descrições mínimas. O plano popular ao centro tem um fundo mais escuro e um botão mais brilhante, com uma etiqueta «Great Value» por cima.

• Vantagens: o layout espaçoso dá espaço para respirar; etiqueta de proposta de valor
• Desvantagens: para produtos complexos, pode haver demasiado espaço em branco
• Onde ver: 🔗 Preços da Pulse

6. Mailchimp

A Mailchimp criou uma etiqueta dinâmica «Recomendado»: mova o cursor do número de subscritores e o plano recomendado muda. Os visitantes não têm de adivinhar o que escolher.

O preço é mostrado depois da descrição das funcionalidades, para que os visitantes avaliem o valor antes de verem o número.

• Vantagens: etiqueta dinâmica baseada nas necessidades; preço depois do valor
• Desvantagens: em ecrãs pequenos, o cursor pode ser incómodo
• Onde ver: 🔗 Preços da Mailchimp

7. Zendesk

A Zendesk oferece uma avaliação gratuita para TODOS os pacotes, não apenas para o básico. Os botões «Experimentar» estão destacados a laranja e conduzem a uma versão profissional totalmente funcional.

Quando a avaliação terminar, o retrocesso para o plano básico será sentido como uma perda. Psicologia de retenção através da experiência, não do desconto.

• Prós: período de avaliação para todos os planos; período de teste com todas as funcionalidades
• Contras: produto complexo pode não se revelar durante o período de avaliação
• Onde ver: 🔗 Preços da Zendesk

8. Litmus

A Litmus utiliza grandes blocos de cor, um por plano. As cores complementam-se e não colidem.

Dois CTAs diferentes: um botão no topo e, em baixo, uma oferta para poupar um montante específico no plano anual. A poupança em valor absoluto funciona melhor do que em percentagens.

• Prós: blocos de cor para distinguir planos; dois CTAs semanticamente diferentes
• Contras: blocos grandes exigem muito espaço vertical
• Onde ver: 🔗 Preços da Litmus

9. BeanStalk

A BeanStalk joga com a profundidade: os cartões para freelancers são planos e cinzentos, enquanto os cartões para empresas são tridimensionais e parecem "elevados". O peso visual do cartão corresponde ao preço e ao público-alvo.

Os nomes dos pacotes (Bronze, Platinum) não transmitem significado, mas as descrições detalhadas compensam.

• Prós: efeito 3D para planos caros; "seriedade" diferente para públicos diferentes
• Contras: nomes dos planos são pouco informativos; o 3D num site ultra-plano parece datado
• Onde ver: 🔗 Preços da BeanStalk

10. Readymag

A Readymag utiliza apenas duas cores: azul-escuro e branco. O símbolo do dólar é visivelmente mais pequeno do que o número do preço, uma técnica que reduz a "dor do pagamento": os visitantes focam-se no número, não no facto de estarem a gastar dinheiro. As dicas de contexto nas funcionalidades explicam as opções sem sobrecarregar a tabela.

• Prós: minimalismo reduzido a duas cores; técnica do símbolo monetário pequeno; dicas de contexto em vez de paredes de texto
• Contras: em tabelas longas, as duas cores podem confundir-se
• Onde ver: 🔗 Preçário do Readymag

11. Crazyegg

Crazyegg amplia as variáveis que diferenciam os planos, tornando-as muito maiores do que o texto circundante. Os visitantes não precisam de procurar as diferenças; elas saltam imediatamente à vista.

O plano selecionado é colorido a azul (confiança), os botões são verdes (ação). As cores funcionam a nível psicológico.

• Vantagens: diferenças exageradas; azul-confiança + verde-ação
• Desvantagens: apenas para tabelas com poucas variáveis
• Onde consultar: 🔗 Preços do Crazyegg

12. Heroku

Heroku é quase inteiramente monocromático: tudo em tons de roxo, exceto por um único ponto azul no botão do plano profissional. O olhar vai direto para lá.

O preço está integrado DENTRO do botão, não acima dele. As descrições dos planos usam herança: «Todas as funcionalidades do plano gratuito mais…», e assim sucessivamente ao longo da cadeia.

• Vantagens: monocromático com um acento de cor; preço dentro do CTA; herança em cascata
• Desvantagens: o monocromático pode parecer aborrecido
• Onde consultar: 🔗 Preços do Heroku

13. Freshbooks

Freshbooks, texto «flutuante» entre páginas. A maioria dos planos difere apenas no número de clientes e no preço. Menos diferenças, design mais limpo.

O plano Evergreen tem uma etiqueta de «mais popular» e um pequeno símbolo de dólar em relação ao número, a mesma técnica do Readymag.

• Vantagens: limpeza através de poucas variáveis; efeito flutuante
• Desvantagens: apenas quando os planos diferem em 1 ou 2 parâmetros
• Onde consultar: 🔗 Preços do Freshbooks

14. Slidedeck

Slidedeck faz com que todos os planos pareçam visualmente idênticos; o recomendado é apenas ligeiramente mais escuro. Para um add-on, o que importa não são as cores, mas a disponibilidade de funcionalidades específicas. O design não distrai do estudo da lista de funcionalidades.

• Prós: o design não interfere na comparação; a igualdade visual obriga a ler
• Contras: sem uma âncora visual, é fácil perder-se
• Onde consultar: 🔗 Preços do Slidedeck

15. YepText

YepText, a tabela mais rápida de compreender da coleção. Três linhas, nomes de pacotes distintos (Workin' It, The Beast, The Champ), decisão em segundos.

Os nomes refletem o público, não um escalão formal. Ligação emocional sem uma única palavra extra.

• Prós: compreensão ultrarrápida; nomes distintos
• Contras: para SaaS complexos, informação a menos
• Onde consultar: 🔗 Preços do YepText

16. BigCartel

A BigCartel utiliza imagens como fundo da secção de preços: cada imagem mostra PARA QUEM é o plano, um artista com algumas obras, uma loja em crescimento, um negócio sério. Um retrato visual do público é mais forte do que palavras.

As funcionalidades são reveladas num popup, mantendo a tabela limpa e a informação a um clique de distância.

• Prós: as imagens mostram o público; detalhes ocultos em popup
• Contras: risco de os visitantes não clicarem; não adequado para comparação «cara a cara»
• Onde consultar: 🔗 Registo na BigCartel

Vídeo: design de tabelas de preços que aumenta a conversão

Análise do DNSK Design Study sobre como tabelas de preços «mais feias, mas mais claras» aumentaram a conversão DNSK Design Study. Seis minutos e torna-se claro por que razão a «beleza» visual muitas vezes prejudica:

⁉️🤔 Perguntas frequentes

O que torna uma tabela de preços «amiga da conversão»?

Três coisas: clareza das diferenças entre os planos, destaque visual na opção recomendada e ausência de «dor» ao olhar para o preço. Técnicas específicas: símbolo de moeda pequeno, preço após a descrição do valor, um plano em destaque. O estudo da DNSK mostrou que tabelas «claras» convertem significativamente melhor do que as «bonitas» DNSK Study, 2024.

É necessário destacar um plano como «popular»?

Quase sempre é útil. Os visitantes chegam com a dúvida «qual devo escolher?» e o plano destacado resolve-a. A exceção é quando os planos se dividem claramente por público, como no Dropbox: pessoal, equipa, empresarial. Nesse caso, é melhor dividir visualmente em vez de destacar.

Qual é o número ideal de planos?

Três ou quatro. Três é o clássico: básico, popular, avançado. Quatro se houver um segmento empresarial. Cinco ou mais arriscam a «paralisia de escolha». Dos 16 exemplos, a maioria usa 3 a 4 planos.

Que cores para os botões de CTA funcionam melhor?

Verde («avançar») e laranja («agir agora»). Azul para elementos de confiança. Vermelho com cautela: chama a atenção, mas é lido como «perigo». A regra principal: o botão de CTA deve ser o ÚNICO elemento dessa cor na página.

Deve mostrar o preço imediatamente ou escondê-lo atrás de «contacte-nos»?

Para self-service, mostre-o de imediato e com transparência. Preços escondidos irritam. Para o segmento empresarial com preços personalizados, dê uma indicação («a partir de X€») e forneça o valor exato através do contacto. Exemplo: Heroku na coleção.

Que abordagem ao design da tabela de preços deve escolher?

16 exemplos já vistos. Agora, o principal: o que aplicar ao seu projeto.

Se tem 3 a 4 planos com diferenças claras, adote a abordagem do Freshbooks ou do Readymag: cores mínimas, ênfase em 1 ou 2 variáveis, símbolo de moeda pequeno. Funciona para a maioria dos SaaS.

Se os planos diferem significativamente em funcionalidades, use uma matriz como a do Plugmatter ou do Wufoo: funcionalidades à esquerda, planos à direita, marcas de verificação nas interseções. As diferenças são visíveis em segundos.

Se tem segmentos de público claros, adote a abordagem do Dropbox ou do BeanStalk: cartões diferentes para públicos diferentes, visualmente separados, com imagens distintivas.

Se o produto é complexo e precisa de um período de teste, use o modelo do Zendesk: teste gratuito com todas as funcionalidades para todos os planos. Deixe-os experimentar a versão profissional; o downgrade para o básico será sentido como uma perda.

E a principal lição desta coleção: o design da tabela de preços não tem a ver com ser «bonito». Tem a ver com ser «instantaneamente claro qual o plano a escolher». Faça isso e a conversão falará por si.