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…
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…
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…
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.
Tenía en mente multitud de aplicaciones y webs para realizar un buen análisis heurístico, pero tras la comida familiar de este fin de semana compartiendo tiempo con mis queridísimas y queridísimos familiares adolescentes y no tanto, he decidido seguir con ese empacho de videos musicales en modo carrusel…
Tenía en mente multitud de aplicaciones y webs para realizar un buen análisis heurístico, pero tras la comida familiar…
Tenía en mente multitud de aplicaciones y webs para realizar un buen análisis heurístico, pero tras la comida familiar de este fin de semana compartiendo tiempo con mis queridísimas y queridísimos familiares adolescentes y no tanto, he decidido seguir con ese empacho de videos musicales en modo carrusel y realizar el análisis heurístico de la web TikTok.
He de admitir que TikTok me fascina, ha conseguido que visualizar contenido sea una experiencia de acción recompensa, adictiva para el usuario. Con un diseño de interfaz sencilla, con pocas elecciones, videos musicales, acciones repetitivas y contenido ilimitado, tal y como comentó en una reunión grupal el compañero psicólogo David Barqué, TikTok se ha convertido en las nuevas tragaperras.
Os preguntaréis por qué he escogido analizar la web y no la mundialmente predilecta aplicación para el dispositivo móvil. Como excusa diré me producía curiosidad analizar como se adaptaba, manteniendo su esencia u objetivos, un producto dirigido a utilizarse preferentemente desde tu smartphone a una interfaz más “tradicional” como es el formato desktop de la web, visto desde un ordenador.
Un punto a destacar a la hora de analizar este producto, es que no tengo experiencia previa de uso de la interfaz de TikTok, pero si tengo experiencia en interfaces y visualización de contenido similar.
Dicho esto, ¡Empezamos con el análisis heurístico!
OBJETIVO DE ANÁLISIS
Evaluar la web de TikTok España de acuerdo con los 10 principios de Nielsen.
https://www.tiktok.com/es/ visto desde MacBook Pro (dispositivo con sistema operativo IOS), pantalla externa de 32 pulgadas BenQ PD2700U.
METODOLOGÍA
1-. Reunir la lista de heurísticas y subheurísticas en formato cheklist e identificar cuáles reglas y principios de Nielsen se cumplen y cuáles no.
2-. Indicar el grado de gravedad del problema a partir de tres parámetros:
FRECUENCIA con la que nos encontramos con el problema.
IMPACTO a causa del problema al usuario; relevancia en la afecta al uso del producto.
PERSISTENCIA del problema; en qué medida afecta al uso progresivo del producto.
Puntuación de gravedad según la siguiente tabla:
3-. Organizar el análisis en función la gravedad de las malas prácticas encontradas.
ANÁLISIS
Reconocimiento antes que recuerdo
Para promover el reconocimiento y evitar que los usuarios memoricen sus acciones o elementos al desplazarse por el sistema, vemos cómo se muestra información junto a los iconos o cuando se realiza se pasa el ratón por encima de estos.
Podemos ver bajo los videos una barra de progreso que nos indica la parte del vídeo en la que nos encontramos y cuanto queda para que este acabe y salte al siguiente.
Mala práctica: Solo en la home podemos ver, señalado en el menú, en que parte de la web nos encontramos. En cuanto entramos en el modo de visualización, al tratarse de contenidos muy similares entre “Siguiendo”,“Para ti” y “Explorar”, no queda claro a qué categoría corresponde el contenido que estamos visualizando en ese momento. Una propuesta de mejora sería incorporar algún elemento o el nombre de la categoría en algún lugar de la pantalla para que el usuario pueda intensificarla. PUNTUACIÓN: 9
Flexibilidad y eficiencia de uso
En el menú nos encontramos con la categoría “Para ti”. En esta categoría la plataforma propone contenido según las preferencias del usuario. Con el contenido personalizado existe una mayor posibilidad de satisfacer al usuario de manera rápida.
Según la luminosidad del ambiente, en el panel de ajustes, el usuario puede activar o desactivar el modo oscuro según como este lo prefiera.
La interfaz propone alternativas para agilizar acciones frecuentes. Un claro ejemplo serían las teclas de acceso rápido como la tecla de “espacio” para realizar la acción de Play/Pause cuando se está reproduciendo un video.
Mala/Buena práctica: A pesar de que la plataforma propone atajos simples e intuitivos, no permite al usuario personalizar dichos accesos rápidos o atajos según la conveniencia del usuario. Quizás, como ejemplo, el usuario prefiera utilizar teclas más fáciles de controlar con la mano izquierda. En este caso, como propuesta de mejora, podría habilitarse la elección de teclas para atajos, gestionada en ajustes. PUNTUACIÓN: 6.
TikTok, a diferencia de otras aplicaciones de entretenimiento o RRSS, reduce la toma de decisiones. Esto limita la libertad del usuario para personalizar el uso de la interfaz, pero a la vez le aporta mayor sensación de seguridad. El usuario tan solo ha de dejarse llevar, y dejar que pasen los videos, uno tras otro, esperando que el siguiente le satisfaga más que el anterior. No tiene casi de elegir que ver perder tiempo tomando decisiones para personalizar su experiencia. Todo es simple, fácil, diferente, pero repetitivo.
Visibilidad del estado del sistema
Tras realizar varias acciones, antes y tras iniciar sesión, vemos como la interfaz ofrece retroacción y confirmación sobre las acciones realizadas por parte del usuario. En todo momento, el usuario puede cerciorarse si ha iniciado sesión con su cuenta, ya que al realizar cualquier acción trascendente nos aparece en pop-up un cuadro de diálogo informándonos que para ver o realizar ciertas acciones iniciemos sesión. También podemos recibir feedback visual sobre acciones como seguir o dar “like”; si clicamos en el botón de “seguir”, si hemos iniciado sesión, el botón cambia de color a gris con el texto “siguiendo”. Al clickar de nuevo en el botón “siguiendo”, este cambiará de nuevo de color y se convertirá de nuevo en el botón de “seguir”.
También, a través del menú se señala en que lugar de la web donde nos encontramos.
Coincidencia entre el sistema y el mundo real
Conceptos, íconos e imágenes siguen las convenciones del mundo real, podemos intuir o comprender rápidamente como funciona la interfaz. Como ejemplo, vemos como el botón de buscar está representado con una “lupa”. Además, vemos la posibilidad de adaptar la web, así como su mensaje e instrucciones a diferentes idiomas.
Los atajos o comandos a aprender son simples y parten de conceptos y expresiones ya popularizadas como: Utilizar la tecla “M” para mutear la reproducción o la tecla “L” para dar “like”.
Control y libertad del usuario
La aplicación permite corregir en todo momento acciones no deseadas y ofrece confirmación para prevenir que el usuario realice acciones por error. Vemos como haciendo doble click en el mismo botón, podemos deshacer la misma acción realizada con el primer click. Un ejemplo de esto, sería el botón de seguir o el de “like”. Vemos también que en el caso de escribir un comentario no deseado, podemos eliminarlo. Los comandos o atajos también nos permiten volver a visualizar videos que hemos “pasado” sin querer o que simplemente queremos volver a visualizar. Esto ofrece al usuario la sensación de seguridad y cierto control.
Consistencia y estándares
Encontramos iconos y lenguajes ya utilizados propios de las RRSS con los que el usuario se ha podido ir familiarizando, este es el caso del icono del corazón, para indicar que un contenido le ha gustado o el icono de compartir. También, encontramos iconos más reconocibles, como la utilización del buscador, señalado con un icono de lupa; la opción de “ajustes”, señalado con un icono de engranaje; o la “X” como elemento con el significado de cerrar.
Los atajos o comandos a aprender son simples y parten de conceptos y expresiones ya popularizadas como: Utilizar la tecla “M” para mutear la reproducción o la tecla “L” para dar “like”.
Esto ayuda al usuario a reconocer, a entender y en caso de aprender, a hacerlo con más rapidez y facilidad.
Prevención de errores
Al realizar diferentes acciones de carácter relevante como cerrar sesión o cambiar algún ajuste de la cuenta nos encontramos con mensajes que piden confirmación sobre las acciones realizadas. Esto evita que el usuario realice cambios y acciones más relevantes por error y permite deshacer dicha acción en caso de no ser deseada.
También nos encontramos con formularios que se comprueban a tiempo real y te indican el error y cómo solucionarlo. En la mayoría de formularios, bajo el espacio a rellenar, encontramos aclaraciones sobre el contenido, de esta manera, antes de rellenarlos y equivocarse, el usuario obtiene una idea sobre la información a rellenar.
Diseño estético y minimalista
Lo importante y llamativo de TikTok son los vídeos, es lógico que por ese motivo veamos una web de estética simple. Tan solo vemos la utilización de dos tonos y un color (gris, negro y rojo) y misma tipografía en diferentes pesos y tamaños.
Vemos iconos simples y una lista horizontal con temáticas genéricas a modo de filtros. También podemos buscar el contenido a través del buscador.
Ayuda a los usuarios a reconocer, diagnosticar y recuperarse de errores
Al realizar diferentes acciones, como en el caso cambiar el nombre de usuario, nos encontramos con formularios que se comprueban a tiempo real y te indican el error y cómo solucionarlo. También nos encontramos con mensajes de error en caso de querer reproducir contenido sin estar logueados o en caso de Error de red.
Ayuda y documentación
En la plataforma encontramos aclaraciones y explicaciones adicionales que ayudan a los usuarios a entender cómo realizas y completar sus tareas.
Vemos guías de cómo hacer uso de los atajos y comandos y una sección dedicada exclusivamente a ayudar y a comentar estas ciertas dificultades que el usuario pueda llegar tener.
BIBLIOGRAFÍA
Amorín, D. (s.f.). 10 principios de usabilidad. Recuperado de https://diegoamorin.com/10-principios-usabilidad/ (Acceso: 17 de noviembre de 2023).
Quadern Usabilitat Recursos UOC. (s.f.). Página de Inicio. Recuperado de http://quadern-usabilitat.recursos.uoc.edu/es/ (Acceso: 17 de noviembre de 2023).
Design Toolkit UOC. (s.f.). Evaluación Heurística. Recuperado de http://design-toolkit.uoc.edu/es/evaluacion-heuristica/ (Acceso: 17 de noviembre de 2023).
Design Toolkit UOC. (s.f.). Guía de Evaluación Heurística. Recuperado de http://design-toolkit.uoc.edu/es/guia/evaluacion-heuristica/ (Acceso: 17 de noviembre de 2023).
INTRODUCCIÓN En esta publicación se realizará una Evaluación Heurística del proceso de compra en la página web de Zalando Privé. He seleccionado esta interfaz debido a que se trata de una tienda online con elementos y procesos que difieren ligeramente de lo habitual en este tipo de webs.…
INTRODUCCIÓN En esta publicación se realizará una Evaluación Heurística del proceso de compra en la página web de Zalando…
INTRODUCCIÓN
En esta publicación se realizará una Evaluación Heurística del proceso de compra en la página web de Zalando Privé. He seleccionado esta interfaz debido a que se trata de una tienda online con elementos y procesos que difieren ligeramente de lo habitual en este tipo de webs. Además es una web con la que ya estoy familiarizado como usuario, por lo que la Evaluación Heurística será aún más precisa y completa.
METODOLOGÍA
Esta Evaluación se ha llevado a cabo mediante un análisis general previo de la herramienta a evaluar. Seguidamente, se ha realizado un análisis más concreto del proceso a estudiar (en este caso el proceso de compra dentro de la web), indagado paso por paso en este, detectando y puntualizando un hallazgo para cada uno de los principios de Nielsen y clasificando cada uno de los hallazgos según si el principio se usaba correctamente o no. Finalmente se ha elaborado un listado de los errores detectados en el anterior punto, clasificándolos según su gravedad y proponiendo soluciones y mejoras para corregirlos.
PRINCIPALES HALLAZGOS EN BASE A LOS 10 PRINCIPIOS HEURÍSTICOS DE NIELSEN
INTRODUCCIÓ: PÀGINA WEB D’IKEA La interfície que s’analitza és la pàgina web d’IKEA, una corporació multinacional d’origen suec amb seu als Països Baixos, fundada al 1943 per Ingvar Kamprad. Actualment, està present en 49 mercats d’Europa, Àsia, Estats Units i Oceania. Aquest web està pensat perquè els usuaris/es…
INTRODUCCIÓ: PÀGINA WEB D’IKEA La interfície que s’analitza és la pàgina web d’IKEA, una corporació multinacional d’origen suec amb…
INTRODUCCIÓ: PÀGINA WEB D’IKEA
La interfície que s’analitza és la pàgina web d’IKEA, una corporació multinacional d’origen suec amb seu als Països Baixos, fundada al 1943 per Ingvar Kamprad. Actualment, està present en 49 mercats d’Europa, Àsia, Estats Units i Oceania.
Aquest web està pensat perquè els usuaris/es puguin navegar per tota la pàgina, buscar aquells productes que necessiten o desitgen i els puguin adquirir.
Com qualsevol pàgina de compra online, està pensada per ser una pàgina de fàcil navegació, intuïtiva, amb gran oferta de productes i que generi seguretat durant la compra a l’usuari/a.
METODOLOGIA: COM S’HA REALITZAT LA ANÀLISIS HEURÍSTICA?
Per a la anàlisis heurística de la pàgina web d’IKEA s’han treballat els diferents punts:
Per a cada un dels principis de Nielsen s’ha descrit una heurística i subheurística, a més, s’ha detallat:
Un bon exemple i un mal exemple d’aplicació i la seva justificació, per cadascun.
Quines subheurístiques es compleixen i quines no, indicant el grau de gravetat del problema a partir de tres paràmetres:
La freqüència amb què ocorre el problema: és freqüent o no?
L’impacte del problema: els usuaris poden superar-lo fàcilment o no?
La persistència del problema: es resol immediatament o reapareix al llarg de l’ús?
S’ha establert un llistat prioritzat segons gravetat, tenint en compte l’experiència d’usuari. Amb la seva corresponent justificació i proposta de millora.
ANÀLISIS
1. Visibilitat de l’estat del sistema.
Heurística: els usuaris haurien de poder ser coneixedors en tot moment de l’estat del sistema i de les seves accions.
Subheurística: proporcionar informació sobre l’estat de l’acció que es realitza.
Bon exemple i justificació: quan un usuari afegeix a la cistella un producte automàticament es rep un pop-up amb la notificació de que el producte ha estat desat a la cistella de compra. Això permet al usuari fer un seguiment.
Mal exemple i justificació: si afegeixes unitats al producte un cop dins la cistella de compra, no es rep cap notificació, cal fixar-se en el número total d’unitats. Això pot provocar la compra d’unitats incorrectes per error.
Grau de gravetat
freqüència amb què ocorre el problema 5/5
impacte del problema 3/5
persistència del problema 5/5
Puntuació de l’ús de l’heurística 13/5
2. Adequació entre el sistema i el món real.
Heurística: l’usuari hauria de poder conèixer totes les categories i detalls dels productes que es venen.
Subheurística: s’hauria de proporcionar tota la informació i característiques del producte amb un llenguatge senzill i comprensible per l’usuari.
Bon exemple i justificació: tots els productes estan classificats segons funcionalitats i amb una explicació acurada del producte. Això permet a l’usuari conèixer el producte en detall.
Mal exemple i justificació: tot i ser un tret característic de l’IKEA, els noms complexes en Suec dels mobles pot dificultar la cerca d’aquests per l’usuari. Això pot enrederir el temps de recerca de productes o confondre a l’usuari.
Grau de gravetat
freqüència amb què ocorre el problema 5/5
impacte del problema 2/3
persistència del problema 5/5
Puntuació de l’ús de l’heurística 12/15
3. Llibertat i control per part de la persona usuària
Heurística: llibertat de mobilitat per tota la pàgina web i control de fer i desfer accions.
Subheurística: l’usuari hauria de poder fer i desfer qualsevol acció com la de selecció de compra.
Bon exemple i justificació: l’usuari té total llibertat per moure’s per la pàgina web per afegir i per eliminar productes de la cistella, així com afegir o treure unitats de cadascun. Això permet que l’usuari es senti autònom i amb el control.
Mal exemple i justificació: una vegada has acceptat la compra l’usuari no es pot fer enrere. L’única opció que li queda és tornar els productes a través d’un altre tràmit.
Grau de gravetat
freqüència amb què ocorre el problema 5/5
impacte del problema 3/5
persistència del problema 5/5
Puntuació de l’ús de l’heurística 13/15
4. Consistència i estàndards
Heurística: el disseny de la pàgina hauria de mantenir una consistència i seguir estàndards per a la navegació intuïtiva de l’usuari.
Subheurística: l’usuari hauria de poder reconèixer icones de llistats i filtratge, buscador i categories.
Bon exemple i justificació: la consistència al llarg de la pàgina web es correcte, es mantenen els mateixos formats en general i l’aspecte de la pàgina home és molt clar i intuïtiu. Això provoca que l’usuari es senti còmode amb la navegació per la pàgina.
Mal exemple i justificació: tret de les barres de menú, cerca i filtres l’estil de la pàgina de navegació per veure els productes en el home és diferent que en la resta de pàgines una vegada seleccionada la categoria del producte. Això pot causar confusió a l’usuari mentre navega i realitza les seves compres.
Grau de gravetat
freqüència amb què ocorre el problema 5/5
impacte del problema 1/5
persistència del problema 1/5
Puntuació de l’ús de l’heurística 7/15
5. Prevenció d’errors
Heurística: els usuaris haurien de ser avisats de qualsevol acció que duen a terme per evitar l’error.
Subheurística: els usuaris haurien de rebre un pop-up de justificació per a cada acció per evitar errors en les compres.
Bon exemple i justificació: en la selecció d’un llit, una vegada l’usuari escull posar-ho a la cistella, s’obre un pop-up a la banda dreta amb tots els articles que s’afegiran amb aquella acció. Això permet a l’usuari ser coneixedor de tots els articles que implica aquella compra i permet eliminar els que no es desitgin.
Mal exemple i justificació: l’usuari no rep notificació si elimina algun producte. Això pot crear confusió sobre si ha realitzat amb èxit l’acció.
Grau de gravetat
freqüència amb què ocorre el problema 5/5
impacte del problema 1/5
persistència del problema 4/5
Puntuació de l’ús de l’heurística 10/15
6. Reconeixement abans que record
Heurística: avançar-se a l’usuari promocionant aquells productes que poden ser d’interès per a ell/a.
Subheurística: proporcionar suggeriments de productes d’interès per a l’usuari/a.
Bon exemple i justificació: al afegir a la cistella alguns dels productes, apareix al lateral una finestreta amb un llistat de productes similars que poden ser d’interès per a l’usuari/a. Això permet agilitzar la compra i possiblement ajudar a l’usuari a no descuidar-se cap article que necessiti.
Mal exemple i justificació: aquesta notificació de proposta de productes similars no apareix per a tots els productes. Això pot crear confusió a l’usuari i haver de fer una recerca més exhaustiva.
Grau de gravetat
freqüència amb què ocorre el problema 3/5
impacte del problema 1/5
persistència del problema 2/5
Puntuació de l’ús de l’heurística 6/15
7. Flexibilitat i eficiència en l’ús
Heurística: l’usuari hauria de poder escollir productes i desar-los a la cistella per una posterior tria i acabar comprant allò que desitgi. També hauria de comptar amb el servei de memòria d’usuari i que quedés guardat a la cistella els productes fins la seva compra.
Subheurística: proporcionar un perfil d’usuari per poder gestionar les compres al seu temps.
Bon exemple i justificació: la pàgina web permet crear-se un usuari i deixar els productes en stand by a la cistella fins a la seva compra. Això permet a l’usuari tenir flexibilitat per anar fent una única compra en diversos espais de temps.
Mal exemple i justificació: la pàgina proporciona l’opció de crear-se llistes de favorits segons el perfil d’usuari, però no hi ha una explicació prèvia per aquesta utilitat i no queda clar com accedir-hi per poder-se’n beneficiar. Això, pot provocar en molts casos que l’usuari ho passi per alt i no conegui ni faci ús d’aquesta opció.
Grau de gravetat
freqüència amb què ocorre el problema 1/5
impacte del problema 1/5
persistència del problema1/5
Puntuació de l’ús de l’heurística 3/15
8. Disseny estètic i minimalista
Heurística: el disseny de la pàgina hauria d’estar centrat en l’objectiu de l’empresa i estar acompanyat d’un espai net i que no atabali a l’usuari.
Subheurística: els colors i distribució dels elements ha de ser clar i fàcil de navegar. Ha de permetre a l’usuari no cansar-se de navegar per la pàgina.
Bon exemple i justificació: el disseny net, ordenat i minimalista fa que la navegació sigui agradable i que l’usuari no es senti pressionat per a realitzar les compres. Això, aportarà millors resultats d’ús de la pàgina web i per tant més beneficis a l’empresa.
Mal exemple i justificació: el color blanc que predomina en tota la pàgina web, en segons quins productes es perd una mica la visibilitat d’aquests ja que tenen tonalitats molt similars i no destaquen sobre el fons en el qual estan. Això, pot resultar que molts productes no resultin atractius pels usuaris o que no els puguin visualitzar òptimament.
Grau de gravetat
freqüència amb què ocorre el problema 4/5
impacte del problema 4/5
persistència del problema 4/5
Puntuació de l’ús de l’heurística 12/15
9. Ajuda les persones usuàries a reconèixer i diagnosticar els errors i recuperar-se’n
Heurística: el disseny de la pàgina hauria de preveure i ajudar a l’usuari a corretgir els possibles errors.
Subheurística: haurien d’haver pop-up informatius o tooltips per a que l’usuari aconseguís una bona experiència durant la interacció amb la plataforma i pogués corregir errors en cas de que aquests apareguessin.
Bon exemple i justificació: en el registre d’usuari hi ha diversos camps a omplir. El sistema t’avisa de que hi ha un error i explica l’error. Això, permet a l’usuari identificar l’error i intentar corregir-lo.
Mal exemple i justificació: en la mateixa notificació de l’error no apareix el detall com solucionar-lo. Això, pot crear confusió a l’usuari i que abandoni la tasca.
Grau de gravetat
freqüència amb què ocorre el problema 2/5
impacte del problema 5/5
persistència del problema 3/5
Puntuació de l’ús de l’heurística 10/15
10. Ajuda i documentació
Heurística: l’usuari hauria de comptar amb un servei d’atenció al client i d’ajuda per qualsevol dificultat o problema que aparegui durant l’ús de la pàgina web.
Subheurística: dins de la pàgina web l’usuari hauria de comptar amb l’apartat d’atenció al client i de preguntes freqüents.
Bon exemple i justificació: la pàgina web compta amb un apartat d’atenció al client i amb un subapartat de preguntes freqüents. Això, pot ser d’utilitat per l’usuari si té algun dubte referent a l’espai o a l’empresa.
Mal exemple i justificació: l’accés a aquest apartat no és directe i no està molt a la vista. Això dificulta el seu accés i pot portar a l’usuari a pensar que no existeix aquest apartat.
Grau de gravetat
freqüència amb què ocorre el problema 1/5
impacte del problema 3/5
persistència del problema 1/5
Puntuació de l’ús de l’heurística 5/15
LLISTAT DE GRAVETAT
A continuació, s’exposa un llistat de les 5 casuístiques analitzades amb anterioritat segons cada principi de Nielsen, de major a menor nivell de gravetat. S’hi adjunta una justificació i una proposta de millora per a cada una.
Visibilitat de l’estat del sistema.
Justificació: els usuaris haurien de poder ser coneixedors en tot moment de l’estat del sistema i de les seves accions. D’aquesta manera s’evitarien estats de frustració, desconeixença o pèrdua durant la navegació.
Proposta de millora: proporcionar informació sobre l’estat de l’acció que es realitza en tot moment i en cada una de les accions realitzades.
Llibertat i control per part de la persona usuària
Justificació: els usuaris haurien de comptar amb la llibertat de mobilitat per tota la pàgina web i control de fer i desfer accions, incloent les de realització o anul·lació de comanda.
Proposta de millora: proporcionar l’opció a anul·lació de la comenda durant X període de temps, d’aquesta manera s’estalviarien el fet d’haver de retornar productes en cas de que s’haguessin comprat per error.
Adequació entre el sistema i el món real
Justificació: l’usuari hauria de poder conèixer totes les categories i detalls dels productes que es venen a través d’un llenguatge comú i senzill. Si l’usuari no identifica les categories o productes es dificulta la tasca.
Proposta de millora: s’hauria de proporcionar tota la informació i característiques del producte amb un llenguatge senzill i comprensible per l’usuari, evitar els noms en altres idiomes o assegurar-se de contemplat la traducció o detall del producte en un etiquetatge que ressalti i sigui fàcil d’identificar.
Disseny estètic i minimalista
Justificació: el disseny de la pàgina hauria d’estar centrat en l’objectiu de l’empresa i estar acompanyat d’un espai net i que no atabali a l’usuari. Aquest hauria de sentir-se còmode durant la navegació i poder identificar tots els productes sense dificultats.
Proposta de millora: els colors i distribució dels elements haurien de ser clars i fàcils per a la navegació. Ha de permetre a l’usuari no cansar-se de navegar per la pàgina, trobar i identificar tots els apartats, categories i veure clarament els productes que hi ha per poder comprar.
Prevenció d’errors
Justificació: els usuaris haurien de ser avisats de qualsevol acció que duen a terme per evitar l’error. Si no hi ha una notificació acompanyada d’una adequada explicació de cada acció és possible que l’usuari s’equivoqui en algun dels passos.
Proposta de millora: els usuaris haurien de rebre un pop-up de justificació per a cada acció per evitar errors en les compres. Per exemple, quan sumen o eliminen una unitat d’algun producte.
INTRODUCCIÓ L’avaluació heurística s’ha realitzat sobre tota la interfície web del Cercle de Cultura Tradicional i Popular Marboleny. L’avaluació s’ha realitzat de…
INTRODUCCIÓ L’avaluació heurística s’ha realitzat sobre tota la interfície web del Cercle de Cultura Tradicional i Popular Marboleny. L’avaluació s’ha realitzat de la versió d’escriptori. S’ha volgut realitzar un anàlisi general, ja que al ser la primera avaluació que es fa del lloc, interessa tenir una visió global…
INTRODUCCIÓ L’avaluació heurística s’ha realitzat sobre tota la interfície web del Cercle de Cultura Tradicional i Popular Marboleny. L’avaluació…
INTRODUCCIÓ
L’avaluació heurística s’ha realitzat sobre tota la interfície web del Cercle de Cultura Tradicional i Popular Marboleny. L’avaluació s’ha realitzat de la versió d’escriptori. S’ha volgut realitzar un anàlisi general, ja que al ser la primera avaluació que es fa del lloc, interessa tenir una visió global dels principals problemes d’usabilitat i en una següent fase d’avaluació, es vol observar en detall.
La web ja existeix, així que no s’analitzarà un prototip sinó una interfície web que està en actiu des de fa més de dos anys. Es creu necessària una avaluació heurística perquè es tracta d’una entitat que està al servei de les persones i, per aquest motiu, és vital que compti amb un lloc web que les persones puguin usar fàcilment per a conèixer el projecte i si ho desitgen, apuntar-s’hi.
També s’ha escollit aquesta plataforma perquè hi estic familiaritzat, ja que és la web de l’entitat on treballo i la conec bastant bé. El motiu pel qual l’he escollit és perquè vull millorar la usabilitat de la web. Recentment es va decidir fer un canvi a nivell gràfic del lloc, però si es vol proporcionar una bona experiència d’usuari és essencial que la interfície sigui usable.
METODOLOGIA
L’avaluació heurística del lloc web s’ha realitzat per un sol avaluador. S’han intentat detectar els problemes més greus, ja que són aquests els que ens interessa incidir amb més rapidesa. En pròximes avaluacions s’analitzarà amb més detall per tal de detectar males pràctiques que no siguin tan importants a nivell d’usabilitat.
Per a l’avaluació heurística ens hem basat amb els 10 principis heurístics de Jakob Nielsen. De cada principi, s’ha buscat un bon i mal exemple. Dins dels mals exemples s’indica el grau de severitat d’aquest. Com que interessa fer incís en els problemes greus de la interfície, només s’ha indicat el grau de severitat dels mals exemples. Aquest mals exemples s’analitzaran a través de tres preguntes proposades per Nielsen:
1) La freqüència amb què el problema ocorre, és comú o poc freqüent?
2) L’impacte del problema quan succeeix, és fàcil o difícil de superar per als usuaris?
3) La persistència del problema, el problema es resol la primera vegada que s’usa el lloc web o apareix repetidament?
Per avaluar-ne la gravetat dels problemes d’usabilitat es basar en l’escala de qualificació també de Nielsen:
0 = no és un problema d’usabilitat
1 = problema sense importància: no és necessari solucionar-lo llevat que es disposi de temps en el projecte.
2 = problema d’usabilitat menor: problema de baixa prioritat
3 = problema d’usabilitat greu: problema d’alta prioritat.
4= catàstrofe: imprescindible solucionar-lo.
ELS 10 PRINCIPIS HEURÍSTICS DE JAKOB NIELSEN
1. VISIBILITAT DEL SISTEMA
Bon exemple ✓ En la passarel·la de compra quan s’està fent el procés de pagament, a l’esquerra, apareixen els 3 grans apartats que guien l’usuari durant el procés: Detalls de facturació, Informació adicional i Comproveu el pagament. D’aquesta manera l’usuari sap en tot moment on és, on està i a on pot anar.
Bon exemple de «Visibilitat de l’estat del sistema»
Mal exemple ✗ Quan l’usuari es troba en una secció concreta de la web, en el menú, es pot observar com es remarca de color blau l’apartat on es troba. Està ben pensat però està mal executat, ja que si l’usuari es troba dins del subapartat Esbart Marboleny, que es troba dins de l’apartat Cercle, només veurà que en el menú està marcat Cercle. I per veure el subapartat on es troba haurà de desplegar el menú i observar que es troba a dins de la secció en concret.
Mal exemple de «Visibilitat de l’estat del sistema»
Freqüència amb el que ocorre el problema: Sovint. Dificultat per superar el problema: Fàcil. El problema es resol la primera vegada que s’usa la web o apareix repetidament: Apareix repetidament.
Gravetat del problema d’usabilitat (de 0 a 4): 2. Problema d’usabilitat menor.
2. ADEQUACIÓ ENTRE EL SISTEMA I EL MÓN REAL
Bon exemple ✓
L’ús de les icones del carro de la compra i la lupa són molt bons exemples d’aquests principis. Els usuaris tenen interioritzats que el carro de la compra és una secció on es guardaran els productes que han comprat a la web, i per la seva banda, la lupa permet cercar informació arreu de la interfície.
Bon exemple de «Adequació entre el sistema i el món real»
Mal exemple ✗
Un mal exemple el trobaríem a la secció «Botiga» on a sota de cada producte hi ha l’opció «Afegeix a la cistella» (acompanyat d’una icona d’un carro de la compra) i l’opció «Detalls» on al costat té la icona del menú hamburguesa. Tot i les diferents opinions respecte a l’ús de la icona «menú hamburguesa» és un recurs molt il·lustratiu que l’usuari interpreta que si clica a sobre es desplegarà un menú. Però en aquest cas, no té sentit utilitzar aquesta icona perquè en primer lloc, no es desplegarà cap menú (s’obre una pàgina amb informació detallada del producte). I en segon, perquè no és un llenguatge que segueix les convencions del món real.
Mal exemple de «Adequació entre el sistema i el món real»
Freqüència amb el que ocorre el problema: Poc freqüent. Dificultat per superar el problema: Fàcil. El problema es resol la primera vegada que s’usa la web o apareix repetidament: Apareix repetidament.
Gravetat de problema d’usabilitat (de 0 a 4): 1. Problema sense importància: no és necessari solucionar-lo llevat que es disposi de temps en el projecte.
3. LLIBERTAT I CONTROL PER PART DE L’USUARI
Bon exemple ✓ Si l’usuari compra un producte de la «Botiga», automàticament s’obre la cistella on apareix una unitat del producte. En aquest apartat, l’usuari pot incrementar el nombre d’unitats del producte, disminuir o fins i tot eliminar el producte de la cistella. També té la opció de seguir comprant i pot afegir altres productes de la botiga.
Bon exemple de «Llibertat i control per part de l’usuari»
Mal exemple ✗
Quan l’usuari ha comprat diversos productes de la Botiga, si es troba navegant per alguna altra secció de la web que no sigui la cistella, quan passa el cursor per sobre de la cistella de la compra es desplega un resum dels productes que té guardats a la cistella. El problema és que no hi ha l’opció de treure els productes de la cistella des d’aquest desplegable. L’usuari està obligat a entrar dins de la cistella, i eliminar els productes des d’allà.
Mal exemple de «Llibertat i control per part de l’usuari»
Freqüència amb el que ocorre el problema: Poc freqüent. Dificultat per superar el problema: Fàcil. El problema es resol la primera vegada que s’usa la web o apareix repetidament: Apareix repetidament.
Gravetat de problema d’usabilitat (de 0 a 4): 3. És un problema d’usabilitat greu.
4. CONSISTÈNCIA I ESTÀNDARDS
Bon exemple ✓
L’ús de la lupa al costat del menú es considera una bona pràctica d’aquest principi. Els usuaris tenen interioritzat que aquesta icona permet cercar informació i a més, si es col·loca al costat del menú facilita la seva identificació i accés. També un bon ús d’aquest principi es pot observar amb la utilització de la «X» per tancar el cercador i tornar al menú original.
Bon exemple de «Consistència i estàndards»
Mal exemple ✗
En aquest cas, trobem un mal exemple de consistència i estàndards al menú de la web. Si l’usuari desplega l’apartat «Cercle», la primera secció que apareix és «L’entitat», i és el mateix el Cercle que l’Entitat. Per tant, són diferents paraules que signifiquen el mateix, i això l’usuari no ho ha de saber segons aquest principi, el que pot portar a confusió.
Mal exemple de «Consistència i estàndards»
Freqüència amb el que ocorre el problema: Poc freqüent. Dificultat per superar el problema: Fàcil. El problema es resol la primera vegada que s’usa la web o apareix repetidament: Apareix repetidament.
Gravetat de problema d’usabilitat (de 0 a 4): 2. És un problema d’usabilitat menor.
5. PREVENCIÓ D’ERRORS
Bon exemple ✓
Quan una persona es vol fer soci/sòcia de l’entitat ha d’emplenar un formulari. En aquest formulari es fa un bon ús del principi de prevenció d’errors, ja que, en tot moment s’informa l’usuari de l’obligatorietat dels camps (amb un asterisc vermell). A més, si l’usuari no fa cas d’aquestes indicacions i intenta passar a la següent pàgina del formulari apareix un text amb un signe d’exclamació a sota del camp requerint informant que «aquesta pregunta és obligatòria».
Bon exemple de «Prevenció d’errors»
Mal exemple ✗
En la pàgina del Cercle, on hi ha informació de les diferents seccions de l’Entitat, es mostren un seguit d’imatges que van passant en format carrusel. El problema és que quan es passa amb el cursor s’obre d’una imatge, aquesta li apareix un ombrejat i l’usuari pot entendre que la imatge es pot ampliar. El problema és que si clica no passa absolutament res.
Mal exemple de «Prevenció d’errors»
Freqüència amb el que ocorre el problema: Poc freqüent. Dificultat per superar el problema: Fàcil. El problema es resol la primera vegada que s’usa la web o apareix repetidament: Apareix repetidament.
Gravetat de problema d’usabilitat (de 0 a 4): 2. Problema d’usabilitat menor.
6. RECONEIXEMENT ABANS QUE RECORDAR
Bon exemple ✓
Perquè l’usuari reconegui un element és recomanable fer-ho a través de l’ús d’imatges. En aquest cas, l’ús de la cistella de la compra com a imatge per il·lustrar la secció on l’usuari va afegint productes que ha comprat és un bon exemple. A més, l’usuari quan afegeix productes a la cistella aquesta automàticament canvia el seu color de negre a blau (el color corporatiu de l’entitat). Això facilita la tasca de l’usuari si entra uns dies més tard i no ha finalitzat la compra, a que reconegui que té algun producte pendent de compra a dins de la cistella.
Bon exemple de «Reconeixement abans que record»
Mal exemple ✗ Tot i que aquest exemple que s’ha comentat, es considera un bon exemple, s’ha de millorar. La cistella apareix d’un color blau que costa diferenciar del negre (hi ha poc contrast). A més, l’usuari està obligat a passar el cursor per sobre la icona per tal de veure els elements que hi ha dins. I, a sobre, s’obliga l’usuari a entrar dins la cistella per tal de poder editar o finalitzar la compra.
Mal exemple de «Reconeixement abans que record»
Freqüència amb el que ocorre el problema: Poc freqüent. Dificultat per superar el problema: Fàcil El problema es resol la primera vegada que s’usa la web o apareix repetidament: Apareix repetidament.
Gravetat de problema d’usabilitat (de 0 a 4): 2. És un problema d’usabilitat menor.
7. FLEXIBILITAT I EFICIÈNCIA EN L’ÚS
Bon exemple ✓
Un bon exemple d’aquest principi és que, en la secció contacte, on apareixen les dades de contacte (telèfon i mail) un usuari expert pot passar el cursor per sobre i observarà que és enllaçable. Si hi clica, en el cas del correu electrònic se li obrirà el gestor de correu electrònic per defecte i podrà escriure un correu automàticament. En el cas del telèfon, també s’obrirà l’aplicació per defecte per realitzar trucades (per exemple FaceTime). És cert que en aquesta pàgina també surt un mapa i l’adreça. Seria interessant aplicar aquesta mateixa «drecera» i quan l’usuari clica a sobre de l’adreça se li obre el Google Maps (I després aquest ja li permet com arribar, etc.).
Bon exemple de «Flexibilitat i eficiència en l’ús»
Mal exemple ✗
Aquest principi es basa que els usuaris experts han de poder interactuar més ràpidament amb la plataforma, sense que els usuaris sense tanta experiència els afecti. Doncs bé, en aquest cas el cercador és un mal exemple d’aquest principi. Els usuaris han de seleccionar la lupa i a continuació escriure el que volen buscar a la web. El problema és que no apareix un desplegable, a mesura que va escrivint, amb els resultats de cerca, millorant així l’eficiència en l’ús del cercador. El que significa que els resultats poden ser molt dispersos i l’usuari ha de perdre temps buscant, que és el que passa en aquest cas.
Mal exemple de «Flexibilitat i eficiència en l’ús»
Freqüència amb el que ocorre el problema: Poc freqüent. Dificultat per superar el problema: Difícil. El problema es resol la primera vegada que s’usa la web o apareix repetidament: Apareix repetidament.
Gravetat de problema d’usabilitat (de 0 a 4): 3. Problema d’usabilitat greu.
8. DISSENY ESTÈTIC I MINIMALISTA
Bon exemple ✓
La pàgina d’inici de Marboleny compleix amb l’heurística de disseny estètic i minimalista. Ja que només d’entrar, l’usuari pot observar com la informació està ordenada i permet a l’usuari accedir a la majoria de les seccions de la web, independentment de les seves necessitats (buscar informació de l’entitat, veure els espectacles disponibles de l’Esbart, fer-se soci/sòcia, voluntari/ària, contactar…
Bon exemple de «Disseny estètic i minimalista»
Mal exemple ✗
A la secció Notícies no es destaca cap notícia i es dona la mateixa importància a tot el contingut. D’aquesta manera l’usuari no sap quina és la última notícia que s’ha publicat ni quines notícies són més antigues.
Mal exemple de «Disseny estètic i minimalista»
Freqüència amb el que ocorre el problema: Poc sovint. Dificultat per superar el problema: Fàcil. El problema es resol la primera vegada que s’usa la web o apareix repetidament: Apareix repetidament.
Gravetat de problema d’usabilitat (de 0 a 4): 3. És un problema d’usabilitat greu.
9. AJUDA ELS USUARIS A RECONÈIXER, DIAGNOSTICAR ELS ERRORS, I RECUPERAR-SE’N
Bon exemple ✓
Un bon exemple d’aquest principi l’hem trobat quan l’usuari intenta realitzar el procés de compra. En la part on s’han d’afegir les dades de facturació, l’usuari està obligat a escriure el seu correu electrònic. Doncs bé, si l’usuari no l’escriu correctament (acabat en @gmail.com, @yahoo.es, etc.) no el deixa prosseguir en el procés de compra i l’informa que «si us plau, introduïu correctament els detalls en aquest camp obligatori.».
Bon exemple de «ajuda els usuaris a reconèixer, diagnosticar els errors, i recuperar-se’n»
Mal exemple ✗
Un mal exemple d’aquesta pàgina el trobem, per exemple, a la secció de Transparència/Pressupostos. Si l’usuari desitja veure els pressupostos de l’any anterior, I selecciona a sobre del document, en lloc d’obrir-se el pressupost s’obre una pàgina amb el típic error 404 acompanyat del text «ups, aquesta pàgina no s’ha trobat». L’usuari observa que la pàgina no s’ha trobat, però no sap com ho pot solucionar i si realment aquest error és per culpa seva.
Mal exemple de «ajuda els usuaris a reconèixer, diagnosticar els errors, i recuperar-se’n»
Freqüència amb el que ocorre el problema: Sovint. Dificultat per superar el problema: Difícil. El problema es resol la primera vegada que s’usa la web o apareix repetidament: Apareix repetidament.
Gravetat de problema d’usabilitat (de 0 a 4): 2. És un problema d’usabilitat menor.
10. AJUDA I DOCUMENTACIÓ
Bon exemple ✓ No s’ha detectat cap bon exemple d’aquest principi.
Mal exemple ✗ En la web del Cercle de Cultura Tradicional i Popular Marboleny no s’ha detectat el principi d’ajuda i documentació en cap moment. Per tant no es pot aportar un bon o mal exemple. De totes maneres, com a avaluador vull pensar que des de l’entitat s’ha cregut suficient que, en cas que l’usuari necessiti ajuda, en tot moment està present les dades de contacte (tant al menú com al footer) per tal que si es presenta algun problema l’usuari es pugui posar en contacte ràpidament amb el personal de l’entitat. Per tant, aquesta pràctica es catalogarà com un mal exemple perquè tot i que la web es pot utilitzar sense ajuda, és recomanable fer-ho.
Mal exemple de «Ajuda i documentació»
Freqüència amb el que ocorre el problema: Sovint. Dificultat per superar el problema: Fàcil. El problema es resol la primera vegada que s’usa la web o apareix repetidament: Apareix repetidament.
Gravetat de problema d’usabilitat (de 0 a 4): 1. És un problema sense importància.
LLISTAT PRIORITZAT SEGONS GRAVETAT
A continuació es detallen les troballes més greus i es fa una proposta de solució:
1. LLIBERTAT I CONTROL PER PART DE L’USUARI
Es tracta d’un problema d’usabilitat greu perquè és essencial que l’usuari tingui llibertat per modificar la cistella de la compra independentment de la secció de la web que es trobi. Ja que d’aquesta manera, s’obliga a l’usuari a sortir d’una pàgina en concret per entrar a dins la cistella per modificar-ne el contingut.
Proposta de millora Afegir els corresponents botons per modificar la quantitat de productes de la cistella des del desplegable i a més, una creu per permetre la possibilitat d’eliminar productes.
2. FLEXIBILITAT I EFICIÈNCIA EN L’ÚS
Trobar el contingut en una interfície web és essencial. I en aquesta és una tasca realment difícil, ja que no només no es guia a l’usuari per a buscar un concepte específic, sinó que a sobre se li ofereixen desenes de resultats que no tenen res a veure amb la cerca inicial.
Proposta de millora Facilitar la cerca als usuaris mitjançant menús desplegables a mida que va escrivint el concepte que vol buscar.
3. DISSENY ESTÈTIC I MINIMALISTA
La secció notícies oblida completament aquest principi i és greu. Els usuaris que es volen informar de l’actualitat de l’Entitat accedeixen a la secció però no saben quina és la última notícia que s’ha publicat. No s’ordena la informació i tot té la mateixa importància.
Proposta de millora Crear un slide a la part superior on aparegui la última notícia destacada i també seria interessant ordenar les altres notícies per ordre de publicació.
4. VISIBILITAT DEL SISTEMA
És un problema d’usabilitat menor perquè es tracta d’un menú amb pocs nivells, és a dir, l’usuari com a molt s’endinsarà en 1 subapartat (Per exemple: Cercle/Esbart Marboleny, i dins de l’Esbart Marboleny no es dirigeix a l’usuari a una altra pàgina en un nivell inferior. Tot i que seria interessant solucionar-ho, ja que a la llarga es pot reestructurar el contingut de la interfície i pot esdevenir un problema d’usabilitat major.
Proposta de millora Per solucionar-ho es podria afegir la ruta que ha seguit l’usuari a la part superior esquerra de la pàgina perquè l’usuari sàpiga en tot moment on és, d’on ve i a on pot anar (breadcrumbs). A més, la ruta podria ser enllaçable, amb la qual cosa per tirar enrera només hauria de fer clic sobre de la secció desitjada.
5. RECONEIXEMENT ABANS QUE RECORDAR
És un problema menor, però s’ha de solucionar. Quan l’usuari està en una secció del menú, aquest, canvia de color destacant la secció on es troba. Això ho fa canviant de color (fons blau i lletres blanques), però en el cas de la cistella només canvia el color de la icona, i no el color del fons, d’aquesta manera dificulta la seva identificació.
Proposta de millora La solució és simple, aplicar el mateix efecte que en les altres seccions. A més també es recomana habilitar les opcions d’incrementar o reduir quantitat i eliminar producte, al quadre de diàleg de la botiga.
6. AJUDA ELS USUARIS A RECONÈIXER, DIAGNOSTICAR ELS ERRORS, I RECUPERAR-SE’N
Es considera un problema d’usabilitat menor perquè l’usuari observa que és un error, però no sap com solucionar-lo. A més, no només surt l’error sinó que al costat hi ha «enllaços útils» que són les diferents seccions del menú i un cercador, on, si l’usuari escriu pressupostos li dona com a resultat la mateixa pàgina on prèviament ha anat l’usuari, ha seleccionat el pressupost desitjat i li ha portat a l’error.
Proposta de millora Informar que l’enllaç està malament i que és un problema de Marboleny (no només que la pàgina no s’ha trobat), i permetre l’opció de posar-se en contacte amb l’entitat. Eliminar el cercador, ja que no aporta res, i habilitar un botó per tornar enrera.
7. PREVENCIÓ D’ERRORS
Es considera un problema d’usabilitat menor perquè els usuaris que naveguen per la interfície els interessa veure quines persones formen part de l’Entitat i quins balls fan. Per aquest motiu, necessiten ampliar les imatges. I a més, si a les imatges se li apliquen filtres que poden portar a confusió per part dels usuaris, el problema es complica.
Proposta de millora La solució seria permetre ampliar les imatges o bé eliminar l’efecte quan el cursor passa per sobre d’una imatge, així s’evitaria la confusió.
8. CONSISTÈNCIA I ESTÀNDARDS
L’usuari pot navegar sense problema per la plataforma però és interessant no confondre’l amb diferents conceptes que es refereixen al mateix.
Proposta de millora La solució proposada seria substituir el concepte de «Entitat» per «Nosaltres». D’aquesta manera no s’afegeix un nou concepte i per una banda trobem el Cercle (que vindria a ser el diminutiu de Cercle de Cultura Tradicional i Popular Marboleny) i per altra el Nosaltres (que és el pronom personal per referir-se al Cercle).
9. AJUDA I DOCUMENTACIÓ
Es considera un problema sense importància perquè es tracta d’una web senzilla i el contingut està a l’abast. De totes maneres, no deixa de ser un problema i es recomana solucionar-lo.
Proposta de millora Tot i que la web és una interfície fàcil d’usar, es pot ajudar a l’usuari incorporant una secció de FAQs o afegint una icona d’interrogant a la secció de Botiga per permetre a l’usuari clicar-hi i poder-li oferir ajuda.
10. ADEQUACIÓ ENTRE EL SISTEMA I EL MÓN REAL
És un problema sense importància perquè ja hi ha el text que reforça el missatge, però seria interessant canviar la icona per tal de facilitar la identificació per part de l’usuari.
Proposta de millora Hauria estat més encertat afegir la icona d’un document i el text, enlloc de «Detalls», que fos «Llegeix més» o «Més informació». O simplement obviar aquest botó i afegir algun efecte a la casella del producte quan es passa per sobre per tal de mostrar que és clicable. Per exemple afegir un efecte hover quan es passa per sobre el producte que tot el «bloc» li aparegui un sombrejat o algun altre efecte.
BIBLIOGRAFIA
PÀGINES WEB
Nielsen Norman Group. (2023). 10 Usability Heuristics for User Interface Design. https://www.nngroup.com/articles/ten-usability-heuristics/
RECURSOS D’APRENENTATGE UOC
Design Toolkit: Avaluació heurística. [recurs d’aprenentatge textual]. Fundació Universitat Oberta de Catalunya (FUOC).
Membrives, J. [Judith]. (2019). Quadern d’avaluació de la usabilitat. [recurs d’aprenentatge textual]. Fundació Universitat Oberta de Catalunya (FUOC).
Zapata, M. [Mònica]. Mètodes d’avaluació sense usuaris. [recurs d’aprenentatge textual]. Fundació Universitat Oberta de Catalunya (FUOC).
¿Eres parte de la comunidad? Accede para ver más publicaciones.
Este es un espacio de trabajo personal de un/a estudiante de la Universitat Oberta de Catalunya. Cualquier contenido publicado en este espacio es responsabilidad de su autor/a.
Este es un espacio de trabajo personal de un/a estudiante de la Universitat Oberta de Catalunya. Cualquier contenido publicado en este espacio es responsabilidad de su autor/a.
Debatecontribution 0en Evaluación Heurística IBM Docs
No hay comentarios.
Lo siento, debes estar conectado para publicar un comentario.