Sistema de UI Fija y Flotante

¿Qué hace Sistema de UI Fija y Flotante?

Propósito

El Sistema de UI Fija y Flotante proporciona una metodología para diseñar componentes de interfaz persistentes, anclados al viewport y que responden al desplazamiento. Garantiza que los controles críticos (navegación principal, llamadas a la acción (CTAs) que impulsan la conversión, widgets de utilidad contextual y botones de acción rápida) permanezcan fácilmente accesibles durante el desplazamiento activo.

Un sistema fijo y flotante bien diseñado resuelve la tensión espacial entre la disponibilidad inmediata de la acción y el consumo del contenido principal. Previene la fatiga de diseño, protege el viewport del desorden visual excesivo, respeta las áreas seguras físicas del móvil (como los 'notch' de los dispositivos y los indicadores de inicio del sistema) y mitiga estrictamente los fallos de ocultación del foco del teclado (WCAG 2.2 SC 2.4.11).

Casos de Uso

• Encabezados de Navegación Progresivos: Encabezados que se ocultan al desplazarse hacia abajo (maximizando el área de lectura) y se muestran al desplazarse hacia arriba (haciendo la navegación inmediatamente disponible).
• Docks Inferiores Persistentes para Móviles: Barras inferiores flotantes o ancladas que contienen acciones de conversión primarias (por ejemplo, "Añadir al Carrito", "Reservar Ahora", "Solicitar") para diseños móviles.
• Widgets de Barra Lateral Fijos: Subnavegación contextual, barras para compartir o configuraciones de compra de productos que se desplazan con el área de contenido principal pero se fijan antes de alcanzar los límites estructurales.
• Botones de Acción Flotantes (FABs): Disparadores anclados al viewport para acciones frecuentes de alta prioridad, como la navegación "Volver al Inicio", chats de soporte directo o paneles de carrito.
• Barras de Progreso de Anclaje y Lectura: Elementos fijos que rastrean las tasas de finalización del viewport u ofrecen enlaces directos a subsecciones del cuerpo de la página.

Cuándo NO Usar

• Paneles de Control (Dashboards) con muchos datos: Donde el espacio de pantalla está muy limitado por datos tabulares, lienzos de trabajo o paneles bloqueados en el viewport; usar sistema-de-layout-para-dashboards.
• Páginas Cortas/De un Solo Viewport: Donde todo el contenido de la página cabe en una sola vista de pantalla y se puede acceder sin desplazamiento.
• Sitios Experimentales Basados en Narrativa: Donde se elige una desorientación visual intencional o un flujo espacial 3D inmersivo en lugar de la utilidad de navegación estándar.
• Formularios Centrados en el Teclado: Sobrecargar páginas con formularios de varios campos que tengan botones fijos que se superpongan y cubran los campos de entrada activos en los teclados virtuales móviles.

Entradas

1. Estructura de Contenido y Narrativa: La secuencia del wireframe de la página (del sistema-de-composición-de-secciones) para comprender cuándo y dónde deben activarse los elementos fijos.
2. Restricciones del Viewport del Dispositivo: Puntos de interrupción objetivo para móvil, tablet y escritorio para adaptar los diseños entre barras ancladas y contenedores laterales flotantes.
3. CTAs Primarias y Secundarias: Identificación de los objetivos de conversión que requieren visibilidad persistente.
4. Estrategia de Apilamiento de Z-Index: Relaciones y niveles de apilamiento establecidos en sistema-de-elevación-y-profundidad para evitar conflictos de superposición visual.
5. Métricas de Área Segura del Sistema: Inserciones de área segura del hardware (env(safe-area-inset-bottom), notches) necesarias para evitar superposiciones con el cromo del dispositivo.

Salidas

1. Especificación de Comportamiento Fijo: Definiciones explícitas de disparadores de desplazamiento, umbrales de animación y fórmulas de transición de entrada/salida.
2. Diseño del Dock Inferior para Móviles: Planos de diseño espacialmente optimizados para pantallas móviles, detallando tamaños objetivo, compensaciones de área segura y requisitos de contraste.
3. Mapa de Mitigación de Obstrucción: Definiciones de diseño que muestran cómo mantener las superposiciones fijas sin bloquear los elementos enfocados (WCAG 2.2 SC 2.4.11).
4. Especificación de Bloqueo de Barra Lateral/Widget para Escritorio: Reglas de límite (encabezados, pies de página, puntos finales de sección) donde los elementos laterales desplazables deben ajustarse y bloquearse.

Flujo de Trabajo

1. Establecer la Zonificación del Viewport y los Presupuestos Espaciales

Antes de posicionar las capas persistentes, defina la "Zona Visual Segura" para garantizar que se preserve la legibilidad del contenido.

• La Regla del 15% de Presupuesto: Los elementos fijos nunca deben consumir más del 15% del viewport vertical total en ninguna pantalla de dispositivo.
• Asignación de Z-Index: Asigne valores de apilamiento claros utilizando los niveles del sistema-de-elevación-y-profundidad.
  • Encabezados Progresivos: z-index: 100 (Nivel 3: Fijo)
  • Docks Inferiores para Móviles: z-index: 150 (Nivel 3: Fijo / Flotante)
  • Botones de Acción Flotantes: z-index: 200 (Nivel 3: Disparadores Flotantes)
• Evitar Superposiciones Apiladas: Nunca permita que un encabezado fijo y una barra inferior fija permanezcan estáticos si saturan la pantalla; asegúrese de que tengan suficiente espacio o se oculten bajo estados específicos.

2. Diseñar el Comportamiento del Encabezado Progresivo

Un encabezado fijo estático ocupa valiosos píxeles verticales. Implemente un modelo "Progresivo":

• Estado Predeterminado: Encabezado transparente o integrado que coincida con el fondo de la página.
• Desplazamiento hacia Abajo (Umbral >100px): Traducir suavemente el encabezado hacia arriba fuera de la vista (transform: translateY(-100%)) para maximizar el área de escaneo de contenido.
• Desplazamiento hacia Arriba (Delta >15px): Traducir el encabezado de vuelta a la vista de forma instantánea o suave, aplicando un fondo sólido o desenfocado (backdrop-filter: blur(8px)) con una sombra sutil para indicar la separación del texto del cuerpo de la página.
• Parada en el Límite: Deshabilitar la transición de desplazamiento hacia arriba una vez que la barra de desplazamiento vuelve a la parte superior del viewport (scrollY < 50px), devolviendo el encabezado a su diseño estático original.

3. Ingeniería del Dock Inferior Persistente para Móviles

Las barras inferiores persistentes son grandes impulsores de la conversión móvil, pero son muy propensas a la interferencia física y visual.

• Áreas Seguras Físicas: Siempre ancle el borde inferior del dock utilizando variables de entorno CSS: padding-bottom: calc(var(--base-padding) + env(safe-area-inset-bottom)). Esto asegura que se asiente limpiamente por encima del Indicador de Inicio de iOS y las barras de navegación de Android sin superponer los disparadores interactivos.
• Disparador de Entrada por Desplazamiento: No muestre el dock inferior móvil en el viewport Hero inicial. Espere hasta que el usuario se haya desplazado más allá de la CTA en línea principal de la sección Hero (Umbral > 100% VH) antes de deslizar el dock desde abajo (transform: translateY(0) desde translateY(100%)).
• División del Diseño: Limite el dock a un solo botón de acción primaria (por ejemplo, "Añadir al Carrito") y un botón/insignia de utilidad secundaria (por ejemplo, "Precio" o "Guardar") para mantener los objetivos de toque extremadamente limpios.

4. Estructurar Barras Laterales Fijas y Widgets para Escritorio

Un widget de barra lateral debe permanecer bloqueado en el foco del viewport mientras se desplaza junto con las columnas de contenido principal profundas:

