Design de página de preços com a psicologia em mente

Métodos científicos para melhorar a usabilidade e a conversão. Escrito exclusivamente para o blog STUDIO. Aqui está a versão japonesa.

Existem tantos conceitos de preços bonitos no Dribbble e no Behance, mas na vida real, eles geralmente são rejeitados. O que há de errado com todos esses cartões brilhantes e ilustrações fofas de avião de papel e ônibus espacial? Geralmente, o motivo é a baixa conversão. As empresas podem perdoar sua interface do usuário volumosa e cores inconsistentes, mas se uma página não vender, será um problema. Neste artigo, descobriremos como fazer vendas de páginas de preços e, ao mesmo tempo, seguir os princípios de design.

Uma ilustração para chamar a atenção (veja no Dribbble)

Psicologia de escolha

As teorias econômicas assumem que as pessoas agem logicamente e buscam a variante mais benéfica. Mas não escolhemos o tempo todo logicamente. Podemos ficar com uma opção satisfatória, não necessariamente a perfeita. Muitas opções são automáticas e baseadas em modelos de pensamento - heurísticas. Eles foram descobertos na década de 1950 por Herbert Simon, um economista americano, psicólogo cognitivo e ganhador do prêmio Nobel. Na década de 1970, os psicólogos israelenses-americanos Amos Tversky e Daniel Kahneman exploraram vieses cognitivos e efeitos que nos enganam na tomada de decisões. Então, vamos analisar os principais hábitos humanos de fazer uma escolha.

Heurística de disponibilidade

As pessoas fazem julgamentos com base no que aprenderam ou pensaram recentemente. Esta informação não é necessariamente completa e consistente. Por exemplo, se você leu muito sobre vazamentos de armazenamento na nuvem e violação de privacidade, provavelmente configurou um próprio servidor em vez de comprar uma conta do Dropbox. A escolha do usuário está conectada ao conteúdo que eles consumiram anteriormente. Os sites de comércio eletrônico costumam rastrear a atividade do usuário para que as empresas saibam o que as pessoas viram antes e como isso pode influenciar seus julgamentos.

Perguntas para um designer pensar:

  • O que há no topo da página principal? Em outras palavras, o que as pessoas verão antes de clicar no link "Preços" no menu?
  • O que a análise da web diz sobre as páginas que as pessoas visitam antes de "Preços"?
  • O que as pessoas costumam fazer antes de visitar seu site? É o relaxamento da sexta-feira à noite ou a separação de muitos e-mails na segunda-feira de manhã?

Afetar heurística

A escolha das pessoas é influenciada pela emoção que elas experimentam no momento. De bom humor, tendemos a ver mais benefícios e menos riscos. De mau humor, nos concentramos em desvantagens e não em ganhos. Por exemplo, um usuário irritado pode perceber quantos recursos úteis estão bloqueados no plano de assinatura gratuito e pode não se inscrever.

Perguntas para um designer pensar:

  • Você pode fazer as pessoas escolherem quando estão de bom humor?
  • É possível garantir que uma pessoa esteja de bom humor ao fazer uma escolha?
  • Como você melhora o humor das pessoas antes que elas tenham que escolher?

Heurística da representatividade

Se as coisas parecem semelhantes, as pessoas pensam que o restante das características, causas e resultados dessas coisas também são semelhantes. Isso acontece porque nossa mente tem um sistema de categorias e protótipos representativos para cada categoria. Matematicamente, uma coincidência de duas ou mais características é menos provável. No entanto, as pessoas consideram a coincidência mais provável se ela se encaixar no protótipo mais representativo da memória. Por exemplo, você tem uma categoria "designers", e o protótipo mais representativo é um barbudo criativo que monta uma prancha e gosta de smoothies. Se você vir esse cara em um café, automaticamente assumirá que ele é um designer e provavelmente ele tem um iPhone e gosta de saladas de abacate.

Perguntas para um designer pensar:

  • Que "categoria" o público costuma atribuir ao seu produto? Eles acham que é luxuoso, seguro, prático?
  • Quais características um produto deve ter para fazer com que as pessoas o associem à categoria desejada?

Princípio das Cachinhos Dourados

Como regra, os clientes escolhem a opção mediana, especialmente por preço. As pessoas acreditam que são compradores inteligentes e não pagam demais. Ao mesmo tempo, eles se sentem capazes de oferecer um serviço melhor do que o plano gratuito ou mais barato. A opção mediana também está relacionada à heurística da representatividade; em outras palavras, parece ser típico. A propósito, o efeito Cachinhos Dourados recebeu o nome do conto de fadas “Os Três Ursos”, no qual uma garotinha Cachinhos Dourados prova três tigelas diferentes de mingau e descobre que prefere mingau que não é nem muito quente nem muito frio - tem a temperatura certa .

Perguntas para um designer pensar:

  • Quanto sua opção mediana atende às necessidades do cliente?
  • Dada a maioria dos clientes escolher o plano médio de pagamento, a empresa alcançará suas metas de negócios?

Efeito chamariz

Esse efeito pode ocorrer quando há inicialmente pacotes com vantagens diferentes - por exemplo, um mais barato e outro com mais recursos. Algumas pessoas escolhem a variante mais barata; alguns escolhem o pacote maior. Obviamente, as empresas querem incentivar as compras da opção mais cara. Então, eles adicionam uma opção de "chamariz". O “engodo” é melhor em um parâmetro e pior no outro parâmetro nas opções iniciais. Como resultado, os clientes mudam de preferência. Eles tendem a comprar o pacote mais caro, porque agora parece mais benéfico.

Em 2018, pesquisadores da Universidade do Colorado e da Academia Chinesa de Ciências estudaram o comportamento dos trabalhadores das fábricas de alimentos. Nos primeiros 20 dias, os trabalhadores receberam desinfetante em spray para limpar as mãos a cada hora. Em seguida, os pesquisadores ofereceram a eles a escolha do spray habitual ou das opções menos convenientes - uma garrafa ou um lavatório. Os trabalhadores aumentaram o uso do spray original de 60% para mais de 90%.

Perguntas para um designer pensar:

  • Qual pacote a empresa deseja vender acima de tudo? As pessoas percebem isso como o mais vantajoso?
  • Qual opção é a mais popular? Por que as pessoas escolhem com tanta frequência?
  • O que pode fazer com que pacotes caros pareçam mais benéficos?

Efeito de ancoragem

A ancoragem é a tendência de confiar demais em uma informação (geralmente a primeira) ao fazer uma escolha. Quando uma âncora é definida, todos os outros julgamentos e estimativas serão afetados por ela. Por exemplo, o primeiro preço que você vê se tornará uma âncora e você subconscientemente comparará todos os outros preços a ele. Houve um experimento em que as pessoas deveriam multiplicar números de 1 a 8. O tempo era intencionalmente limitado e eles precisavam estimar em vez de calcular precisamente. Aqueles que multiplicaram na ordem “1 × 2 × 3 × 4 × 5 × 6 × 7 × 8” calcularam a soma quatro vezes menos do que aqueles que multiplicaram “8 × 7 × 6 × 5 × 4 × 3 × 2 × 1. O primeiro produto calculado tornou-se uma âncora e definiu o processo de reflexão posterior.

Perguntas para um designer pensar:

  • Quais âncoras os clientes podem trazer para o seu site?
  • O que os clientes devem ver primeiro a estar preparado para fazer uma escolha e comprar um produto ou serviço?

Prova social

Este termo foi inventado por Robert Cialdini em 1984 e significou a influência de outras pessoas em nossas decisões. Se as pessoas não podem decidir ou escolher o comportamento ideal, elas tendem a copiar as ações dos outros. O efeito de prova social é o resultado de nossa preguiça cognitiva - um desejo de reduzir o esforço de raciocínio - e a crença de que outras pessoas possuem mais conhecimento sobre a situação atual. No comércio eletrônico, a prova social é aplicada por meio de depoimentos, seção "Nossos clientes" e classificações de produtos.

Perguntas para um designer pensar:

  • Quem é um líder de opinião para o seu público? Como você pode apoiar a oferta do produto com a ajuda deles?
  • Quais de seus clientes atuais podem possuir reputação suficiente e servir de modelo para outros?

Aversão à perda

As pessoas geralmente preferem evitar perdas a adquirir ganhos. Por exemplo, é melhor não perder US $ 10 do que encontrar US $ 10. Algumas pesquisas até declaram que somos duas vezes mais sensíveis a uma perda do que obter lucro. Isso significa que, às vezes, um designer deve apresentar benefícios como prevenção de perdas para torná-los mais compreensíveis. No entanto, você não deve exagerar e assustar as pessoas, pois o efeito oposto - reatância - pode acontecer.

Em um experimento de 2002, as pessoas deveriam compor sua pizza. O primeiro grupo foi remover ingredientes de uma pizza padrão all-in-one. O segundo grupo estava adicionando ingredientes a uma base de pizza. Os participantes que reduziram a pizza acabaram com um prato mais carregado.

