En esta pec, como todos sabéis, se trataba de realizar una página web para comprimir imágenes. Dicha web tenía que poder visualizarse en un navegador ya sea de escritorio como de smartphone. En mi caso, decidí realizarla como parte de Webflow, pero siendo una marca que nace en webflow no que crece siendo igual que ella. Por este motivo, aún utilizando una identidad corporativa similar, se crea un logotipo para ella y una versión beta de página web.
Buscaba crear una página minimalista, con un estilo diferente a todas las demás que permiten comprimir imágenes y que fuera muy simple para que así, cualquier usuario pueda utilizarla sin ningún problema.
A continuación os dejo el link a mi proyecto de figma en el cual podéis ver tanto la guía como los prototipos: Compresflow en Figma
Casa del Libro: ¿Cumple los principios de Nielsen?
Como todos sabemos, no siempre que revisamos las páginas web cumplen los principios de usabilidad y a veces hasta es complicado navegar por ellas. En este post hemos decidido analizar una web e-commerce de libros: Casa del Libro, la más utilizada en España (después de Amazon claro) . Sin más dilación, comenzamos el análisis 🙂
Introducción:
A lo largo de este post se va a llevar a cabo un análisis heurístico de la página web «La casa del libro» en versión escritorio. He seleccionado está web ya que se dedica a vender un producto y es importante que la usabilidad y accesibilidad sea la más adecuada para los usuarios. Si en una página de ventas no se cumple como mínimo más de la mitad del listado heurístico de Jakob Nielsen, en mi opinión, puede considerarse que tiene un problema y que debe de solventarlo lo más rápido posible.
Metodología:
La metodología de trabajo para llevar a cabo este análisis, consta de los pasos de: preparación, ejecución y evaluación.
Fuente GIF: Giphy
Preparación:
En este punto tendremos muy claro que vamos a analizar un sector de ventas, cuyas convenciones son que pueda realizarse la compra y tener determinados iconos que representen: «identificarse», «cesta o carrito», botón de buscar, botón de comprar y todo el proceso de realidad el pedido. Partiendo de esta información, realizaremos una serie de preguntas sobre todos los principios heurísticos (también conocido como definir las subheurísticas). Las preguntas podrán ser respondidas con una escala numérica del 0 al 10 (siendo 10 la puntuación más alta).
A continuación, dejo reflejadas cuales son las preguntas de evaluación que he tenido en cuenta para este proyecto:
¿El usuario comprende su posición en el estado actual en la web?
¿El flujo en la web es evidente para el usuario?
¿Se utiliza un idioma claro y consistente en toda la web?
¿Es la tipografía óptima para su lectura?
¿Los textos situados sobre fondo de color pueden leerse de un modo correcto?
¿La página web permite revertir los cambios?
¿Proporciona una fácil reversión de acciones?
¿Los iconos/símbolos cumplen las normal habituales de una e-commerce?
¿Existen símbolos similares que representan múltiples acciones?
¿Se avisa al usuario a la hora de rellenar campos en un formulario de la falta de información?
¿Se reduce la información en texto combinándola con símbolos?
¿Permite el sistema personalizar acciones frecuentes?
¿Existe una jerarquía de la información y la estructura del contenido están organizadas con claridad?
¿Los usuarios pueden reconocer, diagnosticar y recuperarse de los errores?
¿Existe ayuda y soporte disponible para los usuarios?
Ejecución:
Con el checklist sobre la mesa y la página web en el monitor se lleva a cabo una inspección de la interfaz y se comienza a cubrir dicho cuestionario.
Evaluación:
Por último, ya con el checklist acabado y viendo cuales tienen las puntuaciones más bajas, se debe de valorar el grado de severidad. En este caso , dado que es un tema subjetivo, se valorará del modo que Nielsen lo recomienda, a través de tres medidas:
Frecuencia con la que el problema ocurre, indicar y ver si es algo poco o muy común.
El impacto que tiene el problema en los usuarios cuando sucede.
Si el problema persiste en el tiempo, es decir, solo pasa la primera vez que se usa la web o aparece continuamente.
Con estos tres pasos (preparación, ejecución y evaluación) pasamos a analizar los principios heurísticos de la página web en cuestión.
Los 10 principios heurísticos de Nielsen:
A continuación, expondremos los 10 principios, indicando un ejemplo de si se cumple o no, todo esto puede llevarse a cabo gracias a la creación de la metodología anteriormente expuesta.
Visibilidad del estado del sistema: (Mala práctica)
En este punto el sistema debe mantener informados a los usuarios mediante la retroalimentación adecuada. Después de revisar toda la página web considero que en este punto el usuario no siempre está informado de donde se encuentra. Mientras que a la hora de realizar el proceso de compra si lo realizan de un modo adecuado, a la hora de «pasear» por la tienda es muy difícil no perderse. En la imagen que se muestra a continuación se muestra una imagen en la cual vemos que existe un breadcrumb (marcado con elipse roja) en el cual nos indica que estamos en los «más buscados» y una casa para poder ir al inicio, sin embargo no nos permite las opciones intermedias de como hemos llegado ahí.
Búsqueda de libros más buscados. Fuente: Elaboración propia.
Si nos fijamos en la siguiente imagen, para llegar a los «Libros más buscados» hemos tenido que entrar en el menú en «Recomendados» y dentro de él en «Libros de actualidad» y dentro encontrar los «Más buscados».
Submenú superior.Fuente: Elaboración propia.
Fuente GIF: Giphy
Principio 1 de Nielsen no cumplido: Improvement is needed!!!!
Fuente GIF: Giphy
Por este motivo considero que no cumple en su totalidad el primer principio y en este caso se podría solucionar con un es breadcrumb más largo: «Icono de casa > Recomendados > Libros de actualidad > Libros más vendidos»
Principio 1 : Easy solution!!!!
Adecuación entre el sistema y el mundo real: (Buena práctica)
Para que esto se cumpla el sistema debe hablar el idioma de los usuarios y que sea fácilmente comprensible. Por lo tanto debe seguir las convenciones del mundo real. En toda la página se ve un lenguaje claro y conciso, preparado para el perfil de público objetivo que navega por la web. Además de eso se muestra de un modo claro los precios, el envío y las oportunidades de hacerte socio.
Texto e imágenes. Fuente: Elaboración propia.
Fuente GIF: Giphy
Principio 2 de Nielsen cumplido: Well done!!!!
Libertad y control por parte de la persona usuaria: (Buena práctica)
En este caso se tiene en cuenta que es normal cometer errores y por ello, los usuarios necesitan «salidas de emergencia» para salir de un estado no deseado. Analizando la página y teniendo en cuenta que es una e-commerce lo más importante es que el usuario tenga una salida a la hora de realizar la compra, ya que esta puede ser una compra no deseada. Mostramos a continuación un ejemplo, el usuario se encuentra paseando por la web en busca de un libro, sin quererlo le da a «Añadir a la cesta» y de repente le salta el pop-up lateral con el pedido para «Ir a pagar». En este punto el usuario puede darle a la «X» de cerrar y olvidar el tema sin tener porque pagar, sin embargo el libro permanecerá en la cesta para ser pagado y esto resulta muy molesto para muchos usuarios. Por ello basándonos en la siguiente captura obtenemos una solución rápida.
Cuando se añade un libro a la cesta de la compra. Fuente: Elaboración propia.
Si el usuario, se ha equivocado o cambiado de opinión, solo tiene que darle al símbolo » – » que se encuentra al lado del contador de unidades. Realizado esto el libro es eliminado de la compra y la página web se actualiza con la siguiente imagen:
Eliminamos el libro. Fuente: Elaboración propia.
Fuente GIF: Giphy
Por lo tanto, considero que si cumple este principio de Nielsen y que ayuda al usuario a tener un modo de salir de un error cometido.
Principio 3 de Nielsen cumplido: Well done!!!!
Consistencia y estándares: (Mala práctica)
En este caso se valora que los usuarios no necesiten tener que preguntarse si diferentes palabras, situaciones o acciones significan lo mismo. Es necesario que siga las convenciones lógicas de plataformas de estilo e-commerce. Si nos fijamos en la parte superior del la página vemos dos opciones que además están muy juntas: «Alta Socio» y «Identifícate». Estas dos opciones, aunque su icono sea diferente, causan confusión ya que a simple vista es complicado entender la diferencia entre ambas.
Fuente GIF: Giphy
Principio 4 de Nielsen no cumplido: Improvement is needed!!!!
Fuente GIF: Giphy
Una posible solución sería dejar en el menú superior el botón de «Identifícate» y crear una sección en la zona del menú de «¿Quieres ser socio?». Al hacer click en ese botón, se explicarán las diferencias entre ambos casos y no se mezclarán de un modo tan fácil.
Principio 4 : Easy solution!!!!
Prevención de errores:
Es necesario evitar que ocurran problemas en primer lugar, o verificarlos y presentarle a los usuarios una opción de confirmación antes de que se comprometan con la acción. Esto es algo habitual que suceda en los formularios. En este caso después de revisar toda la web vamos a analizar un formulario de subscripción al club de la Casa del Libro.
Hacerse socio. Fuente: Elaboración propia.
Para comenzar como se muestra en la imagen superior, si le das a cada campo y no pones nada, ya te indican que es obligatorio y que para poder ser socio debes de cubrirlos. En el caso de crear la cuenta en Casa del Libro si cubres todos los campos pero no marcas las opciones de «He leído y acepto la política de privacidad …», te lo marcan en rojo para que así veas que hasta que marques la casilla no se llevará a cabo la finalización del proceso, tal y como se muestra en la imagen inferior.
Crear cuenta en Casa del Libro. Fuente: Elaboración propia.
Fuente GIF: Giphy
Sin duda, ver que en todos los formularios evitan que el usuario cometa errores, marcando en cada caso la información necesaria en otro color y de un modo más relevante, hace que los ayude a no tener que realizar el mismo proceso varias veces. Simplifica la vida del usuario, por lo tanto:
Principio 5 de Nielsen cumplido: Well done!!!!
Reconocimiento antes que recuerdo: (Mala práctica)
Hay que minimizar la carga de memoria haciendo visibles los objetos, las acciones y las opciones. En este caso llevamos a cabo una búsqueda por autora, en el momento de realizar la búsqueda la página cambia. Vemos como podemos buscar y filtrar (imagen inferior).
Utilización de buscador. Fuente: Elaboración propia.
Utilizar buscador con filtros. Fuente: Elaboración propia.
A la hora de filtrar si marcamos el formato libro nos salen dos ejemplo que tienen de esa autora. El problema viene cuando haces click encima de uno de ellos. Pasas a la página del libro y no se muestra todo este filtrado. Al no mostrar el filtrado haces que el usuario tenga que recordar que filtro ha marcado y si quieres volver atrás o le da al botón de atrás en el buscador o vuelve a realizar la búsqueda.
Sin filtro para volver a escoger. Fuente: Elaboración propia.
Fuente GIF: Giphy
Por lo tanto, el principio 6 de Nielsen no se cumple en está página.
Principio 6 de Nielsen no cumplido: Improvement is needed!!!!
Fuente GIF: Giphy
Pero existe una solución, solo tienen que añadir el mismo listado de filtros de la página de búsqueda en las páginas de los libros.
Principio 6 : Easy solution!!!!
Flexibilidad y eficiencia en el uso: (Mala práctica)
Es la posibilidad de personalizar acciones frecuentes para aquellos usuarios que no son novatos o ya están acostumbrados a entrar en esta página web. En este caso, no se da ningún tipo de método para personalizar. Si es posible, si tienes un perfil de usuario creado en la Casa del Libro, ver tus compras, pedidos etc. pero no lo considero suficiente. Si buscamos ejemplos como crear una cuenta y que salga un tutorial de modo de entender el sitio personal, tampoco ocurre ni sale el botón de «Saltar». Tampoco existen vídeos que empiecen solos ya que no hay vídeos.
Fuente GIF: Giphy
Con toda está información vemos que este principio no existe en la página
Principio 7 de Nielsen no cumplido: Improvement is needed!!!!
Fuente GIF: Giphy
Podemos crear un tour para explicar como funciona ser socio y que diferencias existe entre eso y tener una cuenta. Con esto vamos a permitir que al incluir un botón de «Saltar» los usuarios que ya son socios puedan saltarlo y continuar su flujo, mientras que aquellos usuarios novatos pueden verlo para entender como funciona. También sería buena idea, incluir vídeos y menos texto para explicar mejor determinadas páginas y que sea más interactivo. Al poner estos vídeos, el usuario tendrá que darle al play si quiere verlos.
Principio 7 : Easy solution!!!!
Diseño estético y minimalista: (Mala práctica)
Que la información importante sea la que de verdad llame la atención y los textos no deben contener información que sea irrelevante o que no sea necesaria para el usuario. La web es demasiado densa, es comprensible que existe una gran cantidad de géneros literarios y de libros pero también, si entras en la home, verás que es muy larga y a veces se hace aburrido llegar hasta el final. Como vemos en las dos imágenes a continuación, el submenú es enorme (y eso solo marcando en el menú «Recomendados»). Y en el caso de las temáticas (ejemplo de la segunda captura) está muy bien comenzar con símbolo y texto pero en el momentos en el que pulsas el botón de más temáticas, puedes volverte loco.
Submenú de Recomendados. Fuente: Elaboración propia.
Temáticas. Fuente: Elaboración propia.
Fuente GIF: Giphy
Principio 8 de Nielsen no cumplido: Improvement is needed!!!!
Fuente GIF: Giphy
Pero existe una solución y en este caso la solución lleva más trabajo de lo esperado. Es necesario restructurar la página web. revisar que información es importante y como presentarla, de este modo incluso el número de usuarios y de ventas aumentará. Revisar el menú, poner muchas menos opciones y no hacer que los clientes se vuelvan «pollos sin cabeza» buscando lo que quieren.
Principio 8 : Heavy workload solution!!!!
Ayuda a las personas usuarias a reconocer y diagnosticar los errores y a recuperarse: (Buena práctica)
Es muy importante que cuando sale un mensaje de error, este se exprese en un lenguaje sencillo y nos indique cual es el problema y nos sugiera una solución que el usuario pueda entender y llevar a cabo. En el caso de la Casa del Libro si entramos en una página que nos da error, el lenguaje es claro y el usuario puede entender perfectamente lo que dice y le ofrecen una solución para ello. Lo vemos en esta captura infererior:
Mensaje 404. Fuente: Elaboración propia.
Fuente GIF: Giphy
Por lo tanto, podemos decir orgullosos, que SI. La Casa del Libro cumple con este principio.
Principio 9 de Nielsen cumplido: Well done!!!!
Ayuda y documentación: (Buena práctica)
Siempre es necesario que en una página web cuente con zonas de ayuda o de soporte, para que en caso de que el usuario lo necesite pueda visitarla, buscar su problema y solventarlo fácilmente. En este caso, hay un enlace en la parte superior que pone «Ayuda». Al darle click aparece una página en la cual nos indican diversas opciones de ayuda para las consultas más habituales y por otro lado también ponen preguntas frecuentes o la opción de escribir uno mismo arriba el motivo de consulta. Sin embargo, no solo eso, en el final de la página vemos un botón de «Contactar». A través de él puedes consultar todas tus dudas.
Página de ayuda. Fuente: Elaboración propia.
Fuente GIF: Giphy
Desde luego en este punto, la Casa del Libro, lo ha cumplido dando lo mejor de si misma así que…
Principio 10 de Nielsen cumplido: Well done!!!!
Listado priorizado según gravedad:
Como hemos visto arriba, no se cumplen cinco principios de Nielsen. A continuación vamos a ordenarlos de mayor a menor gravedad:
Exceso de información en la página web (Principio 8) -> Puntuación de gravedad 10
Sin duda estar en una página en la cual hay un exceso de información hace que el cerebro de cualquier usuario explote y acabe escapando, por lo tanto no es bueno para una tienda de venta.
Visibilidad del estado en el que se encuentra el usuario (Principio 1) -> Puntuación de gravedad 7
Estar en una web y empiezas a navegar por ella, recuerdas un libro que viste perooo… ¿Dónde? Buf!! Gracias navegador por tener la flecha de ir hacia atrás sino …. vaya página de compras con posicionamiento de donde estoy, si he ido avanzando por links… Si, eso es lo que pensará el usuario, es grave pero cualquier navegador puede arreglarlo.
Reconocimiento antes que recuerdo, la zona de filtros y búsqueda (Principio 6) -> Puntuación de gravedad 6
No tener los filtros a la vista cuando tomas una decisión de libro es malo si quieres volver atrás en el filtro marcado, sobre todo cuando hablamos de una página de ventas.
Posible confusión entre dos iconos y palabras similares (Principio 4) -> Puntuación de gravedad 4
En este caso con un poco de investigación en la página el usuario puedo ver la diferencia entre estos dos iconos nombrados anteriormente. Sin embargo es algo que se recomienda arreglar.
No contar con personalización de acciones frecuentes (Principio 7) -> Puntuación de gravedad 3
No es una web que necesite mucha personalización, se echa de menos y puede solucionarse pero no es algo que tenga una gran gravedad.
Madroño, Tomàs. Metodologías de UX: Evaluación Heurística (PARTE I) [en línea]. Medium. [fecha de consulta: 20 de octubre de 2021]. Disponible en: Link
Giphy [en línea] [fecha de consulta: 20 de octubre de 2021]. Disponible en: https://giphy.com/
Casa del LIbro [en línea] [fecha de consulta: 20 de octubre de 2021]. Disponible en: Link
Pública 
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.