• Aislamiento del Contenedor: La barra lateral debe residir dentro de un contenedor de columna que coincida con la altura del área de contenido principal.
• Especificación de Position Sticky: Estilice el widget con position: sticky; top: calc(var(--header-height) + var(--space-l));. Esto evita que el widget se deslice detrás o se superponga a la barra de navegación principal.
• Bloqueo en el Límite del Pie de Página: Asegúrese de que la columna padre del widget fijo tenga overflow: visible (o esté correctamente contenida dentro de un contenedor flexible Grid), permitiendo que el navegador detenga naturalmente el widget para que no se superponga al pie de página global o a las secciones inferiores.

5. Prevenir la Ocultación del Foco del Teclado (Núcleo de Accesibilidad)

Una de las fallas de accesibilidad en el diseño web más frecuentes ocurre cuando un usuario de navegación por teclado enfoca un enlace, pero ese enlace está oculto debajo de un encabezado fijo o un dock inferior (violando WCAG 2.2 SC 2.4.11 Foco No Oculto).

• Margen de Desplazamiento Superior: Aplique un scroll-margin-top global a todas las secciones objetivo, encabezados (h2, h3) y objetivos interactivos clave:

  :target, [id] {
    scroll-margin-top: calc(var(--header-height) + var(--space-m));
  }
  

• Relleno de Foco: Si un elemento interactivo recibe el foco del teclado, la vista del navegador debe desplazarse para que el elemento sea completamente visible fuera del límite de cualquier superposición fija persistente.
• Vía de Escape: Si se abre un modal o menú desplegable desde un elemento fijo, atrape el foco (usando implementación-de-trampa-de-foco) y haga que el contenido de la página de fondo sea inert.

6. Diseñar Botones de Acción Flotantes (FABs) y Disparadores de Volver al Inicio

Los FABs se sitúan en las esquinas inferiores del viewport para ofrecer utilidades globales secundarias rápidas.

• Entrada Basada en Umbral: Oculte el disparador "Volver al Inicio" hasta que el usuario se haya desplazado al menos dos viewports completos (scrollY > 200% VH). Una vez activado, desvanézcalo y escálelo (transform: scale(1); opacity: 1; desde scale(0.8); opacity: 0;).
• Compensaciones del Viewport: Mantenga los FABs al menos a 24px del borde derecho del viewport en escritorio, y a 16px en móvil.
• Evitar el Bloqueo de Objetivos: Posicione los FABs horizontalmente opuestos a las líneas de lectura del contenido principal. Asegúrese de que no bloqueen enlaces, iconos sociales o navegación en línea en el pie de página al desplazarse hasta el final de la página.

Reglas de Decisión

• Encabezado Estático vs. Progresivo: Use un Encabezado Fijo Estático si el sitio es un portal web con muchas tareas o una tienda de comercio electrónico donde la búsqueda y el filtrado se usan constantemente. Use un Encabezado Fijo Progresivo para diseños de artículos, marketing de contenidos o páginas de aterrizaje de ventas donde el área de lectura vertical es una prioridad.
• Dock Inferior vs. CTA en Línea: En móvil, use una CTA Anclada en la Parte Inferior si la página contiene un único objetivo de conversión de alto valor (como registrarse o comprar). No use un dock inferior si la página tiene múltiples acciones de igual prioridad que compiten.
• Tamaño del FAB y Área Táctil: Asegúrese de que los disparadores flotantes sean tarjetas circulares o redondeadas. El elemento visual debe tener al menos 48px de diámetro, y el contenedor táctil interactivo real debe cumplir con un tamaño mínimo de 44x44px (preferido por WCAG 2.2) para permitir un fácil acceso con el pulgar.
• Desenfoque Progresivo vs. Colores Sólidos: Use backdrop-filter: blur(8px) con un color ligeramente transparente (por ejemplo, rgba(255, 255, 255, 0.8)) en lugar de fondos completamente opacos. Esto mantiene una sensación de profundidad visual y permite al usuario percibir el progreso del desplazamiento detrás del marco fijo.

Restricciones

