Auditoría de UI: checklist para revisar la consistencia visual de un producto digital

Hay un ejercicio que hacemos al empezar casi cualquier rediseño de producto y que siempre provoca la misma reacción. Hacemos capturas de todos los botones de la aplicación, los recortamos y los ponemos juntos en una sola pantalla. Al verlos así, uno al lado del otro, el equipo del cliente suele quedarse callado unos segundos. Donde ellos creían tener «el botón azul», aparecen once botones distintos: tres azules, dos alturas, cuatro radios de esquina, uno con mayúsculas, otro con sombra.

Nadie los diseñó así a propósito. Cada uno nació de una urgencia razonable, de una persona nueva en el equipo o de una librería que se actualizó. Pero sumados hacen que el producto se sienta menos sólido, que cueste más mantenerlo y que cada pantalla nueva sea una pequeña decisión desde cero.

La auditoría de UI es la herramienta para ver esto con claridad y actuar con método. No va de juzgar el trabajo anterior, sino de hacer visible el estado real de la interfaz para decidir qué ordenar primero. En esta guía tienes el proceso que seguimos y la checklist completa.

01Qué es una auditoría de UI y qué revisa

Una auditoría de UI es una revisión sistemática de la capa visual e interactiva de un producto digital: colores, tipografía, espaciado, componentes, iconos, imágenes, estados, movimiento y accesibilidad visual. Su objetivo es triple:

• →Detectar incoherencias: elementos que deberían ser iguales y no lo son.
• →Detectar barreras: problemas de contraste, tamaño, foco o legibilidad.
• →Sentar las bases del sistema: descubrir qué patrones existen, cuáles merecen convertirse en estándar y cuáles sobran.

No sustituye a una revisión de experiencia de usuario. Si lo que preocupa es que la gente no encuentra las cosas o abandona un proceso, lo que necesitas es una auditoría de UX, por ejemplo con las heurísticas de Nielsen. Lo habitual es que ambas se complementen: la de UX dice qué falla en el recorrido y la de UI, qué falla en la forma.

02Cómo hacer una auditoría de UI paso a paso

1. Define el alcance

Decide qué se audita: la web pública, la aplicación, ambas, solo móvil, solo los flujos principales. Lista las pantallas o plantillas incluidas. En productos grandes, merece la pena empezar por los cinco o seis flujos que concentran más uso.

2. Haz el inventario de la interfaz

Brad Frost, autor de Atomic Design, popularizó el inventario de interfaz: hacer capturas de todos los elementos del producto y agruparlos por categoría. Es la parte más laboriosa y la más reveladora. Categorías habituales:

• →Colores (fondos, textos, bordes, estados).
• →Estilos de texto (titulares, cuerpo, etiquetas, enlaces).
• →Botones y enlaces de acción.
• →Campos de formulario, selectores, casillas.
• →Iconos.
• →Tarjetas, listas y tablas.
• →Navegación (cabeceras, menús, pestañas, migas).
• →Mensajes (alertas, toasts, banners, modales).
• →Imágenes e ilustraciones.
• →Animaciones y transiciones.

Un tablero de Figma o FigJam con una sección por categoría funciona muy bien. Lo importante es ver las variantes juntas.

3. Extrae los datos del código

El inventario visual se complementa con datos. Herramientas como Project Wallace o CSS Stats analizan las hojas de estilo de una web y cuentan cuántos colores únicos, tamaños de fuente, familias tipográficas, sombras o valores de radio de esquina se usan. Si el producto tiene archivos de Figma, plugins de análisis de estilos muestran también qué capas no usan estilos ni variables. Es una forma objetiva de dimensionar el problema.

4. Pasa la checklist

Con el inventario delante, revisa cada categoría con la checklist de la siguiente sección. Anota cada hallazgo con captura, ubicación y categoría.

5. Prioriza

No todo pesa igual. Más abajo verás cómo puntuar cada hallazgo por impacto y esfuerzo.

6. Entrega un plan, no una lista de quejas