Perguntas para um designer pensar:

  • O que as pessoas têm medo de perder quando escolhem um produto como o seu?
  • Como você pode mostrar aos clientes que eles evitarão problemas comprando seu serviço ou produto?

Reatância

É uma reação desagradável a ofertas e regras que ameaçam nossas liberdades. A reatância ocorre quando uma pessoa sente que alguém está tirando ou limitando a escolha. Por exemplo, os adolescentes fumam mais por despeito e protestam contra o controle dos pais do que porque gostam de cigarros. No comércio eletrônico, a reatância é uma resistência à promoção e à persuasão esmagadoras. Se um produto ou serviço é anunciado demais, a pessoa tende a fazer o oposto - fortalecer a atitude negativa e comprar dos concorrentes.

Perguntas para um designer pensar:

  • Como as pessoas percebem as mensagens no seu site? Eles não estão pressionando demais? Eles são persuasivos o suficiente?
  • O que pode motivar os clientes a comprar, mas respeitar seus limites pessoais?

Efeito Von Restorff

Este efeito foi observado por Hedwig von Restorff em um estudo de 1933. As pessoas tendem a se lembrar melhor de um objeto que se destaca ou é destacado. Alguns cientistas acham que as pessoas ensaiam itens isolados na memória de trabalho por mais tempo. Uma teoria diferente afirma que lembrar itens isolados lança uma tarefa separada no cérebro; enquanto itens semelhantes são lembrados juntos como uma categoria e exigem mais esforços. Por exemplo, se um item da lista de compras estiver destacado em amarelo, é mais provável que as pessoas se lembrem dele do que o restante dos itens. O mesmo funciona com o significado da palavra: Na lista - profissional, seguro, protegido, durável, de alta qualidade, mágico, responsável - “mágico” se destaca e será lembrado mais.

Perguntas para um designer pensar:

  • O que a empresa deseja chamar a atenção dos clientes? Como destacar essa opção normalmente?
  • O que está destacado na página de preços agora? É a coisa certa a reter na mente dos clientes? Tem uma conexão com a conversão?

A psicologia é uma grande habilidade secundária para os designers, pois percebe tendências e fornece pistas sobre o que prestar atenção ao criar o design. O conhecimento de como o pensamento humano funciona ajuda a criar as primeiras versões do design e começar a testá-las com os usuários.

Anatomia das interfaces de preços

Os preços podem ser uma página da web separada ou uma das seções da página de destino. De qualquer forma, alguns atributos nunca mudam - opções de preços, recursos, preços e frases de chamariz. Atualmente, os designers utilizam principalmente cartões, mesas e controles deslizantes para visualizar os preços. Todos os métodos têm seus lados fortes e fracos.

Postais

Os cartões são compactos e representam 2 a 3 opções de pagamento auto-explicativas. Eles funcionam melhor quando a diferença entre os pacotes é perceptível. Se os cartões ficarem muito longos e não puderem caber na tela, é melhor cortar o conteúdo ou escolher o formato da tabela. Os cartões geralmente aparecem em produtos diretos e simples para não especialistas.

Componentes típicos.

  • Planeje nomes (geralmente com um ícone ou ilustração).
  • Descrições curtas (ou uma lista de 2 a 5 recursos).
  • Preços e cronograma de pagamento (diário, semanal, anual, etc.).
  • "Recomendado", "Popular" ou outros rótulos.
  • Bônus (por um plano caro, pagamento adiantado etc.).
  • Botões de apelo à ação.

Tabelas

Diferentemente dos cartões, as tabelas têm uma estrutura mais rígida: colunas com opções de preços e linhas com recursos. Nas interseções, é mostrado se um recurso está incluído em um pacote ou o conteúdo de um recurso. Ao contrário dos cartões, as mesas são capazes de mostrar longas listas de recursos. As tabelas são frequentemente usadas para sistemas corporativos com muitas características: gerenciamento de acesso, configurações de sincronização, integrações com outros softwares, etc. As tabelas geralmente são projetadas para pessoas ou gerentes técnicos que tomam uma decisão dependente dos requisitos de orçamento e de negócios.

Componentes típicos.

  • Nomes de planos (às vezes com uma descrição curta ou finalidade).
  • Lista de recursos (agrupados se for muito longo e com explicações se houver termos de nicho).
  • Preços e cronograma de pagamento.
  • "Recomendado", "Popular" ou outros rótulos.
  • Bônus (por um plano caro, pagamento adiantado etc.).
  • Botões de apelo à ação.

Sliders

