Una tooltip es un pequeño cuadro de texto explicativo que aparece en la pantalla cuando un usuario pasa el cursor sobre un icono o cualquier otro elemento que se haya diseñado. A pesar de su pequeño tamaño, la información que puede ofrecer juega un papel importante en la creación de una excelente experiencia de usuario.
Veamos algunos casos de uso de tooltips:
Explicar un ícono, nombre de campo o función desconocida
El tooltip se utiliza para describir la función de los iconos sin etiqueta.
El tooltop se utiliza para explicar el elemento que no se describe directamente en la interfaz de usuario.
Ofrece instrucciones sobre cómo completar una tarea.
Tooltip contextual que ofrece Shopify.
Tooltip contextual en Uber Eats.
Proporciona información útil adicional
Tooltip que proporciona información adicional para una visualización de datos.
Tooltip que explica el precio para el cliente de Uber.
Tooltip que explica por qué se cobró una tarifa adicional. Imagen de Uber.
Educa a los usuarios sobre cómo utilizar el producto de forma más eficaz.
Instrucciones adicionales que ayudan a los usuarios a interactuar con un producto de forma más eficaz. Imagen de Uber.
Tranquilizar a los usuarios
Tooltip que explica el comportamiento del sistema a los usuarios.
Recomendaciones de diseño con Tooltip
Utiliza la información sobre herramientas con moderación
Demasiados tooltips pueden abrumar a los usuarios. Si estás creando algo que requiere mucha información sobre herramientas, trabaja para aclarar el diseño y el lenguaje de la experiencia.
No agregues demasiada información en el Tooltip.
Prioriza las explicaciones de elementos complejos, de alto riesgo para que no se malinterpreten.
No utilices Tooltips para comunicar información crítica
No utilice Tooltips para transmitir información crítica (como el “método de pago vencido”).
Utiliza Tooltips para proporcionar información adicional útil o aclaraciones.
Describe o amplía sucintamente el elemento al que apuntan.
El texto del Tooltip debe ser claro, conciso y legible. Utiliza un lenguaje sencillo y directo al grano, explica lo que el usuario necesita saber en la menor cantidad de palabras posible. Apunta a un límite de recuento de caracteres de 20, que es entre 2 y 5 palabras con espacios incluidos.
No agregues ningún elemento interactivo en un Tooltip.
La información sobre un Tooltip aparece solo al pasar el mouse o cuando el teclado está enfocado; cuando el foco cambia al otro elemento, la información sobre el Tooltip desaparece. Por esa razón, no deberían contener enlaces ni botones.
No coloques el control Descartar (x) en un Tooltip. Imagen de Uber.
Conclusión
Los tooltips son elementos de interfaz de usuario que, a pesar de su tamaño reducido, desempeñan un papel crucial en mejorar la experiencia del usuario al proporcionar contexto, orientación y detalles adicionales sobre elementos de la interfaz. Su uso adecuado puede educar a los usuarios, proporcionar información útil adicional, tranquilizarlos sobre el comportamiento del sistema y mejorar la eficacia en la interacción con el producto. Sin embargo, es importante utilizar los tooltips con moderación, priorizando la claridad y la concisión en el texto, evitando la sobrecarga de información y reservando su uso para proporcionar aclaraciones útiles, no para comunicar información crítica. Además, se deben seguir recomendaciones de diseño como evitar elementos interactivos dentro de los tooltips y no incluir controles de descarte para garantizar una experiencia de usuario fluida y no intrusiva.
Referencia: