La checklist esencial de UX: revisa tu web con los ojos de tus clientes

Acabas de rediseñar tu web. Se ve genial en el monitor grande de la sala de reuniones; todo el mundo conoce la oferta y puede completar un pedido con los ojos cerrados. Pero un cliente llega desde el móvil, no sabe nada de la empresa y se marcha en el primer punto de confusión. Por eso no basta con comprobar si una web queda bonita.

Usábamos la versión original de esta checklist como una lista amplia para webs y tiendas online. Con el tiempo acumuló herramientas y reglas concretas que no eran universales. Esta versión vuelve a lo esencial: qué debería poder hacer una persona, qué necesitas verificar y cómo detectar un problema antes de empezar a invertir dinero en tráfico.

Primero identifica los tres recorridos más importantes

Una auditoría de UX de toda una web puede convertirse fácilmente en un centenar de comentarios. Por eso, antes de abrir la analítica, elijo los tres recorridos que más importan al negocio. Normalmente:

• un visitante nuevo entiende la oferta y envía una consulta,
• un cliente encuentra un producto, lo añade al carrito y paga,
• un cliente existente encuentra soporte, un documento o los datos de contacto.

Para cada recorrido, anota el punto de partida, el resultado esperado y el obstáculo principal. Así no completas la checklist de forma mecánica. Compruebas si la web respalda una decisión concreta.

1. La oferta debe quedar clara para alguien que no estuvo en la reunión

• ¿Es evidente desde la primera pantalla qué ofreces y para quién?
• ¿El encabezado principal describe un resultado o un problema, en lugar de un eslogan de empresa?
• ¿El siguiente paso es visible sin tener que buscarlo en el menú?
• ¿Los visitantes pueden distinguir los distintos servicios u opciones?
• ¿Indicas las condiciones y limitaciones que realmente influyen en la decisión?

Pruébalo con alguien que no conozca la empresa. Dale unos segundos, cierra la página y pregúntale a qué se dedica la empresa y qué haría después. No es un estudio científico, pero revela rápidamente un lenguaje que solo entienden las personas de dentro de la empresa.

2. La navegación debe funcionar sin pensar y sin ratón

• ¿Los nombres de los elementos coinciden con lo que buscan los visitantes?
• ¿Funcionan los enlaces, el logotipo y la vuelta al paso anterior?
• ¿El menú móvil es legible, se puede cerrar y no tapa contenido importante?
• En una estructura larga, ¿queda claro dónde se encuentra la persona?
• ¿Se puede acceder a todos los controles importantes con la tecla Tab?
• Al usar el teclado, ¿el foco es visible y el usuario no queda atrapado?

La accesibilidad no es un modo especial para unas pocas personas. Un contraste suficiente también ayuda en un móvil bajo el sol, y un formulario claro ayuda a quien tiene prisa. Para una comprobación rápida, puedes usar Easy Checks de W3C. Es una primera revisión, no una confirmación del cumplimiento total de las WCAG.

3. El contenido debe guiar tanto la mirada como la decisión

• ¿Hay un encabezado principal y una estructura lógica de encabezados posteriores?
• ¿Los párrafos son legibles y resulta fácil encontrar la información importante al escanear el contenido?
• ¿Los enlaces y botones describen el resultado de hacer clic en ellos?
• ¿El significado depende únicamente del color, de una imagen o de un efecto al pasar el cursor?
• ¿Las imágenes informativas tienen un texto alternativo útil?
• ¿Las animaciones distraen de la oferta y se respetan las preferencias de los usuarios que desean reducir el movimiento?

Un color llamativo por sí solo no crea un botón de conversión. Primero debe quedar claro qué ocurrirá después de hacer clic. «Enviar» es una descripción técnica. «Reserva una llamada introductoria» reduce la incertidumbre.

4. Un formulario solo debe pedir lo que la empresa vaya a utilizar realmente

• ¿Cada campo tiene una etiqueta visible y asociada mediante programación?
• ¿Está claro qué datos son obligatorios y por qué se necesitan?
• ¿El usuario puede completar el formulario desde un móvil y con el teclado?
• ¿El mensaje de error explica tanto el problema como la forma de solucionarlo?
• ¿Los datos introducidos correctamente se conservan después de un error?
• Después de enviarlo, ¿el usuario recibe una confirmación clara y sabe qué ocurrirá a continuación?

En su guía sobre formularios accesibles, W3C recomienda pedir solo los datos necesarios para completar el proceso. Cada campo adicional consume atención y aumenta el trabajo de gestión de datos. Si el negocio no va a utilizar esa información, elimínala.

