Repositório UI / UX :: Página (ou Tabela) de Preço

A página de preço é um dos pontos chaves para qualquer empresa digital, pois é o momento onde o usuário já pesquisou sobre as suas funcionalidades e se encontra propenso a usar (e pagar) pelo seu serviço. Então, você precisa apenas responder da melhor maneira o o que o seu cliente quer saber. E é sobre essa etapa que tento ajudar com esse compilado.

Disclaimer: Esse artigo é baseado num estudo inicial que realizei para um projeto de consultoria. Normalmente, pegaria esse material pesquisado e guardaria no meu Evernote. Porém achei que seria interessante compartilhar os principais textos, inspirações visuais e insights que encontrei sobre Página e Tabela com preços.

Por isso, eu traduzi alguns materiais pesquisados em inglês, organizei os principais destaques para começarmos esse papo e (quem sabe) ser atualizado com mais insights.

Ahh, toda a parte de pesquisa com os usuários, testes a/b da interface e outras metodologias utilizadas com o cliente são confidenciais. Logo, não pude incluir aqui :(

1. Moodboard

Criei um board no Pinterest com toda referência visual interessante que encontrei durante minha busca, segue o link:

https://br.pinterest.com/kakate/moodboards/pricing-table/

2. Artigos

Durante minha busca, esses foram os principais artigos encontrados sobre o assunto ( ★ destaca os meus preferidos).

★ Como é sua página de preços? 387 Páginas de Preços SaaS Analisadas
https://medium.com/@benjbrandall/hows-your-pricing-page-387-saas-pricing-pages-analyzed-7492bd99d0d9

★ Tabelas de preços: exemplos e melhores práticas
https://www.smashingmagazine.com/2008/10/pricing-tables-showcase-examples-and-best-practices/

★ 11 dicas para uma página de preços rockstar
https://medium.com/@KarolZielinski/11-tips-for-a-pricing-page-from-10-saas-rockstars-c78427486731

Planos de Assinatura: uma ferramenta para te ajudar a crescer
https://medium.com/sambaplay/planos-de-assinatura-uma-ferramenta-para-te-ajudar-a-crescer-da5eedbe9af5

5 melhores práticas de preços que você deve usar
https://www.elegantthemes.com/blog/divi-resources/pricing-best-practices-you-should-be-using-with-divis-pricing-table-module

Comparei 20 manchetes de páginas de preços para que você não precisasse
https://blog.reifyworks.com/i-compared-20-b2b-saas-pricing-page-headlines-so-you-dont-have-to-4d96c2a97138

Preços claros e concisos
https://medium.com/@philcoffman/clear-concise-pricing-7ee13995f88d

Apresentar preço — 3 táticas eficientes e cientificamente comprovadas
http://www.digai.com.br/2016/10/apresentar-preco-3-taticas-eficientes-e-cientificamente-comprovadas/

As melhores práticas para projetar tabelas de preços
https://1stwebdesigner.com/pricing-tables-tips-tricks/

Se tiver mais algum artigo interessante, sinta-se a vontade para fazer um comentário :)

3. Principais highlights

Entrando um pouco mais no conteúdo, trago os principais destaques de dois dos artigos linkados acima:

Análise de 387 Páginas de Preços SaaS (artigo)

O Benjamin Brandall fez um apanhado das maiores empresas de SaaS e principais startups da AngelList. A seguir estão algumas das suas descobertas:

• 39% têm preços disponíveis publicamente
• 3,5 é o número médio de planos
• 44% vendem os benefícios na mesma página
• 84% organizam por preços crescente (menor para o maior)
• 9% organizam por preços decrescente (maior para o menor)
• 59% listam o preço do plano Enterprise como “Contate-nos”
• 49% destacam um plano com uma CTA (call-to-action) com cor contrastante
• O CTA mais comum é ‘Start free trial’
• 63% possuem uma versão de avaliação gratuita
• 11% oferecem preços em uma escala deslizante
• 85% dos pacotes possuem nome (‘Growth’, ‘Pro’, etc.)
• 6% oferecem uma garantia de devolução do dinheiro
• 30% operam em um modelo freemium

Ele ainda definiu as 5 principais CTAs usadas por essas empresas:

• Iniciar teste gratuito (25%)
• Inscreva-se (14%)
• Experimente gratuitamente (14%)
• Começar (13%)
• Solicite uma demo (6%)

Análise de 20 manchetes de Páginas de Preço SaaS (artigo)

O mrb realizou uma análise mais simples (porém interessante) conferindo as 20 manchetes das principais empresas de SaaS:

Suas descobertas:

• Simples! :: 25% têm a palavra “simples”
• $COMPANYNAME :: 40% mencionam a empresa ou o nome do produto
• Livre :: 45% oferecem algum tipo de serviço de graça
• Flexível :: 20% mencionam que são “flexíveis”

Ele ainda destaca sua manchete preferida:

E sua menos favorita:

4. Conteúdo

Ok, agora vamos para os principais trechos dos artigos usados para conceituar um pouco do material desenvolvido:

Recomende um plano

Informe aos seus clientes qual é o melhor plano. Seja através de uma indicação visual ou diferenciação cromática, sua escolha sendo o mais popular ou o que se encaixa melhor na sua estratégia.

Além disso, você pode indicar qual deles é mais adequado para cada tipo de cliente (por exemplo, o plano Básico pode ser voltado para uso pessoal enquanto o plano Premium pode ser para ser para empreendedores).

Quando se trata de tabelas de preços é provável que haja um lugar mais agradável para quem está começando. Para fazer isso acontecer, você precisa ter certeza de que este nível oferece aos seus clientes um ótimo negócio e que eles são capazes de identificá-lo rapidamente.

Benefícios para o cliente

Muitos especialistas erram ao enquadrar os níveis de seu serviço nos termos que eles acham mais convincentes, sem levar em consideração as necessidades de seus clientes. Por isso, pense sempre no cliente.

Efeito Center-Stage

Quando você mantém suas escolhas em 3, há uma maior probabilidade de seus clientes sempre escolherem o do meio. É conhecido como o “Efeito Center-Stage”.

O efeito center-stage desempenha um papel vital em nossas vidas diárias. Nosso cérebro é muito ligado por suas implicações. No Journal of Consumer Psychology, uma pesquisa intitulada: “Crenças baseadas em posição: o efeito Center-Stage" conclui que os produtos de ambos os lados não são tão importantes. O verdadeiro fator decisivo é o quão popular a oferta do meio é percebida como a mais atrativa. Isso diz tudo.

Organização crescente ou decrescente?

Os Heatmaps mostram que os visitantes passam duas vezes mais tempo com o olhar no lado esquerdo da página. Já que estamos acostumados a ler da esquerda para a direita e ver uma estrutura de baixa a alta, aderir a uma escala crescente pode aliviar o desconforto do usuário, pois é uma experiência mais natural.

Porém, no livro Influência de Robert Cialdini, ele relata um teste A/B bem relevante: os vendedores ofereceram a potenciais compradores duas opções: um modelo de $329 e um modelo de $3.000.

As táticas usuais são oferecer o modelo de preço mais baixo na esperança de que o cliente não tenha medo de ouvir grandes números. Mas durante o teste, em vez de começar com a tabela de preço baixo, os vendedores mudaram suas táticas para oferecerem inicialmente o modelo de $3.000. O que aconteceu? Um aumento de 81% nas receitas de tabelas de bilhar.

Pode ser uma estratégia eficaz começar alto e reduzir até mesmo para impactar o plano médio. Se mudássemos a ordem da tabela de preços, o plano mais caro seria então o ponto de ancoragem do cliente, e o nível do mediano chegará como uma surpresa bem-vinda.

Meu disclaimer nesse assunto: se o seu objetivo for construir uma jornada longa com o seu cliente, talvez seja melhor a ordenação crescente. Porém, se o seu serviço for algo mais esporádico, como era o meu caso, uma organização decrescente pode ser decisiva para um aumento do lucro ;)

Cor contrastante para a Call-to-Action

De acordo com o Unbounce, uma regra de ouro para a cor do CTA é: procurar a matiz dominante da sua página e escolher a cor contrastante para destacar sua principal ação.

Há evidências para apoiar isso no famoso teste A/B realizado pela Performable, que mostrou uma aumento de CTR de 21% com o uso do botão vermelho que contrastava com mais com a página.

Definir a melhor nomenclatura para seus planos

Enquanto algumas empresas SaaS optam por nomear seus pacotes em relação ao seu preço (com nomes como 'Básico', 'Premium', etc.), algumas aproveitam a oportunidade para segmentar os seus visitantes e nomear os pacotes por quem eles são.

Os pacotes gratuitos às vezes são chamados de "Iniciante" ou "Hacker", como no caso da Algolia. Já os pacotes empresariais quase sempre são chamados de Enterprise. Ao olhar para os parênteses intermediários, no entanto, é comum obter pacotes direcionados às empresas em estágios específicos de crescimento.

Simplicidade é a chave

A maioria das empresas tentam incluir muitas informações na página de preços. Eles escreveriam parágrafos detalhando por que seus diferentes planos seriam eficientes para os clientes. Mas, na realidade, seus visitantes não vão ler todas as palavras que você escreve. Eles apenas percorrem sua página de preços para entender os benefícios.

Faça sua página parecer livre de problemas e lembre-se sempre: Sua página de preços não é um blog!

O design da sua tabela não deve distrair os clientes da informação contida dentro, e a informação deve se apresentar de forma concisa. Se você acha que há uma característica particular que exige uma explicação adicional, sinta-se a vontade para colocar um asterisco ou um tooltip.

Mostre sempre o preço

Mostre aos seus clientes o quanto eles precisam pagar por usar seus serviços. A maioria dos empresários são ocupados. Ninguém quer contatá-lo para perguntar sobre os preços. Queremos saber qual é o seu preço na hora, para que possamos decidir se vale a pena ou não.

Tenha um CTA claro

Certifique-se de que seus CTAs estão sempre acima da dobra da primeira página. E se teve alguma chance de uma pessoa visitar sua página de preços, normalmente é intenção de compra ou para pesquisar preço. Por isso, quando você não facilita essa decisão de compra, você perderá um cliente. Faça seu CTA em negrito e inspire seus visitantes a agir sobre isso; Não os faça rolar ou caçar por ele!

Descontos e a “regra do 100”

A regra do 100, retirada diretamente do livro "Por que as coisas pegam" de Jonah Berger (2013): O autor sugere dar descontos em percentual quando o valor de seu produto é abaixo de R$100,00 e dar valores absolutos quando seu preço é acima de R$100,00.

Nos dois casos você estará escolhendo o desconto com o maior numeral. Assim, você irá inflar a magnitude percebida do desconto que você oferece, tornando-o mais apelativo.

Melhores Práticas por Gyorgy Fekete

Parte final do artigo "Tabelas de preços: exemplos e melhores práticas":

• Todos os elementos, incluindo tabelas de preços, devem ser consistentes com o design geral do seu site
• Use cores de fundo para separar visualmente diferentes planos, mas com moderação.
• Assim como os fotógrafos chamam a atenção para onde eles querem em suas imagens, faça o mesmo com a tabela de preço. Faça as seções que você deseja chamar a atenção se destacarem.
• Use diferentes tamanhos de fontes e cores para títulos e manchetes importantes.
• Use técnicas discretas de CSS e JavaScript ao projetar uma tabela de preços.
• Mostre sempre os preços dos seus planos.
• Se a sua lista de recursos for muito longa (ou seja, não se enquadra na área visível do navegador), então certifique-se de apresentar os nomes, os preços e as opções de seleção do plano na parte superior e inferior da tabela de preços.
• Mencione a moeda dos seus preços para evitar confusão, porque um sinal “$” pode representar dólares americanos, canadenses ou australianos.

Confira o processo criativo do Phil Coffman para o SpaceCraft

Por film, vale a pena a leitura desse artigo do Phil Coffman. É bem completo e tem bons insights sobre problemas que podemos encontrar no caminho: https://medium.com/@philcoffman/clear-concise-pricing-7ee13995f88d

Conclusão

Opa, então até agora foi basicamente isso que compilei nesse artigo. Não existe uma resposta de ouro, muitos pontos discutidos aqui são boas práticas que podem ajudar seu processo, mas o mais importante é entender bem o seu usuário e validar cada mudança nessa página tão importante.

Espero que gostem. sintam-se a vontade para comentar mais conteúdos, correções e adições a essa conversa.