Sistema de Interfaz de Configuración

¿Qué hace Sistema de Interfaz de Configuración?

Propósito

El Sistema de Interfaz de Configuración proporciona una metodología para organizar, diseñar y estructurar preferencias de usuario, configuraciones de cuenta, configuraciones de espacio de trabajo y portales de facturación. Las interfaces de configuración suelen descuidarse, lo que lleva a estructuras visuales fragmentadas, modelos de navegación desconectados, poca capacidad de respuesta y graves barreras de accesibilidad. Este sistema establece un enfoque estandarizado para la composición espacial, las arquitecturas de navegación, los modelos de persistencia de estado (por ejemplo, auto-guardado versus guardado por lotes manual) y las señales visuales para reducir la carga cognitiva y prevenir la pérdida de datos no guardados.

Casos de Uso

• Perfiles y Cuentas de Usuario: Diseño de interfaces para actualizar datos personales, credenciales de seguridad y preferencias.
• Administración de Espacios de Trabajo SaaS: Organización de configuraciones multiinquilino o de equipo, roles de miembros, integraciones y puertas de permisos.
• Centros de Configuración de Notificaciones: Creación de paneles de control granulares basados en matrices para alertas de correo electrónico, push y en la aplicación.
• Centros de Facturación y Suscripciones: Diseño de resúmenes claros de niveles de precios, métricas del plan actual, métodos de pago y listas de facturas anteriores.
• Configuraciones de Desarrollador: Organización de opciones técnicas complejas como rotación de claves API, webhooks y conmutadores de entorno.

Cuándo NO Usar

• Barras de Consentimiento y Privacidad Implícitas: Para la aceptación de cookies, categorización de cookies y superposiciones de cumplimiento normativo, utilice sistema-de-consentimiento-y-preferencias.
• Formularios de Incorporación Únicos: Para pasos de registro simples de una sola columna o captura de encuestas iniciales, utilice sistema-de-diseño-de-formularios.
• Interfaces de Baja Complejidad (menos de 5 configuraciones totales): Para configuraciones extremadamente simples, no construya un sistema anidado de múltiples páginas; integre estas opciones directamente en el menú desplegable del perfil en el encabezado global o en los pies de página de la barra lateral.

Entradas

1. Inventario de Configuraciones: Un catálogo completo de todos los atributos configurables, agrupados lógicamente.
2. Modelo de Persistencia de Estado: Determinación de si los cambios se aplican instantáneamente (auto-guardado) o se retienen hasta la confirmación (guardado por lotes manual).
3. Roles de Acceso de Usuario: Información sobre quién puede ver/modificar filas específicas (por ejemplo, Administrador, Editor de Facturación, Visor).
4. Tokens Espaciales y Tipográficos: Valores de diseño existentes (de sistema-de-espaciado-fluido y sistema-de-tipografía-fluida).

Salidas

1. Modelo de Navegación de Configuración: Elección del diseño de navegación (Barra lateral, Subpestañas o Acordeón) según la densidad de secciones.
2. Especificación de Diseño Maestro-Detalle: Composición de cuadrícula/flex que asigna los controles de la barra lateral a sus paneles de configuración activos correspondientes.
3. Persistencia de Estado y UX de Registro de Cambios: Patrones visuales y auditivos para confirmación de guardado, estados de carga y pancartas de estado sucio.
4. Anotaciones de Campos Accesibles y Permisos: Rutas de teclado, etiquetas de leyenda semánticas y reglas claras de estilo para elementos deshabilitados/solo lectura.

Flujo de Trabajo

1. Agrupar y Priorizar Configuraciones (Agrupación)

Realice una agrupación por tarjetas o temática del inventario de configuraciones:

• Nivel Personal: Información del perfil, avatar, datos de inicio de sesión, seguridad personal (MFA).
• Nivel Organización/Espacio de Trabajo: Nombre del espacio de trabajo, invitaciones a miembros, roles, integraciones globales.
• Nivel Entrega/Sistema: Reglas de notificación, alertas de sonido, opciones de tema (Modo Oscuro/Claro).
• Nivel Financiero: Niveles de plan, tarjetas de crédito, contacto de facturación, tablas de facturas.
• Zona de Peligro: Eliminar cuenta, desactivar espacio de trabajo o transferir propiedad.

2. Elegir la Arquitectura de Diseño y Navegación

