Sistema de Interface de Configurações

O que Sistema de Interface de Configurações faz?

Propósito

O Sistema de Interface de Configurações fornece uma metodologia para organizar, projetar e estruturar preferências de usuário, configurações de conta, setups de workspace e portais de faturamento. Interfaces de configurações são frequentemente negligenciadas, levando a estruturas visuais fragmentadas, modelos de navegação desconectados, baixa responsividade e barreiras severas de acessibilidade. Este sistema estabelece uma abordagem padronizada para composição espacial, arquiteturas de navegação, modelos de persistência de estado (por exemplo, auto-salvar vs. salvar em lote manual) e affordances visuais para reduzir a carga cognitiva e evitar perda de dados não salvos.

Casos de Uso

• Perfis de Usuário e Contas: Projetar interfaces para atualizar dados pessoais, credenciais de segurança e preferências.
• Administração de Workspace SaaS: Organizar configurações de múltiplos inquilinos ou equipes, funções de membros, integrações e permissões.
• Centros de Configuração de Notificações: Criar painéis de alternância granulares baseados em matriz para alertas por e-mail, push e in-app.
• Centrais de Faturamento e Assinatura: Projetar visões gerais claras de planos de preços, métricas do plano atual, métodos de pagamento e listas históricas de faturas.
• Configurações de Desenvolvedor: Organizar opções técnicas complexas como rotação de chaves de API, webhooks e alternâncias de ambiente.

Quando NÃO Usar

• Consentimento Implícito e Barras de Privacidade: Para aceitação de cookies, categorização de cookies e sobreposições de conformidade, use consent-and-preference-system.
• Formulários de Onboarding Únicos: Para etapas simples de cadastro de coluna única ou captura de pesquisa inicial, use form-design-system.
• Interfaces de Baixa Complexidade (<5 configurações no total): Para setups extremamente simples, não construa um sistema aninhado de múltiplas páginas; integre essas opções diretamente no menu suspenso do perfil no cabeçalho global ou nos rodapés da barra lateral.

Entradas

1. Inventário de Configurações: Um catálogo abrangente de todos os atributos configuráveis, agrupados logicamente.
2. Modelo de Persistência de Estado: Determinação se as alterações são aplicadas instantaneamente (auto-salvar) ou retidas até confirmação (salvar em lote manual).
3. Funções de Acesso do Usuário: Informações sobre quem pode visualizar/modificar linhas específicas (por exemplo, Administrador, Editor de Faturamento, Visualizador).
4. Tokens de Espaçamento e Tipografia: Valores de design existentes (de fluid-spacing-system e fluid-typography-system).

Saídas

1. Modelo de Navegação de Configurações: Escolha do layout de navegação (Barra Lateral, Sub-abas ou Acordeão) com base na densidade das seções.
2. Especificação de Layout Mestre-Detalhe: Composição de grade/flex que mapeia os controles da barra lateral para seus respectivos painéis de configurações ativos.
3. UX de Persistência de Estado e Log de Alterações: Padrões visuais e auditivos para confirmação de salvamento, estados de carregamento e banners de estado sujo.
4. Anotações Acessíveis de Campos e Permissões: Caminhos de teclado, tags de legenda semântica e regras claras de estilo para campos desabilitados/somente leitura.

Fluxo de Trabalho

1. Agrupar e Priorizar Configurações (Agrupamento)

Realize classificação por cartões ou agrupamento temático no inventário de configurações:

• Nível Pessoal: Informações do perfil, avatar, detalhes de login, segurança pessoal (MFA).
• Nível Organizacional/Workspace: Nome geral do workspace, convites de membros, funções, integrações globais.
• Nível de Entrega/Sistema: Regras de notificação, alertas sonoros, opções de tema (Modo Claro/Escuro).
• Nível Financeiro: Planos de preços, cartões de crédito, contato de faturamento, tabelas de faturas.
• Zona de Perigo: Excluir conta, desativar workspace ou transferir propriedade.

2. Escolher a Arquitetura de Layout e Navegação

Selecione o padrão de navegação espacial:

