Tooltips – Cómo crearlos y utilizarlos como un profesional

Imagínate esto:

Estás conduciendo en un país en el que nunca has estado y, aunque puedes distinguir algunas señales de tráfico, obviamente te confundes.

Y antes de que te des cuenta, estás en el carril equivocado, conduciendo contra el tráfico.

¿Y si te dijera que los tooltips son para tus usuarios lo que las señales de tráfico son para los conductores?

Sin tooltips, tus usuarios pueden seguir manejando de alguna manera porque probablemente saben cómo funciona la mayoría del software, pero ¿sabrán realmente qué carril tomar?

No les dejemos adivinar y echemos hoy un vistazo a:

¿No tienes tiempo? Aquí está el resumen: ⬇️

Resumen

  • Los tooltips son elementos de interfaz de usuario que se utilizan habitualmente en sitios web y plataformas para mejorar el recorrido del usuario y guiarlo hacia donde debe ir.
  • Los tooltips se utilizan para el onboarding de usuarios y clientes, la captación de usuarios y otros fines de mensajería dentro de la aplicación, como el marketing dentro de la aplicación.
  • Los tooltips son patrones UX de onboarding que suelen utilizarse mal y tienen mala reputación por ello. Cuando se utilizan correctamente, las tooltips pueden suponer un gran cambio en la experiencia de onboarding del usuario.
  • Algunas de las mejores prácticas para los tooltips son: ofrecer valor, copia clara y concisa, y diseñar bien el tooltip.
  • Algunas malas prácticas para los tooltips son: pasar por alto tu marca, interrumpir el recorrido del usuario e invadir la pantalla.
  • Grammarly, Intercom y Discord son algunos de los mejores ejemplos de uso de tooltips.
  • Puedes empezar a utilizar tooltips de 3 maneras: la forma sin código con una herramienta como UserGuiding, la forma low-code con Bootstrap y jQuery, o la forma interna con código CSS, HTML o JavaScript.

¿Estás listo? Adelante:

¿Qué son los tooltips?

Un tooltip es un elemento de interfaz de usuario que se utiliza comúnmente en sitios web y plataformas para mejorar el recorrido del usuario y guiarlo hacia donde debe ir. Al ser uno de los elementos en pantalla más populares del onboarding y la interacción con el usuario, los sitios web y las aplicaciones pueden incluir tooltips simples, series de tooltips, tooltips individuales o tooltips como elementos interactivos de un recorrido del usuario. Pero lo que es esencialmente un tooltip puede definirse por el diseño del elemento; si es un mensaje dentro de la aplicación, a menudo pequeño, que apunta a otro elemento de la interfaz de usuario, es un tooltip.

Un ejemplo:

qué son los tooltips

Recordando mi pequeña metáfora del tráfico de arriba, puedes estar seguro de que la ausencia de tooltips o de cualquier otro elemento de comunicación in-app no vas a causar una gran confusión a los usuarios.

Pero si los utilizas de la forma correcta, pueden ser formidables para el diseño de tu plataforma y UX.

¿Para qué se utiliza un tooltip?

Los tooltips tienen una amplia gama de casos de uso, y se pueden ajustar a cada caso de uso dependiendo de su propósito.

Sin embargo, el caso de uso más común de tooltips es en el onboarding del usuario y del cliente, en el compromiso del usuario, y en otros propósitos de mensajería in-app como el marketing in-app.

Además, los tooltips pueden incorporarse dentro de:

✅ Tours de productos

✅ Hotspots

✅ Guías interactivas

✅ Campos de formulario y mucho más

En resumen, los diferentes tipos de tooltips pueden ser una herramienta para muchas interacciones de usuario diferentes y la experiencia de usuario con tooltips puede tener un gran impacto en la experiencia general del usuario y del cliente.

Pero, ¿son los tooltips realmente buenos para la experiencia del usuario?

Los tooltips son buenos para la UX? 🤨

La respuesta es sí.

Y no.

Un tooltip es un elemento de experiencia de usuario tan bueno como lo ejecutes.

Si lo diseñas mal, lo pones en el momento equivocado en los lugares equivocados y por ello fallas, eso no significa que sea un mal elemento para la experiencia de usuario.

