Información sobre herramientas que explican sin estorbar
Cómo diseñar información sobre herramientas que ayude: breve información complementaria, acceso mediante desplazamiento y teclado, alternativas táctiles y por qué las instrucciones esenciales nunca pertenecen a una información sobre herramientas.
Idea clave
La información sobre herramientas son mensajes breves que aparecen al pasar el mouse o al teclado para brindar información complementaria, como lo que significa una métrica. Manténgalos breves, nunca incluya instrucciones esenciales en ellos, hágalos accesibles mediante el teclado, proporcione una alternativa basada en toques en las pantallas táctiles y no coloque enlaces ni botones en su interior.
¿Qué es una información sobre herramientas?
Nielsen Norman Group define una información sobre herramientas como un mensaje breve e informativo que aparece cuando un usuario interactúa con un elemento, iniciado al pasar el mouse o el teclado (manteniendo el teclado enfocado en un elemento). Debido a que dependen del desplazamiento, la información sobre herramientas normalmente no está disponible en las pantallas táctiles.
Suplementario, nunca imprescindible
NN/g da un ejemplo claro de un error: un sitio que incluye requisitos de contraseña en una información sobre herramientas. La información que las personas necesitan para completar una tarea debe estar en la pantalla. La información sobre herramientas se adapta a definiciones, explicaciones de por qué se solicita un campo y etiquetas para botones que solo contienen íconos.
Accesibilidad
Haga que la información sobre herramientas sea utilizable para todos:
- Abra con el foco del teclado y al pasar el cursor.
- Deje que la gente lo descarte con Escape sin mover el foco.
- Manténgalo abierto mientras el puntero se mueve sobre él.
- Conéctelo a su disparador para que los lectores de pantalla lo anuncien.
- No coloques contenido interactivo en su interior; use un popover en su lugar.
Información sobre herramientas en dispositivos táctiles
El desplazamiento no existe al tocarlo. Utilice un icono de información visible que abre una pequeña ventana emergente al tocarla o muestra la explicación en línea. Para métricas empresariales complejas, un ícono de información al lado de la etiqueta es un patrón familiar en todos los dispositivos.
Movimiento y sincronización
Un breve retraso antes de mostrar evita que la información sobre herramientas parpadee cuando el puntero pasa sobre los elementos; una vez que uno está abierto, la información sobre herramientas vecina puede aparecer inmediatamente. Un desvanecimiento rápido o una pequeña escala del disparador ayuda a las personas a ver de dónde vino. Mantenlo por debajo de unos 150 milisegundos.
Principios clave para recordar
- La información sobre herramientas es breve y complementaria.
- Nunca oculte instrucciones esenciales en una información sobre herramientas
- Admite enfoque de teclado y Escape
- Utilice un icono de información que se pueda tocar en dispositivos táctiles
- No hay contenido interactivo dentro de la información sobre herramientas.
Preguntas frecuentes
Fuentes
- Tooltip Guidelines — Nielsen Norman Group