Um controle deslizante é uma maneira de mostrar que existem muitas opções e o produto é altamente personalizável. As pessoas podem configurar uma oferta a seu gosto. Os controles deslizantes são ótimos para serviços sem pacotes definidos - se o preço depender diretamente do número de usuários, da cobertura do público ou da capacidade de algo. Os controles deslizantes são típicos para empresas como venda de armazenamento de servidor, promoção em redes sociais, empréstimos ou aluguel.

Componentes típicos.

  • Um controle deslizante ou um conjunto de controles deslizantes para diferentes parâmetros.
  • Recursos e serviços incluídos, independentemente da posição do controle deslizante.
  • Preço (normalmente, atualizações em tempo real).
  • Bônus (por um plano caro, pagamento adiantado etc.).
  • Botões de apelo à ação.

Em resumo, os cartões são ótimos para pacotes auto-explicativos; tabelas visualizam pacotes complexos com muitos recursos; controles deslizantes ajudam os clientes a configurar um produto eles mesmos. Mas como compor uma interface de preços, certo?

Melhores práticas

Examinar as maquetes de outros designers em busca de inspiração não funcionará se você não souber o que olhar. Reuni diferentes abordagens de precificação e mostrei como elas poderiam ser úteis e prejudiciais.

Construa o conjunto de pacotes balanceados

Quantas opções para dar e o que levar dentro? É isso que um empresário e designer devem considerar cuidadosamente. Se houver muitas opções, as pessoas se perdem e tendem a não escolher, principalmente se nunca compraram este produto. Por exemplo, você não é um guru de artigos de papelaria e vê 130 canetas de tinta preta. Qual deles você vai escolher? Quanto tempo você estará escolhendo? No mundo digital, é ainda mais difícil, porque você não pode "tocar" nas opções e escolher por textura, peso, cheiro, etc. Portanto, quanto menos opções, menos confusão - idealmente, dois ou quatro pacotes - ou uma única opção .

Os varejistas desejam aumentar a receita e aumentar os carrinhos de supermercado para que os clientes comprem mais. Podemos observar a mesma tendência no mundo digital. As empresas de software incluem mais opções nos pacotes de serviços e aumentam o preço. Mas se o pacote mínimo disponível contiver muitas coisas desnecessárias e custar muito, as pessoas podem ir embora de mãos vazias. O menor pacote deve ser útil para alguma situação da vida real, por exemplo, para atender às necessidades diárias de um freelancer.

Bem-vindo a nomeação de opção baseada em finalidade

Títulos como "Econômico / Padrão / Premium" não revelam os recursos da oferta e podem parecer discriminatórios. Tais nomes fazem as pessoas mergulharem nas descrições para aprender o que se adapta às suas necessidades. Uma abordagem melhor é nomear devido à situação de uso, por exemplo, "Indivíduo / Equipe / Corporação" ou "Pessoal / Empresa". Ele fornece pistas adicionais sobre o que escolher. Nomes como "Básico / Mais / Máximo" também funcionam. Isso mostra que a diferença está na capacidade ou no escopo do serviço.

Mantenha as informações críticas sempre visíveis

Se a descrição dos planos de serviço for tão longa que precise ser rolada, será crucial corrigir nomes, preços e botões de call to action. Quando estão visíveis, as pessoas não precisam voltar para verificar se os recursos descritos valem o dinheiro.

Se os recursos estiverem agrupados, é melhor mostrá-los expandidos, pois a rolagem é uma ação mais natural do que clicar várias vezes para expandir cada grupo.

Faça a comparação sempre confortável

Uma tela de tablet ou laptop é larga o suficiente para caber em todas as opções. É confortável porque você pode compará-los facilmente. Então, o que os designers fazem no celular? Basta transformá-lo em um carrossel! Como resultado, apenas o cartão exibido é detectável, enquanto outras opções ficam ocultas atrás da borda da tela. É melhor colocar os cartões um por um, talvez no modo recolhido, para que as pessoas vejam a principal diferença imediatamente.

Avisar sobre ações confidenciais

As pessoas ficam frustradas quando prosseguem com todas as etapas e, em seguida - "Insira seu cartão de crédito". Muitas vezes, os usuários param aqui, mas se concordarem, há outro risco. Você começa a usar um produto, esquece o cartão de crédito, recebe a notificação de pagamento, cancela imediatamente a assinatura e sente que perdeu dinheiro ... Claro, é melhor criar planos gratuitos verdadeiramente gratuitos e não solicitar um cartão de crédito . Mas se você precisar disso, por que não mencionar antes para evitar surpresas desagradáveis ​​e aversão dos usuários?

