211service.com
El ingenioso truco de ingeniería que hace que los menús de Amazon sean utilizables
Los menús desplegables y submenús son un mal necesario de las interfaces gráficas de usuario. Para un sitio como Amazon, que obliga al cliente a manipular un número infinito de etiquetas de texto similares a muñecas Matryoshka, es absolutamente crucial hacer que esta navegación jerárquica sea lo más fácil y fluida posible. ¿Cómo puedes arruinar un submenú simple? Oh, créeme, hay formas. Si alguna vez se ha encontrado con lo que el ingeniero Ben Kamens llama el menú whack-a-mole, sabrá a qué me refiero. Este es su ejemplo:
GIF de Ben Kamens .
El submenú se muestra instantáneamente cuando pasa el mouse sobre su objetivo, pero también lo hace desaparecer tan instantáneamente a menos que enhebre la aguja moviendo el mouse exactamente horizontalmente en el área del submenú.
Esto es muy irritante. Si los menús de Amazon actuaran de esta manera, podría costarles millones de dólares en ventas perdidas.
Según Kamens, la solución habitual para golpear un menú es algo llamado histéresis . Es una palabra elegante que básicamente solo significa retraso. Los ingenieros de software se aseguran de que el submenú no se muestre (y no se muestre) al instante; en cambio, hay un pequeño retraso. Esto le da al usuario tiempo suficiente para mover su mouse directamente (es decir, en diagonal) al elemento del submenú en el que desea hacer clic, sin que la maldita cosa desaparezca debajo de ella en el proceso.
La desventaja es que el submenú en sí mismo tarda un poco en mostrarse en primer lugar. Es una cantidad de tiempo muy pequeña, pero al navegar en el software, cualquier cosa que no sea instantánea puede parecer lenta. Los submenús de Amazon se muestran instantáneamente (sin histéresis al principio), pero tampoco hay ningún problema con el menú. ¿Cómo?
Como kamens explica , todo se reduce a algo bastante simple: predecir dónde moverá el mouse. Los ingenieros de Amazon predicen una determinada zona de posibles rutas del mouse cuando pasa por un submenú. Si se mueve a esta zona (como lo haría al moverse para seleccionar un elemento en el submenú), el efecto de histéresis se activa, manteniendo el submenú abierto para usted. Si mueve el mouse fuera de esta zona, Amazon asume que no está interesado en el submenú y desaparece tan instantáneamente como apareció.
¿El resultado? Bueno, el resultado (lo más probable) es que nunca se sabe qué tan bueno lo tiene cuando usa los menús de Amazon. Simplemente funcionan; hacen lo que quieres y se mantienen fuera de tu camino. Este es el sello distintivo de una buena interfaz de software: no darse cuenta de lo buena que es.
Pero que La publicación de Kamens (realmente deberías leerlo) deja fascinantemente claro cuánta ingeniería y diseño deben fusionarse detrás de escena para ofrecer este tipo de experiencia de usuario ultra sutil, pero muy importante. A escala de Amazon, esta atención atómica al detalle tiene enormes efectos posteriores en los ingresos. Es el ejemplo perfecto de lo que Steve Jobs quiso decir cuando dijo que el diseño no es como se ve, es como funciona. Y es el tipo de nanoinnovación centrada en el ser humano que ni siquiera se nota, pero que debe aplaudir cuando lo hace.
Lea la publicación original de Ben Kamens aquí.