Informe de Evaluación Heurística

por Toni Melián Hernándezen Publicado el
Pública

Índice del informe:

Introducción:

En este post, se presentará un análisis heurístico de la interfaz del sitio web del periódico Le Soir, uno de los diarios más importantes de Bélgica, especialmente influyente en Bruselas y Valonia. Fundado en 1887, Le Soir se presenta como un medio progresista e independiente y se ha convertido en una fuente de información clave para los usuarios francófonos. Además de su sitio web, el periódico cuenta con una aplicación móvil y una edición impresa en formato berlinés (páginas de 315 x 470 mm), que complementa su oferta informativa.

Esta elección se basa en que se trata de una página de consulta frecuente para muchos usuarios francófonos y un referente en información en Bélgica. El objetivo es analizar su diseño desde el punto de vista de la experiencia de usuario y descubrir áreas de mejora en cuanto a usabilidad. En el post, se siguen los 10 principios heurísticos de Jakob Nielsen, aportando un hallazgo concreto para cada principio y evaluando si es un buen o mal ejemplo de aplicación, con sus respectivas justificaciones. Finalmente, presentaré un listado priorizado de los hallazgos más graves y sugeriré posibles soluciones.

Nota: Le Soir es una página que recibe un alto volumen de visitas diarias, tanto nacionales (Bélgica) como internacionales. Además, forma parte de un gran grupo de comunicación que incluye otros medios, lo que sugiere la presencia de un equipo especializado en usabilidad trabajando en el sitio web. Por ello, resulta difícil identificar problemas de usabilidad, y aquellos que se encuentran podrían ser decisiones conscientes del equipo de diseño y usabilidad.

Interfaz Evaluada:

Interfaz: página principal del periódico Le Soir, https://www.lesoir.be/
Hardware y SO utilizado: MacBook Pro con macOS Monterey (v. 12.7.6)
Navegador utilizado: Safari 17.6

Metodología:

Esta evaluación heurística sigue los 10 principios de usabilidad de Jakob Nielsen para el diseño de interfaces de usuario. El objetivo es identificar tanto las fortalezas como las áreas de mejora, centrando el análisis en cómo la interfaz respalda los principios de usabilidad. Cada heurística ha sido evaluada para encontrar al menos un aspecto clave, clasificado de mayor a menor gravedad. Cada hallazgo va acompañado de recomendaciones de mejora.

Para llevar este análisis, se ha seguido los principios heurísticos de Jackob Nielsen. El proceso incluye:

  • Navegación exhaustiva por el interfaz de Le Soir (versión escritorio).
  • Identificación de los elementos clave de la interfaz.
  • Documentación de los hallazgos, acompañándolos de capturas de pantallas y de una descripción
  • Evaluación de los elementos encontrados desde el punto de vista de usabilidad y experiencia de usuario.

La clasificación de los hallazgos identificados, basada en su correcta aplicación de los principios heurísticos, es la siguiente:

  • Bueno
  • Leve
  • Moderado
  • Grave

Análisis Heurístico:

1. Visibilidad del estado del Sistema

Hallazgo (finding) Menú de categoría y secciones en la parte superior
Catalogación Bueno
Justificación En la parte superior existe un menú con las categorías y las secciones. A medida que el usuario navega verticalmente y el usuario llega a una sección determinada de la página home, se van activando los diferentes elementos del menú (horizontalmente) indicando en qué sección exacta se encuentra el mismo.
Este menú de categorías es bastante largo, con lo que los elementos se van moviendo hacia la izquierda a medida que el usuario desciende verticalmente y a la derecha a medida que el usuario asciende verticalmente.
También al descender el menú de categorías queda anclado en la parte superior de la página, permitiendo el reconocimiento de la sección.

 

 

Hallazgo Aspecto visual del menu de categoría y secciones
Catalogación Moderado
Justificación Existe un problema de reconocimiento visual del menu de categorías, ya que el color de fondo es muy claro, se confunde con el blanco (el color de fondo del resto de la página), con lo que puede pasar desapercibido por el usuario.

2. Adecuación entre el sistema y el mundo real

Hallazgo Diseño del layout de la web
Catalogación Bueno
Justificación Existe una similitud visual entre diseño y estructura de la información del periódico impreso y la página web, lo cual permite que el usuario reconozca muy rápidamente en qué tipo de página se encuentra.

 

Hallazgo Etiquetas de las categorías utilizadas
Catalogación Bueno
Justificación Las categorías utilizadas también son en general las mismas categorías que se utilizan en el medio impreso, y en general en los medios de comunicación, por ello son bastante reconocibles por el usuario: política, cultura, deporte.

 

Hallazgo Algunas etiquetas no reconocibles fácilmente en el menú de categorías
Catalogación Moderado
Justificación No obstante lo mencionado en el hallazgo anterior, existen algunas categorías específicas de medio que no pueden ser entendidas sin una explicación extra, por ejemplo: LéNA, MAD, «A la Une«.

3. Libertad y control por parte del usuario

Hallazgo Libertad de navegación dentro de la página «inicio» a través del menú de categorías
Catalogación Bueno
Justificación Relacionado con lo comentado sobre el menú de categorías en el principio heurístico 1, el sitio permite navegar fácilmente de una sección a otra y regresar a la página principal mediante el menú de categorías siempre visible.

 

Hallazgo Al hacer click sobre el botón «identificarse», el sistema lleva al usuario a una página sin posiblididad de deshacer o de volver
Catalogación Grave
Justificación Hacer click en el enlace para «identificarse». El usuario es llevado a una nueva página con un formulario para identificarse a través de varios métodos. Esta nueva página está prácticamente en blanco, sin header ni footer, con lo que el usuario sólo puede volver a la página anterior mediante el botón «atrás» del navegador.

Se trata de una mala práctica ya que el usuario no tiene toda libertad de acción, y es obligado a realizar una opción en concreto (identificarse) sin tener la opción de cambiar de opción (por ejemplo: ir a otra página).

4. Consistencia y estándares

Hallazgo El diseño visual mantiene una coherencia visual en colores, tipografías y estilos
Catalogación Bueno
Justificación La página web utiliza los colores corporativos de Le Soir: azul, negro y amarillo para acentuar zonas concretas. También hay coherencia con el uso de las tipografías y layout. Estas características se mantienen constantes a lo largo de la página web y también en la versión impresa

 

Hallazgo Los espacios para los anuncios tienen una estética diferente a la página web, no obstante esta diferencia puede ser ambigua
Catalogación Moderado
Justificación Esta diferencia estética entre los contenidos y los anuncios, en algunas ocasiones no es lo suficientemente clara con lo que puede confundir a los usuarios (no saber distinguir claramente lo que es contenido de lo que es publicidad) y romper la consistencia general visual del sitio

 

5. Prevención de errores

Hallazgo Problemas de prevención de errores en el formulario para abonarse
Catalogación Grave
Justificación El formulario para contratar un abono presenta varios problemas que pueden dificultar la corrección de errores por parte del usuario.

Un caso concreto ocurre cuando el usuario introduce un correo electrónico y una contraseña en la primera pantalla y luego avanza a la siguiente pantalla (la pantalla de pago). Si, debido a la división del formulario en tres partes, el usuario desea volver a la primera pantalla para verificar o corregir su correo electrónico, se encontrará con que no puede editar ni su correo ni su contraseña, aunque sí puede modificar el resto de la información. Esto contradice el diseño modular del formulario en tres partes y obliga al usuario a recargar la página para volver a introducir correctamente sus datos. Esta situación puede generar una experiencia negativa para el usuario, causando frustración y posibles abandonos del proceso.

6. Reconocimiento en lugar de recuerdo

Hallazgo Varios iconos utilizados en la página web facilitan su utilización de forma intuitiva
Catalogación Bueno
Justificación Los iconos que se encuentran dentro del menú de navegación, tales como: conectar, newsletter, boutique, meteo son reconocibles y además todos están acompañados de una etiqueta descriptiva

7. Flexibilidad y eficiencia de uso

 

Hallazgo En las versiones de subscripción, le Soir permite personalizar las notificaciones, marcar artículos para lecturas posteriores, etc.
Catalogación Bueno
Justificación El hecho de dar una serie de opciones para los usuarios avanzados, tales como permitir clasificar y organizar la información para consultarla en otro momento, hace que el sistema se adapte a las necesidades del usuario, mejorando su experiencia

 

Hallazgo El formulario de búsqueda está escondido dentro del menú «hamburger»
Catalogación Leve
Justificación Un formulario de búsqueda permite a los usuarios, sobre todo a los expertos, completar sus tareas de forma más rápida y eficiente, ya que permite acceder a la información deseada sin tener que navegar excesivamente.
Aunque la página cuenta con un formulario de búsqueda, este no es visible de forma inmediata para el usuario (sin realizar ninguna acción previa), lo que puede llevarlo a deducir erróneamente que no existe.

8. Estética y diseño minimalista

 

 

Hallazgo La página web utiliza un diseño limpio y claro y jerarquizado que facilita la lectura
Catalogación Bueno
Justificación Este punto esta relacionado con lo mencionado en el principio «Consistencia y estándares», que viene a decir que existe una coherencia visual y gráfica en la página web y que la información es presentada de forma clara y sencilla

9. Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de los errores

 

Hallazgo Los mensajes de error en el formulario de identificarse son claros y ayudan a corregir la información.
Catalogación Bueno
Justificación Aunque la página que contiene el formulario no cumple con algunos de los principios previamente mencionados, es cierto que, al ocurrir un error, como cuando el usuario introduce una dirección de correo electrónico incorrecta, el sistema resalta en rojo el campo problemático y muestra un mensaje explicando el motivo del error. Esta información facilita al usuario identificar el problema y encontrar una solución.

 

 