Seleccione el patrón de navegación espacial:

• Basado en Barra Lateral (Maestro-Detalle): Recomendado para SaaS B2B y configuraciones densas. Use una columna de navegación izquierda persistente (Maestro) y un panel de contenido derecho con desplazamiento contenido (Detalle).
• Basado en Pestañas: Mejor para paneles de configuración ligeros a medianos (menos de 5 vistas). Use un menú de pestañas secundarias horizontales (usando sistema-de-ui-de-pestañas o sistema-de-control-segmentado) debajo del encabezado principal de la página de configuración.
• Desplazamiento de una Sola Página (Acordeón): Mejor para aplicaciones móviles simples o listas de configuración donde las subsecciones pueden expandirse/contraerse en línea para mantener manejable la altura vertical.

3. Establecer el Modelo de Guardado y Retroalimentación

Elija un mecanismo claro de persistencia de estado para cada tarjeta de configuración:

• Patrón de Auto-Guardado:
  • Se utiliza para opciones aisladas y de bajo riesgo (activar/desactivar Modo Oscuro, preferencias de notificación).
  • Retroalimentación: Muestre un spinner/indicador de carga en línea y un indicador de texto "Guardado" claro junto al conmutador. El indicador debe desvanecerse después de 1-2 segundos de inactividad.
• Patrón de Guardado por Lotes (Estado Sucio):
  • Se utiliza para formularios de alto riesgo o campos altamente correlacionados (actualización de contraseña, dirección de facturación).
  • Retroalimentación: Muestre un encabezado o pie de página flotante de posición fija que indique "Tiene cambios sin guardar".
  • Acciones: Proporcione dos botones prominentes: "Guardar Cambios" (CTA principal) y "Descartar" (texto de estilo secundario). Deshabilite la navegación de la barra lateral/pestañas cuando esté sucio, o active un modal de confirmación "Pérdida de cambios sin guardar" si el usuario intenta hacer clic para salir.

4. Diseñar Matrices de Configuración de Alta Densidad

Para centros de notificaciones o tablas de permisos granulares:

• Use Cuadrículas de Matriz: Alinee casillas de verificación o interruptores en columnas correspondientes a los canales de entrega (por ejemplo, Correo electrónico, En la aplicación, SMS) y filas correspondientes a los eventos (por ejemplo, "Mencionado en comentario", "Tarea asignada").
• Alineación de Encabezados de Columna: Mantenga las etiquetas fijas al desplazarse verticalmente para preservar el contexto.
• Resaltado de Filas Listo para Teclado: Use estilos de sistema-de-estado-interactivo para que al enfocar una celda se resalte su fila correspondiente.

5. Estructurar la Tarjeta de "Zona de Peligro"

Las acciones irreversibles y destructivas requieren un tratamiento visual dedicado:

• Aislamiento Visual: Agrupe las acciones (Desactivar Espacio de Trabajo, Eliminar Cuenta) en una sola tarjeta en la parte inferior absoluta del diseño.
• Alertas de Peligro de Alto Contraste: Use bordes rojos, un fondo de advertencia rojo claro sutil y advertencias en negrita que detallen las consecuencias.
• Modal de Doble Confirmación: No active la destrucción instantáneamente. Al hacer clic en el botón de acción, se debe abrir un modal (sistema-de-superposición-y-diálogo) que requiera que el usuario escriba explícitamente el nombre del recurso (por ejemplo, "eliminar nombre-del-espacio-de-trabajo") para confirmar.

6. Diseñar para la Capacidad de Respuesta Móvil

• Colapsar a Lista Maestra Lineal: En ventanas gráficas por debajo de 768px, colapse la lista de la barra lateral y el panel de detalle de contenido en una lista maestra lineal.
• Navegación de Subpáginas: Hacer clic en una opción de la barra lateral en dispositivos móviles abre un panel deslizante de ancho completo que contiene solo esa sección de detalle, completo con un encabezado de ruta de navegación fijo "Volver a Configuración".
• Agrandar Objetivos Táctiles: Expanda las casillas de verificación, interruptores y objetivos de cierre a un mínimo de 44px x 44px para adaptarse a la interacción móvil basada en el pulgar.

Reglas de Decisión

