Inauguramos una serie de artÃculos dedicados a detalles que muchas veces pasan desapercibidos y sin embargo son, en su conjunto, los que diferencian una experiencia de usuario “correcta” de otra “placentera”.
Generalmente, a la hora de diseñar interfaces se recomienda no abusar de los menús o capas desplegables que se abran automáticamente al pasar con el puntero por encima del control correspondiente (enlace, icono), ya que esta acción no implica que el usuario quiera activarlo. Cuando se abusa de esta técnica, la página se convierte en un festival de capas que se abren, se cierran, se mueven y despliegan ante el simple movimiento del ratón, mareando y desorientando al usuario que está simplemente explorando la página.
La solución más habitual es esperar a que el usuario seleccione activamente el control correspondiente mediante un click: abrir, cerrar, desplegar, etc. Se utilizará la activación automática solamente para las acciones principales del interfaz, como la navegación por el menú principal.
Sin embargo, hace poco tiempo descubrimos una técnica muy sutil que permite al usuario activar un control sin necesidad de click: introduciendo un retardo temporal antes de activar el mismo. AsÃ, el control se activará únicamente si el puntero se coloca encima durante unas décimas de segundo. Evitamos activaciones no deseadas, pero agilizamos a la vez la interacción y reducimos el rozamiento.
Es una solución que nos parece bastante interesante, situada en el punto medio entre el despliegue automático y el activo. Sorprendentemente, no se suele citar en libros especializados ni en catálogos de patrones de diseño de interacción. Veamos un ejemplo.
Visitemos Amazon, la tienda de libros online por excelencia:
Podemos ver que al pasar el ratón sobre el menú de la izquierda se abre automáticamente el elemento, sin necesidad de hacer click. Es lógico: es la navegación principal del sitio, luego debe favorecerse su activación.
Sin embargo, en la parte superior de la página vemos otro menú de menos importancia: “Gift cards”, “Today’s deals”, etc. Si pasamos rápidamente sobre el control de despliegue que hay al lado de cada elemento vemos que no se despliega automáticamente: hay que colocar el puntero encima durante unas décimas de segundo.
Curiosamente, en el desplegable secundario que hay en la parte superior derecha (“Your lists”) el funcionamiento no es el mismo. Al estar colocado en un lugar apartado es difÃcil de activar involuntariamente, luego no es necesario introducir el retardo.
En definitiva: un pequeño truco que nos permite priorizar unos controles sobre a otros, intentando estorbar lo menos posible al usuario en su exploración pero sin penalizarle cuando decide actuar. Todo un ejemplo de atención al detalle durante la fase de diseño.
Muy interesante el post.
Por puntualizar dirÃa que Amazon da con una clave interesante que es utilizarlo como una especie de tooltip o atajo en el que se muestra los “highligts” de la sección a donde te diriges, dejando el peso de la navegación en el enlace o elemento más fuerte.
Al no ser una solución estandar puede ser dificil de entender por el usuario y lo veo arriesgado como solución para mostrar un menú o parecidos.
Eso si en intranets o aplicaciones de uso frecuente le veo muchas posibilidades.
Hola Ignacio.
Tienes razón con la puntualización: los desplegables superiores no son menús, sino un elemento relativamente extraño que a mà personalmente no me acaba de convencer.
Respecto a lo de ser arriesgado: este funcionamiento es compatible con el click del usuario, tampoco nos jugamos tanto
Pero es cierto que al no ser estándar falta un (con perdón) “código de affordance” respecto a este tipo de elementos.
Tal vez bastarÃa con reducir aún más el tiempo necesario para abrirlo, de manera que dejara fuera los mouseovers involuntarios pero que se activara antes de que el usuario tuviera que llegar a pensar o reaccionar.
Más que la implementación de este caso concreto, me gusta el detalle de utilizar el tiempo como un factor de diseño más.