Aprendiendo del megamenú de Amazon: no sólo hay que ser rápido, debes parecerlo

En la estrategia de la optimización de la web la velocidad de carga y el performance cada vez cobra más protagonismo las acciones destinadas a mejorar la “impresión” de velocidad. Hablamos de técnicas que tienen más que ver con la usabilidad que con la optimización de los recursos.

Un buen ejemplo de ello es el Jquery Menu Aim, un plugin basado en una solución implementada por Amazon que nos permitirá mejorar la usabilidad y la sensación de velocidad de los Mega Drop Down, esos menús de navegación multinivel que ofrecen información adicional a los enlaces.

La característica a la que nos referimos es la siguiente:

El menú de Amazon permite navegar entre las opciones muy rapidamente

El menú de Amazon permite navegar entre las opciones muy rapidamente

La mayoría de los menús añaden un retraso al activar los subniveles. Aquí tenemos un ejemplo de funcionamiento normal:

Traditional menu system

El retraso que apreciamos es intencionado, se utiliza para evitar que al navegar por los subniveles cerremos la navegación al salirnos de la ‘ruta’. Aquí podemos ver un ejemplo de ese problema:

bootstrap-bug

Amazon soluciona este problema detectando la dirección del cursor para anticipar sus movimientos.

Si la siguiente posición del puntero está dentro del triángulo el submenú permanece abierto

Si la siguiente posición del puntero está dentro del triángulo el submenú permanece abierto

En cada posición del puntero del ratón se puede dibujar un triángulo entre las esquinas superior e inferior del menu. Si la siguiente posición del ratón se encuentra dentro de ese triángulo probablemente está navegando por el submenú que esté activado. Si el ratón sale del triángulo, el submenú se cierra.

Jquery Menu Aim imita este comportamiento del menú de Amazon con una implementación basada en Jquery.

new-full

Dercargar Jquery Menu Aim

Fuente: Breaking down Amazon’s mega drop down

http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown

La magia del triangulo azul

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *