Cómo usar Tooltips

En el blog de SERGIO GAGO, nos habla sobre el uso de los tooltips son esos pequeños (o no tan pequeños) mensajes emergentes que nos aparecen, generalmente cuando pasamos el ratón por encima de determinados elementos.

tooltip1.png

Son un recurso muy bueno para ampliar información de estructuras de nuestro sitio, o del destino de enlaces y mecanismos de interacción con el usuario. Pero cuidado, también pueden ser un arma de doble filo.

Los tooltips son un elemento no esperado en los lugares que no corresponden, hasta el punto que pueden resultar molestos. Si el área de activación es demasiado grande nos puede costar hacerlo desaparecer, y el mismo tooltip puede ocultarnos información que es relevante para ese contenido. Al fin y al cabo, general sorpresa al usuario, y eso no siempre es bueno.

Así, hay una serie de normas básicas que se deben cumplir (y que podéis completar si os parece…).

  1. No recargar la página de tooltips. Enseñemos al usuario, pero no pensemos que es tonto (aunque lo sea).
  2. Nunca poner tooltips en áreas grandes, de más de 10 – 15px de lado. Por supuesto, nunca dentro de fotos, salvo que sean muy pequeños, y no obtrusivos.
  3. El tooltip no debería aparecer inmediatamente, ni demasiado tarde. Si aparece instantaneamente, el usuario lo activará sin desearlo, y si tarda demasiado, se cansará o pensará que no hay nada.
  4. Hacerlo accesible. Si desactivamos tanto javascript como CSS la página debería seguir viéndose bien, y a ser posible, también el contenido del tooltip.
  5. Si lo ponemos sobre un enlace, es preferible usar el tag “title” que es mucho más semántico, y colocar una pequeña imagen que indique atención (un pequeño interrogante) que active el tooltip. Aunque cada navegador implementa el title de forma distinta, se puede configurar un script para que saque ese contenido con varios segundos de onHover.
  6. Aunque puede resultar obvio, pero el contenido del tooltip tiene que estar directamente relacionado con el objetivo del link, o del mecanismo a utilizar, y tiene que dar una información que no sea evidente Por ejemplo, si tenemos un enlace tipo “google“, nunca pongamos en el tooltip “Click para ir a google”.
  7. Asegurémonos que el tooltip llama suficientemente la atención, pero que no sea demasiado grande. Esté cerca del objetivo y no oculte otras áreas de la Web que sean importantes. Tampoco tiene que ocultar el accionador.
  8. El tooltip debe desaparecer cuando el ratón sale del punto objetivo, NUNCA del tooltip.
  9. Si el tooltip se carga dinámicamente, asegura todas las llamadas, y muestra todo el contenido de una sola vez. Esto también es común si contiene imágenes. Las conexiones lentas tendrán que esperar demasiado para verlo. Lo ideal es que sea texto plano, sin imágenes, y salvo que haya demasiados elementos en la página, no cargarlos dinámicamente.

Todo esto viene al último post de Smashing Magazine donde nos ponen más de 40 scripts de tooltips con javascript o CSS.

Anuncios

One Response to Cómo usar Tooltips

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: