A continuación se detallarán los distintos sistemas de navegación que dispone el sitio web www.muyinteresante.es el análisis que a continuación se presenta se realiza sobre una versión desktop en distintas resoluciones de pantalla.

En la home o página principal podemos encontrar los siguientes mecanismos de navegación:

 

 

Fig. 1 Menú horizontal

A modo de menú horizontal ‘Fig. 1’ el sitio web expone los principales enlaces a las principales páginas de contenido. Al pulsar cada uno de los botones el sitio se refrescará y cargará el contenido dinámicamente por debajo de está barra.

>> Una mejora que se podría aplicar en está barra de categorías u opciones es crear distintos estados de interacción para que el usuario sepa en cada momento dónde se encuentra.

Existe un hover pero no un estado on-press ni un estado on-select.

 

 

Fig. 2 Menú hamburguesa desplegable

 

Menú hamburguesa desplegable ‘Fig.2’. Los menús desplegables llevan a los usuarios de manera sencilla a otro apartado a través de la estructura del sitio. La selección del contenido de este menú es diferente a los enlaces del menú horizontal, aporta vínculos a contenido potencialmente interesante, además de enlaces a RRSS en los que la marca genera contenido.

El menú de este sitio web presenta las características propias de un  menú dinámico o ‘fly-out’ es decir; que el contenido que muestra opciones asociadas a la acción del menú.

Generalmente este tipo de menús suelen presentar problemas de interacción porque al desplegarlos pueden sobrepasar el área del fold, pero en este caso se ha solucionado creando desplegables o ‘drop down’ dentro del mismo menú para ir descubriendo las sub opciones que ofrece.

>> Está navegación sería mucho más óptima si hubiese un indicador para el usuario que le mostrara que sobre el área se puede hacer scroll.

>> Cuando se presiona sobre el icono del menú se crea un efecto ‘lightbox’ centrando todo el foco sobre el menú, un acierto ya que ayuda al usuario a centrarse en la elección del contenido.

El sitio web es muy horizontal, para poder navegar sobre se tiene que hacer uso del scroll restando accesibilidad al sitio web podría afectar a usuarios como;

  • Usuarios que tienen que emplear lectores de pantalla para acceder al contenido
  • Usuarios con dificultades motrices a las que les resulta complicado hacer uso del scroll.
  • Usuarios con dificultades cognitivas a las que les resulta complicado recordar en qué apartado de la web se encuentran.

Par restar este efecto el sitio web hace uso en algunos bloques de contenido, estos bloques que pueden resultar muy accesibles emplean una navegación paginada sin uso de numeración.

> Cada uno de los bloques están englobados y etiquetados correctamente facilitado el acceso a usuarios con discapacidad y mejorando a su vez el posicionamiento.

 

 

Fig 3. Directorio categorías.

Casi en el footer encontramos un directorio de categorías ‘Fig. 3’. Los directorios son muy útiles en este caso ya que no hay una jerarquía de información es decir ningún contenido o categoría prevalece sobre otra.

>> El  uso de directorios es una práctica excelente para agrupar el contenido del sitio. En este sitio en concreto ofrece otro tipo de salida alternativa al usuario, aunque sólo coinciden algunos hipervínculos con menú dinámico ni en los del menú.

En última estancia encontramos un sitemaps y los diferentes enlaces a las redes sociales entre otros.

>> Muy acertados ambos, los sitemaps hacen el sitio web más accesible y posicionable  además de mostrar de forma fácil una visión global de la arquitectura y contenido del sitio.

Por otro lado el tipo de navegación empleado para las redes sociales es óptimo para desktop, ya que se muestra en una ventana emergente con una resolución menor a la del sitio que nos encontramos. Esto hace que reduzca el abandono del sitio así como el porcentaje de rebote.

 

 

 

Fig. 4 Slides

Existen otro tipo de elementos podemos considerar de navegación ya que nos redirigen al consumo de contenido en otro apartado del sitio web, son elementos como sliders ‘Fig. 4’  de contenido, ya sea invisibles para el usuario como los publicitarios, o atractivos como son los que resumen con imágenes altamente atractivas aquellos contenidos más destacables.

> Los slides contienen recursos tempodependientes que permiten al usuario tener el control del contenido.

 

 

Fig. 5 Breadcrumbs

Al navegar por las distintas páginas de resultados el sitio web hace uso de breadcrumbs, ayudando al usuario a saber dónde se encuentra.

>> Los breadcrumbs podrían mejorar su usabilidad y accesibilidad creando estados diferenciados.

Por otro lado tenemos galerías de imágenes que enlazan a más información sobre la seleccionada, esto ocurre hasta 3 niveles en cascada.

Por ejemplo elijo ‘Mujeres en la ciencia’ a continuación me llevará a otra galería donde aparecen diversos post relacionados con mujeres científicas, a su vez al seleccionar uno de ellos te ofrece más contenido específico sobre el y la opción de compartir en redes sociales.

>> Como curiosidad podemos observar que este contenido está etiquetado con hashtag, seguramente extraído de las búsquedas más frecuentes o  temáticas trending en las redes sociales.

El sitio contiene directorio del contenido social más consumido ordenado de más relevancia a menor.

>> Es una forma de ofrecer al usuario información que a otros usuarios le ha podido resultar interesante, este tipo de navegación no va dirigida a un usuario que busca una información en concreto sino alguien que está curioseando y se le ofrece un contenido altamente consumido que es muy probable que sea de su interés. Recordemos que muchas veces el usuario no sabe exactamente qué está buscando, ofrecerle resultados que le motiven al consumo mejora su experiencia con el sitio.

No Comments

Leave a Comment