Admin y Back-office UX
Admin y Back-office UX
8 reglasDensity Modes: Compact / Default / Comfortable
El espacio en pantalla es el recurso más escaso en interfaces de administración. Ofrecer tres modos de densidad permite que power users procesen más datos por scroll, mientras usuarios ocasionales o con necesidades de accesibilidad tienen espacio cómodo para escanear sin errores. La preferencia debe persistir en localStorage y en el perfil del usuario para aplicar entre sesiones y dispositivos.
Linear table density toggle · Shopify Polaris DataTable · Nielsen Norman Group 2019| Usuario | Rol | Estado | Último login |
|---|---|---|---|
| Ana García | Admin | Activo | Hace 2h |
| Carlos Méndez | Editor | Pendiente | , |
| Laura Vega | Viewer | Suspendido | Hace 14d |
| Diego Ruiz | Editor | Activo | Hace 1d |
Audit Logs: Quién, Qué, Cuándo, Dónde
Un audit log es evidencia, no telemetría. Cada entrada debe responder las cuatro preguntas de una investigación forense: actor (quién), acción (qué), objeto afectado (sobre qué) y timestamp con zona horaria (cuándo). El diseño debe tratar cada línea como registro legal-operativo, nunca como simple historial. GDPR Art. 30 y SOC 2 Type II requieren timestamps precisos y retención mínima de 12 meses.
Stripe Dashboard Logs · GitHub Audit Log · GDPR Art. 30 · SOC 2 Type IIUser Management: Estados y Flujo Completo
La tabla de usuarios debe mostrar el ciclo de vida completo: invitado pendiente, activo, suspendido y eliminado (soft delete restaurable). Cada estado tiene acciones distintas y debe comunicarse siempre con color + icono + label, nunca solo color. El soft delete es obligatorio para preservar el historial del actor en audit logs cuando una cuenta se elimina.
GitHub Organization Members · Stripe Team Members · Auth0 User Management · Linear MembersPermissión Matrix: RBAC Visualizado
Una tabla de permisos leída como hoja de calculo comunica la jerarquía de acceso mejor que cualquier lista. El eje X son los roles y el eje Y son los recursos o acciones; cada celda es una combinación rol·permiso que puede ser verdadera, falsa o heredada. Esta estructura permite auditar en segundos qué puede hacer cada rol sin abrir cuatro pantallas distintas. Según Gartner (2022), el 85% de los errores de seguridad en SaaS B2B se originan en configuraciones de permisos incorrectas.
AWS IAM Policy editor · Retool Permissions · GitHub Repository Permissions · Gartner 2022| Permiso |
Admin
|
Editor
|
Viewer
Custom
|
|---|---|---|---|
| Usuarios | |||
| Ver usuarios | |||
| Invitar usuarios | , | , | |
| Suspender usuarios | , | , | |
| Facturación | |||
| Ver facturas | , | ||
| Emitir facturas | , | , | |
Acciones Irreversibles: Fricción Calibrada
La fricción en UX normalmente es un defecto de diseño. En acciones irreversibles es una característica de seguridad. El objetivo no es hacer la acción imposible, sino garantizar que el usuario procesó el impacto antes de ejecutarla. La confirmación debe escalar con la severidad: desde un toast con deshacer, hasta escribir el nombre exacto del recurso. El botón destructivo siempre en rojo, siempre a la derecha, nunca primero.
GitHub Delete Repository · Vercel Delete Project · Stripe Cancel Subscription · Linear Archive TeamEsta acción eliminará el plan Pro y desactivará 3 features para los usuarios asignados.
Impersonation: Identidad Siempre Visible
Actuar como otro usuario es una herramienta de soporte legítima y un riesgo de seguridad si no se comunica correctamente. El sistema debe hacer imposible que el administrador olvide que está impersonando. El banner no es una notificación: es una identidad temporal que debe dominar la UI, sobrevivir a navegación entre páginas, apertura de modals y cambio de tabs. Las acciones disponibles durante impersonación deben estar restringidas explícitamente.
Intercom Log in as user · Shopify Partners Staff View · Zendesk Agent Impersonation · Stripe SigmaHealth Dashboards: Infraestructura vs. Producto
Un dashboard de health es distinto a un dashboard de producto. El health muestra el estado del sistema ahora mismo: qué está roto, qué está lento, qué está esperando. La audiencia es ingeniería y ops, no stakeholders. El diseño debe optimizar para detección rápida de anomalías, no para aspecto ejecutivo. Según Atlassian State of Incident Management 2023, el MTTR se reduce un 35% con dashboards de health dedicados.
Heroku Metrics · PagerDuty Service Directory · Datadog Infrastructure · Atlassian Incident Management 2023| Job queue | En cola | Procesando | Fallidos 1h | Avg time |
|---|---|---|---|---|
| notifications | 12 | 3 | 0 | 0.4s |
| email_worker | 312 | 0 | 47 | , |
| exports | 4 | 1 | 0 | 8.1s |
Keyboard-First UX para Power Users
Los usuarios de admin pasan horas diarias en la misma interfaz. Para ellos, el mouse es fricción acumulada. Una interfaz keyboard-first no es un modo alternativo, es el modo principal optimizado para eficiencia. Las tablas deben ser navegables con flechas, las acciones accesibles con shortcuts, y los shortcuts deben ser descubribles sin salir del flujo de trabajo. Según Jakob Nielsen (2014), los usuarios con keyboard shortcuts completan flujos repetitivos un 41% más rápido.
Linear keyboard shortcuts · GitHub Issues keyboard navigation · Notion Command Menú · Jakob Nielsen 2014- R-1086 Density Modes: Compact / Default / Comfortable
- R-1087 Audit Logs: Quién, Qué, Cuándo, Dónde
- R-1088 User Management: Estados y Flujo Completo
- R-1089 Permissión Matrix: RBAC Visualizado
- R-1090 Acciones Irreversibles: Fricción Calibrada
- R-1091 Impersonation: Identidad Siempre Visible
- R-1092 Health Dashboards: Infraestructura vs. Producto
- R-1093 Keyboard-First UX para Power Users