Hallazgo Los mensajes de error y las opciones de ayuda en la página de error (clásico 404) no son suficientemente claros
Catalogación Moderado
Justificación La página de error, en este caso la típica 404 (cuando el sistema no puede encontrar una página específica), presenta varios problemas que llaman la atención:

  • El título («Oups»): Aunque intenta ser gracioso, no aporta información útil sobre el error, dejando al usuario sin contexto claro.
  • El diseño de la página: Hay un exceso de espacio en blanco debajo del título, lo que genera una sensación de vacío, como si faltara contenido o detalles importantes.
  • La ubicación de la información relevante: Está demasiado lejos del título, lo que dificulta que el usuario la encuentre fácilmente. Dependiendo del tamaño de la ventana del navegador, incluso podría no ser visible sin desplazarse hacia abajo.

10. Ayuda y documentación

 

Hallazgo Al hacer click sobre el botón «s’aboner» (abonarse) se va a otra página donde se ofrece un desplegable con dos opciones de contacto para recibir ayuda
Catalogación Bueno
Justificación Se trata de una buena práctica ya que el usuario puede acceder a una ayuda muy directa, lo cual aumenta el sentimiento de seguridad en esta página

Hallazgo Continuando el la página de abonarse, existe una sección de preguntas frecuentes accesible y cerca del pie de la página
Catalogación Bueno
Justificación Se trata de una buena práctica que permite ayudar al usuario y resolver sus dudas de una forma rápida

 

 

Errores y Propuesta de mejora:

 

Hallazgo Gravedad Principio heurístico Recomendación
Aspecto visual del menu de categoría y secciones
Ver descripción		 Moderado 1. Visibilidad del estado del Sistema Una solución para diferenciar el submenu de categorías del menú principal y del fondo de la página podría ser (por ejemplo) poner un fondo más oscuro, o poner una línea/borde al final del menú de categorías para separarlo del contenido
Algunas etiquetas no son reconocibles fácilmente en el menú de categorías
Ver descripción		 Moderado 2. Adecuación entre el sistema y el mundo real Poner un tooltip o al tratarse de abreviaciones en algunos, utilizar el markup html para abreviaciones : <abbr>, por ejemplo LéNA es: Leading European Newspaper Alliance
Al hacer click sobre el botón «identificarse», el sistema lleva al usuario a una página sin posiblididad de deshacer o de volver

Ver descripción

 Grave 3. Libertad y control por parte del usuario Una solución podría ser que el formulario de «identificarse» apareciera como una ventana flotante (siguiendo todos los principios de accesibilidad para estos elementos), con un botón para cerrar la ventana flotante.

De esta forma el usuario no es sacado de la página donde se encuentra y siempre puede deshacer la acción presionando el botón «cerrar» o presionando sobre el área exterior de la ventana flotante (práctica ampliamente utilizada para cerrar este tipo de ventanas flotantes).
Ora opción podría ser que en la nueva página a la que se llega al hacer click sobre el botón «identificarse», contenga el header, categorías y footer de la página de le Soir, lo que permitirá realizar otras acciones.
Los espacios para los anuncios tienen una estética diferente a la página web, no obstante esta diferencia puede ser ambigua
Ver descripción		 Moderado 4. Consistencia y estándares Una propuesta sería la de eliminar totalmente los anuncios. Esta opción está aplicada en la versión de subscripción del diario, pero en la versión gratuita se muestran los anuncios.
Otra propuesta más realista podría ser la de marcar visualmente la presencia de los anuncios, y aportando una etiqueta que claramente indique que se trata de un anuncio, así como unos elementos visuales que lo ayuden a identificar (líneas de color, fondos, etc.).
Problemas de prevención de errores en el formulario para abonarse
Ver descripción		 Grave 5. Prevención de errores Se proponen varias soluciones:

  • Permitir que el usuario pueda editar todas las opciones del formulario en cualquier pestaña. Esto significa que, si el usuario regresa a una pestaña anterior, debería tener la posibilidad de modificar todos los datos ingresados.
  • Implementar medidas de prevención de errores, como incluir dos campos para verificar el correo electrónico o enviar un correo al usuario con un código de validación para confirmar la validez del email proporcionado.
  • Atenuar el color de los botones para indicar que no están activos hasta que se completen todos los campos obligatorios.
El formulario de búsqueda está escondido dentro del menú «hamburger»
Ver descripción		 Leve 7. Flexibilidad y eficiencia de uso Añadir un formulario de búsqueda en la parte superior de la página web, sobre todo en el header, de forma claramente visible en todo momento.
Los mensajes de error y las opciones de ayuda en la página de error (clásico 404) no son suficientemente claros
Ver descripción		 Moderado 9. Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de los errores
  • Usar un título más relevante y claro sobre el error, como «Página no encontrada» en este caso.
  • Incluir un subtítulo descriptivo que ofrezca información adicional útil para el usuario.
  • Ubicar el párrafo con la información de ayuda cerca del título para que sea fácil de localizar.
  • Optimizar el diseño visual de la página, compactándolo, para transmitir una sensación de unidad y cohesión.
  • Incluir directamente un formulario de búsqueda en la misma página, justo debajo del contenido, para que el usuario pueda utilizarlo sin necesidad de hacer otro clic. También sería útil ofrecer un listado de categorías o enlaces relacionados para facilitar la navegación.

 

 

 

 

 

Bibliografía

Entrega de la actividad R2 - Individual

Deja un comentario