Category pages: Bottom navigation

Estan mejores las infografías que nos comparte Francisco Lombardi que todas las diapositivas juntas de este curso

🤯 Jamás había caído en cuenta que la barra de navegación inferior es ideal para los pulgares. Con razón es más útil en ambientes móviles.

Páginas que cumplen con modelo idóneo:

Pestañas y menú hamburguesa: https://www.linio.com.pe/

Menú hamburguesa: https://juntoz.com/

Esta lo hace mal: https://simple.ripley.com.pe/ (la parte de arriba tiene muchas cosas).

Deberían poner ejemplos para que los temas de las clases quede más claro, sea más didáctico entretenido para aprender.

Tips del bottom navigation:

➔ Es una fila de botones que se encuentra
en la parte inferior de la pantalla y que
siempre está visible
➔ Con un toque, los usuarios pueden
explorar sus opciones
➔ La aplicación de Instagram es un
ejemplo de este tipo de menú

Bottom navigation está presente en Instagram, Twitter e incluso **Whatsapp. Es la barra de navegación inferior que te permite cambiar entre funcionalidades. Es más común en las aplicaciones móviles.

Las páginas donde no debería estar la barra de navegación inferior son la página del carrito y la página de pago. También puede estar exenta la página individual del producto si se muestra un botón de “comprar ahora” o “añadir al carrito” fijo.

1.- Un mal ejemplo de Web Responsive en vista móvil, el E-commerce IKEA, al realizar scroll en la página desaparece el menú hamburguesa, no existe un atajo para subir y poder navegar a las distintas secciones de la tienda.

2.- Cuando has navegado al interior de alguna de sus secciones, dejan fijo y visual los filtros, me parece correcto, pero sigue sin visualizarle el menú hamburguesa.

Un buen ejemplo de cómo aplican lo comentado en clase es en el E-commerce MANGO shop.

La principal crítica al bottom navigation que podría señalar se relaciona con la visibilidad de la información, el descubrimiento de características, el espacio limitado y la falta de consistencia con las convenciones de diseño. Aunque esta opción de navegación puede ser adecuada para algunas aplicaciones, es importante considerar si se adapta a las necesidades y preferencias de los usuarios específicos de un sitio web o aplicación antes de implementarla.

Correctos:

https://www.amazon.com/
-Correcto menú hamburguesa para sus categorías que son muchas.
-Catálogo en Home page

https://www.farmacity.com/
-Home page correcto porque el menú está como barra superior, al tener pocas secciones no necesita de un menú hamburguesa y además hace visible sus opciones para que el usuario lo vea rápidamente.
-No tiene catálogo en la home page pero si destaca productos.

Incorrectos:

https://es.shein.com/
-Barra de menú tipo slider, se pierden algunas de las secciones del menú y sobre todo no es reconocible para los usuarios. Este tipo de menú no se usa.
-Si es bueno como muestra el catálogo en el Home y destaca productos.

https://www.alibaba.com/

• Parece bien hasta que abres su menú hamburguesa, un cajón desastre. Tiene nomenclaciones larguísimas.
• -Esta bueno como muestra el catálogo en su Home.

Es mucho mas útil el bottom navigation bar en entornos móviles

La barra de navegación inferior es un patron de diseño para resoluciones mobile, precisamente porque permite una navegación facil con los pulgares. Pienso que su uso optimo es en aplicaciones moviles no tanto en la web