Mente informações repetidas

Se o próximo pacote for igual ao anterior, além de recursos adicionais, os designers escrevem algo como "O mesmo que 'Básico', mas com verificação de segurança aprimorada e um consultor pessoal". Isso torna a interface um pouco mais limpa; no entanto, uma pessoa precisa ler a opção anterior, manter em mente e adicionar os recursos extras. Torna-se irritante quando a fórmula “igual a A mais Z” se repete duas ou mais. Então você não pode entender a próxima opção sem ler todas as anteriores.

Call to action honestamente

Os botões são essenciais para qualquer interface, mas na página "Preços", afetam diretamente a conversão. Se um botão é chamado de "Experimente de graça" ou "Inicie seu teste gratuito" e, depois de clicar no botão "Entre em contato", ele desaponta e leva à perda de clientes. Outro exemplo frustrante é "Mais informações", em vez da capacidade de comprar um produto imediatamente. Se um botão indicar "Comprar" ou "Comprar agora", logicamente, ele deverá orientar para a forma de pagamento. Se for chamado de "Try" ou "Start your trial", a próxima etapa deve ser a criação de um perfil ou ainda mais simples - indo direto para um projeto vazio ou demo.

Exibir preços sem ambiguidade

De acordo com o Cornell Unversity Hospitality Report 2009, a remoção do símbolo da moeda ($) ou nome (dólares) nos menus dos restaurantes aumentou os gastos médios em 12%. A moeda é um lembrete adicional de gastar dinheiro, que está relacionado à aversão à perda. As pessoas são mais sensíveis ao que perdem do que ao que ganham. Infelizmente, designers e profissionais de marketing interpretam mal essa pesquisa e ocultam o preço ou começam a brincar com o tamanho da fonte. Os designers devem equilibrar entre não focar a atenção no dinheiro e serem honestos com os usuários.

As empresas desejam incentivar contratos de longo prazo e oferecer descontos para o faturamento anual. As páginas de preços podem mostrar um preço mais baixo por um longo período por padrão, mas devem ser feitas sem ambiguidade. Notas de rodapé que explicam uma oferta são menos visíveis. Como resultado, as pessoas podem se surpreender desagradavelmente com uma fatura maior do que esperavam.

Guia, mas não trapaceie

"Recomendado", "Escolha popular", "Nossos clientes escolhem" e botões grandes e brilhantes "Comprar agora" podem aumentar a conversão e diminuir drasticamente. Devido ao efeito da reatância, em algum momento, as pessoas começam a sentir manipulação e se recusam a seguir a hierarquia visual na interface. Quando as opções pagas são tão importantes que “gritam alto” com você, e a opção gratuita é acinzentada e minúscula, as pessoas podem parar de confiar em você.

Responda a perguntas freqüentes

Quando as pessoas estão prestes a gastar dinheiro na internet, querem segurança e garantias. Falando sobre produtos virtuais, os clientes não podem ver um vendedor pessoalmente; portanto, não existem muitas maneiras poderosas de convencê-los. Felizmente, você pode simular uma conversa franca através da seção FAQ. Você pode ter medo de adicionar muito texto e deixar a página cheia. Na realidade, as pessoas se preocupam em encontrar uma solução para um problema - não se uma interface é limpa e minimalista.

As dicas acima são um bom ponto de partida, não uma receita mágica, portanto, fique à vontade para testar seus projetos com os usuários. Eventualmente, as páginas de preços devem aumentar a conversão e a satisfação do cliente. Se as pessoas conseguem o que querem e não se arrependem depois, e a empresa obtém receita suficiente, é um sucesso.

Leitura adicional

  • "Analisei 250 páginas de preços de SaaS - eis o que encontrei", um artigo de Benjamin Brendall para The Next Web.
  • "The Psychology of Price in UX", um artigo de Anders Toxboe para o blog Web Design Depot.
  • "Mostrar preços para cenários comuns", um artigo de Jakob Nielsen para o blog do Nielsen Norman Group.
  • “A sobrecarga de escolha está prejudicando seus usuários”, um vídeo de Alita Joyce para o blog do Nielsen Norman Group.
  • "Lista de vieses cognitivos", um artigo da Wikipedia.
  • "Como criar uma página de preços que converte", um artigo de Val Geisler para o blog do aplicativo Invision.
  • "11 exemplos de página de preços para inspirar seu próprio design", um artigo de Lindsay Kolowich para o blog Hubspot.

Sinta-se à vontade para entrar em contato em outro lugar: Dribbble, Behance, Instagram, Twitter.