# Hotjar para UX

> Una herramienta de análisis de comportamiento que muestra dónde hacen clic, desplazan y pasan tiempo los usuarios—datos visuales sobre comportamiento real del usuario.

*Tags: ux, tools, junior*

---



> [!info] Definición Rápida
> Una herramienta de análisis de comportamiento que muestra dónde hacen clic, desplazan y pasan tiempo los usuarios—datos visuales sobre comportamiento real del usuario.


## ¿Qué es Hotjar?

Hotjar es análisis de comportamiento para sitios web. Graba sesiones de usuario y crea heatmaps mostrando dónde hacen clic, se desplazan y pasan tiempo los usuarios. Ves comportamiento real del usuario, no suposiciones.

Hotjar responde: "¿Dónde miran los usuarios? ¿Dónde hacen clic? ¿Dónde se quedan atrapados?" Las grabaciones de video muestran usuarios reales lucha. Los heatmaps muestran patrones agregados.

**Una frase contundente:** Hotjar te muestra dónde los usuarios realmente interactúan con tu producto—la diferencia entre intención de diseño y realidad del usuario.

## Por Qué los Diseñadores Usan Hotjar

- **Heatmaps** — Representación visual de clics, taps y desplazamiento. Dónde se enfoca el usuario es obvio.
- **Grabaciones de Sesión** — Observa usuarios reales usar tu producto. Ve dónde luchan, se confunden o tienen éxito.
- **Profundidad de Scroll** — ¿Cuán lejos hacia abajo se desplazan los usuarios? ¿Están alcanzando tu call-to-action?
- **Analítica de Formulario** — ¿Qué campos de formulario hacen que los usuarios luchen? ¿Dónde abandonan?
- **Widgets de Feedback** — Pregunta a usuarios preguntas directamente en tu sitio. Feedback rápido sin salir.

## Usos Comunes para Diseñadores

1. **Prueba de Validación** — Después de rediseñar, observa grabaciones. ¿Están los usuarios encontrando cosas? ¿Dónde luchan?
2. **Análisis de Heatmap** — ¿Está tu jerarquía visual funcionando? ¿Están los usuarios haciendo clic donde pretendías?
3. **Optimización de Formulario** — ¿Qué campos causan abandono? Rediseña basado en datos.
4. **Zonas Muertas** — Áreas que los usuarios nunca hacen clic o desplazan. Estas son oportunidades de diseño.
5. **Comportamiento de Scroll** — ¿Cuán lejos se desplazan los usuarios? ¿Están viendo tu contenido?
6. **Validación de CTA** — ¿Están los usuarios haciendo clic en tu call-to-action? Si no, está mal diseñado.

## Herramientas de Hotjar

- **Heatmaps** — Click, move y scroll heatmaps. Ve intensidad de heat (rojo = alta actividad, azul = baja).
- **Grabaciones de Sesión** — Videos de sesiones reales de usuario. Observa y aprende.
- **Funnels** — Rastrea drop-off en flujos multistep (signup, checkout, etc). ¿Dónde los usuarios abandonan?
- **Encuestas de Feedback** — Pop-up surveys. "¿Qué te trajo aquí?" Respuestas rápidas.
- **Surveys** — Cuestionarios más largos. Entiende satisfacción y puntos de dolor.

## Cómo Usar Hotjar

1. **Instala Código de Seguimiento** — Añade código de Hotjar a tu sitio. Script tag simple.
2. **Define Heatmaps** — Elige qué páginas mapear heat. Todas las páginas o específicas.
3. **Espera Datos** — Hotjar necesita tráfico. Espera a que los usuarios visiten.
4. **Analiza Heatmaps** — Mira patrones de clic. ¿Están los usuarios haciendo clic donde pretendías?
5. **Observa Grabaciones** — Filtra por comportamiento (usuarios que no hicieron clic en botón, usuarios que se desplazaron lejos, etc).
6. **Identifica Patrones** — ¿Múltiples usuarios luchan en el mismo lugar? Eso es un problema de diseño.
7. **Itera** — Haz cambios. Monitorea con Hotjar. Mide mejora.

## Interpretando Heatmaps

- **Heat Alta (Rojo)** — Los usuarios interactúan aquí frecuentemente. Ya sea bueno (CTA) o malo (elemento que se ve clickeable pero no lo es).
- **Heat Baja (Azul)** — Los usuarios rara vez interactúan. Ya sea invisible o no necesario.
- **Heat Dispersa** — Interacción desigual. Los usuarios están confundidos. Algunos lo encuentran, otros no.

## Consejos de Mentor

- **Primer consejo: Los heatmaps no son investigación del usuario.** Los heatmaps muestran comportamiento pero no motivación. Un elemento popular podría serlo por razones incorrectas. Combina con entrevistas.
- **Observa grabaciones con mente abierta.** No observes para lo que esperas. Observa para lo que realmente sucede. Los usuarios te sorprenden.
- **Ignora sesiones de outlier única.** Un usuario desplazándose al fondo no significa que todos lo hagan. Busca patrones entre 10+ sesiones.
- **Prueba antes y después.** Establece baseline con Hotjar antes de rediseñar. Después de redesign, compara. Mide mejora.

## Recursos y Herramientas

- **Libros:** "Measuring the User Experience" de Albert y Tullis
- **Herramientas:** Hotjar mismo, [[Figma]] para redesigns, dashboards de análisis para contexto
- **Artículos:** Guías de Hotjar, análisis de comportamiento en [[UX Collective]]

---

Source: https://www.fernandoux.com/es/wiki/herramientas/hotjar/