Como navegar a través de los menus en la página de rcpro

- Categorías : Relativo a la web

La navegación. Ese concepto abstracto que define, por un lado la acción de moverse por el agua con una embarcación, y por el otro, la acción de moverse a través de una página web. En nuestro caso nos interesa este último, en cuanto a descubrir de que modo podemos hacer la navegación en nuestro sitio, más liviana y mejor adaptada a encontrar lo que andamos buscando.

En primer lugar comentemos que la página de de rc-pro, tal y como la vemos ahora, es una evolución de la anterior.

Basada en un modelo de sistema CMS de gestor de contenidos de Prestashop, la anterior versión de la página tenia una versión anterior de programación, y la búsqueda en los menus debía hacerse de otro modo, un tanto distinto a este actual. En la página, anterior a Febrero de 2022, nuestros usuarios navegaban en el menu y submenu principal, escalando en los menus para ir a buscar directamente la sección que correspondía con el criterio de busca que estábamos buscando.

Este sistema, aparentemente sencillo, generaba un serio problema en la navegación de las páginas web, ya que la sobrecarga en exceso de la página principal  hacia que su rendimiento cayera en picado. Para que os hagais una idea, una métrica buena dice que un DOM (el menu de la pagina y todos sus apartados, categorías y sub-categorias) no debería pasar de 1600 elementos.

Imaginaros una barra de menu, con 10 apartados (inicio, coches, motos, barcos, electronica, contacto, etc...) que de cada menu cuelguen otras 10 sub-categorias, con lo que tenemos que un menu principal, sin contar los menus de navegación a la izquierda, el login, los menus del pie de pagina, y todo lo demas. En definitiva, que sin darnos cuenta pasamos a tener un menu gigantesco que penaliza, y de que modo, en el rendimiento de la página y en su posterior posicionamiento en los buscadores.

Siguiendo los criterios de Google para mejorar el rendimiento y la navegación de nuestros usuarios, decidimos poner a regimen el menu principal, y establecer estos criterios de busqueda de otro modo, aún más sencillo y que no afectara al rendimiento de la página.

Cómo? Muy sencillo. Estableciendo la busqueda por facetas. Este tipo de busqueda básicamente permite que la página muestre todos los productos establecidos en una categoria, y mediante unos filtros contenidos en la izquierda del menu, podamos ir filtrando los productos según los criterios disponibles.

Veamos un ejemplo:

Este menu, aparentemente bien configurado, corresponde únicamente al primer apartado de una barra de menus con 8 categorias más. Este tipo de menú, en nuestro caso, penalizaba más que no aportaba. Un menu grande, descomunal, con una navegación tosca, así que decidimos cambiarlo y aplicar una reducción de peso generosa, con lo que, finalmente, el menu principal es más liviano, la carga de la página es más rápida, y el contenido se muestra antes. Eso se traduce en un mejor comportamiento y una mejor valoración de la usabilidad de la página, en términos absolutos.

En este caso en particular, el menu de rcpro que nos interesa se ve, a dia de hoy de este modo:

Sólo existe un sub-nivel de menus, y es en ese momento, cuando entramos en uno de estos sub-menus, que se produce la mágia y es dónde debemos estar al caso para el filtrado de productos.

Imaginemos por un momento que clicamos en el primer sub-menu del menu coches. Si estamos mirando la misma página web, éste sub-menú sería el de marcas. Pues cuando entramos en marcas, no aparece ningún desplegable más, se nos muestra una mezcla de coches de todo tipo y de todas las marcas, que debemos filtrar. Para ejecutar el filtro, si estamos en un ordenador de sobre mesa, sólo debemos dirigirnos a la izquierda del menu. Allí observaremos todo un séquito de marcas y con una casilla de verificación al lado. La operación es tan simple como clicar en cualquiera de las marcas que queremos ver, y automáticamente la web filtrará todos los coches y marcas por nosotros, según nuestro criterio.

Ejemplo de muestra de productos sin filtro:

Ejemplo de muestreo de productos con filtro:

Utilizar el filtro es realmente una operación sencilla y requiere únicamente de un poco de sentido común para usarlo. Las casillas marcadas mostrarán los productos que concuerden con el criterio de búsqueda, y los que no estén marcados no se mostrarán.

Veamos ahora que sucede si hacemos la misma operación a través de nuestro móvil, ya que es algo distinto el proceso y es aquí dónde hay que fijarse bien.

Hagamos el mismo proceso, dentro del menu de la tienda, y seleccionemos la primera de las categorías, que es coches. Ya de entrada el menu se muestra ligeramente distinto, y para acceder a marcas, sólo debemos presionar el botón + que aparece al lado del menu para que éste se despliegue.

Una vez dentro de marcas, veamos que la página nos muestra nuevamente el desorden de coches de todas las marcas que forman parte de este sub-menú. Para poder filtrar por marca, que es lo que queremos hacer en este momento, debemos unicamente presionar el botón Filtrar que aparece al lado del criterio de orden de los productos, que en este caso estan sugeridos, y se muestran en pantalla, según su relevancia.

Después de presionar el botón de filtrar, y en la parte inferior de la página, nos aparecerán los dos criterios de busqueda correspondientes a esta sub-categoria. Para establecer una busqueda segun la marca, la unica cosa que deberiamos hacer es entrar en marca, seleccionar la marca que deseamos filtrar, y presionar el boton ok. Acto seguido, la página nos mostraría los productos en este caso los coches, que coincidan con el criterio de busqueda especificado en el partado de marca.

Este proceso que aparentemente parece complicado, es bastante mas fácil cuando se hace directamente a través del movil. La realidad es que el proceso es igual en todas las categorías y sub-categorias, y el hecho de presionar el botón de filtrar, nos muestra sobre que criterios se puede filtrar, con lo que se agiliza muchísimo la búsqueda, y el comportamiento del sistema en cuanto a rendimiento.

Veamos un ejemplo ahora de una de las categorias que tiene mas éxito en la página y en dónde la mayoría de clientes notan un paso atrás, de cómo podía hacerse en la anterior página con los menus.

Simplemente nos dirigimos al menu de coches, y en vez de marcas, vamos a recambios por modelo, y mediante el mismo proceso, filtramos la búsqueda. I voilá, aparecen todos los modelos actualmente listados en la página, y al clicar en un modelo, nos aparece el listado de todos los recambios disponibles para este modelo en concreto, con lo cual, hemos llegado, sin querer, al mismo piunto en dónde filtrábamos los recambios a través del menú principal.

Tened en cuenta que este sistema de búsqueda se esta configurando, y que es muy probable que no encontréis todos los modelos disponibles en la web.

Si mediante éste método no encontrais vuestro coche, por favor comentad en los comentarios del post, y lo agilizaremos rápidamente para que podais encontrarlo fácilmente.

Cualquier otra duda, comentario, o sugerencia, será bienvenida.

Feliz dia a todos y a todas

Share