Sistema de UI para Tabela de Preços
Propósito
O Sistema de UI para Tabela de Preços fornece uma metodologia para projetar a organização visual e estrutural dos planos de preços. Ele garante que os usuários possam comparar facilmente os planos, entender as diferenças de valor e selecionar a opção apropriada sem sobrecarga cognitiva. Este sistema foca no arranjo espacial dos planos, na hierarquia dos recursos e nas afordâncias interativas (como alternadores de faturamento) que apoiam a decisão de compra.
Casos de Uso
- Projetar grades de planos de assinatura para aplicações SaaS.
- Estruturar ofertas de serviços em camadas (ex.: pacotes de Agência).
- Criar matrizes de comparação para combos de produtos físicos.
- Padronizar layouts de preços em uma empresa com múltiplos produtos.
- Implementar "cartões" de preços responsivos que mantenham o contexto em dispositivos móveis.
Quando NÃO Usar
- E-commerce de Produto Único: Use
product-page-optimizationpara itens únicos sem planos concorrentes. - Orçamentos Personalizados Apenas para Empresas: Se cada preço é "Fale Conosco", foque no design do formulário de captura de leads.
- Comparação Pura de Dados: Para comparar especificações técnicas de 10+ itens, use
data-table-ui-system. - Preços Dinâmicos/Leilão: Onde o preço é determinado por lances ou flutuações de mercado em tempo real.
Entradas
- Planos: Os nomes, preços e público-alvo de cada plano.
- Inventário de Recursos: Uma lista abrangente de recursos, categorizados por prioridade.
- Ciclos de Faturamento: Opções de faturamento mensal vs. anual e descontos associados.
- Alvo Principal: Qual plano é a opção "Custo-Benefício" ou "Melhor Valor"?
- Tokens de Estilo da Marca: Escalas de espaçamento, tipografia e cores do sistema pai.
Saídas
- Anatomia da Grade de Preços: Definição do Cartão de Plano (Cabeçalho, Preço, Recursos, CTA).
- Especificação do Alternador de Faturamento: Design para alternar entre diferentes condições de pagamento.
- Lógica de Comparação de Recursos: Regras para exibir, ocultar ou resumir recursos entre os planos.
- Estratégia de Destaque de Plano: Métodos visuais para enfatizar o plano recomendado.
- Plano de Empilhamento Responsivo: Como a grade se adapta a viewports móveis.
Fluxo de Trabalho
1. Estruturar a Anatomia do Plano
Aplique o visual-hierarchy-system ao cartão de preço individual:
- Cabeçalho: Nome do plano e uma breve proposta de valor (ex.: "Para equipes em crescimento").
- Bloco de Preço: A moeda, o valor e o intervalo (ex.: "/mês"). Garanta que o valor seja o elemento mais proeminente.
- Lista de Recursos: Os 5-7 recursos mais importantes.
- CTA: Um botão de alto contraste para selecionar o plano.
2. Projetar o Plano "Âncora" (Destaque)
Identifique o plano principal e torne-o visualmente dominante:
- Elevação: Use uma sombra sutil ou borda para fazê-lo "destacar".
- Cor: Use uma cor da marca para o cabeçalho ou botão CTA.
- Emblema: Adicione uma etiqueta "Mais Popular" ou "Melhor Valor".
- Escala: Aumente ligeiramente a altura do cartão em comparação com os vizinhos.
3. Estabelecer a Lógica de Faturamento
Projete o mecanismo para alternar entre ciclos de faturamento (ex.: Mensal vs. Anual):
- O Alternador: Use um interruptor claro ou interface de abas.
- Sinalização de Desconto: Indique claramente a economia (ex.: "Economize 20%") próximo à opção Anual.
- Preços Contextuais: Garanta que os preços nos cartões sejam atualizados instantaneamente quando o alternador for acionado.
4. Gerenciar a Comparação de Recursos
Organize os recursos para evitar "A Parede de Texto":
- Recursos Principais: Liste os direcionadores de valor únicos no topo.
- Agrupamento de Recursos: Agrupe recursos semelhantes (ex.: "Suporte", "Segurança") se a lista for longa.
- Ícones vs. Texto: Use ícones para recursos binários (Sim/Não) e texto para limites (ex.: "Até 10 usuários").
- Link "Mostrar Tudo": Para planos complexos, mantenha o cartão curto e forneça um link para uma tabela de comparação completa abaixo.
5. Definir o Empilhamento Responsivo
Mapeie como a grade se reorganiza para telas menores:
- Rolagem Horizontal vs. Empilhamento Vertical: No celular, empilhe os planos verticalmente para garantir legibilidade.
- Cabeçalho Fixo: Para pilhas verticais, considere uma barra fixa que mantenha o Nome do Plano e o Preço visíveis enquanto o usuário rola pelos recursos.
- Modo de Comparação de Planos: No celular, permita que os usuários "deslizem" entre os planos para compará-los horizontalmente se a pilha vertical for muito longa.
- Container Queries: Prefira container queries em vez de breakpoints de viewport para o próprio cartão de plano, pois as grades de preços são frequentemente incorporadas em contextos de largura variável (ex.: seção da página inicial vs. página de preços completa).
Regras de Decisão
- O Poder de Três: Três planos (ex.: Básico, Profissional, Enterprise) é o número ideal para reduzir a paralisia de escolha.
- Proeminência do Preço: O preço deve ser o segundo elemento mais proeminente após o selo "Melhor Valor".
- CTAs Consistentes: Todos os planos devem ter um CTA na mesma posição vertical (geralmente alinhado à parte inferior do cartão).
- Regra "Sem Termos Ocultos": Sempre mostre a frequência de faturamento próxima ao preço (ex.: "R$29/mês faturado anualmente").
- Clareza Binária: Use marcas de verificação claras e de alto contraste para recursos incluídos; use um "X" suave ou apenas omita recursos excluídos para evitar ruído visual negativo.
Restrições
- Acessibilidade: Os alternadores devem ser acessíveis por teclado e expor seu estado via
aria-checkedouaria-pressed. O texto do preço deve atender ao contraste WCAG AA (4,5:1), e todos os alvos interativos (alternador, botões CTA) devem atender ao tamanho mínimo de alvo de 24x24px da WCAG 2.2 (2.5.8). - Responsividade: Os cartões de preços nunca devem ter largura fixa; eles devem ser fluidos dentro do
responsive-grid-system. - Suporte a Moedas: Projete para comprimentos variados de símbolos de moeda (ex.: "$10" vs. "1.000 kr") e use propriedades CSS lógicas (
margin-inline,padding-inline) para que os layouts se adaptem corretamente para locais RTL.
Padrões Comuns de Falha
- Sobrecarga de Recursos: Listar 20+ recursos em um único cartão, tornando impossível a varredura.
- Alternadores Invisíveis: Tornar o interruptor de ciclo de faturamento tão pequeno que os usuários não percebem que podem obter um desconto.
- O "CTA Flutuante": Botões que não estão alinhados entre os cartões, fazendo a grade parecer desorganizada.
- Preços Ambíguos: Não esclarecer se um preço é por usuário ou taxa fixa até o checkout.
- Falta de Diferenciação de Planos: Planos que parecem tão semelhantes que o usuário não sabe qual escolher.
Critérios de Validação
- Existe uma hierarquia visual clara entre os planos (o plano recomendado está destacado).
- Os preços são o elemento mais proeminente após os nomes dos planos.
- O alternador de faturamento está claramente visível e atualiza os preços instantaneamente.
- Os recursos são limitados aos 5-7 principais por cartão.
- Os CTAs estão alinhados horizontalmente em todos os cartões da grade.
- A visualização móvel empilha os cartões verticalmente ou fornece um padrão de deslize acessível.
- Todos os elementos interativos (alternadores, botões) são acessíveis por teclado.
- As taxas de contraste para preços e selos atendem à WCAG AA.