Publicado por

Evaluación Heurística de Interfaz de Usuarios

Publicado por

Evaluación Heurística de Interfaz de Usuarios

Introducción   Tras la crisis sanitaria propiciada por la Covid-19, un gran número de administraciones públicas de todo el mundo han impulsado…
Introducción   Tras la crisis sanitaria propiciada por la Covid-19, un gran número de administraciones públicas de todo el…

Introducción

 

Tras la crisis sanitaria propiciada por la Covid-19, un gran número de administraciones públicas de todo el mundo han impulsado el uso de las tecnologías para intensificar el número de gestiones telemáticas que los ciudadanos pueden hacer. Este es el caso de la sede electrónica de la Agencia Tributaria española, donde podemos observar un aumento del 10.000% del tráfico orgánico en dicha web, llegando actualmente a los 10.8 Millones de visitas mensuales.

 

En este contexto cabe preguntarse, ¿están nuestras administraciones preparadas para servir a sus clientes (ciudadanos) servicios telemáticos realmente usables? A lo largo de esta entrada de Folio daremos respuesta a esta pregunta a través de una evaluación de la usabilidad sin usuarios de varios recorridos funcionales dentro de la sede electrónica de la Agencia Tributaria del Ministerio de Hacienda de España.

 

 

Metodología: Explicación acerca de cómo se ha llevado a cabo el análisis

La realización del análisis de la usabilidad sin usuarios la haremos a través de una Evaluación Heurística, concretamente haremos uso de los 10 heurísticos propuestos por Nielsen y Molich (Nielsen J. – 1994) que se describirán a continuación.

A pesar de que según como indican ciertos estudios (Nielsen 1994) el número óptimo de evaluadores al ejecutar una Evaluación Heurística sea entre 3 y 5, este estudio se ejecutará por una sola persona (yo) a lo largo de una sesión de aproximadamente 2 horas. Antes de comenzar la evaluación en sí, se harán 2 recorridos por la web para familiarizarme con los diferentes flujos de tareas.

Una vez comencemos con la evaluación de cada principio, se tomarán como referencia las preguntas contenidas en la checklist propuestas por Ross, L. (2006). Para cada hallazgo se confeccionará una ficha a través de la extensión de Chrome UX Check que contenga una descripción del problema, una propuesta de mejora un pantallazo ilustrativo de la aplicación y la severidad del error. La clasificación de la severidad se hará de acuerdo a la clasificación numérica del 0 al 4 planteada por Nielsen, J. ( 1994):

  • 0 = No es un problema de usabilidad.
  • 1 = Problema sin importancia. No necesita arreglarse a menos que haya tiempo de sobra.
  • 2 = Problema de poca importancia. Arreglarlo no tiene mucha prioridad.
  • 3 = Problema grave. Es importante arreglarlo.
  • 4 = Catástrofe. Es imprescindible arreglarlo

Los 10 Heurísticos de Nielsen

1.    Visibilidad del estado del sistema

Descripción:

El sistema debe mantener a las personas usuarias informadas sobre lo que ocurre (feedback en un tiempo razonable). Para evaluar este principio tendremos en cuenta:

  • ¿Se muestra algún mensaje de error en algún momento?
  • ¿Saben los usuarios que deberían hacer a continuación?
  • ¿Saben los usuarios cómo de lejos están en el proceso?
  • ¿Hay info. disponible acerca de tiempo restante para timeout de la sesión?
  • ¿La disposición general es fácil de escanear a simple vista?, ¿hay zonas con mucha info o por el contrario zonas con mucho texto que impiden un escaneo de la página rápido?

Evaluación buenas/malas prácticas:

Ejemplo

Evaluación:

Malas prácticas

Es difícil saber en qué parte de la web estamos situados porque no hay nada que identifique en qué posición del arbol de contenido estamos.

Recomendaciones:

Categorizar las gestiones que realizan los usuarios (p.ej. mediante un card sorting) y añadir migas de pan que identifiquen cómo hemos llegado aquí (p.ej. Inicio / Gestiones / Declaraciones tributarias / Presentación de declaraciones de renta)

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

Descripción:

