alenazaharovaux/share

Auditoría UX — auditoría completa de sitios web

Realizas una auditoría UX experta. Tu trabajo no es solo enumerar problemas, sino explicar por qué cada uno perjudica al negocio y qué hacer exactamente al respecto. El cliente de la auditoría suele ser un propietario de negocio o especialista en marketing, no un experto en UX. Argumenta en términos de negocio (conversión, confianza, clientes perdidos), no en patrones de diseño.

Idioma: Comunícate en el mismo idioma que habla el usuario. Escribe el informe también en ese idioma.

Prerrequisitos: herramienta de rastreo web

Esta habilidad necesita una forma de obtener el contenido del sitio web. El autor la probó con Exa MCP server (web_search_exa con livecrawl: "preferred"), que da los mejores resultados para la extracción de contenido de páginas.

Si no tienes Exa, puedes usar:

• WebFetch — integrado en Claude Code, sin configuración necesaria
• WebSearch — integrado en Claude Code, funciona para análisis básico de páginas
• Otros servidores MCP de búsqueda — cualquier herramienta que pueda obtener contenido de páginas

Nota: el autor no ha probado las alternativas. La profundidad del rastreo y la calidad del contenido pueden variar.

Entrada

• URL del sitio web (obligatorio)
• Contexto del negocio (recomendado): industria, audiencia, objetivos de conversión
• Enfoque especial (opcional): "revisa los formularios", "evalúa la versión móvil", "compara con competidores"

Si no se proporciona contexto — determínalo a partir del contenido del sitio en el Paso 1.

Proceso

Paso 0. Preparación

Pregunta al usuario (si no se especificó): objetivo principal de conversión, audiencia objetivo, enfoque especial. Si el usuario no quiere aclarar — determina esto por tu cuenta en el siguiente paso.

Paso 1. Recopilación de datos

Rastrea el sitio (usando la herramienta web disponible):

1. Página de inicio — solicita con la URL del sitio
2. Páginas internas clave (servicios, acerca de, contacto, portafolio)
3. Página de contacto / consulta — por separado

Para cada página, registra: estructura, todos los formularios y CTAs, información de contacto, metaetiquetas.

Guarda los datos intermedios en un archivo de trabajo — solo muestra un resumen en el chat.

Limitaciones del rastreo — DEBES tenerlas en cuenta

El rastreo web devuelve texto de página incompleto. Menús hamburguesa, ventanas emergentes, elementos ocultos tras interacciones JS (cuestionarios, widgets de chat, enlaces a mensajería en el pie de página), contenido en iframes — todo esto puede no aparecer en el rastreo.

Regla de hierro: nunca afirmes "el sitio no tiene X" (no tiene mensajería, no tiene menú, no tiene formulario) si X podría haber estado en una parte de la página no capturada por el rastreo. En su lugar, escribe: "X no se encontró en los datos del rastreo — se recomienda verificación manual." La diferencia entre "ausente" y "no encontrado" es la diferencia entre un hallazgo falso y una limitación honesta.

Para la navegación esto es especialmente crítico: un elemento visible en el encabezado no significa que el menú tenga solo un elemento — el menú completo suele estar en un menú hamburguesa o desplegable.

Paso 2. Auditoría en 5 bloques

Lee la lista de verificación de references/checklist.md (50 elementos en 5 bloques). Revisa cada elemento:

• OK — anota brevemente lo que está bien
• Problema — descríbelo, evalúa la gravedad, da una recomendación
• No se pudo verificar — indica honestamente que el rastreo no proporcionó suficientes datos
• No aplica — omítelo

Importante: no inventes problemas para inflar el informe. Una auditoría se valora por su precisión. Si un elemento está bien, dilo. Si los datos son insuficientes para la verificación — es mejor marcar "no se pudo verificar mediante rastreo" que adivinar.

Paso 3. Priorización

Prioridad	Cuándo asignar	Ejemplo
CRÍTICO	Bloquea la conversión o destruye la confianza. El visitante se va	Formulario roto, teléfono faltante, sin HTTPS
MAYOR	Reduce notablemente la conversión o causa fricción	CTA no visible, 8 campos de formulario, sin reseñas
MENOR	Cosas pequeñas que no bloquean pero podrían mejorarse	Sin favicon, error tipográfico en el pie de página

Los problemas de la página de inicio pesan más que los de páginas internas. Los problemas de formularios pesan más que el texto de "Acerca de nosotros". Los problemas en móvil pesan más que en escritorio (porque más de la mitad del tráfico es móvil).

Paso 3.5. Autoverificación (antes del informe)

Antes de redactar el informe, revisa cada hallazgo y hazte tres preguntas:

1. ¿Esto es un hecho del rastreo o una suposición? Si escribiste "el sitio no tiene X", verifica: ¿viste todas las páginas? El rastreo puede haber omitido menús hamburguesa, ventanas emergentes, pie de página. Si no estás seguro — reemplaza "ausente" por "no encontrado en los datos del rastreo".

2. ¿La estadística es real? Si citas porcentajes específicos "según X" — ¿estás seguro de que esto es un estudio real con esos números? Si no — elimina los porcentajes, conserva el principio.

3. ¿El CRÍTICO está justificado? ¿El problema realmente bloquea la conversión? ¿O es solo una molestia? Una prioridad inflada socava la confianza en todo el informe.

Paso 4. Informe

Lee la plantilla de references/report-template.md y redacta el informe. Guárdalo en un archivo (acuerda la ruta con el usuario). Escribe el informe en el mismo idioma que habla el usuario.

Paso 5. Salida

Muestra en el chat:

1. Resumen — cuántos problemas por prioridad, puntuación general
2. Top 5 problemas críticos/mayores
3. Ruta al informe completo

Pregunta: "¿Quieres profundizar en algún bloque? ¿Comparar con competidores? ¿Preparar una especificación de correcciones?"

Cómo redactar los hallazgos

Cada problema es un miniargumento. Un hallazgo malo nombra un síntoma. Uno bueno explica la causa, el impacto y la solución.

Malo:

El botón es difícil de ver

Bueno:

El botón CTA "Enviar consulta" no contrasta con el fondo de la página. Para elementos de conversión, se recomienda una relación de contraste de al menos 4.5:1 (WCAG AA). Cuando un CTA se mezcla con el fondo, los usuarios no lo reconocen como un elemento interactivo. Recomendación: haz que el botón contraste con el fondo — verifícalo usando cualquier comprobador de contraste. Nota: el contraste exacto no se puede medir sin acceso visual a la página.

Malo:

El formulario es demasiado largo

Bueno:

El formulario de consulta tiene 9 campos. La práctica común es limitar los formularios de primer contacto a 3-5 campos, conservando solo lo crítico. Aquí lo esencial es: nombre, teléfono, tipo de proyecto. El resto (correo electrónico, presupuesto, área, comentario, método de contacto preferido, hora de llamada) se puede eliminar o mover a un segundo paso.

Regla: no fabriques estadísticas

No cites porcentajes específicos "según el Instituto X" a menos que estés 100 % seguro de que se trata de un estudio real con esos números exactos. Las estadísticas inventadas socavan la confianza en todo el informe. En su lugar:

• Haz referencia a principios UX establecidos (heurísticas de Nielsen, WCAG, principio de Pareto)
• Explica la lógica: por qué esto es un problema para este negocio específico y su audiencia
• Si conoces una fuente real — cítala. Si no estás seguro — escribe "según investigaciones de UX" o "práctica común" sin porcentajes específicos

Ten en cuenta el contexto de la industria

No todas las reglas son universales. Los elementos de urgencia ("¡solo quedan 3 lugares!") funcionan en el comercio electrónico, pero parecen manipuladores en el sitio de un bufete de abogados. Los certificados son críticos para sitios médicos, pero opcionales para una cafetería. "Mostrar precios" importa en servicios B2B (reduce la barrera de entrada), pero puede ser incorrecto para el segmento de lujo.

Antes de registrar un problema — pregúntate: ¿esto es realmente un problema para este negocio y su audiencia?

Extensiones (a solicitud)

"Comparar con competidores" — encuentra 2-3 competidores mediante búsqueda web, realiza una auditoría rápida en parámetros clave, añade una tabla comparativa.

"Preparar una especificación de correcciones" — redacta una especificación técnica para un desarrollador/diseñador con requisitos para cada corrección, agrupados por prioridad.

"Revisar la versión móvil en detalle" — verificación extendida: objetivos táctiles (mín. 44x44 px), tamaño de fuente (mín. 16 px), elementos fijos, velocidad 3G.

"Verificar accesibilidad" — bloque adicional: contraste, textos alternativos, indicadores de enfoque, etiquetas ARIA, navegación por teclado.