Significa que lo has hecho mal.

por qué los tooltips son importantes para la experiencia del usuario

Un buen uso de tooltips como elementos de experiencia de usuario necesita de que:

👉 Estén diseñados teniendo en cuenta el diseño general de la interfaz de usuario

👉 Incluyan textos breves, concisos y significativos

👉 Sean avisados cuando y donde sea relevante y apropiado

👉 Incluyan elementos visuales y emojis atractivos si son relevantes para la marca

👉 Y lo más importante, ofrezcan un valor inmediato o a largo plazo al usuario

Profundicemos un poco en estos aspectos:

Qué hacer y qué no hacer con los tooltips

qué hacer y qué no hacer con los tooltips

1- Ofrece valor a los clientes

Por ahí afuera, algunos tooltips se utilizan literalmente para nada.

El tooltip se solicita en momentos irrelevantes y el contenido del tooltip está lleno de información que es muy obvia o con algo que podría haber sido un correo electrónico. 🙄

He aquí la cuestión:

Si tus tooltips no ofrecen valor, los usuarios empezarán a ignorarlos y se perderán los realmente importantes.

Algo así como el cuento del niño y del lobo.

Si alertas a los usuarios a cambio de nada utilizando elementos extra-UI, se insensibilizarán enseguida.

Ten en cuenta una cosa: no utilices tooltips sólo para aumentar el engagement, sino que también para ofrecer una mejor experiencia de usuario.

2- Utiliza un texto claro y conciso

Si el texto de tu tooltip es largo, es muy probable que nadie lo lea.

Y lo digo en serio.

Estamos programados para priorizar automáticamente las tareas que tenemos entre manos, y si una tarea nueva y larga llama nuestra atención, tendemos a ignorarla.

Por lo tanto, lo mejor que puede hacer para que los usuarios se interesen por su información sobre herramientas es escribir un texto claro y conciso.

Y luego ir un paso más allá y darle el formato adecuado para que la legibilidad aumente.

Un texto bien formateado de un tooltip bien diseñado debe:

👉 Tener mucho espacio en blanco

👉 Tener una tipografía fácilmente legible

👉 Elegir un color que contraste con el color de fondo para el texto

👉 Tener suficiente espacio entre líneas

👉 Estar optimizado para dispositivos móviles (ser más corto o tener un punto más pequeño)

👉 Tener un microtexto accionable y CTAs (call-to-actions)

Aquí tienes un ejemplo casi perfecto de Notion:

prácticas recomendadas de tooltips de notion

3- Cuida el proceso de diseño

El diseño de un tooltip puede cambiar la experiencia del usuario y del cliente al instante.

Por ejemplo, si ocupa demasiado espacio en la pantalla sólo para dar un mensaje informativo, puede resultar molesto para los usuarios.

Un tooltip tradicional suele resaltar un área específica de la pantalla y atenuar el fondo, pero puede que no quieras hacer estas cosas según el contenido del tooltip que estás diseñando.

Por lo tanto, intenta crear tooltips personalizados diseñados específicamente para tus necesidades.

Durante el proceso de diseño del tooltip, tu equipo de producto debe:

👉 Tener en cuenta el contenido del tooltip

👉 Utilizar elementos interactivos cuando sea necesario

👉 Ser creativo con las formas y el diseño si tu marca lo permite

👉 Tratar siempre de conseguir tooltips bien sincronizados y colocados

👉 Optimizar el diseño para los usuarios móviles

Por ejemplo, podemos mirar el tooltip de Figma para dispositivos móviles:

ejemplo de tooltip de figma

4- No descuides tu marca

Dependiendo de la voz e imagen específicas de tu marca, puede que necesites que tus tooltips aparezcan de una determinada manera.

Si has diseñado tu plataforma o sitio web para que tenga un aspecto minimalista y profesional, un tooltip como el de Canva puede resultar un poco fuera de marca para ti:

ejemplo de tooltip de canva

Del mismo modo, si una plataforma creativa y divertida como Canva utilizara un tooltip básico y tradicional, también podría haber estado fuera de marca para ellos.

La cuestión es saber para quién estás diseñando y el producto que incluirá el tooltip que estás diseñando.

¡No pierdas de vista tu marca!

5- No interrumpas a los usuarios

Una de las cosas más importantes que no hay que hacer a la hora de diseñar tooltips eficaces es interrumpir a los usuarios.

Pongámoslo así:

Eres un usuario de una plataforma de gestión de proyectos, necesitas repasar algunas tareas y tienes poco tiempo.

Aparece un tooltip de anuncio de una función.

Te presenta una nueva funcionalidad y te ofrece mostrarte más sobre ella a través de un tour de nuevas funcionalidades.

Cuando ya estabas en medio de algo y tenías prisa.

A continuación, esto sucede un par de veces más en el lapso de una semana o un mes (a veces incluso un día).

Te sientes frustrado.

Sin darte cuenta de por qué, la plataforma empieza a desagradarte.

Cuando podrías utilizar un tooltip contextual como lo hace Amplitude en el ejemplo abajo y mantener la frustración del usuario lo más baja posible:

ejemplo de tooltip de amplitude

6- No invadas la pantalla

Algunos tooltips ocupan literalmente toda la pantalla y hacen que los usuarios se pierdan información o elementos importantes.

Y eso, amigos, es una bandera roja. 🚩

Quieres proporcionar una mejor UX a los usuarios cuando utilizas tooltips. Por lo tanto, si sus tooltips conducen a una mala UX, entonces es mejor no usarlos en absoluto.

Este es un ejemplo de la antigua interfaz de Twitter:

mal ejemplo de tooltip en ux
Fuente de la imagen: weloveuxd

En este ejemplo se puede ver que el tooltip está bloqueando el área donde se supone que los usuarios deben escribir. Por lo tanto, esto significa que el usuario no puede entender realmente lo que se supone que la información sobre herramientas está explicando en primer lugar.

Como hemos mencionado anteriormente, los tooltips se utilizan para mejorar la experiencia del usuario; por lo tanto, es imperativo evitar cualquier cosa que la perjudique.

Ahora, echemos un vistazo a algunas plataformas y software que consiguieron proporcionar una buena UX:

Mejores prácticas y ejemplos de UX con tooltips

Como hemos comentado anteriormente, los tooltips son elementos de interfaz de usuario esenciales para una mejor UX.

Si no ayudan a tu UX, lo estás haciendo mal.

Si sabes dónde, cuándo y cómo utilizar los tooltips, ellos pueden hacer maravillas por tu producto.

Estos son algunos de los casos de uso más importantes de tooltips y cómo algunas plataformas lo aplicaron súper bien:

Onboarding de usuarios

Un buen proceso de onboarding de usuarios incluye un tour del producto bien preparado.

Y un buen tour de producto incluye tooltips bien planificados.

He aquí algunos buenos ejemplos de tooltips utilizados en el onboarding de usuarios:

1- Grammarly

ejemplo de tooltip de grammarly

En el onboarding de los usuarios en un entorno de demostración, Grammarly utiliza tooltips en combinación con hotspots (¡que es una súper buena práctica!) y se los arregla para mantener las cosas interesantes.

👉 Un gran hecho acerca de estos tooltips es que su diseño prioriza el contraste con el color de fondo para no frustrar a los usuarios y cansar sus ojos.

👉 Además, El texto es corto y conciso para facilitar la tarea al usuario, y cada tooltip cuenta con un diminuto logo de Grammarly, que sorprendentemente hace un gran trabajo llamando la atención gracias al punto de atracción que crea.

2- Memsource

ejemplo de tooltip de memsource

Aunque a primera vista el tour del producto de Memsource parece sencillo, su diseño de tooltip hace mucho más por los usuarios de lo que parece.

👉 Para empezar, el texto es sencillo, de una sola línea, está bien formateado y los botones se han diseñado teniendo en cuenta el microtexto y los colores

👉 Además, la barra de progreso ayuda a los usuarios a navegar por la experiencia sin frustrarse.

👉 Y por último, resaltar elementos en la pantalla mientras se atenúa el fondo ayuda a los usuarios a no distraerse.

Pero los tooltips se pueden utilizar para más de un caso de uso:

Actualizaciones y recordatorios

Los tooltips pueden ayudarte a anunciar nuevas funciones de la mejor manera posible y en el punto más relevante del recorrido del usuario por tu producto.

Aquí tienes dos buenos ejemplos:

3- Intercom

ejemplo de tooltip de intercom

Intercom utiliza un tooltip en combinación con un hotspot para no molestar a sus usuarios ni interrumpir su navegación.

El tooltip aparece al pasar el ratón por encima de un punto que contiene un enlace a un modal más grande, en el que se explica la nueva función.

👉 El uso del tooltip es genial no solo por la combinación de hotspot, sino también porque este uso hace posible que el usuario elija si quiere saber más sobre la función o no.

👉 Además, el tooltip que activa el widget de Intercom conversa con la marca.

4- Discord

prácticas recomendadas de tooltips de discord
ejemplo de tooltip de discord

Los tooltips de Discord son perfectos por tres razones:

👉 Ellos utilizan un color para el tooltip que contrasta mucho con el fondo, convirtiéndolos en un centro de atención para los usuarios,

👉 Los elementos visuales utilizados son divertidos y muy acordes con la marca Discord, lo que atrae enormemente a su público objetivo,

👉 El texto y su formato hacen que los tooltips sean realmente digeribles y disminuyen en gran medida la tasa de frustración del usuario.

Y hay un uso más común de los tooltips:

¡AYUDA!

Los tooltips pueden ser geniales para propósitos de ayuda y advertencia.

Pero realmente alcanzan todo su potencial cuando se utilizan con un elemento UX específico:

¡Los hotspots!

He aquí un ejemplo de Zakeke:

5- Zakeke

Los hotspots son uno de los elementos que más llaman la atención en una aplicación.

Y, naturalmente, si se añade tooltips para los usuarios que pasan el ratón por encima de los hotspots, su lectura se vuelve irresistible.

Los hotspots de Zakeke captan la atención y crean en los usuarios la necesidad de conocer la información que se muestra:

ejemplo de tooltip y hotspot de zakeke
Creado con UserGuiding

Dado que se trata de una información importante, debería permanecer ahí constantemente en lugar de quedar relegada a un texto pop-up que se presenta a los usuarios durante un tour del producto o una guía interactiva de los recursos.

Por lo tanto, en lugar de crear un texto pop-up, deberías añadir un tooltip a los hotspots porque no quieres interrumpir el trabajo de tus usuarios.

Al hacerlo, estarás resolviendo un problema al que los usuarios se enfrentan a menudo.

Gracias a esto tooltip añadido a un hotspot, no tendrás que preocuparte de responder preguntas puntuales de los usuarios todo el tiempo.

Gracias a los tooltips, ahorrarás tiempo, recursos y energía.

Pero la pregunta más importante es:

¿Cómo crear una tooltip?

Puedes crear tooltips para sitios web, productos web y aplicaciones móviles.

Pueden ser tooltips nativos o tooltips sin código creados con herramientas de terceros que no requieren codificación.

Hay tres formas comunes de crear tooltips.

Veámoslas, empezando por la más sencilla hasta la más compleja.

1- La forma no-code: UserGuiding

UserGuiding es una herramienta de onboarding de usuarios fácil de utilizarse y no-code, lo que signifca que es sin código.

tooltips para sitios web y productos web de userguiding

Puedes utilizarlo para crear tooltips fácilmente, junto con muchos otros elementos como hotspots, listas de control de onboarding y tours del producto.

He aquí un tour del producto que he creado con UserGuiding en menos de 5 minutos:

creación de tooltip con userguiding
Creado con UserGuiding, en menos de 5 minutos

Pero, ¿es la opción adecuada para ti?

Podría ser si lo que buscas es:

👉 Una solución que sea rápida (¡puedes crear un tooltip funcional en menos de 2 minutos!)

👉 Una solución asequible con funciones realmente útiles (análisis, segmentación, orientación, personalización, activadores, programación y mucho más)

👉 Una solución que no requerirá desarrolladores (no se requiere codificación a menos que realmente quieras 👀)

👉 Una solución que ofrezca un buen servicio de atención al cliente (¡9,8 en G2!).Crees que es la solución para ti? ¡Pruébala!

👉 Prueba UserGuiding GRATIS 👈

¿Quieres más complicaciones pero más libertad para diseñar tus tooltips?

Entonces, es posible que desee ir para:

2- La forma low-code: Bootstrap y jQuery

bootstrap para tooltips

Si deseas utilizar otra forma menos compleja de crear tooltips que requiera algo de codificación, puedes probar Bootstrap y jQuery.

Echa un vistazo a los enlaces para ver cómo puedes utilizarlos.

Sin embargo, aquí está el aviso.

Requieren un poco de conocimiento técnico, pero si miras los ejemplos y sigues los pasos en cada sitio, ambos te ayudarán a crear tooltips para varios casos de uso que puedes personalizar y colocar donde quieras.

Ahora, si necesitas algo más que un poco de codificación, entonces vas a querer:

3- Hazlo tu mismo: JavaScript, HTML, CSS

javascript para tooltips

Esta es la opción para quienes tienen dinero, tiempo y equipo para crear código.

De los tres, Javascript es el más complejo.

Sin embargo, si eres un desarrollador o hay un desarrollador que te puede ayudar, Javascript te dará más libertad para crear y personalizar tooltips.

También debes tener en cuenta que si quieres utilizar JavaScript para crear tooltips, deberás ser capaz de actualizarlos y mantenerlos en todo momento, algo que no necesitarás hacer si utilizas plataformas de terceros (como UserGuiding).

En comparación con JavaScript, HTML y CSS son menos complejos, pero siguen siendo similares a JavaScript.

Al igual que en JavaScript, también deberías dedicar tiempo a crear, mantener y actualizar cuando utilices HTML y CSS.

Conclusión

Decir que los tooltips no son buenos para la UX es evitar ver el verdadero problema. Si sabes cómo y dónde utilizar los tooltips, te ayudarán a proporcionar una gran UX.

Ten en cuenta que los tooltips son sobre todo para crear eficiencia, y tienen una tarea simple:

Una experiencia mejor y más fácil para tus usuarios.

Volviendo a mi metáfora en la introducción del artículo, espero que ahora entiendas mejor por qué los tooltips son similares a las señales de tráfico.

Ahora, es tu turno de crear y personalizar tooltips para conquistar el juego de proporcionar la mejor UX para tus usuarios.


Preguntas Frecuentes


¿Son los tooltips buenos para el SEO?

Si entiendes que el SEO consiste en proporcionar a tus visitantes la mejor experiencia, entonces puedes interiorizar mejor el hecho de que los tooltips son geniales para el SEO. Cuando ayudas a tus usuarios a aprender lo que no saben y a entender los procesos, tu sitio merecerá mucho más posicionarse más alto en SERP.


¿Por qué sería malo un tooltip?

Un tooltip sólo es malo si no sabes cómo utilizarlo. Si no aportas valor con tus tooltips o interrumpes a tus usuarios con tooltips, lo más probable es que no cumplan su propósito. Tómate tu tiempo para hacer una investigación detallada sobre cómo utilizar tooltips antes de implementarlos en tus aplicaciones o sitio web.


¿Qué es un texto flotante (hover text)?

Un texto flotante es un fragmento de texto informativo que aparece en la pantalla al pasar el ratón sobre un lugar específico relacionado con la información.


¿Qué es un tooltip?

Un tooltip es un elemento de interfaz de usuario (UI) que se utiliza en sitios web y plataformas para guiar a los usuarios. Un tooltip puede ayudarte a crear un sitio web más interactivo, lo que a su vez aumenta la participación del usuario y la adopción del producto.

Únete a más de 1.000 equipos que crean mejores experiencias

14 días de prueba gratuita, ¡con 30 días de garantía de devolución del dinero!

Hilal Çökeli

Hilal Çökeli

Soy la responsable de marketing de producto de UserGuiding obsesionada con el crecimiento. Me gusta investigar y escribir sobre producto, onboarding e inbound marketing. Si crees que podríamos intercambiar ideas, no dudes en ponerte en contacto conmigo a través de LinkedIn o por correo electrónico. P.D. Si no respondo, que sepas que estoy de viaje con mi cámara y mi moto.