El sistema debe hablar el mismo lenguaje que la persona usuaria. Para ello utilizaremos la siguiente checklist:

  • Facilidad de uso: ¿Es fácil para los usuarios aprender a usar el sistema? ¿Hay muchos pasos involucrados en su uso? ¿Pueden los usuarios entender lo que necesitan hacer con un poco de capacitación?
  • Rendimiento: ¿funciona el sistema lo suficientemente rápido al responder a las solicitudes de los usuarios? ¿Es molesto para los usuarios cuando tienen que esperar demasiado para que se cumplan sus solicitudes?
  • Mensajes de error: ¿los mensajes de error son lo suficientemente claros para que los usuarios sepan qué salió mal y por qué?

Evaluación buenas/malas prácticas:

Ejemplo

Evaluación

Malas prácticas

A la declaración de la renta se accede a través de la sección de «Presentación de declaraciones, calendario del contribuyente / Todos los modelos / IRPF», cuando realmente el término comúnmente empleado en todo tipo de medios es el de «Declaración de la Renta», por lo que vemos un desalineamiento entre el lenguaje empleado y el comúnmente utilizado por las personas usuarias.

Recomendaciones:

Utilizar sustituir accesos tortuosos a las secciones a las que más se accede por accesos directos visibles desde la página principal, empleando los mismos términos empleados comúnmente en los medios

 

 

3.    Libertad y control por parte de la persona usuaria:

Descripción

Las personas usuarias tienen la sensación de control sobre lo que hacen. Para evaluarlo intentaremos detectar si concurren las siguientes fallas del sistema:

  • Falta de opciones: los usuarios no saben qué opciones están disponibles para ellos, por lo que no saben cómo usar el sitio de manera efectiva (p.ej. un buscador sin posibilidad de filtrar resultados puede resultar poco útil).
  • Inexistencia de feedback: sin feedback sobre sus acciones, los usuarios no pueden saber si han tenido éxito haciendo lo que pretendían o no (p.ej. envío de un formulario sin respuesta).

Evaluación buenas/malas prácticas:

Ejemplo

Evaluación:

Malas prácticas

Estando en otra sección hemos clicado en «Identificación digital» y nos ha derivado a otra sección completamente diferente. No obstante, no es posible volver a la sección de donde originalmente veníamos.

Recomendaciones:

Incluir un árbol de páginas a la izquierda que nos permita movernos con mayor facilidad por todo el contenido.

 

4.    Consistencia y estándares

Descripción

Que se sigan las normas y convenciones del sistema/plataforma ayuda a que las personas usuarias no tengan que preguntarse si varios elementos significan la misma cosa o no. Evaluaremos concretamente:

  • Consistencia interna: todos lo elementos visuales son harmoniosos en color, fuentes, gráficos y contenido.
  • Consistencia externa: todas las páginas tienen un diseño y layout similar, dando la sensación de que pertenecen a un mismo todo.

Evaluación buenas/malas prácticas:

Ejemplo

Evaluación

Buenas prácticas

Todas las páginas siguen un estilo similar

 

5.    Prevención de errores:

Descripción

Antes que diseñar buenos mensajes de error, es mejor evitar que el problema ocurra. Para ello evaluaremos:

  • ¿Hay algún error 404?
  • ¿Todos los hipervínculos funcionan correctamente?
  • ¿Hay alguna imagen que no se muestra correctamente?
  • ¿Tienen las personas usuarias toda la información necesaria para completar una tarea?
  • ¿Hay algún problema que prevenga a las personas usuarias de completar las tareas sin errores?

Evaluación buenas/malas prácticas:

Ejemplo

Evaluación

Buenas prácticas

A la hora de presentar la declaración de la renta, cualquier opción relacionada con modificar datos (especialmente si son relevantes), ofrece feedback inmediato del sistema pidiendo confirmación del usuario para llevar a cabo la acción

 

 

6.    Reconocimiento antes que recuerdo:

Descripción

Evaluar si se está minimizando la carga cognitiva de las personas usuarias haciendo elementos, acciones y opciones visibles.

  • ¿Hay elementos/rutas que sin que sean recordados las personas usuarias no podrían continuar?
  • ¿Se ofrece ayuda en contexto en lugar de un tutorial largo para ser recordado?
  • ¿Es necesario recordar mucha información en alguna interfaz (más de 5 elementos)?

Evaluación buenas/malas prácticas:

Ejemplo

Evaluación:

Malas prácticas

Una consulta esencial no es posible encontrarla de una manera eficiente a través del buscador del portal (notar que sí que es posible y muy eficiente hacerlo desde Google sin embargo)

Recomendaciones:

Clasificar las secciones, gestiones e información en base a palabras clave utilizadas por los usuarios

 

7.    Flexibilidad y eficiencia del uso

Descripción

Para evaluar si el diseño tiene en consideración la eficiencia en el uso del software tanto de personas usuarias expertas como de novatas haremos uso de la siguiente checklist:

  • ¿Es posible personalizar el contenido para personas usuarias individuales?
  • ¿Se proveen maneras de mejorar la eficiencia de uso (p.ej shortcuts?

Evaluación buenas/malas prácticas:

Ejemplo

Evaluación

Malas prácticas

No hay posibilidades de configurar el acceso a las secciones más relevantes para un usuario

Recomendaciones:

Sería positivo dar la oportunidad a las personas usuarias de grabar un filtro para las consultas de su mayor interés

 

8.    Diseño estético y minimalista

Descripción

Las interfaces no deberían contener información irrelevante o que raramente se necesita. Cada unidad extra de información en una interfaz compite con las unidades relevantes de información y reduce su visibilidad relativa.

Este principio heurístico lo evaluaremos con reflexiones como las siguientes:

  • Diseño simple, limpio y consistente.
  • Uso de gráficos y fotografías reducido al mínimo exponente si no fuesen necesarias.
  • Imágenes de alta calidad cuando sea necesario.
  • Tipografía fácil de leer y agradable a la vista.
  • Fondos de página simples y de colores claros para que su contenido se destaque más claramente
  • Todo el texto sea lo suficientemente grande para facilitar la lectura (al menos 14 puntos).
  • Para cada página web, asegúrese de tener un menú de navegación claro para encontrar páginas dentro de su sitio o vincular a otros sitios (es decir, un mapa del sitio)

 

Evaluación buenas/malas prácticas:

Ejemplo

Evaluación

Buenas prácticas

En líneas generales el portal tiene un estilo de diseño minimalista y entendible (fondo blanco, letras con tamaño adecuado, se minimiza la cantidad en ciertas páginas,…)

 

9.    Ayuda a las personas usuarias a reconocer y diagnosticar los errores y a recuperarse:

Descripción

Para ello se evaluarán:

  • Usar mensajes visuales de error tradicionales (p.ej. rojo, negrita, etc)
  • Avisar a las personas usuarias de qué fue mal en un lenguaje sencillo, evitando tecnicismos.
  • Ofrecer a las personas usuarias una solución (p.ej. un atajo para resolver el error rápidamente)

Evaluación buenas/malas prácticas:

Ejemplo

Evaluación:

Mala práctica

El sistema informa de la hora actual de conexión y de que el usuario está logado en el sistema, pero no avisa de cuánto tiempo queda para el logout.

Recomendaciones:

Añadir un contador o similar para avisar del logout automático del sistema.

 

10. Ayuda y documentación

Descripción

Sería ideal que el sistema no necesitase de explicaciones adicionales, pero como probablemente no sea el caso, es mejor ofrecer a las personas usuarias documentación para ayudar a los usuarios entender como completar sus tareas. Para evaluar esta heurística haremos uso de la siguiente checklist:

  • ¿El sitio incluye una página de ayuda o soporte?
  • ¿Es fácil de encontrar?
  • ¿Está claro lo que se puede hacer en esta página?
  • ¿Hay una dirección de correo electrónico para contactar para soporte?
  • ¿Hay un formulario de contacto en el sitio o en otro lugar que permita enviar comentarios o hacer preguntas?

Evaluación buenas/malas prácticas:

Ejemplo

Evaluación

Buenas prácticas

Impacto positivo del asistente virtual y de la opción de contacto en una zona altamente visible

 

Listado priorizado según gravedad.

Apoyándonos en la herramienta Ux Check se han evaluado los anteriores principios heurísticos en la sede electrónica de la Agencia Tributaria española. Como resultado de ello, encontraremos a continuación los hallazgos relacionados, ordenados de mayor impacto a menos.

Para consultar el informe original hacer click aquí para descargar el informe completo de UX Check.

 

1.    Difícil hacer un escaneo completo y eficiente de la web para crear un mapa mental de su estructura

Imagen

Heurístico: #8, Diseño estético y minimalista

Severidad: 4

Reflexión acerca de la severidad de la severidad:

Es difícil hacer un escaneo completo de la web de manera eficiente ya que es necesario hacer scroll completo en la página hasta 4 veces para ver todo el contenido de la página principal que además tiene mucha carga visual.

Recomendaciones:

Eliminar imágenes cuyo único propósito sea ornamental. Hacer una investigación de los trámites más consultados y mostrar en la landing page directamente sólo los 7 – 10 más relevantes.

 

2.    Difícil saber en qué punto de la web se está en relación a todo el contenido

Imagen

Severidad: 4

Heurístico: #1, Visibilidad del estatus del sistema

Reflexión acerca de la severidad:

Es difícil saber en qué parte de la web estamos situados porque no hay nada que identifique en qué posición del arbol de contenido estamos. Parece que a pesar de que hayas migas de pan, el último nivel (donde está la persona usuaria) no está visualmente conectado con el resto de páginas.

Recomendaciones:

Categorizar las gestiones que realizan los usuarios (p.ej. mediante un card sorting) y añadir migas de pan que identifiquen cómo hemos llegado aquí (p.ej. Inicio / Gestiones / Declaraciones tributarias / Presentación de declaraciones de renta)

 

3.    Imposibilidad de encontrar ciertas gestiones/secciones a través del portal

Imagen

Severidad: 4

Heurístico: #4, Reconocimiento antes que recuerdo

Reflexión acerca de la severidad:

Una consulta esencial no es posible encontrarla de una manera eficiente a través del buscador del portal (notar que sí que es posible y muy eficiente hacerlo desde Google sin embargo)

Recomendaciones:

Clasificar las secciones, gestiones e información en base a palabras clave utilizadas por los usuarios

 

4.    Cambio repentino de una sección a otra

Imagen

Severidad: 3

Heurístico: #1, Visibilidad del estatus del sistema

Reflexión acerca de la severidad:

Al clicar la opción de «Identificación digital» contenida dentro de la sección «Presentación de declaraciones, calendario del contribuyente», el sistema nos lleva a dicha opción pero de repente esta está contenida en una sección diferente a la que originalmente hemos clicado.

Recomendaciones:

Si se pretende seguir teniendo acceso la identificación digital dentro de esta sección, localizaría un icono fuera del árbol de esta sección (p.ej. en la esquina superior izquierda), de esta manera sería más fácil desvincular la sensación de relación padre-hija entre estas dos páginas

 

5.    El lenguaje empleado para ciertos trámites no es el mismo que el que comunmente emplean los medios y las personas usuarias.

Imagen

Severidad: 3

Heurístico: #2, Adecuación entre el sistema y el mundo real

Reflexión acerca de la severidad:

A la declaración de la renta se accede a través de la sección de «Presentación de declaraciones, calendario del contribuyente / Todos los modelos / IRPF», cuando realmente el término comúnmente empleado en todo tipo de medios es el de «Declaración de la Renta»

Recomendaciones:

Utilizar sustituir accesos tortuosos a las secciones a las que más se accede por accesos directos visibles desde la página principal, empleando los mismos términos empleados comúnmente en los medios

 

6.    Imposibilidad de deshacer la ruta a la que accidentalmente hemos llegado

Imagen

Ver hallazgo #4.

Severidad: 3

Heurístico: #3, Libertad y control por parte de la persona usuaria

Reflexión acerca de la severidad:

En este caso, y muy en conexión con la casuística #4, donde partíamos de una sección en dónde clicábamos en «Identificación digital» y nos derivaba a otra sección completamente diferente, en este caso señalamos la imposibilidad de volver a la sección de donde originalmente partíamos.

Recomendaciones:

Incluir un árbol de páginas a la izquierda que nos permita movernos con mayor facilidad por todo el contenido

 

7.    Landing Page sobrecargada de elementos

Imagen

Severidad: 2

Heurístico: #8, Diseño estético y minimalista

Reflexión acerca de la severidad:

A pesar de que las subsecciones tienen un diseño minimalista que es utilizado incluso en la Landing Page, en esta última puede observarse demasiada información infográfica que puede producir cierta sensación de fatiga visual.

Recomendaciones:

Categorizar las secciones aún más y mostrar para cada subsección sólo la información/gestiones más usadas y para el resto utilizar otras opciones para mostrarlas en una segunda instancia (p.ej. incluyendo en cada sección un icono «+» que despliegue más opciones de las mostradas originalmente)

 

8.    Múltiples opciones con nombres similares para acceder a secciones de ayuda

Imagen

Severidad: 2

Heurístico: #10, Ayuda y documentacion

Reflexión acerca de la severidad:

La ayuda se muestra en varias secciones de la interfaz. No obstante, al presentar varias secciones de ayuda/guía muy similares quizás pueda ser un poco confuso (p.ej información general VS ayuda técnica vs Normativa vs Documentos y ficheros)

Recomendaciones:

Localizar siempre en el mismo sitio (p.ej. esquina superior derecha) un único punto de entrada a la sección de ayuda

 

9.    Iconos difícilmente asimilables a la realidad que representan

Imagen

Severidad: 1

Heurística: #2, Adecuación entre el sistema y el mundo real

Reflexión acerca de la severidad:

Ciertos iconos son difícilmente reconocibles (p.ej. un cuaderno con una R, representa el IRPF). No obstante, este hecho se ve compensado por un título anexo explicativo de la opción en cuestión.

Recomendaciones:

Sustituir siglas no convencionales por las que sí se utilizan ampliamente (R  IRPF o I  IVA)

 

10. No se muestra información del tiempo restante de sesión antes del logout

Imagen

Severidad: 1

Heurístico: #5, Prevención de errores

Reflexión acerca de la severidad:

El sistema informa de la hora actual de conexión y de que el usuario está logado en el sistema, pero no avisa de cuánto tiempo queda para el logout.

Recomendaciones:

Añadir un contador o similar para avisar del logout automático del sistema

Consideraciones de la interfaz desde una perspectiva de género e inclusión.

La naturaleza de la Sede Electrónica de la Agencia Tributaria, así como el de cualquier otra Administración Pública, es la de servir a las personas ciudadanas. Por ello sería esperable que dicha Sede hubiese sido diseñada aspirando a cubrir la amplia diversidad etnográfica, cultural, funcional y de género que compone nuestra sociedad, prestando especial atención en no excluir a ningún sector de la población.

A pesar de que el contenido de la web a priori tiene un carácter un carácter neutro (no hay secciones específicas por genero como por ejemplo en retail), es posible encontrar puntuales puntos de mejora en cuanto al uso de un lenguaje más inclusivo. Listamos a continuación algunos de ellos:

  • Sección  «Calendario del contribuyente»: ¿Podría llegar a reformularse como «Calendario de las personas contribuyentes» para evitar sesgos binarios de género?

  • Sección «Empresarios individuales y profesionales»: En línea al ejemplo anterior, ¿no seguiría teniendo sentido si se reformulase como «Personas empresarias individuales y profesionales»?

  • Sección Colaborar con la Agencia Tributaria: En esta sección, ¿tendría sentido sustituir «representantes aduaneros» por «representantes ante aduanas» o incluso por «representación de terceras personas ante aduanas»?

  • Área personal de la declaración de la renta: En esta sección encontramos que entre nuestros datos está la clasificación Varón/Mujer, aunque realmente cabe pensar si realmente esta información es relevante para los efectos de esta sede y el tipo de gestiones que en ella se realizan. No obstante, quizás también cabría pensar que pudiera ser relevante para realizar cierta discriminación poblacional positiva (p.ej. programa de ayudas a minorías).

 

 

 

Conclusiones

Debido al importante tráfico que genera (10.8 M visitas/mes) y la importancia que tiene para los ciudadanos de España, en este ejercicio se ha evaluado la usabilidad de la sede electrónica del Ministerio de España a través de una Evaluación Heurística sin usuarios.

El número de gestiones posibles dentro de esta web es muy numerosa, por lo que hemos centrado el estudio en aspectos generales del portal de entrada (o Landing Page) y algunos posibles flujos funcionados relacionados con la declaración de la renta.

En total, de manera no exhaustiva se han realizado 16 hallazgos, de los cuales 11 están relacionados con malas prácticas. Es notable como algunos de los principios heurísticos se han tenido en cuenta para el diseño de algunas secciones (es decir, siguen las buenas prácticas) y no se han tenido en cuenta en otras.

Como conclusión, cabe señalar que a pesar de los esfuerzos realizados por el Ministerio de Hacienda para unificar todas las gestiones de la Agencia Tributaria en un sólo portal más usable, aún queda espacio para la mejora del mismo en cuanto a usabilidad para las personas usuarias.

Bibliografía

  • Nielsen, J (1994). “How to Conduct a Heuristic Evaluation” [artículo en línea]. <https://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/>. NN/g Nielsen Norman Group. [Fecha de consulta: 16 de noviembre de 2022].
  • Modroño, T. (2017). “Evaluación Heurística (PARTE I)” [artículo en línea]. <https://interactius.com/evaluacion-heuristica-parte-i/>. INTERACTIUS. [Fecha de consulta: 17 de noviembre de 2022].
  • Modroño, T. (2018). “Evaluación Heurística (PARTE II)” [artículo en línea]. < https://interactius.com/evaluacion-heuristica-parte-ii/>. INTERACTIUS. [Fecha de consulta: 17 de noviembre de 2022].
  • “Diseño inclusivo desde la una perspectiva de género” (2020). [artículo en línea]. <https://www.gammaux.com/blog/diseno-inclusivo-desde-perspectiva-de-genero/>. Gamma UX. [Fecha consulta: 17 de noviembre de 2022]
  • Torres B., D. (2021). “El rol del Diseño UX en la inclusion de género” [artículo en línea].< https://www.torresburriel.com/weblog/2021/10/28/el-rol-del-diseno-ux-en-la-inclusion-de-genero/>. Torres Burriel Estudio. [Fecha consulta: 17 de noviembre de 2022]
  • Carreras, O. (2012). «Estándares formales de usabilidad y su aplicación práctica en una evaluación heurística» [en línea]. Usable y accesible. <https://olgacarreras.blogspot.com.es/2012/03/estandares-formales-de-usabilidad-y-su.html>. [Fecha consulta: 17 de noviembre de 2022]
  • «Principios de diseño de interacción de Bruce Tognazzini» [artículo en línea]. <http://galinus.com/es/articulos/principios-diseno-de-interaccion.html>. [Fecha consulta: 17 de noviembre de 2022].
  • Zapata, M. «Métodos de evaluación sin usuarios» [en línea]. <http://openaccess.uoc.edu/webapps/o2/bitstream/10609/12922/8/usabilidad_módulo2_métodos%20de%20evaluación%20sin%20usuarios.pdf>. [Fecha consulta: 17 de noviembre de 2022].
  • Travis, D. (2014). «247 web usability guidelines». http://www.userfocus.co.uk/resources/guidelines.html [artículo en línea]. USERFOCUS.  [Fecha de consulta: 17 de noviembre de 2022].
  • Canva <www.canva.com>. [Fecha de consulta: 15 de noviembre de 2022].
  • Semrush <semrush.com>. [Fecha de consulta: 15 de noviembre de 2022]
  • Sede Agencia Tributaria <https://sede.agenciatributaria.gob.es/Sede/Renta.html>. [Fecha de consulta: 15 de noviembre de 2022]
  • Ross, L (2006). «Heuristic Evaluation Checklist to Use On Your Website». <https://www.invespcro.com/blog/heuristic-evaluation-checklist-to-use-on-your-website/> [artículo en línea]. Invesp. [Fecha de consulta: 17 de noviembre de 2022].
  • Nielsen, J. (1994). «Severity Ratings for Usability Problems». <https://www.nngroup.com/articles/how-to-rate-the-severity-of-usability-problems/> [artículo en línea]. NN/g Nielsen Norman Group. [Fecha de consulta: 17 de noviembre de 2022].
  • UOC – Design Toolkit / Guía: Evaluación Heurística. <http://design-toolkit.recursos.uoc.edu/es/guia/evaluacion-heuristica/>. [Fecha de consulta: 15 de noviembre de 2022]
  • UOC – Design Toolkit / Evaluación Heurística. <http://design-toolkit.recursos.uoc.edu/es/evaluacion-heuristica >. [Fecha de consulta: 15 de noviembre de 2022]

Debate0en Evaluación Heurística de Interfaz de Usuarios

No hay comentarios.

Publicado por

PEC 2. Evaluación Heurística, Plan de test y Card Sorting

PEC 2. Evaluación Heurística, Plan de test y Card Sorting
Publicado por

PEC 2. Evaluación Heurística, Plan de test y Card Sorting

Esta semana mostraremos cómo evaluar una interfaz bajo una de las herramientas de inspección de la usabilidad, junto al ‘Test con usuarios’,…
Esta semana mostraremos cómo evaluar una interfaz bajo una de las herramientas de inspección de la usabilidad, junto al…

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/

Debate0en PEC 2. Evaluación Heurística, Plan de test y Card Sorting

No hay comentarios.