El resultado de la auditoría es un documento con el estado actual, los hallazgos priorizados y una propuesta de consolidación: qué valores quedan como estándar y qué se sustituye por qué.

03La checklist de auditoría de UI

Color

• →Número de colores únicos frente a la paleta definida. Es habitual encontrar decenas de grises cuando la paleta tiene seis.
• →Cada color tiene un uso claro: acción, texto, fondo, borde, estado.
• →Los colores de estado (error, aviso, éxito, información) son siempre los mismos.
• →Contraste de textos de al menos 4,5:1 (3:1 en texto grande) y de iconos y bordes necesarios de al menos 3:1, según WCAG 2.2.
• →El color no es la única forma de transmitir información.
• →Si existe modo oscuro, cada color tiene su par revisado.

Tipografía

• →Número de familias y pesos en uso; lo normal es una o dos familias y tres o cuatro pesos.
• →Escala tipográfica definida y respetada: tamaños fuera de escala.
• →Interlineado coherente por nivel (más ajustado en titulares, entre 1,4 y 1,6 en cuerpo).
• →Longitud de línea de lectura entre 45 y 75 caracteres en textos largos.
• →Jerarquía de encabezados visual coherente con la jerarquía en el código.
• →Estilos de enlace iguales en todo el producto.

Espaciado y rejilla

• →Valores de espaciado únicos frente a una escala definida (por ejemplo, múltiplos de 4 u 8).
• →Márgenes de página y anchos máximos de contenido coherentes entre plantillas.
• →Alineaciones a la rejilla, sin desplazamientos de uno o dos píxeles.
• →Espacio entre secciones proporcional a la jerarquía.

Componentes

• →Variantes de botón: tamaños, estilos, radios, uso de iconos, mayúsculas.
• →Campos de formulario: altura, borde, etiqueta, ayuda y mensajes de error iguales en todos los formularios.
• →Tarjetas, listas y tablas con la misma anatomía cuando cumplen la misma función.
• →Modales, toasts y banners con un patrón por tipo de mensaje.
• →Componentes que hacen lo mismo con nombres o aspectos distintos: candidatos a unificar.

Iconografía e imagen

• →Una sola librería o estilo de iconos, con grosor y tamaño coherentes.
• →Iconos alineados ópticamente con el texto que acompañan.
• →Fotografías con un tratamiento común (encuadre, color, proporciones).
• →Ilustraciones de una misma familia de estilo.
• →Proporciones de imagen definidas por contexto (16:9, 4:3, 1:1).

Estados e interacción

• →Hover, foco, pulsado, desactivado y cargando definidos en todos los elementos interactivos.
• →Foco visible al navegar con teclado en todos ellos, sin quedar tapado por otros elementos.
• →Estados vacíos, de error y de carga diseñados en las pantallas principales.
• →Áreas táctiles de al menos 24 × 24 px CSS (WCAG 2.2, nivel AA); en móvil, idealmente 44 × 44.
• →Duraciones y curvas de animación coherentes, con alternativa para movimiento reducido.

Responsive

• →Puntos de ruptura coherentes entre plantillas.
• →Ningún desplazamiento horizontal en móvil.
• →Textos legibles sin zoom (16 px como base habitual en cuerpo).
• →Elementos que cambian de forma, no solo de tamaño, cuando el espacio lo pide.

Contenido visible

• →Mayúsculas y minúsculas coherentes en botones y títulos.
• →Formatos de fecha, hora, moneda y números iguales en todo el producto.
• →Mismo nombre para la misma acción («Guardar» y «Aplicar» no conviven para lo mismo).

04Herramientas que ayudan

El panel CSS Overview de Chrome es un gran punto de partida porque viene integrado: lista colores, fuentes y consultas de medios de una página, y marca los textos con contraste insuficiente.

05Cómo priorizar lo que encuentras

Una auditoría seria suele encontrar decenas o cientos de hallazgos. Para convertirlos en trabajo ordenado, puntuamos cada uno en dos ejes, del 1 al 3:

• →Impacto: cuántas pantallas o personas afecta y cuánto, con la accesibilidad siempre en la parte alta.
• →Esfuerzo: cuánto cuesta corregirlo, sobre todo en código.

