Esta semana mostraremos cómo evaluar una interfaz bajo una de las herramientas de inspección de la usabilidad, junto al ‘Test con usuarios’, más usadas en el campo de la Experiencia de Usuarios: la Evaluación Heurística. Para que resulte intuitivo, acompañaremos el post con un análisis detallado del proceso de compra en uno de los e-commerce de impresión online más completos del sector: OnlinePrinters.es .

¿Quién es OnlinePrinters.es?

Cuando el tiempo es limitado, es probable que al centrarte en acabar uno de tus proyectos offline olvidases que tenías que imprimirlo para su entrega antes de que llegase el fin de semana. Llegados a este punto, probablemente busques en Google imprentas con acabados de nivel y que trabajen bajo mínimos, o incluso 24h.

Aquí es donde aparecen los profesionales de Online Printer, una imprenta profesional online que ofrece sus servicios para transferir tu imagen a cualquier formato imaginable (flyer, cartel, merchandising, stand, textiles y mucho más), con servicio 24h de profesionales en el sector.

La clave de su interfaz web es que en un primer contacto empiezas a comprobar que se ha planteado la problemática de sus personas usuarias y se enfoca en solucionarla. Su simplicidad y sobriedad visual hace que configures tus impresiones a gran escala en sencillos pasos y con las customizaciones necesarias para conseguir un buen acabado.

Además, parece interesante su mirada ecológica donde pone en valor productos alternativos que reducen la emisión de CO2 o, simplemente, soportes ecológicos que ofrecen en su catálogo y que están fabricados con materiales sostenibles.

¿Será esta la mejor opción para incluir en tu pantonera de imprentas?

Metodología

Para llevar a cabo el análisis de la interfaz, utilizaremos la herramienta ya mencionada anteriormente como «Evaluación Heurística». En primer lugar, definiremos las heurísticas bajo los «Principios Heurísticos de Nielsen» que probablemente se traten de los más utilizados a nivel popular para este tipo de evaluaciones gracias a su aceptación profesional. Además, añadiremos un principio más en la lista titulado «Perspectiva de género e inclusión».

A continuación, configuraremos un Checklist de subheurísticas que nos permitan indicar de manera sencilla si la interfaz cumple con los requisitos mínimos de usabilidad para, posteriormente, evaluar cuantitativa y/o cualitativamente los resultados. Para la evaluación cuantitativa generaremos un listado de los hallazgos priorizados según su gravedad respecto a la experiencia de usuarios.

Por último, generaremos una posible solución de cada uno de los puntos de estos listados con los que la interfaz en cuestión podría mejorar su usabilidad.

Análisis Heurístico

Para el análisis heurístico se ha utilizado una plantilla creada mediante la herramienta Figma donde se detallan los diferentes puntos de la checklist tenidos en cuenta durante el proceso para medir de una forma más exacta la gravedad de los problemas encontrados durante la evaluación. Para consultarla puedes acceder desde aquí (recomendado).

#1 Visibilidad del estado del sistema

La visibilidad del estado del sistema es uno de los puntos fuertes del e-commerce en cuestión. Han sabido defenderse especialmente en la página de producto.

Buenas prácticas:

• Utiliza un sistema de miga de pan en la página de producto para que el usuario sepa dónde se encuentra en cada momento. También utiliza un recurso detallado de steps dentro de la pasarela de pago para que el usuario esté informado de los pasos que debe dar antes de finalizar.
• Durante la finalización de cada step en el proceso de compra existe un feedback del sistema mediante popups que te resume los detalles que completaste o simplemente te informa de que no hubo errores.
• Además, el tiempo de respuestas en estas retroalimentaciones son breves lo que permite al usuario sentirse informado en todo momento del estado del sistema

Malas prácticas:

• Dentro del menú no se aprecia ninguna diferenciación en la categoría y/o producto donde se encuentra el usuario, lo que puede llegar a confundir a la persona usuaria cuando intente navegar por él, por ejemplo, con el fin de encontrar otro elemento interesante en la misma categoría.

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

El uso de plantillas en las pasarelas de pago, a veces, puede verse afectada en el déficit de adecuación al mundo real del usuario. Este, ha sido uno de los problemas que ha sufrido la interfaz de Online Printers.

Buenas prácticas:

• Los iconos utilizados en la interfaz están resueltos de manera sencilla para la comprensión de los usuarios novels.

Malas prácticas:

• Los iconos que representan plegados y formatos especiales pueden llegar a confundir a los usuarios ya que no se especifica si se refiere al tamaño plegado o sin plegar.
• No existe ninguna metáfora que ayude al usuario a identificar el e-commerce como un servicio de imprenta. De hecho, los botones llevan mensajes estándar como «Añadir a la cesta» cuando en imprenta se suele utilizar el concepto de «Enviar a producción» o «Añadir a la cola de impresión».

#3 Control y libertad del usuario

Este es, sin duda, la heurística sobresaliente del sistema por el que puede quizás ser un punto por el que destaque frente a los sitios webs de la competencia.

Buenas prácticas:

• La persona usuaria tiene libertad de actuación durante todo el proceso de compra, sin restricciones.
• El sitio web dispone de un personalizador de productos online, que de normal suele tener ventanas que entorpecen las acciones o coartan la libertad de los usuarios. Sin embargo, este no es el caso pues se adecua a las necesidades mínimas para gestionar un proceso infalible.

Malas prácticas:

• No existen apenas pegas, pero si hubiese que buscar alguna razón para mejorar el sistema sería la libertad del usuario al colocar elementos en el diseño mediante un canvas con libertad de posicionamiento sin limitar sus coordenadas.

#4 Consistencia y estándares

Llegados a este punto, he de decir, que la primera impresión del sitio web puede confundir. Una vez vas mirando los detalles, existen muchas inconsistencia que pueden llegar a confundir a los usuarios.

Buenas prácticas:

• Es cierto que siguen unos patrones genéricos en los elementos que hacen suponer que existe una guía de estilos.

Malas prácticas:

• No existe un a ubicación de los elementos coherente dentro de la página del producto donde puedes encontrar sidebars  que no tienen ninguna referencia ni relación con el contenido más inmediato de la estructura central. Los datos de envío se mezclan con demasiados datos que no se explican claramente.
• Utilizan iconografías procedentes de familias diferentes dentro de una misma sección: algunos con elementos simples y otros demasiados sobrecargados de información.
• No existen animaciones que ayuden a las personas usuarias a comprender los elementos del sitio web.

#5 Prevención de errores

Online Printers intenta evitar los problemas que puedan ocurrir durante el proceso de compra recurriendo al Help Center como elemento central.

Buenas prácticas:

• Cuando ocurren errores en el sistema suelen aparecer feedbacks  con indicaciones claras y concisas que ayudan al usuario a ser autónomo durante todo el proceso.
• Existe un botón de ayuda, ya mencionado, en la esquina inferior izquierda en todo momento para acudir al Centro de Ayuda con el que accedes a información personalizada para completar tu ayuda.
• Cada concepto complejo, es explicado al usuario mediante Toolkits con pequeñas descripciones que facilitan la lectura y el procedimiento de compra.

Malas prácticas:

• Cuando ocurren errores en el sistema no se facilita una reversión de la acción que permita regresar al estado inicial, lo cual supone que el usuario deba salir del proceso para comenzar de cero si erra de algún modo.

#6 Reconocimiento mejor que recuerdo

En esta ocasión, nos encontramos con una web carente de ayudas al usuario en cuanto a información ya completada durante el proceso de compra de artículos.

Buenas prácticas:

• La información se encuentra esquematizada y sin demasiada sobrecarga, por lo que favorece a la fluidez para la consecución de objetivos en el usuario.

Malas prácticas:

• No se muestra ningún resumen de los parámetros seleccionados a lo largo de la compra, lo cual no facilita la carga memorable hacia la persona que interactúe con el servicio.
• En las migas de pan, a veces pueden llegar a acumularse gran cantidad de términos dentro de una misma sección entorpeciendo la memorización del camino que se ha tomado hasta llegar al producto.

#7 Flexibilidad y eficiencia de uso

Buenas prácticas:

• La interfaz favorece el flujo de trabajo del usuario experto mediante técnicas como el registro en la plataforma que le permite guardar sus datos para evadir rápidamente ciertos pasos en sus próximas compras.
• Se resumen las informaciones mediante listados con breves descripciones del producto o proceso, consiguiendo una mayor fluidez para usuarios inexpertos y experimentados.

Malas prácticas:

• No se resumen las técnicas recurrentes dentro del personalizador de productos mediante shortcuts  lo que puede repercutir en el incremento de abandonos en las compras.

#8 Diseño estético y minimalista

Podemos apreciar a simple vista que la web destaca por su simpleza y minimalismo en todas las secciones que disminuye la visibilidad relativa de la información.

Buenas prácticas:

• Se utiliza en todo momento iconografía para reconocer los conceptos rápidamente sin crear confusiones entre estos.
• Los enlaces y botones son fácilmente reconocibles en todo el proceso.
• Se elimina cualquier información o elemento irrelevante en la plataforma que pueda causar ruido visual e interferir en la atención del usuario.
• Las longitudes de las páginas de producto se suelen reducir gracias a botones que despliegan las descripciones largas.

Malas prácticas:

• Interfiere en la fluidez del proceso que no puedas acceder al paso de subir tus diseños hasta terminar el proceso de compra.
• En la página del producto se ha recurrido a un orden de la información ilógico, donde la descripción del producto se encuentra al final de la página tras el proceso de personalización.

#9 Reconocimiento, diagnóstico y recuperación de errores

Los mensajes de errores a menudo suelen ser un campo a mejorar en las tiendas online, pero el resultado en Online Printer está mejorado.

Buenas prácticas:

• Los mensajes de error no están codificados ni tienen un lenguaje complejo, consiguiendo así la comprensión del contenido por parte de la persona usuaria y su correcta solución a los problemas.
• Una vez que erras en un formulario, los datos de cada campo se quedan registrados y no se pierden en la recarga, lo que supone que el usuario pueda identificar los errores fácilmente y no perder tiempo en el proceso.

Malas prácticas:

• Como ya hemos mencionado con anterioridad, no se pueden revertir algunos errores que los usuarios hayan cometido en algún paso y que el sistema haya validado.

#10 Ayuda y documentación

Buenas prácticas:

• Existe un Help Center bastante completo con opciones como el Chat o las FAQ’s que suelen optimizar el tiempo invertido en la consulta de dudas.

Malas prácticas:

• Se echa en falta una pequeña documentación donde se expliquen algunos tecnicismos, algunos procesos más detallados o una simple guía de entrega de formatos más centrada en que el usuario no cometa errores y garantizar el buen resultado de la impresión.

#11 Perspectiva de género e inclusión

El lenguaje de la interfaz debe tener un claro objetivo de dirigirse a cualquier género mostrando respeto y sin jerarquizar unos sobre el resto.

Buenas prácticas:

• Utiliza un lenguaje que respeta a cualquier género dando confianza a las personas consumidoras durante el proceso de compra o información.
• No existe distinción de género cuando se refiere al uso de la interfaz. La plataforma tiene la misma accesibilidad y usabilidad independientemente del género del usuario.

Malas prácticas:

• En los formularios echamos de menos la opción de no sentirte identificado con ningún género o simplemente no querer mostrarlo. Es más, referirte a una persona como Sr./Sra. es una forma desfasada de mostrarse ante una nueva generación que aspira a una diversidad amplia de género.
• Se prioriza en todo momento la figura del género masculino sobre el género femenino en los campos de selección, mostrando una jerarquía que puede incomodar y afectar a la experiencia del consumidor en la plataforma.
• Aproximadamente, el 98% de las imágenes representativas de la empresa se muestran más cercanas al genero masculino interfiriendo en que la persona usuaria se sienta comprendida y reflejada en sus productos.

Gravedad de los errores y posibles soluciones

A continuación, haremos un listado de las heurísticas ordenadas según su nivel de gravedad en cuanto a la experiencia de usuario y acompañadas de una evaluación del 5 al 10, donde 5 es mínimamente grave y 10 de máxima gravedad.

• Perspectiva de género e inclusión: 10.
• Consistencia y estándares: 10.
• Reconocimiento mejor que recuerdo: 9.
• Diseño estético y minimalista: 8.
• Adecuación entre el sistema y el mundo real: 8.
• Prevención de errores: 7.
• Reconocimiento, diagnóstico y recuperación de errores: 7.
• Ayuda y documentación: 6.
• Visibilidad del estado del sistema: 6.
• Control y libertad del usuario: 5.
• Flexibilidad y eficiencia de uso: 5.

Como conclusión, podemos dar una serie de recomendaciones a la empresa para solucionar los errores más graves como:

• El uso de imágenes y lenguaje inclusivos en sliders y formularios.
• Eliminación de inputs tipo select para registrar el género del usuario, es una información irrelevante.
• Cambiar la disposición de la información en la página de producto a un orden más coherente.
• El uso de pequeños resúmenes que muestren las opciones elegidas en la personalización del producto o los camplos relevantes completados en los anteriores pasos del formulario con la posibilidad de edición.
• Uso de iconos con estilos unificados.
• Reducir el número de términos utilizados en las migas de pan y/o en los títulos del producto.
• Colocar la posibilidad de subir el diseño del producto al comienzo del proceso de compra para poder comparar cómo queda el mismo en todos los productos.
• Dotar a los elementos de animaciones que ayuden con la lectura y jerarquización de los elementos.
• Usar la metáfora de la relación impresor/a-consumidor/a para darle otro aspecto visual a la plataforma y un lenguaje más cercano.
• Destacar los sitios donde se encuentra la persona usuaria en ese mismo momento dentro del menú.

Referencias

ARMENGOL, Dani. CASACUBERTA, David. CHACÓN, Jonathan. GARRETA, Muriel. GONDOMAR, Romualdo. MORA, Alberto. MORA, Joan. MEMBRIVES, Judith. MONJO, Tona. MOR, Enric. NIETO, Javier. ZAMBRANO, Jossie.
Design Toolkit [en línea]. UOC, 2020. https://design-toolkit.uoc.edu/

MEMBRIVES, Judith
Cuaderno de evaluación de la usabilidad [en línea]. UOC, 2019. https://quadern-usabilitat.recursos.uoc.edu/

MODROÑO, T. [Tomàs M. (2017, 1 septiembre). Evaluación Heurística (PARTE I). Interactius. https://interactius.com/evaluacion-heuristica-parte-i/