Como dijo  Dieter Rams: "El buen diseño hace que comprendamos mejor un producto". (“Good design makes a product understandable”). Lo mismo pasa con el buen diseño de una interfaz web: si se entiende bien, se navega con mayor facilidad. De hecho, si tu modelo de negocio se basa en tu web, con mayor motivo debes prestarle atención al buen diseño de la interfaz de tu eCommerce.

Para que te hagas una idea, el diseño de la interfaz de tu eCommerce debería contar como mínimo con dos atributos básicos: 1- Los elementos en sí deben permitir de manera natural navegar por toda la web sin tocar el “back” del navegador. 2- Los iconos se deben entender claramente al primer segundo (deberían ser claros como la señalización de un aeropuerto). De hecho, la interfaz por sí sola debería ser capaz de resaltar lo que el producto o servicios es capaz de hacer de manera intuitiva y simple.

Uno de los elementos más controvertidos y que más ha evolucionado en la interfaz web es el famoso icono de menú (icono de la hamburguesa). Hoy me gustaría ofrecerte una reflexión sobre esta temática y de las ventajas que te ofrece en la interfaz de tu eCommerce.

¿De dónde viene?

Para empezar, este icono se caracteriza por tres líneas iguales, como si fuera un icono de igual pero con una línea adicional. La realidad es que hay diferentes teorías sobre el origen, mucho antes de que se implementara en el diseño de los smartphones. Una de ellas cuenta que este icono empezó desde los años ‘70 ‘80 en el diseño de la interfaz para un programa de oficina llamada Xerox Star. Se utilizaron las tres líneas para desplegar un menú de opciones adicionales. El tema es que,l sea de donde sea que venga, este icono se diseñó originalmente para simbolizar una lista de acciones. A lo largo del tiempo este icono se implementó para utilizarlo como icono que esconde el menú de navegación principal de una web para móvil.

La controversia de este icono

El tema es que este icono de tres rayas ha sido muy criticado por varios diseñadores web cuestionando su efectividad. Muchos prefieren utilizar directamente la palabra “menú” porque para un usuario es más reconocible su funcionalidad. Otros les basta con enmarcar las tres líneas con un borde para que parezca más un botón.

Un conocido programador de Nueva Zelanda web llamado James Foster hizo un estudio sobre este tema hace unos años. Hizo un test A/B para determinar cómo los usuarios reaccionaron a este icono. La conclusión del estudio dice que, si se añade la palabra menú a las tres líneas, el ratio de clics superaba el 7%. Si enmarcas el icono con un borde alrededor para hacerlo parecer más a un botón, el ratio de clics superaba el 22%, Sin embargo, si sustituyes las tres líneas por la palabra menú enmarcada por el borde, el ratio superaba el 20%.

El estudio concluye que, para mucha gente las tres líneas son solo tres líneas. No dice literalmente "haz clic aquí" y desplegarás un menú navegable. Con lo cual, tres líneas puede tener un significado complentamente diferente para cada persona. Dicho esto, James Foster cuenta en su estudio que un usuario reacciona mejor a la palabra “MENU” para desplegar el menú navegable de una web.

En otras palabras, el principio básico de "fuera de la vista, fuera de la mente".

En contrapartida a este estudio

La verdad es que, a través del tiempo, los usuarios van teniendo también un aprendizaje de cómo desenvolverse en Internet. Un estudio de hace dos años, para la velocidad a la que se desarrolla Internet es mucho tiempo. Y es que cada vez estamos más acostumbrados a tener que hacer clic en las tres líneas dentro de la interfaz de un ecommerce o web corporativa para desplegar el menú de navegación.

Además, seamos realistas ¿te imaginas tener que traducir a cada idioma la palabra “Menú”? ¡no es viable! Imagina por otro lado el ícono de “ajustes” que en las apps habitualmente es simbolizado con un pequeño engranaje. Si utilizáramos en su lugar la palabra “ajustes” y lo tenemos que traducir en italiano “impostazioni” o en alemán “Einstellungen” por espacio no es viable.

¿Te acuerdas de que antes comentamos que los iconos deben ser fácilmente reconocibles? Pues bien, este icono por sí solo ha adquirido este significado. En los móviles, cada vez se usa más y ya hemos heredado este conocimiento gracias al mismo bombardeo inagotable de las apps. Al fin y al cabo, lo ves por todos lados. Actualmente es fácilmente reconocible y ha evolucionado. De hecho, en la última actualización en la interfaz del eCommerce de Apple ya usa solo dos líneas.

Muchas agencias de diseño y desarrollo web estamos llevando el diseño a la inversa: partiendo desde la interfaz mobile hacia la pantalla grande. Es decir, si somos capaces de plantear todo el contenido de la web, jerarquizarla y ordenarla de manera elegante en una pantalla pequeña de móvil en pantalla desktop es mucho más fácil y tendrá mejores resultados.

Ventaja del icono en la interfaz de tu eCommerce o web

La gran ventaja de este icono es que aporta simplicidad y ahorro de espacio en la interfaz de tu tienda online o web de servicios. Más de una vez nos ha tocado diseñar una web en el que el menú tiene más de 10 apartados y cada uno con su subapartado. La única manera de distribuir toda la información de apartados y subapartados es haciendo buen uso del menú desplegable. Dicho esto, está claro que este botón es para esconder detrás una lista de opciones relativamente grande, si una web sólo tiene de 3 a 5 ítems en el menú, mejor mostrarlo en vez de esconderlo, así le evitamos un clic al usuario y ofrecemos una mejor experiencia.

Termino esta reflexión con esta breve conclusión: el icono tiene una función concreta y se debe usar según las necesidades de tu audiencia; no se aplica en todos los casos. Sobra decir que el diseño de tu web debería enfocarse a tu público objetivo.