Optimizando la navegación mobile de Mellow analizando cómo lo hacen los gigantes del e-commerce

En breve

En vez de adaptar la nav de desktop a mobile, este estudio mira cómo marcas como Nike, Lululemon y Puma resuelven la navegación mobile en sus propios términos: velocidad sobre profundidad, touch sobre precisión, espacio vertical sobre horizontal. El patrón en las seis referencias es consistente: un estado por defecto mínimo con logo, CTA, carrito e ícono de menú, y todo lo demás dentro de un drawer. A partir de ese benchmark se armó dos propuestas para Mellow: un drawer de pantalla completa y una variante al 70%. Las dos son defendibles; la diferencia es de feeling, no de función. La ubicación del ícono de menú sigue la convención a la derecha observada en la mayoría de las referencias, alineada con una base de usuarios mayoritariamente diestra.

Pasemos a los móviles. ¿Diseño primero para escritorio o para móvil? Ninguno de los dos.

El diseño de barras de navegación para sitios de comercio electrónico presenta desafíos únicos tanto en escritorio como en móvil. Un debate común gira en torno a si priorizar un enfoque de interfaz para móvil o para escritorio. Sin embargo, reconocer las diferencias fundamentales entre las experiencias móviles y de escritorio sugiere que cada plataforma debe tratarse con una estrategia de diseño claramente diferenciada.

La navegación móvil prioriza la velocidad, basándose en la respuesta táctil (sacrificando la precisión) dentro de un espacio vertical reducido. Por el contrario, los entornos de escritorio favorecen la navegación profunda, ofrecen la precisión del ratón y aprovechan un amplio espacio horizontal.

¿Qué están haciendo los gigantes globales del DTC?

Aquí tienes una comparativa rápida sobre cómo un grupo de gigantes globales del deporte aborda su navegación móvil.

Under Armour

Lululemon

Nike

Puma

New Balance

Asics

Tesis: estas marcas no se limitan a reducir sus sitios de escritorio para móviles; están cambiando fundamentalmente el modelo de interacción y la arquitectura de la información según el dispositivo.

Conclusiones: la navegación móvil puede mostrar por defecto solo el logotipo de la marca (que enlaza a la página de inicio), un botón de llamada a la acción, el icono de la bolsa o carrito y el icono de menú que abre un panel con más enlaces. El icono de menú puede colocarse a la derecha o a la izquierda, aunque el lado derecho aparece con mayor frecuencia en los casos estudiados. Esto último también tiene sentido, dado que la mayoría de la población es diestra. El panel puede ocupar toda la pantalla o aproximadamente el 70 por ciento: cualquiera de las dos opciones es segura.