• Auto-Guardado vs. Guardado Manual: Use Auto-Guardado cuando un conmutador/entrada actúe como una preferencia inmediata del usuario (como el tema oscuro o el audio de alerta). Use Guardado Manual por Lotes cuando los campos estén agrupados lógicamente y dependan de la validación (como el cambio de correo electrónico/contraseña, información de facturación) para evitar actualizaciones de base de datos incompletas o inválidas.
• El Umbral de la Barra Lateral: Use una navegación de barra lateral vertical persistente para conjuntos de configuración que contengan 5 o más secciones distintas. Para 4 o menos secciones, use una barra de pestañas secundaria horizontal debajo del encabezado principal.
• Descartar Cambios No Guardados: Si un usuario modifica una entrada en una vista de guardado manual y hace clic en una pestaña/elemento de navegación sin guardar, siempre bloquee la navegación y active un diálogo de confirmación: "¿Descartar cambios no guardados?"

Restricciones

• Accesibilidad (Estructura Semántica):
  • Agrupe campos con etiquetas <fieldset> y <legend> para asegurar que la tecnología de asistencia lea el contexto de los controles anidados.
  • Los controles de formulario deben usar etiquetas asociadas programáticamente (<label for="...">) o aria-labelledby.
  • Use aria-live="polite" en los indicadores de auto-guardado en línea para que los lectores de pantalla sean notificados de los guardados en segundo plano sin interrumpir el enfoque de escritura.
  • Los indicadores de enfoque activo deben cumplir una relación de contraste de al menos 3:1 y no deben quedar ocultos por encabezados fijos o la pancarta de cambios no guardados (WCAG 2.2 SC 2.4.11).
• Capacidad de Respuesta: Las tablas de cuadrícula de varias columnas deben apilarse en filas limpias o tablas de desplazamiento horizontal en ventanas gráficas pequeñas. Los elementos de texto deben usar word-break: break-word para evitar que las claves API largas o las URL de webhook se desborden.
• Jerarquía Visual: Agrupe configuraciones relacionadas en "tarjetas" visualmente aisladas con margen estándar (--space-l) para reducir la carga cognitiva en comparación con una lista única e infinita.

Patrones de Falla Comunes

• "Fallo Silencioso de Guardado": Cuando un conmutador de auto-guardado falla en segundo plano sin mostrar un estado de error, dejando al usuario creyendo que su cambio se registró.
• "Pérdida Accidental": Navegar fuera de una página de configuración a medio completar pierde todos los cambios sin mostrar un modal de confirmación o retener el estado.
• "Cuadrícula de Configuración Misteriosa": Crear matrices multidimensionales grandes (por ejemplo, notificaciones) sin encabezados de columna o fila persistentes, obligando a los usuarios a alinear elementos con los dedos en la pantalla.
• Trampas de Enfoque Deficientes en Modales de Zona de Peligro: Permitir que el enfoque del teclado escape del modal de confirmación de eliminación hacia la página de fondo, permitiendo a los usuarios enviar accidentalmente configuraciones de fondo mientras intentan escribir una confirmación de eliminación.
• Etiquetado con Placeholder: Usar texto de marcador de posición en lugar de etiquetas <label> reales y persistentes. Una vez que comienza la escritura, se pierde el contexto.

Criterios de Validación

• Se utiliza una navegación de barra lateral vertical persistente para 5 o más vistas de configuración, colapsando elegantemente a una navegación de subvista deslizante en tamaños de pantalla móvil.
• Los conmutadores de preferencias de bajo riesgo utilizan el patrón de Auto-Guardado con un indicador de estado de carga aria-live en línea.
• Los formularios críticos de varios campos utilizan el patrón de Guardado por Lotes Manual con una pancarta flotante/fija persistente "Cambios sin guardar".
• Las acciones destructivas se agrupan en una tarjeta "Zona de Peligro" visualmente aislada con un diálogo de confirmación de varios pasos.
• Se utiliza HTML semántico (<fieldset>, <legend>, <label>) para todos los grupos de entrada.
• Los indicadores de enfoque activo cumplen las reglas de contraste de WCAG 2.2 y no quedan ocultos por elementos superpuestos o pancartas flotantes.
• La relación de contraste de todo el texto cumple con WCAG AA (mínimo 4.5:1, 3:1 para texto grande/iconos).
• Los objetivos táctiles en dispositivos móviles cumplen el tamaño de objetivo de 44px x 44px para las entradas principales.