Casi todas las tablas cometen el mismo error, tratan todos los estados como si fueran igual de importantes y el resultado suele ser predecible, una columna llena de colores, sin jerarquía clara, donde todo compite por atención y nada destaca de verdad.
El problema de fondo: demasiados colores no significan más claridad
El enfoque más habitual es simple, un color para cada estado funciona cuando hay pocos estados y dejará de funcionar cuando el sistema crece.
Cuando una tabla muestra muchos colores el ojo no sabe dónde mirar, los estados importantes se diluyen y la tabla se vuelve decorativa, no funcionalVisualmente puede parecer “rica”, pero a nivel de UX pierde eficiencia.
Los status badges necesitan jerarquía, no solo color
Un status badge no es un elemento decorativo, si no una señal y como cualquier señal, debe responder a una pregunta clara: ¿requiere acción o no?
Antes de diseñar nada, hay que clasificar los estados por prioridad:
- Alta prioridad: Estados críticos, urgentes o que requieren acción inmediata (ej. Overdue, Fallo, Error)
- Prioridad media: Estados informativos, pero no urgentes (ej. Pagado, Completed, Activo)
- Baja prioridad: Estados pasivos o de espera (ej. Pendiente)
Sin esta jerarquía, el diseño no tiene base.
No todos los estados necesitan forma
Un error común es dar a todos los badges el mismo tamaño, la misma forma y el mismo peso visual, eso elimina cualquier jerarquía.
Una solución efectiva es reservar la forma (badge sólido) solo para los estados de alta prioridad.
Los estados secundarios pueden mostrarse como texto simple, sin contenedor, ya que eso reduce ruido visual y permite que lo importante destaque de verdad.
Si quitas la forma, necesitas otro indicador
Cuando un estado pierde su forma de badge, corre el riesgo de parecer texto normal. La solución es sencilla: un pequeño punto.
- Indica que sigue siendo un estado
- No compite visualmente
- Mantiene consistencia
Este patrón funciona especialmente bien en tablas densas, donde cada píxel cuenta.
El estado de menor prioridad no necesita color
Otro error frecuente es colorear absolutamente todo. Si un estado no requiere acción, no aporta información crítica y es el estado “por defecto”, entonces no necesita color.
Usar gris para el estado de menor prioridad hace dos cosas, reduce ruido y aumenta el contraste de los estados importantesEl color debe ser un recurso limitado, no un relleno.
Los iconos son para lo crítico, no para todo
Cuando incluso el color y la forma no son suficientes, entra el último nivel de jerarquía: el icono.
Los iconos añaden contraste simbólico, se reconocen más rápido que el texto y refuerzan el mensaje de urgencia.
Pero solo deben usarse en estados de máxima prioridad. Si todos los estados tienen icono, ninguno destaca.
El objetivo no es que la tabla sea bonita, sino eficaz
Cuando todos los badges compiten el usuario tarda más en decidir, se pierde foco y se ignoran alertas importantes.
En cambio cuando existe jerarquía lo crítico se detecta al instante, lo informativo acompaña y lo irrelevante no molesta
El diseño deja de ser estético y pasa a ser operativo.
Conclusión
No diseñes estados sin definir prioridades, debes usas el color solo cuando aporte significado, reserva forma + icono para estados críticos, reduce al mínimo los estados pasivos y diseña para escaneo rápido, no para exhibición.
Una tabla bien diseñada no se nota. Simplemente funciona.
Y en sistemas con datos reales, eso es lo único que importa.
