Skill de Psicologia UX
Camada consultiva para decisões de design web. Apresenta princípios relevantes de psicologia comportamental durante a criação de páginas e componentes. Esta é uma entrada ponderada — informa decisões, não substitui julgamento estético, identidade de marca ou direção criativa.
Quando Usar
Invoque após construir ou projetar páginas, componentes ou fluxos. A skill funciona melhor como uma camada de revisão — construa primeiro, depois aplique a lente da psicologia para encontrar o que está faltando:
- Landing pages, páginas de preço, fluxos de onboarding
- Funis de inscrição/conversão
- Layouts de dashboard e apresentação de dados
- Navegação e arquitetura da informação
- Páginas de produto e checkout em e-commerce
- Qualquer página onde você queira que os usuários realizem uma ação específica
Processo de Decisão
Quando ativada, siga esta ordem:
- Identifique o tipo de página — landing, preço, onboarding, dashboard, checkout, etc.
- Selecione os 3-5 princípios mais relevantes das prescrições por tipo de página abaixo
- Para cada princípio, declare: o que é → como aplicar nesta página ESPECÍFICA → como é o anti-padrão
- Pondere contra restrições — identidade da marca, acessibilidade e requisitos técnicos sempre têm prioridade
- Recomende mudanças específicas e implementáveis — não conselhos abstratos. Mostre o que alterar na marcação, layout ou cópia. Se puder apontar para uma linha de código, faça isso.
Como Ponderar
Os princípios de psicologia são um insumo entre muitos. A hierarquia de ponderação:
- Identidade da marca e visão criativa (mais alto — o site deve parecer certo e soar certo)
- Acessibilidade e usabilidade (não negociável — conformidade WCAG, alvos de toque, contraste)
- Qualidade técnica (desempenho, SEO, design responsivo)
- Princípios de psicologia (esta skill — influência sutil, não manipulação agressiva)
Nunca sacrifique estética ou confiança do usuário por um truque de psicologia. Se um princípio conflitar com um bom design, o bom design vence.
O Que Esta Skill NÃO É
- NÃO é um manual de padrões obscuros — todo princípio aqui é aplicação ética apenas
- NÃO é um sistema de design completo — ela aumenta as habilidades de design existentes
- NÃO substitui pesquisa com usuários — dados reais de usuários sempre superam a teoria
- NÃO é uma lista de verificação rígida — use os princípios que se encaixam, ignore os que não se encaixam
Prescrições por Tipo de Página (Embutidas)
Os principais princípios por tipo de página, autocontidos para referência rápida. Consulte knowledge/page-prescriptions.md para orientações expandidas e erros comuns.
Homepage / Landing Page
| Princípio | Aplicação |
|---|---|
| Primeiras Impressões | Hero comunica valor em menos de 3 segundos. Formado em 50ms — sem segunda chance. |
| Ancoragem | Lidere com sua métrica ou afirmação mais forte. O primeiro número visto define a referência. |
| Prova Social | Números reais visíveis cedo (usuários, resultados, histórico). Afirmações vagas não convertem. |
| Sinalização de Informação | Navegação clara — o usuário sabe exatamente para onde ir em seguida. |
| Estética-Usabilidade | Polimento visual ganha confiança antes mesmo do conteúdo. O belo parece mais fácil de usar. |
Preço / Inscrição
| Princípio | Aplicação |
|---|---|
| Ancoragem | Mostre o nível premium primeiro ou com mais destaque visual. Todo o resto parece uma pechincha. |
| Aversão à Perda | Enquadre em torno do que os usuários gratuitos PERDEM, não apenas do que os pagos ganham. Perder dói 2x mais. |
| Efeito Padrão | Pré-selecione o nível recomendado. A maioria dos usuários nunca altera os padrões. |
| Compromisso/Consistência | Usuários que já usaram recursos gratuitos estão preparados para assinar — cada passo leva ao próximo. |
Onboarding / Cadastro
| Princípio | Aplicação |
|---|---|
| Compromisso Progressivo | Pequena ação gratuita primeiro, conta depois, pagamento por último. |
| Carga Cognitiva | Uma pergunta por tela supera um formulário longo. Remova tudo que não for essencial. |
| Efeito Zeigarnik | Mostre o progresso (etapa 2 de 4). Tarefas incompletas incomodam — os usuários voltam para finalizar. |
| Reciprocidade | Ofereça valor antes de pedir informações. Acesso gratuito a ferramenta, pré-visualização ou resultado de amostra. |
Dashboard / Exibição de Dados
| Princípio | Aplicação |
|---|---|
| Fragmentação | Agrupe dados por categoria ou prioridade — não uma lista gigante. |
| Memória Espacial | Layout consistente para que usuários recorrentes encontrem as coisas instantaneamente. Não mova as coisas. |
| Satisfação | Destaque o insight único mais importante. Os usuários escolhem a primeira opção aceitável. |
| Reconhecimento sobre Lembrança | Mostre contexto completo (rótulos, carimbos de data/hora, ícones) — não faça os usuários lembrarem. |
Checkout / Pagamento
| Princípio | Aplicação |
|---|---|
| Carga Cognitiva | Opção de checkout como convidado. Campos de formulário mínimos. Uma decisão por vez. |
| Transparência | Mostre TODOS os custos antes da etapa de pagamento. Taxas surpresa são a causa nº 1 de abandono. |
| Aversão à Perda | Selos de confiança e garantias AO LADO do botão de pagamento, não no rodapé. |
| Efeito Padrão | Pré-selecione frete padrão. Pré-marque "salvar informações". Reduza decisões. |
Sobre / Página de Confiança
| Princípio | Aplicação |
|---|---|
| Autoridade | Metodologia, fontes de dados, expertise da equipe — prove que você sabe o que está fazendo. |
| Hierarquia de Confiança | Esta página atende usuários no nível 2-3 (interesse → confiança). Não peça a venda aqui. |
| Transparência | Seja honesto sobre limitações, não apenas pontos fortes. Vulnerabilidade constrói confiança. |
Exemplos de Implementação em Nível de Código
Ancoragem (Página de Preço)
Antes — todos os níveis iguais, sem âncora:
<div class="plans">
<div class="plan">Básico — R$19/mês</div>
<div class="plan">Pro — R$49/mês</div>
<div class="plan">Enterprise — R$99/mês</div>
</div>
Depois — Pro ancorado como padrão visual:
<div class="plans">
<div class="plan">Básico — R$19/mês</div>
<div class="plan featured"> <!-- visualmente proeminente, pré-selecionado -->
<span class="badge">Mais Popular</span>
Pro — R$49/mês
</div>
<div class="plan">Enterprise — R$99/mês</div>
</div>
Por quê: O nível em destaque se torna a âncora. O Básico parece uma pechincha em comparação. O Enterprise existe para fazer o Pro parecer razoável. O selo "Mais Popular" adiciona prova social.
Aversão à Perda (CTA de Inscrição)
Antes — enquadramento baseado em ganho:
<button>Obter Acesso Premium</button>
<p>Desbloqueie todos os recursos e conteúdo premium.</p>
Depois — enquadramento baseado em perda:
<button>Manter Meu Acesso Premium</button>
<p>Sem o Premium, você perderá acesso a insights diários,
dashboards salvos e suporte prioritário.</p>
Por quê: "Você perderá acesso" aciona a aversão à perda (~2x mais forte que ganhos equivalentes). O CTA usa "Manter" — enquadrando como proteção de algo que eles já possuem.
Efeito Zeigarnik (Progresso de Onboarding)
Antes — sem indicação de progresso:
<form>
<h2>Conte-nos sobre você</h2>
{/* 8 campos em uma página */}
</form>
Depois — etapas com progresso visível:
<div className="progress-bar">
<div className="step completed">Perfil</div>
<div className="step active">Preferências</div> {/* atual */}
<div className="step">Revisão</div>
</div>
<form>
<h2>Etapa 2 de 3 — Suas Preferências</h2>
{/* apenas 2-3 campos */}
</form>
Por quê: Barras de progresso incompletas criam tensão psicológica. Os usuários voltam para terminar o que começaram. Dividir 8 campos em 3 etapas de 2-3 campos reduz a carga cognitiva E cria o impulso para completar.
Carga Cognitiva (Checkout)
Antes — criação de conta obrigatória:
<h2>Crie uma Conta para Continuar</h2>
<input placeholder="Email" />
<input placeholder="Senha" />
<input placeholder="Confirmar Senha" />
<button>Criar Conta e Finalizar Compra</button>
Depois — checkout como convidado com criação de conta adiada:
<h2>Finalizar Compra</h2>
<input placeholder="Email (para recibo)" />
<button>Pagar Agora</button>
<p class="subtle">Quer salvar suas informações para a próxima vez?
<a href="/create-account">Crie uma conta</a> após a finalização.</p>
Por quê: Cada campo extra é um ponto de decisão que causa abandono. Feche a venda primeiro. A criação de conta é um pequeno pedido DEPOIS que eles já se comprometeram (princípio de Compromisso/Consistência).
Categorias de Princípios (11)
| Categoria | Contagem | Insight Central |
|---|---|---|
| Atenção | 4 | Os usuários veem menos do que você pensa |
| Gestalt | 8 | Agrupamento visual orienta a compreensão |
| Memória | 10 | Reconhecimento supera lembrança; fragmente tudo |
| Compreensão | 3 | Modelos mentais moldam expectativas |
| Tomada de Decisão | 5 | Menos escolhas, resultados mais claros |
| Motor/Interação | 3 | Alvos grandes, respostas rápidas |
| Motivação | 4 | Autonomia + competência + relacionamento |
| Vieses Cognitivos | 10 | Padrões persistem; primeiras impressões ancoram |
| Persuasão | 9 | Confiança antes do pedido; prove antes da promessa |
| Emoção | 6 | Belo parece mais fácil; prazer ganha lealdade |
| Ética | 3 | Linha tênue entre persuasão e manipulação |
Total: 65 princípios — consulte knowledge/principles.md para o banco de dados completo com definições e implicações de design.
Anti-Padrões (Nunca Faça)
- Contadores de escassez falsos — se não for real, não mostre
- Confirmshaming — "Não, não quero economizar dinheiro" é manipulador
- Custos ocultos no checkout — a causa nº 1 de abandono de carrinho
- Continuidade forçada — assinaturas difíceis de cancelar corroem toda a confiança
- Misdireção — truques visuais para forçar cliques errados
- Prova social falsa — depoimentos fabricados ou números inflados
- Padrões obscuros — pré-marcar opt-ins que o usuário não solicitou
- Padrões de "motel barata" — fácil de entrar, impossível de sair
Fonte
Princípios derivados do guia de Psicologia para UX do NN/g (112 recursos em 11 categorias), adaptados em padrões de design acionáveis. Fundamentos acadêmicos: Kahneman (Teoria do Prospecto), Norman (Design Emocional), Cialdini (Influência), Hick, Fitts, Miller, Zeigarnik.