• Orientado por Barra Lateral (Mestre-Detalhe): Recomendado para B2B SaaS e setups densos. Use uma coluna de navegação à esquerda persistente (Mestre) e um painel de conteúdo à direita com rolagem contida (Detalhe).
• Orientado por Abas: Melhor para painéis de configurações leves a médios (<5 visualizações). Use um menu de abas secundárias horizontais (usando tab-ui-system ou segmented-control-system) abaixo do cabeçalho principal da página de configurações.
• Rolagem de Página Única (Acordeão): Melhor para aplicativos móveis simples ou listas de configurações onde subseções podem expandir/recolher inline para manter a altura vertical gerenciável.

3. Estabelecer o Modelo de Salvamento e Feedback

Escolha um mecanismo claro de persistência de estado para cada cartão de configurações:

• Padrão Auto-Salvar:
  • Usado para opções isoladas e de baixo risco (alternar Modo Escuro, preferências de notificação).
  • Feedback: Renderize um spinner/indicador de carregamento inline e um indicador de texto "Salvo" claro adjacente à alternância. O indicador deve desaparecer após 1-2 segundos de inatividade.
• Padrão Salvar em Lote (Estado Sujo):
  • Usado para formulários de alto risco ou campos altamente correlacionados (atualizar senha, endereço de faturamento).
  • Feedback: Exiba um banner flutuante de posição fixa no cabeçalho ou rodapé indicando "Você tem alterações não salvas."
  • Ações: Forneça dois botões proeminentes: "Salvar Alterações" (CTA Primário) e "Descartar" (Texto estilizado secundário). Desabilite a navegação da barra lateral/abas quando sujo, ou acione um modal de confirmação "Perda de alterações não salvas" se o usuário tentar clicar para sair.

4. Projetar Matrizes de Configurações de Alta Densidade

Para centros de notificação ou tabelas de permissões granulares:

• Use Grades de Matriz: Alinhe caixas de seleção ou interruptores em colunas correspondentes a canais de entrega (por exemplo, E-mail, In-app, SMS) e linhas correspondentes a eventos (por exemplo, "Mencionado em comentário", "Tarefa atribuída").
• Alinhamento de Cabeçalhos de Coluna: Mantenha os rótulos fixos na rolagem vertical para preservar o contexto.
• Destaques de Linha Prontos para Teclado: Use estilos de interactive-state-system para que focar uma célula destaque sua linha correspondente.

5. Estruturar o Cartão de "Zona de Perigo"

Ações irreversíveis e destrutivas requerem um tratamento visual dedicado:

• Isolamento Visual: Agrupe ações (Desativar Workspace, Excluir Conta) em um único cartão na parte inferior absoluta do layout.
• Alertas de Perigo de Alto Contraste: Use bordas vermelhas, um fundo de aviso vermelho claro sutil e avisos em negrito detalhando as consequências.
• Modal de Dupla Confirmação: Não acione a destruição instantaneamente. Clicar no botão de ação deve abrir um modal (overlay-and-dialog-system) exigindo que o usuário digite explicitamente o nome do recurso (por exemplo, "excluir nome-do-workspace") para confirmar.

6. Projetar para Responsividade Móvel

• Recolher para Linear Mestre-Primeiro: Em viewports abaixo de 768px, recolha a lista da barra lateral e o painel de detalhes do conteúdo em uma lista mestre linear.
• Navegação de Subpágina: Clicar em uma opção da barra lateral no dispositivo móvel abre um painel deslizante de largura total contendo apenas aquela seção de detalhes, completo com um cabeçalho de trilha de navegação "Voltar para Configurações" fixo.
• Aumentar Alvos de Toque: Expanda caixas de seleção, interruptores e alvos de fechamento para um mínimo de 44px x 44px para acomodar a interação móvel por polegar.

Regras de Decisão

• Auto-Salvar vs. Salvar Manual: Use Auto-Salvar quando uma alternância/entrada atuar como uma preferência de usuário imediata (como tema escuro ou áudio de alerta). Use Salvar em Lote Manual quando campos são logicamente agrupados e dependem de validação (como alteração de e-mail/senha, informações de faturamento) para evitar atualizações incompletas ou inválidas no banco de dados.
• O Limite da Barra Lateral: Use uma navegação de barra lateral vertical persistente para conjuntos de configurações contendo 5 ou mais seções distintas. Para 4 ou menos seções, use uma barra de abas secundárias horizontais abaixo do cabeçalho principal.
• Descarte de Alterações Não Salvas: Se um usuário modificar uma entrada em uma visualização de salvar manual e clicar em uma aba/item de navegação sem salvar, sempre bloqueie a navegação e acione um diálogo de confirmação: "Descartar alterações não salvas?"

Restrições

• Acessibilidade (Estrutura Semântica):
  • Agrupe campos com tags <fieldset> e <legend> para garantir que a tecnologia assistiva leia o contexto de controles aninhados.
  • Os controles de formulário devem usar rótulos programaticamente associados (<label for="...">) ou aria-labelledby.
  • Use aria-live="polite" em indicadores de auto-salvar inline para que leitores de tela sejam notificados sobre salvamentos em segundo plano sem interromper o foco de digitação.
  • Indicadores de foco ativos devem satisfazer uma taxa de contraste de pelo menos 3:1 e não devem ser obscurecidos por cabeçalhos fixos ou o banner de alterações não salvas (WCAG 2.2 SC 2.4.11).
• Responsividade: Tabelas de grade de múltiplas colunas devem empilhar em linhas limpas ou tabelas de rolagem horizontal em viewports pequenas. Elementos de texto devem usar word-break: break-word para evitar que chaves de API longas ou URLs de webhook transbordem.
• Hierarquia Visual: Agrupe configurações relacionadas em "cartões" visualmente isolados com margem padrão (--space-l) para reduzir a carga cognitiva em comparação com uma única lista infinita.

Padrões Comuns de Falha

• "Falha Silenciosa de Salvamento": Quando uma alternância de auto-salvar falha em segundo plano sem mostrar um estado de erro, deixando o usuário acreditando que sua alteração foi registrada.
• "Perda Acidental": Navegar para longe de uma página de configurações parcialmente preenchida perde todas as alterações sem exibir um modal de confirmação ou reter o estado.
• "Grade de Configurações Misteriosa": Criar grandes matrizes multidimensionais (por exemplo, notificações) sem cabeçalhos de coluna ou linha persistentes, forçando os usuários a alinhar itens com os dedos na tela.
• Armadilhas de Foco em Modais de Zona de Perigo: Deixar o foco do teclado escapar do modal de confirmação de exclusão para a página de fundo, permitindo que os usuários enviem acidentalmente configurações de fundo enquanto tentam digitar uma confirmação de exclusão.
• Rotulagem com Placeholder: Usar texto de placeholder de entrada em vez de tags <label> reais e persistentes. Uma vez que a digitação começa, o contexto é perdido.

Critérios de Validação

• Uma navegação de barra lateral vertical persistente é usada para 5+ visualizações de configurações, recolhendo-se graciosamente para uma navegação de subvisão deslizante em tamanhos de tela móvel.
• Alternâncias de preferência de baixo risco usam o padrão Auto-Salvar com um indicador de status de salvamento inline aria-live.
• Formulários críticos de múltiplos campos usam o padrão Salvar em Lote Manual com um banner flutuante/fixo persistente "Alterações Não Salvas".
• Ações destrutivas são agrupadas em um cartão de "Zona de Perigo" visualmente isolado com um diálogo de confirmação de múltiplas etapas.
• HTML semântico (<fieldset>, <legend>, <label>) é usado para todos os grupos de entrada.
• Indicadores de foco ativos satisfazem as regras de contraste WCAG 2.2 e não são obscurecidos por elementos de sobreposição ou banners flutuantes.
• A taxa de contraste de todo o texto atende WCAG AA (mínimo 4.5:1, 3:1 para texto grande/ícones).
• Alvos de toque em dispositivos móveis satisfazem o tamanho de alvo 44px x 44px para entradas primárias.