• Accesibilidad (Mínimo WCAG AA):
  • SC 2.4.11 Foco No Oculto (Mínimo): Los anillos de foco de alto contraste nunca deben ocultarse detrás de elementos fijos. Asegúrese de que se pueda navegar a través de los elementos con el tabulador sin que sean bloqueados por encabezados o pies de página.
  • SC 2.5.8 Tamaño del Objetivo (Mínimo): Todos los objetivos interactivos en barras fijas y FABs deben tener al menos 24x24px, con 44x44px preferido para los disparadores principales del pulgar en docks inferiores móviles.
  • Sin Trampa de Tabulador: Los usuarios de teclado deben poder navegar dentro y fuera de los controles de la barra fija usando Tab / Shift+Tab estándar.
• Capacidad de Respuesta (Estabilidad del Diseño):
  • Las capas fijas nunca deben causar desbordamiento horizontal del viewport. Use anchos basados en porcentajes o diseños left: 0; right: 0; con restricciones precisas de box-sizing.
  • En móvil, transforme las barras laterales fijas de escritorio en paneles en línea simples o agrúpelas en el cajón inferior.
• Mitigación del Cambio de Diseño (CLS):
  • Nunca cambie un elemento de position: static a position: fixed dinámicamente sin reservar su volumen espacial original. Cambiar a fixed colapsa instantáneamente la altura de su contenedor original, causando un Cambio Acumulativo de Diseño (CLS) masivo. En su lugar, use position: sticky (que reserva el volumen de diseño) o alterne estilos dentro de un contenedor previamente reservado.

Patrones de Fallo Comunes

• El Velo de Bloqueo de Foco: Un usuario de teclado navega con el tabulador a través de la página, pero el anillo de foco aterriza en enlaces que están completamente ocultos debajo del encabezado fijo, haciéndolos imposibles de ver.
• La Superposición del Indicador de Inicio de iOS: Acoplar una barra inferior móvil sin añadir env(safe-area-inset-bottom), lo que resulta en que la barra de deslizamiento nativa del SO se sitúe directamente sobre el botón "Comprar Ahora".
• El Bucle de Desplazamiento Titilante: Configurar una transición de desplazamiento usando JavaScript que se active precisamente en una línea límite, causando que la barra fija alterne entre estados visibles y ocultos en un parpadeo visual rápido.
• El Sándwich de Viewport: Tener un encabezado fijo grueso y una barra inferior fija gruesa activos simultáneamente en un dispositivo móvil pequeño, reduciendo el espacio de pantalla legible a una pequeña ventana del 40%.
• El Colapso por Chasquido de CLS: Cambiar un encabezado a fixed al desplazarse, lo que instantáneamente desplaza el contenido principal de la página hacia arriba 80px y desorienta al usuario.

Criterios de Validación

• Verificación del Área del Viewport: Los elementos fijos nunca ocupan más del 15% del viewport vertical en escritorio o móvil.
• Protección del Foco (SC 2.4.11): Todos los elementos enfocados por teclado permanecen completamente visibles fuera de los límites de los elementos fijos persistentes. El scroll-margin-top global está configurado.
• Alineación del Área Segura Móvil: El dock inferior móvil utiliza explícitamente env(safe-area-inset-bottom) para evitar superposiciones de controles del dispositivo.
• Lógica del Umbral de Disparador: El dock inferior móvil permanece oculto en el viewport Hero inicial, apareciendo/deslizándose solo después de pasar la CTA del Hero.
• Prevención del Cambio de Diseño: Los encabezados progresivos y los widgets de barra lateral fijos se estilizan usando position: sticky o se colocan dentro de contenedores premedidos para garantizar cero Cambio Acumulativo de Diseño (CLS).
• Sin Conflicto de Superposición: Los índices z del contexto de apilamiento están claramente mapeados y documentados para prevenir errores visuales de superposición.
• Huellas de los Objetivos: Los disparadores anclados en el dock móvil y los FABs cumplen con la preferencia de objetivo táctil de 44x44px.