En esta página:
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
|
1 2 3 4 5 6 7 8 9 |
<div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Postres</a> <a class="dropdown-item" href="#">Bebidas</a> <a class="dropdown-item disabled" href="#">Desayunos (Muy Pronto)</a> <!-- Opción Deshabilitada --> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
$(document).ready(function(){ $.get("https://ip-api.com/json", function(ubicacion) { console.log(ubicacion.country); // Ver el País en la Consola de Chrome DevTools console.log(ubicacion.countryCode); // Ver el Nombre corto del País en la Consola de Chrome DevTools console.log(ubicacion.timezone); // Ver la Zona Horaria en la Consola de Chrome DevTools // Para obtener otros datos visita: https://ip-api.com/docs/api:json var pais = ubicacion.country; // Verifico el País del usuario if (pais !== "Peru") { document.getElementById("tiendas").style.display = "none"; } else { document.getElementById("tiendas").style.display = "block"; } }, "jsonp"); }); |
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.
|
1 2 3 4 5 6 7 |
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary"> ... ... ... </nav> |
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
|
1 2 3 4 5 6 7 |
<nav class="navbar fixed-bottom navbar-light bg-light"> ... ... ... </nav> |
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
|
1 2 3 4 5 |
<button type="button" class="btn btn-primary"> Notificaciones <span class="badge badge-light">4</span> </button> |
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
|
1 2 3 4 5 6 7 8 9 10 |
<li class="nav-item dropdown border border-warning rounded" id="productos"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Productos </a> ... ... ... </li> |
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
- Estos consejos te pueden servir si van de acuerdo con el objetivo de tu proyecto, existen otras formas de mejorar la experiencia del usuario, estas las puedes averiguar cuando tu proyecto esta en marcha e inicies un proceso de estudio y análisis del comportamiento de los usuarios en tu sitio Web.
- Algunas clases de Bootstrap 4 pueden ser modificadas, eliminadas o continuar en el futuro, esto no depende de Nosotros si no de los Desarrolladores que dan Soporte a Bootstrap.
Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.