Sistema de Interface de Busca

O que Sistema de Interface de Busca faz?

Propósito

O Sistema de Interface de Busca fornece uma metodologia para projetar uma experiência de descoberta coesa e de alto desempenho. Enquanto internal-search-optimization foca no lado de "crescimento" e na lógica, este sistema define os padrões de design e a ergonomia espacial da interface de busca. Ele garante que os usuários possam encontrar o ponto de entrada da busca instantaneamente, interagir com ele sem esforço (mesmo em dispositivos móveis) e processar os resultados de uma forma que minimize a carga cognitiva e maximize o "faro da informação".

Casos de Uso

• Projetar pontos de entrada de busca em cabeçalhos globais ou barras de ferramentas persistentes.
• Criar a experiência de "Central de Comandos" ou "Omnibox" para aplicações SaaS.
• Estruturar a "Busca Visual" e os menus suspensos de autocomplete em e-commerce.
• Projetar Páginas de Resultados de Busca (SERPs) de alta densidade para documentação ou catálogos.
• Implementar sobreposições de "Busca em Tela Cheia" para designs mobile-first.

Quando NÃO Usar

• Páginas Estáticas: Onde o conteúdo é fixo e a descoberta não é um objetivo principal.
• Micro-Sites (<20 páginas): Onde uma navegação robusta e breadcrumbs são suficientes para a localização.
• Dashboards Puramente Relacionais: Onde os dados são acessados exclusivamente por meio de filtros e abas definidos, em vez de busca por texto livre.

Entradas

1. Perfil de Intenção do Usuário: O usuário está procurando um SKU específico (Precisão) ou explorando um tópico (Descoberta)?
2. Densidade do Catálogo: Quantos itens existem no sistema e quão diversa é a metadados?
3. Dispositivo Principal: A busca é predominantemente usada em dispositivos móveis (toque) ou desktop (teclado)?
4. Sistemas Existentes: Sistemas de cores, tokens de espaçamento e escalas tipográficas (de fluid-spacing-system e fluid-typography-system).

Saídas

1. Especificação do Gatilho de Busca: Definições visuais para a barra de busca (estática, expansível ou apenas ícone).
2. Anatomia do Autocomplete: Design do menu suspenso de sugestões, incluindo categorias, imagens e estados de teclado.
3. Blueprint do Layout da SERP: Organização espacial da página de resultados, equilibrando densidade de metadados e legibilidade.
4. Mapa de Interação Mobile: Um plano de como a busca transita de um ícone no cabeçalho para uma interface focada em tela cheia.

Fluxo de Trabalho

1. Definir o Padrão do Gatilho de Busca

Escolha um gatilho com base em sua importância para a jornada do usuário:

• A Barra Persistente: Sempre visível, entrada de alto contraste. Melhor para e-commerce ou sites com busca primária.
• A Entrada Expansível: Começa como um ícone ou barra pequena e expande ao clicar. Melhor para sites onde a busca é secundária à navegação.
• O Gatilho "Command + K": Uma dica sutil ou ícone que abre um modal. Melhor para ferramentas SaaS ou documentação para usuários avançados.

2. Projetar a Experiência de Autocomplete (Instantânea)

Reduza a "distância até o resultado" fornecendo feedback imediato:

• Categorização: Agrupe resultados por tipo (ex.: Produtos, Artigos, Ajuda).
• Metadados Ricos: Inclua miniaturas, preços ou badges de status no menu suspenso.
• Estado Focado: Use interactive-state-system para destacar claramente a sugestão atualmente selecionada para usuários de teclado.
• Padrão ARIA: Modele a relação entrada/listbox no padrão Combobox do ARIA APG (role="combobox" com aria-expanded, aria-controls e aria-activedescendant apontando para o role="option" destacado) em vez de inventar um modelo de interação personalizado.

3. Estabelecer a Hierarquia da Página de Resultados (SERP)

Aplique visual-hierarchy-system aos resultados da busca:

• O "Eco da Consulta": Exiba o termo de busca do usuário de forma proeminente para confirmar o contexto.
• Cartões de Resultado: Use card-ui-system para padronizar o formato do resultado.
• Peso dos Metadados: Garanta que os títulos sejam os mais proeminentes, seguidos pelo "Trecho" (a parte do conteúdo que corresponde à consulta).

4. Construir a Camada de Descoberta Mobile

A busca em dispositivos móveis é um modo dedicado, não um widget:

• A Mudança de Modo: Tocar na busca deve abrir uma sobreposição em tela cheia para remover distrações de fundo.
• Foco Automático: Focar automaticamente a entrada e acionar o teclado.
• A Ação da "Zona do Polegar": Coloque um botão "Limpar" e "Cancelar" ao fácil alcance (mín. 44x44px).

5. Definir os Estados de Carregamento e Vazio

• Resultados Esqueleto: Use skeleton-state-system para manter a estabilidade do layout enquanto os resultados são carregados.
• Sem Resultados Inteligente: Use empty-state-system para fornecer caminhos alternativos quando nenhuma correspondência exata for encontrada.

Regras de Decisão

• A Regra da Visibilidade: Se a busca é usada por >30% do seu público, ela deve ser uma barra persistente de largura total no desktop.
• O Mínimo de "Três Palavras": Não comece a mostrar sugestões automáticas até que o usuário tenha digitado pelo menos 3 caracteres (para evitar tremor visual).
• O Limite de Resultados: Limite as sugestões de autocomplete a 5-8 itens. Se houver mais, forneça um link "Ver todos os resultados para '...'".
• Faro da Informação: Negrite os termos correspondentes no trecho dos resultados da busca para ajudar os usuários a escanear rapidamente em busca de relevância.

Restrições

• Acessibilidade: A entrada de busca deve ter um rótulo visível (ou aria-label). Usuários de teclado devem poder navegar na lista de autocomplete usando as teclas de seta, selecionar com Enter e dispensar com Escape sem perder a consulta digitada. Todos os alvos interativos (botão limpar, linhas de sugestão) devem atender ao tamanho mínimo de alvo de 24x24px do WCAG 2.2 (2.5.8).
• Responsividade: Os menus suspensos de autocomplete nunca devem exceder a largura da janela de visualização.
• Contraste: O destaque do texto correspondente deve atender às taxas de contraste AA do WCAG (geralmente usando uma mudança na cor de fundo ou negrito).

Padrões Comuns de Falha

• A "Busca Oculta": Forçar os usuários a procurar por um ícone de lupa quando a busca é a principal forma de navegação.
• O Menu Suspenso "Desconectado": Menus de autocomplete que não correspondem à largura ou alinhamento da entrada, criando uma "flutuação" visual.
• Armadilha de Teclado: Não permitir que os usuários saiam da sobreposição de busca ou do menu suspenso com a tecla Escape.
• Os Resultados Sem Saída: Não manter o termo de busca na caixa de entrada na página de resultados, forçando o usuário a redigitar se quiser refinar.

Critérios de Validação

• O ponto de entrada da busca está visível em até 2 segundos de escaneamento da página.
• O menu suspenso de autocomplete inclui metadados ricos (imagens/rótulos) quando apropriado.
• A navegação por teclado (Setas, Enter, Escape) está totalmente definida para a busca, seguindo o padrão combobox do ARIA APG.
• A busca em dispositivos móveis abre um modo de tela cheia com foco imediato no teclado.
• A página de resultados da busca ecoa a consulta e destaca os termos correspondentes.
• Estados de esqueleto são usados para o carregamento dos resultados.
• Todos os elementos interativos atendem ao tamanho mínimo de alvo de toque de 44x44px.