Icono del sitio Blog de Programación y Desarrollo – Nube Colectiva

5 Tips para Mejorar la UX (Experiencia del usuario) de un menú Web creado con Bootstrap 4

Demo Github

En cada proyecto Web el uso y la implementación de un menú de Navegación es muy importante, ya que permite al usuario moverse por las diferentes páginas de un sitio Web, en muchas ocasiones los sitios Webs cuentan con una menú de Navegación y eso es genial, pero es bueno darles la correcta presentación y el funcionamiento adecuado para que el usuario se sienta cómodo usándolo y por ende generando una buena experiencia para él, en este Post voy a darte 5 consejos para mejorar la experiencia del usuario con el menú de tu sitio Web creado con Bootstrap 4.

Seamos sinceros, los Tips que mencionaré no siempre son aplicables a todos los proyectos ya que cada proyecto cuenta con un menú creado específicamente para lograr uno o varios objetivos, esto lo sabe el propio Desarrollador Front-end que ha creado dicho menú, pero los Tips pueden darte una idea de como mejorar ciertos aspectos de tu menú.

Genera espectativa Deshabilitando una opción

Si eres un usuario que le gusta crear contenidos, módulos y funcionalidades nuevas para los usuarios que visitan constantemente tu sitio Web, puedes optar por generarles expectativa, creando un texto que diga el nombre de la opción junto con el texto Muy Pronto. Esta opción la puedes deshabilitar usando la clase disabled de Bootstrap 4


Por ejemplo si cuentas con un Negocio que vende Postres y Bebidas, como parte del crecimiento se te ocurre vender Desayunos, entonces en el menú de Productos puedes colocar una opción deshabilitada que diga Desayunos (Muy Pronto)

Oculta Elementos que no estén Disponibles en un País

Si tu negocio aún no esta físicamente en otros Países debes de ocultar esta opción del menú ya que tu Web se ve en muchas partes del mundo, este detalle no es considerado por muchas empresas a la hora de ofrecer una buena experiencia al usuario.

Por ejemplo si tu negocio es un Restaurante con 5 locales físicos, es decir con 5 direcciones especificas y tienes planes de expandir tu negocio a otros Países, pero los usuarios de otros Países no conocen estas direcciones porque no pertenecen al País en donde se encuentran estas.

Puedes usar jQuery junto con esta API https://ip-api.com/docs/api:json para verificar de que País es un determinado usuario y no mostrarle las  direcciones físicas de los locales de tu Restaurante. Si esta API deja de estar disponible, intenta usar otra API, hay muchas en el mercado. Hasta la fecha de este artículo esta API sigue funcionando.


Con esta API obtengo el nombre del País del usuario, por ejemplo si el usuario no es de Perú pues le oculto el menú de Tiendas ya que aún no hay tiendas físicas fuera de Perú y si el usuario es de Perú pues le muestro el menú. Recordemos que la librería jQuery es necesaria para que funcione Bootstrap 4, hasta la fecha de este artículo aún lo es, quizás en un futuro no, esto depende de los Desarrolladores que dan Soporte a Bootstrap.

Puedes ocultar otros elementos y crear otras funcionalidades si le sabes sacar provecho a esta API, puedes hacer pruebas editando el nombre del País en la variable País.

Fija el menú en la Parte Superior

Puedes mantener siempre a la vista las opciones de tu menú con la clase nativa de Bootstrap 4 llamada fixed-top que coloca el menú en la parte superior de la ventana del navegador.


Cuando el usuario se desplace hacia abajo en tu sitio Web, el menú siempre estará flotando en la parte de arriba, de esta manera siempre tendrá a la mano las opciones del menú.

Y si deseas tener el menú en la parte inferior puedes usar la clase fixed-bottom que hace que el menú se quede fijado en la parte inferior de la ventana o sitio Web

Engancha a tus usuarios Creando un área de Notificaciones

Si en tu Sitio Web con Bootstrap 4 estas generando contenidos y novedades puedes implementar un sistema de notificaciones mediante un Badget, puedes crear uno con PHP, MySQL, Ajax y Bootstrap 4 siguiendo este tutorial Sistema de Notificaciones con PHP, MySQL, jQuery Ajax y Bootstrap 4


Bootstrap 4 cuenta con la clase badge y sus extensiones que te ayudan a personalizar la notificación, para saber más sobre estas extensiones puedes visitar la Documentación Oficial de Bootstrap 4 sobre Badgets

Has que sobresalga una opción del menú

Puede que necesites llamar la atención del usuario que visita tu Web, por ejemplo si deseas que el usuario al ingresar a tu sitio Web pueda encontrar los productos de tu marca, puedes usar la clase border con sus extensiones de clases para resaltar el botón Productos. A continuación uso la clase border con la extensión de clase border-warning


Lo que hace las clases border border-warning es crear un borde con un color amarillo alrededor del botón Productos del menú

Puedes ver más sobre la clase border en la Documentación Oficial de Borders con Bootstrap 4

Notas

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.

Salir de la versión móvil