Product Craft Bible
Admin y Back-office UX
Inicio SaaS y Admin Admin y Back-office UX
SaaS y Admin

Admin y Back-office UX

8 reglas Linear table density toggle · Shopify Polaris DataTable · Nielsen Norman Group 2019Stripe Dashboard Logs · GitHub Audit Log · GDPR Art. 30 · SOC 2 Type IIGitHub Organization Members · Stripe Team Members · Auth0 User Management · Linear MembersAWS IAM Policy editor · Retool Permissions · GitHub Repository Permissions · Gartner 2022
122

Admin y Back-office UX

8 reglas
1086

Density 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
Preferir
Mostrando 32 de 1,240 registros
UsuarioRolEstadoÚltimo login
Ana GarcíaAdminActivoHace 2h
Carlos MéndezEditorPendiente,
Laura VegaViewerSuspendidoHace 14d
Diego RuizEditorActivoHace 1d
1087

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 II
Preferir
Audit Log
Últimos 7d Actor Tipo Exportar CSV
2026-06-16 14:32:07 UTC
AG
Ana García ana@empresa.com
Modificó el rol de carlos.mendez@empresa.com
ViewerEditor
2026-06-16 13:08:41 UTC
SU
support@admin.com En nombre de laura@cliente.com
Eliminó proyecto #PRJ-0042
2026-06-15 09:15:22 UTC
DR
Diego Ruiz diego@empresa.com
Invitó a nuevo@empresa.com con rol Viewer
Evitar
Historial de actividad
hace 2 horas
Usuario hizo algo
ayer
Un admin eliminó un proyecto
hace 2 días
Se envió una invitación
1088

User 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 Members
Preferir
2 usuarios seleccionados
Usuario
Rol
Estado
Último login
Acciones
AG
Ana García
ana@empresa.com
Admin
Activo
Hace 2h
CM
Carlos Méndez
carlos@empresa.com
Editor
Pendiente
,
LV
Laura Vega
laura@empresa.com
Viewer
Suspendido
Hace 14d
Evitar
Email
Rol
Estado
Acciones
ana@empresa.com
admin
carlos@empresa.com
editor
laura@empresa.com
viewer
1089

Permissió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
Preferir
Matriz de permisos
Permiso
Admin
Editor
Viewer Custom
Usuarios
Ver usuarios
Invitar usuarios , ,
Suspender usuarios , ,
Facturación
Ver facturas ,
Emitir facturas , ,
Evitar
Permisos del rol: Editor
Para ver otro rol, ir a la página del rol correspondiente
1090

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 Team
Preferir
Baja · revertibleToast con Deshacer (5s)
Proyecto archivado correctamente Deshacer
Media · data loss parcialModal con descripción de impacto
Eliminar plan Pro

Esta acción eliminará el plan Pro y desactivará 3 features para los usuarios asignados.

Alta · irreversibleEscribir nombre del recurso
Eliminar workspace "acme-corp"
Esto eliminará permanentemente: 1 workspace · 3 proyectos · 1,240 registros · 8 usuarios activos
Para confirmar, escribe acme-corp a continuación:
Evitar
Confirmación

¿Estás seguro de que deseas continuar?

1091

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 Sigma
Preferir
app.empresa.com/dashboard
Viendo como laura@cliente.com · Sesión expira en 28 min
Dashboard Proyectos Configuración
Configuración de cuenta
Cambiar contraseña Solo lectura en impersonación
Métodos de pago Solo lectura en impersonación
Evitar
app.empresa.com/dashboard
Dashboard Proyectos laura@cliente.com
Configuración de cuenta
Cambiar contraseña
Eliminar cuenta
1092

Health 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
Preferir
// SYSTEM HEALTH Actualizado hace 12s · auto-refresh
1 alerta activa
email_worker: 47 jobs fallidos en últimos 60min · timeout en SES API
API / HTTP
84ms 99.97% 24h
DATABASE
340ms 99.81% 24h
STORAGE / S3
41ms 100% 24h
EMAIL WORKER
timeout 97.12% 24h
Job queueEn colaProcesandoFallidos 1hAvg time
notifications12300.4s
email_worker312047,
exports4108.1s
Evitar
Overview
MRR
$48.2K
+12% mes
Latencia API
340ms
Avg 24h
Usuarios activos
1,240
+3% sem
Jobs fallidos
47
última hora
1093

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
Preferir
Buscar F
Usuario
Rol
Estado
Acciones
Ana García
ana@empresa.com
Admin
Activo
↵ Abrir
Carlos Méndez
carlos@empresa.com
Editor
Pendiente
↵ Abrir
Laura Vega
laura@empresa.com
Viewer
Activo
↵ Abrir
1 sel. Asignar rol · Suspender · Reenviar
? Shortcuts
NAVEGACIÓN
Mover fila
Seleccionar
Space
Multi-sel.
⇧↓
Abrir
Limpiar
Esc
ACCESO RÁPIDO
Usuarios
GU
Logs
GL
Health
GH
Nuevo
N
Buscar
F
Evitar
Usuario
Rol
Estado
Ana García
Admin
Activo
Carlos Méndez
Editor
Pendiente
Laura Vega
Viewer
Activo
Para seleccionar: click con mouse. Sin shortcuts de teclado.