Evaluación Heurística de IBM Docs

Introducción

A continuación se presentará un análisis Heurístico del sitio web www.ibm.com/docs, el sitio de documentación técnica de los productos y servicios de IBM. La función de este sitio web es servir como un repositorio para toda la documentación de los servicios y productos de la empresa, y un lugar donde los clientes puedan ir y aprender cómo se usan.

Metodología

Se realizó un análisis visual del sitio web de IBM Docs, y posteriormente se realizó una evaluación Heurística de la usabilidad del sitio, con base en los 10 principios de Jakob Nielsen. En el texto a continuación se expondrán los diez principios y se determinará un buen ejemplo del principio y un mal ejemplo. 

Posteriormente, se medirá cada uno de los errores basado en impacto y frecuencia, siendo 1 menor impacto y menor frecuencia y 5, mayor impacto y mayor frecuencia.

Evaluación

Visibilidad del estado del sistema:

Buen ejemplo: El sitio cuenta con breadcrumbs que ayudan al usuario a ubicarse, una vez dentro de la página principal de cualquiera de los productos. 
Justificación: Esto permite que el usuario se pueda ubicar dentro de cuál página de cuál producto está, además de que le permite regresar a cualquiera de las páginas anteriores, dándole control sobre el sitio.

Mal ejemplo: No todas las páginas tienen breadcrumbs, solo las páginas principales de los productos.
Justificación: A pesar de que los breadcrumbs son una buena práctica, el hecho de que están solo presentes en las páginas principales de los productos genera confusión. Si como usuario estoy dentro de cualquiera de los apartados de los productos, no tengo forma de volver exactamente a la página previa a través de los breadcrumbs.

Gravedad: 5/5
Frecuencia:5/5
Impacto: 4/5

Propuesta: Incluir breadcrumbs en todas las páginas del sitio, para permitir el fácil acceso del usuario.

Ayuda y documentación

Buen ejemplo: Botón de contacto 
Justificación: El sitio web tiene un botón de contacto, que cuando se cliquea, despliega una serie de soluciones de ayuda para el usuario, que incluyen soporte para clientes y usuarios, documentación y foros. 

Mal ejemplo: Dentro del botón de contacto hay demasiadas opciones y tiende a ser confuso.
Justificación: Es difícil para el usuario determinar cuál es el tipo de soporte que necesita, porque hay demasiadas opciones.

Gravedad: 4/5
Frecuencia: 2/5
Impacto: 4/5

Propuesta: Principalmente es importante simplificar el proceso de contacto y destinar menos cantidad de opciones. Es necesario hacer un user journey de la acción que se espera que el cliente tome cuando requiere ayuda, porque no está claro. Proponer dos opciones de contacto y ayuda que sean, una documentación y la otra, contacto con soporte por medio de la misma página, es suficiente.

Consistencia y estándares

Buen ejemplo: La página de documentación de IBM soporta un gran número de productos y servicios de la empresa, y en todos ellos, los estilos de navegación son consistentes.
Justificación: Las barras de búsqueda, los íconos que se utilizan y los colores son los mismos a través de todo el sitio, lo que permite un sentido de consistencia y orientación.

Mal ejemplo: Dependiendo del producto, la página de inicio es diferente, así como la presentación.
Justificación: El hecho de que los colores del landing page sea diferente dependiendo del producto, resulta confuso. La imagen de entrada de cada página también es diferente y también la tipografía, generando inconsistencia.

Gravedad: 3/5
Frecuencia: 5/5
Impacto: 4/5

Propuesta: Mantener consistencia entre los landing pages de los diferentes productos, incluyendo la tipografía y señalar en la imagen o ‘hero’ del landing page el nombre del producto o servicio del subsitio.

Prevención de errores

Buen ejemplo: Barra de búsqueda indica el sitio en el que se encuentra el usuario 
Justificación: Dependiendo de donde esté ubicado el usuario en el sitio, la barra de búsqueda indica el sitio en el que se estará haciendo la búsqueda, para prevenir que se haga la búsqueda en un sitio incorrecto. 

Mal ejemplo: El uso de filtros resulta confuso.
Justificación: La buena práctica utilizada en la barra de búsqueda no se sigue en el menú de filtros. Resulta confuso el lenguaje que se utiliza ‘filtros en títulos’ porque no se establece cuáles son los filtros que se deben buscar. Tampoco se explica si se refiere a etiquetas o si se busca por medio de una palabra dentro de un título. En general, resulta confuso y puede inducir al error.

Gravedad: 2/5
Frecuencia: 4/5
Impacto: 4/5

Flexibilidad y eficiencia de uso

Buen ejemplo: Documentación disponible para todas las versiones de los productos y servicios
Justificación: Todas las versiones de los productos y servicios están disponibles cuando se accede al servicio de documentación, permitiendo que los usuarios puedan personalizar su experiencia basado en la versión de producto que tienen.

