UX Test Lab

Clarity detecta "rage clicks" cuando un usuario hace clic repetidamente en un elemento que no responde. Esto indica frustración y problemas graves de usabilidad en la interfaz.

Deploy que No Responde

Simula un botón de deploy a producción que no hace absolutamente nada. Sin loading spinner, sin feedback visual, sin mensaje de error ni confirmación. El usuario no tiene forma de saber si su acción fue registrada.

Deploy to Production

⚡ Este botón no hace nada — haz clic varias veces rápidamente para generar un rage click

Build Pipeline Lento

Responde después de 3 segundos sin mostrar ningún indicador de progreso. El usuario asume que no funcionó y hace clic de nuevo, generando múltiples ejecuciones del pipeline y rage clicks en Clarity.

Run Build Pipeline

🐌 Ejecuta a los 3 segundos — sin spinner ni barra de progreso. Intenta hacer clic varias veces.

Botón Visualmente Activo pero Deshabilitado

Parece un botón completamente funcional (mismo color, mismo estilo), pero tiene la interacción deshabilitada sin ningún cambio visual. El usuario cree que está roto porque no hay forma de distinguirlo de los activos.

Rollback Service v2.3.1

🚫 Se ve activo pero no responde — genera frustración por falta de affordance visual

Commit Funcional (Control)

Responde inmediatamente con feedback visual claro: cambia de texto, color y muestra confirmación. Este es el baseline para comparar — así debería funcionar un buen botón de acción.

Commit & Push

✅ Responde al instante con retroalimentación — compara su rendimiento en Clarity con los anteriores

Los "dead clicks" se registran cuando un usuario hace clic en algo que parece interactivo pero no lo es. Esto indica problemas de affordance — el diseño sugiere funcionalidad que no existe, confundiendo al usuario.

Links de Documentación Falsos

Texto con estilo de hipervínculo (color azul + subrayado) que no lleva a ninguna página. El usuario espera navegar pero nada sucede.

Ver diagrama de microservicios Descargar Architecture Decision Record Configuración del API Gateway Estado del clúster en la nube Ver contratos de API publicados

Botones Decorativos

Elementos con apariencia de botón (fondo, borde, icono) que no ejecutan ninguna acción al hacer clic. Generan expectativa de interacción falsa.

Generar Métricas SonarQube Exportar Logs a CloudWatch Sincronizar Repositorios Iniciar Análisis de Código Estático Ejecutar Suite de Tests e2e

Diagrama "Interactivo"

Imagen que parece un diagrama clickeable con zoom, pan y filtrado. En realidad es completamente estática.

Haz clic para explorar el diagrama de arquitectura

Zoom, pan y filtrado de componentes disponible

Cards de Métricas Estáticas

Tarjetas con hover y cursor que parecen clickeables para ver más detalles. En realidad son solo informativas sin ninguna acción.

Latencia P95

142ms

Error Rate

0.3%

Req/segundo

1.2k

Uptime

99.9%

Clarity graba la sesión mostrando hesitación (pausas largas en un campo), errores al enviar, campos que se llenan y se borran, y el punto exacto donde el usuario abandona el formulario sin completarlo.

Clarity genera scroll heatmaps que muestran el porcentaje de usuarios que llegan a cada zona de la página. El contenido más importante (un CTA de acción) está intencionalmente al final para ver cuántos llegan.

Clarity registra "Quick Backs" cuando un usuario navega a una página y regresa en menos de 2 segundos. Indica que el destino no cumplió la expectativa generada por el enlace — un problema grave de arquitectura de información.

Instrucciones: Haz clic en cada tarjeta y luego presiona "Atrás" en el navegador para volver. Las primeras 5 llevan a example.com — un destino genérico que no cumple lo prometido. La última sí navega correctamente.

Guía de Microservicios

Promete guía completa → lleva a example.com

Event Sourcing Tutorial

Promete tutorial → lleva a example.com

Cloud Design Patterns

Promete patrones → lleva a example.com

CQRS & Event Store

Promete documentación → lleva a example.com

CI/CD Pipeline Builder

Promete herramienta → lleva a example.com

Dashboard de Monitoreo

✅ Navega correctamente al dashboard abajo

Dashboard simulado de monitoreo de servicios. Clarity generará click heatmaps mostrando qué métricas, filas de la tabla y botones de acción reciben más atención e interacción de los usuarios.