Sistema de Interfaz de Búsqueda

¿Qué hace Sistema de Interfaz de Búsqueda?

Propósito

El Sistema de Interfaz de Búsqueda proporciona una metodología para diseñar una experiencia de descubrimiento cohesiva y de alto rendimiento. Mientras que internal-search-optimization se centra en el lado del "crecimiento" y la lógica, este sistema define los patrones de diseño y la ergonomía espacial de la interfaz de usuario de búsqueda. Garantiza que los usuarios puedan encontrar el punto de entrada de búsqueda al instante, interactuar con él sin esfuerzo (incluso en dispositivos móviles) y procesar los resultados de una manera que minimice la carga cognitiva y maximice el "olor a información".

Casos de Uso

• Diseñar los puntos de entrada de búsqueda en encabezados globales o barras de herramientas persistentes.
• Crear la experiencia de "Centro de Comandos" u "Omnibox" para aplicaciones SaaS.
• Estructurar menús desplegables de "Búsqueda Visual" y autocompletado para comercio electrónico.
• Diseñar Páginas de Resultados de Búsqueda (SERPs) de alta densidad para documentación o catálogos.
• Implementar superposiciones de "Búsqueda a Pantalla Completa" para diseños mobile-first.

Cuándo NO Usar

• Páginas de Destino Estáticas: Donde el contenido es fijo y el descubrimiento no es un objetivo principal.
• Micro-Sitios (<20 páginas): Donde la navegación robusta y las migas de pan son suficientes para la localización.
• Paneles de Control Puramente Relacionales: Donde se accede a los datos exclusivamente a través de filtros y pestañas definidos, en lugar de búsqueda por texto libre.

Entradas

1. Perfil de Intención del Usuario: ¿El usuario busca un SKU específico (Precisión) o explora un tema (Descubrimiento)?
2. Densidad del Catálogo: ¿Cuántos elementos hay en el sistema y qué tan diversa es la metainformación?
3. Dispositivo Principal: ¿La búsqueda se usa predominantemente en móvil (táctil) o escritorio (teclado)?
4. Sistemas Existentes: Sistemas de color, tokens de espaciado y escalas tipográficas (de fluid-spacing-system y fluid-typography-system).

Salidas

1. Especificación del Activador de Búsqueda: Definiciones visuales para la barra de búsqueda (estática, expandible o solo icono).
2. Anatomía del Autocompletado: Diseño para el menú desplegable de sugerencias, incluyendo categorías, imágenes y estados del teclado.
3. Plano de Diseño de SERP: Organización espacial de la página de resultados, equilibrando la densidad de metainformación y la legibilidad.
4. Mapa de Interacción Móvil: Un plan de cómo la búsqueda transiciona desde un icono de encabezado a una interfaz enfocada a pantalla completa.

Flujo de Trabajo

1. Definir el Patrón del Activador de Búsqueda

Elige un activador según su importancia para el recorrido del usuario:

• La Barra Persistente: Siempre visible, entrada de alto contraste. Ideal para comercio electrónico o sitios donde la búsqueda es primaria.
• La Entrada Expandible: Comienza como un icono o una barra pequeña y se expande al hacer clic. Ideal para sitios donde la búsqueda es secundaria a la navegación.
• El Activador "Comando + K": Una pista sutil o un icono que abre un modal. Ideal para herramientas SaaS para usuarios avanzados o documentación.

2. Diseñar la Experiencia de Autocompletado (Instantánea)

Reduce la "distancia al resultado" proporcionando retroalimentación inmediata:

• Categorización: Agrupa los resultados por tipo (ej., Productos, Artículos, Ayuda).
• Metainformación Enriquecida: Incluye miniaturas pequeñas, precios o insignias de estado dentro del menú desplegable.
• Estado Enfocado: Usa interactive-state-system para resaltar claramente la sugerencia seleccionada actualmente para usuarios de teclado.
• Patrón ARIA: Modela la relación entrada/cuadro de lista según el patrón Combobox de ARIA APG (role="combobox" con aria-expanded, aria-controls y aria-activedescendant apuntando hacia el role="option" resaltado) en lugar de inventar un modelo de interacción personalizado.

3. Establecer la Jerarquía de la Página de Resultados (SERP)

Aplica visual-hierarchy-system a los resultados de búsqueda:

• El "Eco de la Consulta": Muestra el término de búsqueda del usuario de manera prominente para confirmar el contexto.
• Tarjetas de Resultado: Usa card-ui-system para estandarizar el formato del resultado.
• Peso de la Metainformación: Asegúrate de que los títulos sean los más prominentes, seguidos del "Fragmento" (la parte del contenido que coincide con la consulta).

4. Construir la Capa de Descubrimiento Móvil

La búsqueda en móvil es un modo dedicado, no un widget:

• El Cambio de Modo: Tocar la búsqueda debería abrir una superposición de pantalla completa para eliminar distracciones de fondo.
• Auto-Enfoque: Enfoca automáticamente la entrada y activa el teclado.
• La Acción de la "Zona del Pulgar": Coloca un botón "Borrar" y "Cancelar" al alcance fácil (mín. 44x44px).

5. Definir Estados de Carga y Vacío

• Resultados Esqueleto: Usa skeleton-state-system para mantener la estabilidad del diseño mientras se recuperan los resultados.
• Sin Resultados Inteligente: Usa empty-state-system para proporcionar caminos alternativos cuando no se encuentren coincidencias exactas.

Reglas de Decisión

• La Regla de Visibilidad: Si la búsqueda es utilizada por >30% de tu audiencia, debe ser una barra persistente y de ancho completo en escritorio.
• El Mínimo de "Tres Palabras": No empieces a mostrar sugerencias automáticas hasta que el usuario haya escrito al menos 3 caracteres (para evitar parpadeo visual).
• El Límite de Resultados: Limita las sugerencias de autocompletado a 5-8 elementos. Si existen más, proporciona un enlace "Ver todos los resultados para '...'".
• Olor a Información: Resalta los términos coincidentes en el fragmento de los resultados de búsqueda para ayudar a los usuarios a escanear rápidamente en busca de relevancia.

Restricciones

• Accesibilidad: La entrada de búsqueda debe tener una etiqueta visible (o aria-label). Los usuarios de teclado deben poder navegar por la lista de autocompletado usando las teclas de flecha, seleccionar con Enter y cerrar con Escape sin perder su consulta escrita. Todos los objetivos interactivos (botón de borrar, filas de sugerencias) deben cumplir con el tamaño mínimo de objetivo de 24x24px de WCAG 2.2 (2.5.8).
• Responsividad: Los menús desplegables de autocompletado nunca deben exceder el ancho de la ventana gráfica.
• Contraste: El resaltado de texto coincidente debe cumplir con las relaciones de contraste WCAG AA (generalmente usando un cambio de color de fondo o negrita).

Patrones Comunes de Falla

• La "Búsqueda Oculta": Forzar a los usuarios a buscar un icono de lupa cuando la búsqueda es la forma principal en que navegan.
• El Menú Desplegable "Desconectado": Menús de autocompletado que no coinciden con el ancho o la alineación de la entrada, creando un "flotante" visual.
• Trampa de Teclado: No permitir a los usuarios salir de la superposición o el menú desplegable de búsqueda con la tecla Escape.
• Los Resultados Sin Salida: No mantener el término de búsqueda en el cuadro de entrada en la página de resultados, forzando al usuario a volver a escribir si quiere refinar.

Criterios de Validación

• El punto de entrada de búsqueda es visible dentro de los 2 segundos de escaneo de la página.
• El menú desplegable de autocompletado incluye metainformación enriquecida (imágenes/etiquetas) cuando sea apropiado.
• La navegación por teclado (Flechas, Enter, Escape) está completamente definida para la búsqueda, siguiendo el patrón combobox de ARIA APG.
• La búsqueda móvil abre un modo de pantalla completa con enfoque de teclado inmediato.
• La página de resultados de búsqueda repite la consulta y resalta los términos coincidentes.
• Se utilizan estados esqueleto para la carga de resultados.
• Todos los elementos interactivos cumplen con el objetivo táctil mínimo de 44x44px.