Mal ejemplo: No hay opciones de personalización en el sitio
Justificación: El sitio no tiene opciones de personalización y hay pocas opciones para simplificar la búsqueda de contenido. Los usuarios tienen que ir a cada página para encontrar lo que buscan. No tiene opciones para recordar lo que el usuario ha visitado previamente.

Gravedad: 4/5
Frecuencia: 5/5
Impacto: 4/5

Propuesta: La propuesta es que el sitio cuente con varias opciones de personalización, incluyendo:

• Sección que permita visualizar el historial de páginas anteriormente visitadas dentro del sitio
• Sección con las páginas más visitadas por otros usuarios que puedan ser de interés.

Propuesta: La propuesta es modificar las palabras dentro del field de busqueda the filtros a ‘search title’, para que la busqueda sea más clara.

Control y libertad del usuario

Buen ejemplo: Se le permite al usuario tener control sobre la visualización de la página. 
Justificación: La página cuenta con opciones como expandir o contraer el menú izquierdo, expandir o contraer la tabla de contenidos, utilizar filtros y cambiar la versión de la documentación, de manera que la experiencia resulta más personalizada. 

Mal ejemplo: Si el botón de ‘mostrar toda la tabla de contenidos’ está desactivado, la información del menú izquierdo aparece bloqueada, lo que puede resultar confuso para el usuario. 

Gravedad: 3/5
Frecuencia: 5/5
Impacto: 3/5

Propuesta: Mantener el menu desbloqueado todo el tiempo, para que sea menos confuso para el usuario.

Consistencia del sistema y el mundo real

Buen ejemplo: La página utiliza iconos universales, como el ícono de búsqueda (lupa), icono de usuario para acceder al perfil, thumbs up and down to rate the page o el ícono de cancelar (X) para cancelar una búsqueda.
Justificación: Esto es una buena práctica porque permite al usuario ubicarse dentro de la página con elementos que son universales, y que puede encontrar en otros sitios. Esto hace que la interfaz sea fácil de navegar y accesible.
Mal ejemplo: La página tiene términos muy técnicos que puede que sean útiles para el usuario.
Justificación: si no son explicados, los términos no resultan de utilidad para el usuario. Particularmente en páginas de documentación esto es algo que debe ser tomado en cuenta.

Gravedad: 2/5
Frecuencia: 1/5
Impacto: 2/5

Propuesta: Mantener el texto simple, a pesar de que se trata de contenido técnico es importante que el usuario pueda entenderlo.

Reconocimiento en lugar de recuerdo

Buen ejemplo: Uso de tooltips
Justificación: El uso de tooltips en la tabla de contenidos ayuda al usuario a saber por donde está navegando y qué esperar si hace click a cualquiera de los títulos.

Mal ejemplo: Líneas en tablas funcionan como tooltips y resulta confuso 
Justificación: Las celdas de las tablas funcionan como los tooltips, y se oscurecen cuando se coloca el cursor sobre ellas. Sin embargo, no generan ninguna acción ni permite hacer click cuando el cursor se posiciona, generando confusión. 

Gravedad: 3/5
Frecuencia: 5/5
Impacto: 3/5

Propuesta: Modificar la tabla de manera que no responda cuando se pasa el cursor sobre las celdas. De este modo, no parecerá que el usuario puede hacer click en las celdas y percibir una acción falsa.

Diseño estético y minimalista:

Buen ejemplo: El diseño de la página es sencillo y minimalista
Justificación: El hecho de que la página sea blanca, la tipografía sea redondeada, todos los links sean del mismo color y el diseño no sea cargado, hace que la documentación sea más fácil de leer, que es al final el objetivo fundamental del sitio. 

Mal ejemplo: Tabla de contenidos colapsable genera confusión.
Justificación: La tabla de contenidos colapsable genera confusión, se ve desordenada y hace que el sitio se vea muy cargado. Es difícil entender la jerarquía de la taxonomía.

Gravedad: 2/5
Frecuencia: 5/5
Impacto: 2/5

Propuesta: La propuesta en este caso es que se mantenga permanente la tabla de contenidos, con un scroll que le permita al usuario subir y bajar, pero que el contenido no desaparezca.

Ayude a los usuarios a reconocer, diagnosticar y recuperarse de los errores:

Buen ejemplo: aviso de que la versión que el usuario está visitando no es la versión más nueva de la documentación. 
Justificación: Este fue el ejemplo que más me llamó la atención del sitio. Cuando se visita una página que existe pero que ha sido actualizada, el sitio muestra un aviso notificando al usuario que la página que está viendo tiene una versión más nueva y lleva al usuario a que la revise. La página tiene varios de estos ejemplos, otro de ellos es cuando se hace click en un enlace que está roto, aparece una pantalla que devuelve al usuario a la pantalla previa. 

Mal ejemplo: No se encontró un mal uso de este principio.