5. Una tienda online debe gestionar toda la compra, no solo una bonita página de producto

Categorías y búsqueda

• ¿Los filtros coinciden con la forma en que eligen las personas y se pueden borrar fácilmente?
• ¿La pantalla sin resultados resulta útil y ofrece otra alternativa?
• ¿La tarjeta de producto incluye nombre, precio, disponibilidad y una imagen legible?
• ¿La ordenación y los filtros siguen siendo utilizables en un móvil?

Detalle del producto

• ¿Se explican las opciones, el precio, el IVA, la disponibilidad y la entrega antes de añadir el producto al carrito?
• ¿Las fotografías muestran lo que el cliente necesita valorar?
• ¿El botón para añadir al carrito es visible sin ocultar el contenido?
• ¿Un producto agotado o descatalogado ofrece una alternativa y una forma razonable de volver atrás?

Carrito y pedido

• ¿Se pueden cambiar el artículo, la opción y la cantidad sin perder los demás datos?
• ¿Se conoce a tiempo el precio final, incluidos el envío y las tasas?
• ¿Evitas exigir el registro si no existe una razón empresarial?
• ¿Un pago fallido devuelve a la persona a un estado comprensible?
• ¿La confirmación del pedido es inequívoca y evita una compra repetida por accidente?

La regla de que «no debe haber navegación en el carrito» no siempre es válida. En una compra sencilla, reducir las distracciones puede ayudar. Sin embargo, con una oferta compleja, el cliente necesita encontrar las condiciones o el detalle de un producto. Comprueba el comportamiento, no una regla general.

6. Una web debe soportar el móvil, una red lenta y un error

• ¿El contenido principal carga rápidamente sin grandes desplazamientos del diseño?
• ¿La página responde a los clics y a la escritura sin un retraso apreciable?
• ¿Las imágenes tienen las dimensiones adecuadas y cargan solo con la calidad necesaria?
• ¿Un script externo defectuoso puede bloquear un pedido o un formulario?
• ¿Los recorridos clave funcionan en los navegadores actuales más utilizados y en móviles reales?
• ¿Supervisas la disponibilidad y los errores en los pasos importantes?

La puntuación de laboratorio es una orientación, no un resultado de negocio. Observa también a los usuarios reales y el recorrido principal. Un píxel publicitario no debe ser más importante que el botón de compra.

7. Verifica la medición con una prueba, no comprobando que existe el código

Para cada recorrido importante, realiza una consulta o un pedido de prueba. Comprueba que el evento se envía una sola vez, con el nombre, el valor, la divisa y el identificador de transacción correctos. Después verifica que el sistema de destino lo recibe y que coincide con el pedido real.

• ¿Se envía una compra simplemente al abrir una URL de agradecimiento?
• ¿El evento se duplica al actualizar la página?
• ¿Las etiquetas respetan el estado del consentimiento?
• ¿La capa de datos contiene datos personales que no deberían estar ahí?
• ¿El contenedor incluye solo los servicios que utiliza la empresa?
• ¿Hay una persona responsable de la medición y un registro de la última comprobación?

Para la implementación, consulta Cómo configurar Google Tag Manager correctamente; para entender los eventos, consulta la guía de Google Analytics 4. Las grabaciones de sesiones o los mapas de calor pueden revelar puntos ciegos, pero utilízalos con un propósito, con los campos sensibles ocultos y de acuerdo con las normas de consentimiento. Grabarlo todo «por si acaso» no es un plan de investigación.

Cómo utilizar la checklist sin organizar un taller mensual

1. Elige el recorrido más importante y complétalo desde un móvil.
2. Haz lo mismo utilizando únicamente el teclado.
3. Pide a alguien ajeno a la empresa que complete la tarea y no le guíes.
4. Anota dónde dudó, no tu solución propuesta.
5. Verifica el problema en la analítica, el soporte o pruebas adicionales.
6. Corrige un obstáculo y vuelve a recorrer todo el proceso, incluida la medición.

No intentes declarar que una web está completamente optimizada desde el punto de vista de la UX en una sola ronda. La oferta, los dispositivos y las expectativas de las personas cambian. El objetivo de la checklist es encontrar periódicamente la fricción más costosa y decidir qué corregir primero.

Si quieres revisar la web en un contexto empresarial más amplio, utiliza también la checklist de marketing online. Si necesitas priorizar la UX, la medición y la captación, describe tu recorrido principal a través de la página de contacto.