it-swarm-es.com

¿Hay un nombre para este antipatrón desplegable?

Recientemente he visto un pequeño problema de interfaz de usuario en los menús desplegables al pasar el mouse. Aquí hay un ejemplo de ese menú desplegable (aunque Bloomberg no es el único delincuente):

https://www.bloomberg.com/view/articles/2017-08-09/yogurt-liquidity-and-listings

editar : Agregar captura de pantalla marcada para fines históricos. La línea roja es la ruta del mouse del usuario. Al ingresar al cuadro rojo se ocultará instantáneamente el menú desplegable Opinión.

Bloomberg View - Menu issue

Si pasa el cursor sobre "Opinión" en la barra superior, se le mostrarán enlaces relacionados con la sección Opinión.

El problema: una ruta en línea recta desde las posiciones dentro del botón Opinión a algunos de los enlaces cruzará la sección "Política", borrando instantáneamente las opciones de Opinión. Esto significa que el usuario tiene que pensar conscientemente en la ruta del mouse cuando selecciona el enlace.

¿Hay un nombre para este problema? ¿Cuáles son las mejores formas de resolverlo?

editar : Aquí hay un gif adicional que muestra el problema, cortesía de blog de Ben Kamens , que también es vinculado por Midas a continuación :

Gif demonstrating menu issue

244
N. Quest

Una sugerencia para un nombre para una solución es de este gran artículo es menú direccional que apunta .

Muestra cómo Amazon evita que los usuarios seleccionen incorrectamente un elemento no deseado al pasar el cursor por su 'megamenú', ¡sin usar demoras, mediante la detección de la ruta del cursor.

En cada posición del cursor, puede visualizar un triángulo entre la posición actual del mouse y las esquinas superior e inferior derecha del menú desplegable. Si la siguiente posición del mouse está dentro de ese triángulo, el usuario probablemente esté moviendo su cursor al submenú que se muestra actualmente. Amazon usa esto para un buen efecto. Mientras el cursor permanezca dentro de ese triángulo azul, el submenú actual permanecerá abierto.

Amazon Hover Menu direction

289
Midas

El problema del que está hablando a veces se denomina " corredor estrecho del mouse ". Tener un corredor estrecho del mouse puede provocar que los usuarios se sientan frustrados por la falta de control del usuario .

Una alternativa al enfoque triangular de Amazon (que originalmente fue hecho por Bruze Tognazzini en 1986 con Apple) es usar pequeñas cajas para extender el corredor . Una ventaja de esta implementación particular es que es puro CSS (pseudo-elementos), por lo que elimina el dependencia de jQuery (o Vanilla JS).

Image from: https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/

(Imagen de: https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/ )

96
Jonathan

Donde trabajo, lo llamamos un "menú de trincheras de la estrella de la muerte". Estoy bastante seguro de que no inventamos ese nombre, pero no puedo encontrar el libro del que proviene.

36
Matthew

Desde la perspectiva del programador, sugeriría una función de intención de desplazamiento (retrasar la reacción del entorno en unos 300 ms. Esto no es demasiado visible y reduciría el riesgo de cierre/apertura accidental de menús). Aunque es posible que los 300 ms se sumen en árboles más complejos de menús y submenús.

9
Snsa90

El nombre que uso para este patrón es hover tunnel .

Los túneles flotantes se han reconocido desde hace tiempo como problemáticos: http://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/

Una de las peores cosas de los menús flotantes es que obligan a los usuarios a mover el mouse a través de túneles flotantes. Los túneles de desplazamiento son pasajes por los que los usuarios deben mover el mouse para hacer clic en un elemento. Los usuarios mayores que tienen menos conocimientos técnicos a menudo tendrán problemas para hacer esto. Incluso los usuarios expertos en tecnología pueden encontrar molesto que tengan que mover su mouse en un camino confinado.

Sospecho que el 'antipatrón' es solo un efecto secundario del colapso del túnel flotante porque, en conjunto, no sería una forma confiable de dirigir a los usuarios a anuncios u otro contenido.

4
Michael Heraghty

No, no hay un nombre para este patrón.

Es solo un menú flotante, los menús flotantes son basura cuando se trata de UX. Incluso yo, un usuario experimentado de Internet tiene problemas para navegar a través de dichos menús y en 9 de cada 10 veces me enojo cuando tengo que usar un menú flotante.

Una cosa para hacer que tales menús sean un poco más fáciles de usar es, por ejemplo, establecer un pequeño retraso cuando los usuarios navegan fuera de la mesa para que el menú no se cierre inmediatamente, pero tiene un retraso de 1-1.5 segundos para que el usuario tenga la oportunidad de moverse el ratón hacia atrás mientras está en su flujo normal.

1
Pectoralis Major