Sistema de Interface Kanban

Sistema de Interface de Quadro Kanban

Propósito

O Sistema de Interface de Quadro Kanban fornece um framework de layout padronizado, de alta densidade e acessível para gerenciar colunas de status de fluxo de trabalho, itens de tarefa baseados em cartões e pipelines de processo. Quadros Kanban são telas de interação centrais em aplicativos SaaS modernos, ferramentas de gerenciamento de projetos, sistemas de rastreamento de candidatos (ATS) e pipelines de CRM de vendas.

Projetar uma interface Kanban eficaz requer equilibrar alta densidade visual, rolagem independente de colunas, hierarquia espacial clara, feedback de limite de Trabalho Em Andamento (WIP) em tempo real e responsividade fluida entre viewports. Além disso, implementações tradicionais de arrastar e soltar apenas com ponteiro frequentemente criam graves barreiras de acessibilidade. Este skill preenche a lacuna entre design e execução técnica, estabelecendo regras espaciais para contenção de colunas, anatomia de cartões de tarefa, alvos de toque e fluxos de trabalho de reordenação por teclado/leitor de tela em conformidade com os padrões WCAG AA.

Casos de Uso

• Sistemas de Gerenciamento de Projetos e Tarefas: Estruturando sprints, colunas de backlog (ex.: Backlog, Em Andamento, Revisão de Código, Concluído) e quadros de rastreamento de issues.
• Sistemas de Rastreamento de Candidatos (ATS): Visualizando etapas de recrutamento de candidatos (ex.: Candidatou-se, Triagem, Entrevista, Oferta, Contratado).
• Pipelines de Vendas e CRM de Negócios: Gerenciando etapas de leads de vendas com valores de negócio agregados e probabilidades por estágio por coluna.
• Calendários Editoriais de Conteúdo: Rastreando fluxos de trabalho de produção de artigos e mídia desde a ideação até o drafting, revisão e publicação.
• Espaços de Trabalho de Atendimento de Pedidos: Monitorando processamento de pedidos de múltiplas etapas em interfaces de logística ou de display de cozinha.

Quando NÃO Usar

• Grades de Dados e Listas Financeiras Tabulares: Para dados densos de múltiplas colunas que exigem classificação, filtragem e edição em lote de células, use sistema-de-interface-de-tabela-de-dados.
• Árvores de Documentação ou Arquivos Hierárquicas: Para estruturas de arquivo profundamente aninhadas e esboços de documentos, use sistema-de-navegacao-em-arvore.
• Layouts de Shell SaaS Bloqueados no Viewport: Para a estrutura geral do aplicativo (barras de navegação, barras superiores, painéis recolhíveis), use sistema-de-layout-de-dashboard.
• Feeds de Atividade de Coluna Única: Para feeds de fluxo cronológico ou listas de tarefas verticais simples, use sistema-de-atividade-em-linha-do-tempo ou sistema-de-interface-de-cartao.

Entradas

1. Estágios do Fluxo de Trabalho e Taxonomia de Colunas: A lista ordenada de status do fluxo de trabalho (ex.: A Fazer, Em Andamento, Revisão, Concluído) e seus metadados de coluna (limites WIP, cores de destaque do status, totais de negócios).
2. Matriz de Densidade de Dados do Cartão: Atributos a serem exibidos por cartão de tarefa (ex.: ID da Tarefa, Título, Tag de Prioridade, Data de Vencimento, Avatares dos Responsáveis, Progresso de Subtarefas, Contagens de Anexos).
3. Viewport e Contexto do Shell: Limites de layout fornecidos pelo shell do aplicativo pai (de sistema-de-layout-de-dashboard).
4. Tokens de Design: Paletas de cores, superfícies de elevação, escalas de espaçamento e tokens de tipografia (de sistema-de-cores-acessiveis, sistema-de-elevacao-e-profundidade e sistema-de-espacamento-fluido).

Saídas

1. Especificação da Tela de Coluna Horizontal: Definições de layout espacial para contêineres de rolagem horizontal travados no viewport, larguras de coluna fixas e lacunas entre colunas.
2. Anatomia do Cabeçalho da Coluna e Limite WIP: Designs visuais para cabeçalhos de coluna, contadores de badge, limites de alerta de WIP (normal, aproximando-se, excedido) e gatilhos de ação de adição rápida.
3. Especificações do Componente Cartão de Tarefa: Blueprints de layout estruturado para cartões de tarefa padrão, compacto e expandido, incluindo alças de arrasto, grades de metadados e estados de interação hover/focus/segurado.
4. Modelo Acessível de Teclado e Arrastar e Soltar: Mapeamentos de papéis ARIA (role="region", role="list", role="listitem"), rotas de gerenciamento de foco, atalhos de teclado para reordenação e padrões de anúncio aria-live.
5. Estratégia de Adaptação Responsiva para Dispositivos Móveis: Diretrizes de adaptação de layout alternando layouts horizontais de várias colunas para visualizações segmentadas em abas ou painéis de acordeão empilhados em telas pequenas.

---

Fluxo de Trabalho

1. Estabelecer a Estrutura da Tela de Coluna Horizontal

Estruture o espaço de trabalho principal do quadro dentro de um shell travado no viewport (sistema-de-layout-de-dashboard):

• Dimensionamento do Contêiner: Defina o wrapper do quadro como display: flex; flex-direction: row; height: 100%; overflow-x: auto; overflow-y: hidden; para permitir rolagem horizontal entre colunas enquanto mantém o cabeçalho do quadro fixo.
• Dimensões da Coluna: Defina larguras de coluna fixas ou com flex-shrink (min-width: 280px; max-width: 340px; width: 300px;). Evite que as colunas encolham abaixo de 280px para evitar truncamento de texto e alvos de toque comprimidos.
• Calhas e Preenchimento: Defina um espaçamento consistente entre colunas (ex.: gap: var(--space-m, 16px)) e preenchimento horizontal (ex.: padding: 16px 24px).
• Shell do Contêiner da Coluna: Estilize cada coluna como um contêiner flex independente (display: flex; flex-direction: column; max-height: 100%; background: var(--surface-neutral-subtle); border-radius: 8px; border: 1px solid var(--border-subtle);).

2. Projetar o Cabeçalho da Coluna e a Sinalização de WIP

Cada cabeçalho de coluna atua como uma barra de controle fixa no topo da pilha da coluna:

• Cabeçalho de Coluna Fixo: Posicione o cabeçalho no topo da pilha flex da coluna (flex-shrink: 0; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between;).
• Elementos do Cabeçalho:
  1. Indicador de Destaque de Status: Uma pílula colorida de 10x10px ou borda esquerda correspondente ao estágio (ex.: Azul = Em Andamento, Roxo = Revisão, Verde = Concluído).
  2. Título da Coluna: Texto truncado (font-weight: 600; font-size: 0.9375rem; color: var(--text-primary)).
  3. Contador de Cartões e Badge de Limite WIP: Exiba a contagem de itens juntamente com o limite WIP (ex.: "3/5").
  4. Menu de Ações da Coluna: Um botão de ícone de 32x32px (...) fornecendo acesso às configurações, classificação ou opções de recolhimento da coluna.
• Estados Visuais do Limite WIP:
  • Normal (Abaixo do Limite): Fundo de badge neutro sutil (background: var(--surface-neutral-muted); color: var(--text-secondary)).
  • Aviso (No Limite): Fundo de badge âmbar (background: var(--surface-warning-subtle); color: var(--text-warning-bold)).
  • Excedido (Acima do Limite): Badge vermelho sólido ou borda de cabeçalho destacada (background: var(--surface-danger-subtle); border-color: var(--border-danger); color: var(--text-danger)), com um ícone de aviso acessível e tooltip explicando o gargalo do fluxo de trabalho.

3. Construir a Região de Rolagem Independente da Coluna

Evite que todo o quadro ou página role verticalmente ao inspecionar uma longa lista de cartões em uma única coluna:

• Contêiner da Lista de Cartões: Aplique flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 12px 12px 12px; display: flex; flex-direction: column; gap: 8px; ao contêiner da lista (role="list").
• Inércia e Rolagem Suave: Habilite -webkit-overflow-scrolling: touch; e barras de rolagem personalizadas (barras de rolagem sutis de 6px) para que colunas individuais rolem suavemente sem acionar movimento global da página.
• Contêiner de Estado Vazio: Se uma coluna contiver 0 cartões, exiba um contorno tracejado de zona de drop (border: 2px dashed var(--border-muted); border-radius: 6px; padding: 24px; text-align: center;) com um rótulo sutil ("Nenhuma tarefa neste estágio") e um botão rápido "Adicionar Cartão".

4. Construir a Hierarquia do Componente Cartão de Tarefa

Projete cartões de tarefa com uma ordem de varredura visual clara usando sistema-de-hierarquia-visual:

• Estrutura Base do Cartão: Renderize cada cartão como um item de lista distinto (role="listitem" / article) com background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 12px; box-shadow: var(--shadow-sm); transition: transform 0.15s ease, box-shadow 0.15s ease; cursor: grab;.
• Divisão de Regiões do Cartão:
  1. Linha Superior (Tags e Ações): Badge de prioridade (ex.: "Alta", "Urgente" em pílulas de alto contraste) e ID de referência da tarefa (ex.: "PROJ-1042"). Inclua um botão de alça de arrasto de 24x24px (aria-label="Reordenar cartão PROJ-1042").
  2. Região Central (Título e Descrição): Título principal da tarefa (font-weight: 600; font-size: 0.875rem; line-clamp: 2; margin-bottom: 8px;). Resumo de texto opcional de 1 linha.
  3. Linha Inferior (Progresso e Responsáveis): O lado esquerdo mostra o indicador de data de vencimento (destacado em vermelho se atrasado) e o progresso da lista de subtarefas (ex.: "3/5 ✓"). O lado direito exibe avatares empilhados dos responsáveis (sistema-de-avatar-de-usuario).
• Estados de Interação do Cartão:
  • Hover: Aumento sutil da sombra de elevação (box-shadow: var(--shadow-md); border-color: var(--border-hover)).
  • Foco: Anel de foco altamente visível com deslocamento de 2px (outline: 2px solid var(--focus-ring); outline-offset: 2px).
  • Arrastando / Estado Segurado: opacity: 0.6; transform: scale(1.02) rotate(1deg); cursor: grabbing; box-shadow: var(--shadow-xl); z-index: 1000;.
  • Sinal de Alvo de Drop: Ao passar um cartão sobre uma zona de drop de coluna, exiba um espaço reservado de inserção animado (height: 60px; border: 2px dashed var(--brand-primary); border-radius: 6px; background: var(--brand-subtle);).

5. Implementar Arrastar e Soltar Acessível por Teclado e Leitor de Tela

Frameworks padrão de arrastar e soltar (API de arrastar e soltar HTML5) são frequentemente inacessíveis para usuários de teclado e leitores de tela. Implemente um modo de navegação alternativo explícito por teclado:

• Atalho de Reordenação por Teclado: Permita que os usuários foquem a alça de arrasto ou o cartão e pressionem Espaço ou Enter para entrar no "Modo Mover".
• Foco e Anúncio na Seleção: Quando o Modo Mover for ativado, defina aria-grabbed="true" (ou aria-pressed="true" no gatilho de movimento), exiba um halo visual "Segurado" ao redor do cartão e anuncie por meio de uma região aria-live="polite" invisível: "Cartão PROJ-1042 segurado. Atualmente na coluna 'Em Andamento', posição 2 de 5. Use as teclas de Seta ou Alt+Setas para mover, Espaço para soltar, Escape para cancelar."
• Movendo Através e Dentro de Colunas:
  • Teclas de Seta para Cima / Baixo: Reordenar o cartão dentro da lista da coluna atual.
  • Teclas de Seta para Esquerda / Direita: Mover o cartão para a coluna adjacente à esquerda ou direita, anexando-o à lista dessa coluna.
• Confirmação de Soltar e Cancelar:
  • Espaço / Enter: Confirmar posicionamento. Atualizar posição no DOM, liberar estado de segurado, definir foco no cartão solto e anunciar: "Cartão PROJ-1042 solto na coluna 'Revisão', posição 1 de 3."
  • Escape: Cancelar movimento. Retornar o cartão à posição original e anunciar: "Movimento cancelado. Cartão retornado para 'Em Andamento', posição 2."

6. Adaptação para Viewport de Dispositivo Móvel

A rolagem horizontal de várias colunas em telas pequenas de dispositivos móveis (<768px) leva a uma severa fadiga de deslize horizontal e a um descarte estranho de cartões. Implemente uma estratégia de transformação responsiva:

• Abas de Coluna Segmentadas (Padrão Móvel Recomendado): Em telas abaixo de 768px, oculte a tela de rolagem horizontal. Renderize um controle de aba segmentada fixa no topo do quadro (sistema-de-controle-segmentado), exibindo títulos de coluna com contagens de itens (ex.: [ A Fazer (4) ] [ Em Andamento (3) ] [ Concluído (8) ]).
• Visualização Ativa de Coluna Única: Exiba apenas a lista da coluna ativa em largura total (width: 100%).
• Modal/Folha de Ações "Mover Para" Contextual: Quando um cartão for tocado no celular, forneça um botão explícito "Mover para..." no menu do cartão. Tocá-lo abre uma folha inferior (implementacao-de-folha-inferior-acessivel) listando as colunas de destino para realocação com um toque, eliminando completamente os gestos de arrastar por toque em telas móveis.

---

Regras de Decisão

Estratégia de Layout de Coluna para Dispositivo Móvel

Largura do Viewport	Padrão de IU Recomendado	Mecânicas de Interação
Desktop (>1024px)	Grade de Tela Horizontal de Várias Colunas	Colunas visíveis simultaneamente, arrastar e soltar com ponteiro + Modo Mover por teclado.
Tablet (768px - 1023px)	Quadro de Coluna Compacta (Rolagem Horizontal)	Colunas mais estreitas (260px), encaixe suave de deslize horizontal por toque.
Dispositivo Móvel (<768px)	Abas de Coluna Segmentadas + Coluna Ativa Única	Abas de status no topo, cartões de largura total de coluna única, folha inferior "Mover Para".

Estratégia de Largura de Coluna

• Largura de Coluna Fixa (300px): Melhor para quadros padrão com 3-6 colunas. As colunas mantêm larguras previsíveis e colunas adicionais transbordam suavemente para o overflow horizontal.
• Colunas Flex Fluidas (flex: 1; min-width: 280px): Melhor para quadros com exatamente 3 colunas (ex.: A Fazer, Em Andamento, Concluído) em telas largas, permitindo que as colunas preencham toda a largura do viewport uniformemente sem espaço em branco não utilizado à direita.

Tratamento de Limite WIP Excedido

• Limite WIP Suave (Apenas Aviso): Destaque o cabeçalho da coluna em âmbar/vermelho com um badge de limite excedido, mas permita que os usuários movam cartões para a coluna. Recomendado para fluxos de trabalho de equipes criativas e ágeis onde gargalos temporários ocorrem.
• Limite WIP Duro (Bloqueio): Impedir o drop de cartões na coluna quando o limite for atingido, exibindo um modal ou alerta inline: "Limite WIP atingido (5/5). Resolva as tarefas existentes antes de adicionar mais." Desative o movimento por teclado para essa coluna. Recomendado para fluxos de trabalho operacionais estritamente regulamentados.

---

Restrições

• Acessibilidade (WCAG 2.1 AA):
  • SC 2.1.1 Teclado: Cada função do cartão (editar, reordenar, excluir, mover) deve ser acessível e operável usando apenas o teclado.
  • SC 2.4.7 Foco Visível: Cartões e alças de arrasto focados devem apresentar um anel de foco sem recorte com uma taxa de contraste mínima de 3:1 contra o fundo.
  • SC 4.1.3 Mensagens de Status: Ações de movimentação de cartões, avisos de WIP e resultados de filtro devem ser anunciados por meio de uma região aria-live="polite".
  • SC 2.5.8 Tamanho do Alvo: Alças de arrasto, gatilhos de menu do cartão (...) e botões de adição rápida devem fornecer um alvo de toque mínimo de 24x24px (44x44px preferido em dispositivos de toque).
• Contenção de Layout e CLS: Contêineres de lista de colunas devem especificar overflow-y: auto com cabeçalhos fixos para evitar colapso de layout ou salto no nível da página quando ocorrerem atualizações dinâmicas de cartões.
• Desempenho: Renderize listas de cartões de forma eficiente. Para quadros contendo mais de 200 cartões no total, implemente rolagem de lista virtual (implementacao-de-lista-virtual) por coluna para manter a renderização a 60fps durante operações de arrasto.

---

...

[truncado para tradução]