La percepción general es que la navegación actual resulta un poco aburrida o demasiado simple, por lo que nuestra misión es mejorarla. La interfaz de usuario del sitio web existente es, en general, de alta calidad, pero hay aspectos de la navegación que podemos optimizar. El enfoque para abordar esta tarea consta de dos fases: primero, la parte "aburrida" de asegurar que la estructura base de la navegación sea sólida. Revisaremos patrones importantes del sector y garantizaremos el cumplimiento de los fundamentos. Segundo, la lógica de marca: aplicaremos la identidad visual y exploraremos formas específicas en las que Mellow pueda romper con esos pilares "aburridos" para transmitir movimiento y diversión.

Para evaluar la solidez del diseño fundamental, consideremos el ejemplo de Buffy, que también utiliza un logotipo centrado en su barra de navegación. Una conclusión clave es el equilibrio visual logrado entre los elementos de los lados derecho e izquierdo. Por el contrario, la configuración actual de Mellow carece de este equilibrio, al colocar cinco enlaces a la izquierda y solo un pequeño icono a la derecha.

Un punto crucial respecto a la jerarquía y el espaciado es que, en "Buffy", el espacio entre los enlaces es igual o menor que la distancia entre un grupo de enlaces y el borde del navegador.

En cambio, "Mellows" utiliza el espaciado para establecer una agrupación jerárquica: el enlace "Inicio" está posicionado más cerca del borde del navegador que de sus enlaces vecinos dentro del grupo de navegación. Sin embargo, existe una inconsistencia en la aplicación de los márgenes y el espaciado: el margen entre el enlace "Inicio" y el borde del navegador es menor que el margen entre un icono y el borde del navegador. Esto demuestra que el uso del espaciado es fundamental para definir la jerarquía.

El sitio también ofrece dos áreas con contenido que podría mejorar la experiencia de compra del usuario: el blog y la atractiva información sobre la garantía de por vida. Considerando estos enlaces adicionales, junto con una interfaz de navegación técnicamente correcta que presenta un logotipo centrado, el diseño resultante supondría una mejora significativa, tal como se ilustra.

O bien, otra variante sería tener el logotipo alineado a la izquierda:

Independientemente de si está centrado o a la izquierda, hasta este punto hemos seguido el enfoque "aburrido" de asegurar que la estructura de la navegación sea técnicamente correcta y sólida.

‍

Rompiendo los pilares "aburridos"

¿Cómo?

→ Uso de la marca para crear acentos. Específicamente, el estilo de contorno puede aplicarse a elementos como los botones.

→ Distinguir la llamada a la acción (CTA) principal como un botón. Ese sería el enlace de compra.

→ Usar un icono para dicha llamada a la acción.

→ Crear un icono divertido para el botón de inicio (si se utiliza la navegación con logotipo centrado; de lo contrario, esto podría no ser necesario, ya que los usuarios suelen asociar un logotipo a la izquierda con un enlace a la página de inicio).

‍

Llevándolo un paso más allá con un toque divertido

Añadir una firma de marca a esta propuesta mediante el uso de “Zzz” relacionado con el sueño, iconografía de marca con dichas firmas e interacciones al pasar el cursor sobre estos iconos.