Tooltips
Una tooltip es una etiqueta de texto flotante que brinda información adicional sobre una característica de la interfaz.
Definición
Una tooltip es una etiqueta de texto flotante que brinda información adicional sobre una característica de la interfaz. Las tooltips mejoran la experiencia del usuario al ofrecer información contextual en contextos específicos de la interfaz.
Anatomía
Tipos
Cuándo usar
Aclara los iconos
Proporcionar información adicional sobre iconos que aclare la función del icono cuando los usuarios pasan el cursor sobre él.
Elementos Interactivos
Con el fin de que los usuarios puedan entender con mayor claridad la función que desempeña cada uno de ellos, se debe proporcionar información adicional.
Exploración intuitiva de datos
Muestran información adicional sobre puntos de datos específicos para brindar una visión rápida y sencilla de las métricas más importantes.
Cuándo no usar
Elementos interactivos
Las tooltips no deben esconder acciones como botones o enlaces. Ya que el usuario podría obviarlos y afectaría la accesibilidad.
Accesibilidad
Las Pautas de Accesibilidad al Contenido Web 2.1 y 2.2 ofrecen recomendaciones para mejorar la accesibilidad a personas con discapacidades visuales, auditivas, de movimiento, del habla, cognitivas y fotosensibilidad. Aunque las guías no cubren todas las necesidades, sí ayudan a que más personas puedan acceder a los servicios digitales.
Las guías de accesibilidad se dividen en cuatro principios: Perceptible, entendible, operable y robusto, consideramos abarcar únicamente los principios perceptible, entendible y operable, dejando fuera robusto ya que este no tiene un campo de acción en el diseño de los componentes UI.
La siguiente lista son recomendaciones de la WCAG que afectan al componente tooltip.
Perceptible
Color y contraste SC 1.4.3
La relación de contraste mínima recomendada para la accesibilidad es de 4.5:1 para el texto normal y de 3:1 para el texto grande (18 puntos o más).
Entendible
Asegúrese de que la tooltip tenga un comportamiento previsible, permitiendo que los usuarios con discapacidad cognitiva o de aprendizaje comprendan fácilmente la información que se esta ofreciendo.
• Utilizar un lenguaje claro y sencillo que sea fácil de entender para todos los usuarios.
• Evitar el uso de jerga o términos técnicos que puedan ser confusos para algunos usuarios.
Operable
Diseño de Estado Focus SC 2.4.7
Una tooltip muestra información relacionada con un elemento, cuando el elemento recibe el focus del teclado o el mouse pasa sobre él. Por lo general, deberá aparecer después de un pequeño retraso y desaparecer cuando se presiona scape o cuando se quita el mouse.
Usa la descripción
Evita el uso del marcador de posición para incluir información esencial o instrucciones, ya que cuando se ingresa un valor, el texto desaparece y no es visible para el usuario.
Se recomienda utilizar la descripción del texto de ayuda para proporcionar información relevante como requisitos o ejemplos de formato.
Los rellenos automáticos de formularios no muestran el texto del marcador de posición, lo que dificulta el proceso de ingreso de información.
Mensajes claros
Redactar los mensajes de error mostrando soluciones en lugar de solo indicar el problema. Los mensajes ambiguos pueden ser frustrantes para los usuarios.
El texto de error debe ser breve, claro y directo.
Nunca deben terminar con un signo de exclamación.
Contexto rápido
El texto que dispara el tooltip, debe indicar acción. ya sea teniendo un color o subrayado.
No agregar acciones dentro de tooltips
Los tooltips solo deben ser usados para comunicar información extra. No para agregar acciones o links