Con eso salen cuatro grupos: impacto alto y esfuerzo bajo (se hace ya), impacto alto y esfuerzo alto (se planifica), impacto bajo y esfuerzo bajo (se agrupa en una tanda de limpieza) e impacto bajo y esfuerzo alto (se deja para el rediseño).

Cada hallazgo se documenta con un formato breve y repetible:

ID: COL-07
Categoría: Color
Hallazgo: 14 grises distintos en textos secundarios (#666, #6b6b6b, #707070, #777…)
Ubicación: toda la aplicación; ejemplos en Ajustes, Clientes, Facturas
Impacto: 2 · Esfuerzo: 1
Propuesta: sustituir por el token color/text/secondary (#5b645e, contraste 6,1:1 sobre blanco)

La propuesta casi siempre apunta hacia design tokens: pocos valores con nombre que sustituyen a muchos valores sueltos.

06Cómo presentar los resultados al equipo

La forma de contar la auditoría influye mucho en lo que pasa después. Un documento de cien hallazgos en una hoja de cálculo se archiva; una presentación clara se convierte en plan. Lo que mejor nos funciona es una estructura en cuatro partes:

1. 01La foto general. Una página con las cifras que más llaman la atención (colores únicos, tamaños de fuente, variantes de botón, problemas de contraste) y los paneles del inventario con las variantes juntas. Es la parte que hace que todo el mundo entienda el punto de partida sin explicaciones.
2. 02Lo que ya funciona. Los patrones sólidos que conviene conservar y convertir en estándar. Reconocerlos da confianza al equipo y orienta la consolidación.
3. 03Los hallazgos priorizados. Agrupados por los cuatro bloques de impacto y esfuerzo, con capturas y propuesta concreta para cada uno.
4. 04La hoja de ruta. Qué se hace en las próximas semanas, quién lo hace y cómo se va a medir el avance, por ejemplo con el número de colores o tamaños únicos en el CSS, que debería bajar en cada entrega.

Para que la mejora dure, añadimos dos hábitos sencillos: una revisión visual de cada pantalla nueva antes de publicarla, con una versión reducida de esta checklist, y una medición trimestral con las mismas herramientas de análisis de estilos. Así la interfaz no vuelve poco a poco al punto de partida.

07Ejemplo resuelto: de la auditoría al sistema

En una auditoría reciente de una plataforma de formación online, el análisis del CSS y el inventario arrojaron, entre otras cosas, 38 colores de texto, 21 tamaños de fuente, 9 radios de esquina y 11 variantes de botón. Además, el foco de teclado era invisible en buena parte de los formularios y los mensajes de error usaban tres colores distintos.

El plan de consolidación quedó así:

1. 01Semana 1: foco visible en todo el producto y colores de error unificados. Impacto alto, esfuerzo bajo.
2. 02Semanas 2 y 3: paleta reducida a 12 tokens de color y escala tipográfica de 7 pasos, aplicadas mediante variables CSS.
3. 03Semanas 4 a 6: botón y campo de formulario unificados como componentes, sustituyendo las variantes antiguas pantalla a pantalla.
4. 04Después: tarjetas, tablas y modales, ya dentro de un sistema de diseño documentado.

Lo más valioso no fue la lista de hallazgos, sino la conversación que abrió: por primera vez, diseño, desarrollo y producto tenían una foto compartida del estado de la interfaz y un orden para mejorarla.

08Una mirada fresca sobre tu producto

Una auditoría de UI es un ejercicio de honestidad con cariño: mirar el producto como lo ve alguien que llega por primera vez y ordenar con criterio lo que el tiempo ha ido desordenando. El resultado se nota en la sensación de calidad, en la velocidad del equipo y en la accesibilidad.

En SIMA hacemos auditorías de UI como punto de partida de rediseños y sistemas de diseño, y también como revisión periódica dentro del mantenimiento web. Si quieres una mirada fresca sobre la consistencia de tu web o tu aplicación, escríbenos y la hacemos juntos.