En el dashboard de DestacaLocal hay un momento en que le muestras al usuario su score de Core Web Vitals. Son 3 numeros: LCP, FID, CLS.
Si eres desarrollador web, sabes que significan. Si eres dueno de una ferreteria en Concepcion, probablemente no.
Ahi entran los tooltips.
El problema de explicar sin romper el flujo
Cuando construi el reporte de auditoria, me enfrente a un problema clasico de UX: tengo que mostrar mucha informacion tecnica a personas que no son tecnicas.
Podria poner un parrafo explicativo debajo de cada metrica. El resultado seria un dashboard interminable que nadie leeria.
Podria poner un enlace "Que significa esto?" que abra una pagina aparte. El resultado seria que nadie haga clic.
Podria poner un modal con explicacion detallada. El resultado seria molesto y bloqueante.
La solucion: tooltips. Pero no cualquier tooltip.
Tooltip vs popup vs modal
Aprendi esta distincion a fuerza de errores:
| Elemento | Cuando usarlo | Cuando NO |
|----------|---------------|-----------|
| Tooltip | Explicacion breve (<20 palabras) de un termino o metrica | Si necesitas mas de 2 lineas |
| Popover | Explicacion mediana con formato (lista, enlace) | Si requiere accion del usuario |
| Modal | Flujo completo, formulario, decision importante | Para una simple duda |
| Pagina nueva | Documentacion completa, tutorial | Para una consulta rapida |
El tooltip es para responder "que es esto?" sin preguntar. Aparece en el hover, desaparece cuando te vas. Son 20 palabras, no un ensayo.
Como implemente 30 tooltips
En el dashboard actual hay unos 30 tooltips distribuidos en metricas, precios, resultados y graficos.
Cada tooltip sigue 3 reglas:
1. No repetir la obviedad. Si la metrica se llama "Score Promedio", el tooltip no dice "Esto es el score promedio". Dice "Promedio del score SEO de todas las auditorias convertido a escala 1-5".
2. Una idea por tooltip. Si necesitas explicar 2 cosas, pon 2 tooltips separados.
3. Lenguaje de calle. "El Cumulative Layout Shift mide la estabilidad visual de la pagina durante la carga" -> "Mide cuanto se mueven los elementos de tu pagina mientras carga. Un CLS bajo significa que no se te mueve el boton de comprar justo cuando ibas a hacer clic."
La regla 3 es mi favorita. Es la diferencia entre un tooltip util y un tooltips que parece escrito por un robot.
La metafora del amigo
Cuando diseno un tooltip, me pregunto: "Si estuviera tomando cafe con el dueno del negocio, como le explicaria esto?"
No usaria jerga tecnica. No le lanzaria un pdf. Le diria algo como: "Esto mide cuanto se mueve tu pagina mientras carga. Si se mueve mucho, la gente hace clic en el lugar equivocado y se frustra."
Eso es un tooltip bien hecho.
Lo que aprendi
Explicar lo complejo sin molestar no es un problema tecnico. Es un problema de empatia.
Tienes que saber que sabe tu usuario, que necesita saber, y cual es la minima cantidad de informacion que resuelve su duda sin interrumpir lo que esta haciendo.
30 tooltips. 20 palabras cada uno. Cero modales. Ese fue el resultado.
> "No sabia que significaba CLS, pero ahora lo entiendo." — Ningun usuario lo dijo nunca, porque el tooltips funciono y ni se dio cuenta.
Quieres ver los tooltips en accion? Audita tu negocio gratis y pasa el mouse sobre cualquier metrica.