VAZVA nace en 2005, en una pequeña ciudad costera del norte de España llamada A Coruña.

Comenzó siendo una tienda multimarca vinculada al mundo del mar y del surf. No fue hasta el año 2010 que se convertiría en una de venta exclusiva de su marca, vinculada a un estilo de vida más transgresor con productos de alta calidad diseñados en Galicia y confeccionados en el norte de Portugal. Es decir, Vazva siempre apoyo el producto de proximidad (Galicia y Portugal están al lado).

Actualmente cuenta con 60 puntos de venta en toda Europa. Al tratarse de una marca relativamente reciente y con pocos años de recorrido, me ha parecido interesante si, además de centrarse en sus productos y en la calidad de las prendas, también se preocupa de la experiencia de usuario en su página web.

Metodología 

Para el análisis heurístico hemos hecho uso del libro de Mònica Zapata Lluch llamado Métodos de evaluación sin usuarios.

Lo que he hecho ha sido leer detenidamente uno por uno cada uno de los puntos e intentar encontrarlos en la web, añadiendo información si veía más tarde que otra ventana también se podía adaptar.

Para las capturas y vídeos de pantalla he usado la herramienta ShareX, que te permite grabar tanto formato vídeo como formato gif, aunque funciona bastante mejor con el formato vídeo.

Análisis heurístico

1. Visibilidad del estado del sistema.

1.1 Realizar una compra 

Al entraren un producto, vemos que aparecen varias interfaces para realizar la selección.

Tallas: al pulsar sobre la talla seleccionada, el recuadro cambia su color de borde por lo que el usuario sabe en todo momento qué talla tiene seleccionada.

Por otro lado tenemos la opción de añadir al carrito, podemos observar que se realiza una animación de carga mientras se añade el producto y después se abre una ventana auxiliar en la que se muestra la cesta.

Se trata de una buena práctica ya que el usuario en todo momento sabe las acciones que está realizando.

1.2 Consulta de las diferentes secciones 

La marca vende diferentes tipos de prendas, para hombre, mujer y niños, al pasear por encima de sus secciones vemos que estas se representan con un color diferente pero una vez clickas y entras dentro de la sección, desaparece la animación y nada te recuerda en qué parte de la página te encuentras.

Se trata de una mala práctica ya que el usuario no sabe dónde se encuentra en todo momento por lo que tiene que hacer un sobreesfuerzo para memorizar en qué sección está.

¿Cómo solucionarlo?

Para enmendar este tipo de errores es tan sencillo como programar un cambio de estado de la sección, si además del cambio de color al pasar el cursor por encima este se mantuviera diferente al clickar sobre él.

Otra opción sería mantener la sección actual subrayada para que así el usuario sepa donde se encuentra.

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

2.1 Lenguaje utilizado

Al tratarse de una marca de ropa, el lenguaje utilizado es sencillo y común, las descripciones son sencillas de entender para el usuario medio.

Se trata de una buena práctica ya que nos acercamos a todo tipo de usuarios con mayor o menor cultura. Además el target de la marca es gente joven por lo que considero que el lenguaje es el adecuado.

3. Libertad y control por parte del usuario

A la hora de realizar compras, es normal añadir productos en la cesta que luego no se quieran adquirir por lo que siempre existe la opción de eliminar ese producto de la cesta. Como vemos el sistema no exige ningún tipo de confirmación de esta opción ni te permite revertir la acción.

Se considera una mala práctica con un nivel de gravedad medio, el no permitir al usuario revertir la acción ni tener ninguna ventana de confirmación puede hacer que el usuario cometa errores.

¿Cómo solucionarlo?

Se puede añadir la opción de abrir una ventana emergente de confirmación y un botón de deshacer en algún lugar de la ventana de carrito de la compra.

4. Consistencia y estándares

La página web utiliza un vocabulario presente en otras páginas web, no necesita aprender palabras nuevas y vemos un uso coherente de la lengua.

Lo único que podemos decir es que mezcla el inglés y el español por lo que eso puede confundir al usuario, si la página web está en castellano y existe “guía de tallas” no debería usar size guide.

La mezcla de idiomas se ve en otras secciones como en el buscador

Se considera una mala práctica con un nivel de gravedad medio, si el usuario selecciona el idioma español no debería haber palabras en inglés

¿Cómo solucionarlo?

A pesar de que el inglés está estandarizado en internet se debería configurar la página de tal manera que el usuario pueda escoger el idioma que quiere.

5. Prevención de errores

5.1 Registro

A la hora de realizar el registro, nos pide unos datos concretos bastante simples. Pero en ningún momento pide confirmación de email ni de contraseña, el escribir la contraseña y el email dos veces evita muchos errores a la hora de escribirla.

Se considera una mala práctica porque la probabilidad de equivocarse al escribir el correo o la contraseña es alta por lo que puede dar errores de registro

¿Cómo solucionarlo?

A pesar de que para el usuario puede ser tedioso el mandarle repetir el email y la contraseña evitan muchos errores.

5.2 Ventana de búsqueda

La ventana de búsqueda no contempla los errores, si escribes mal el nombre del producto esta no te indica nada como “quizás quiso decir…” ni ningún mensaje similar.

Se considera una mala práctica ya que la barra de búsqueda debería dar opciones para este tipo de erratas o recomendar lo que quizás quería buscar el usuario.

¿Cómo solucionarlo?

Configurando la ventana de errores para que entienda que esas erratas pueden ser las palabras correctas.

6. Reconocimiento antes que recuerdo

6.1 Filtros 

La web permite aplicar filtros pero una vez el usuario hace scroll estos desaparecen por lo que si hace scroll mucho tiempo puede olvidarse de los filtros usados y debe volver al inicio de la página lo que es tedioso.

Se considera una mala práctica ya que supone un sobreesfuerzo para el usuario aunque en este caso tampoco hay tantos artículos para que llegue a resultar molesto.

¿Cómo solucionarlo?

Manteniendo la barra de filtros fija mientras se hace scroll

6.2  Buscador

Tampoco el buscador recuerda búsquedas anteriores por lo que no podemos recordar búsquedas que el usuario hizo el día anterior o la hora anterior, por ejemplo.

Se considera una mala práctica de gravedad baja, el usuario quizás quiera recordar alguna búsqueda anterior y no puede.

¿Cómo solucionarlo?

Añadiendo memoria al buscador.

7. Flexibilidad y eficiencia en el uso

Durante la ventana de pago, permite que el usuario ya tenga guardados sus datos previamente para que así este no tenga que rellenar los campos cada vez que hace una compra. (No inserto la pantalla completa para no compartir mis datos)

Se trata de una buena práctica ya que permite al usuario no tener que rellenar los mismos campos en cada compra.

8. Diseño estético y minimalista

La página web se encuentra organizada por secciones en las cuales aparece la prenda con su nombre, todo está dispuesto de una manera similar y sin añadir demasiado ruido a las fotos.

Se trata de una buena práctica ya que el usuario no tiene distracciones que entorpezcan el proceso de compra.

9. Ayuda a los usuarios a reconocer, diagnosticar y recuperarse de los errores

El único error que ha reconocido es el de inicio de sesión y para eso que es deficitario y otorga la información justa al usuario.

Se considera una mala práctica ya que el usuario tiene información deficiente acerca de los errores que puede cometer.

10. Ayuda y documentación

En el medio de pago hemos visto que nos pide los diferentes datos de la tarjeta, al cambiar del número al CVC cambia el icono de la tarjeta.

Se considera una mala práctica ya que el cambio del icono aporta poca información y no es claro para el usuario

¿Cómo solucionarlo?

Aportando más información al usuario, a veces no basta solo con un icono y hacen falta palabras o un icono/foto mucho más específica.

Priorización de resolución de errores

1. Ayuda y documentación

Si el método de pago es confuso, el usuario no podrá realizar la compra por lo que se trata de una pérdida de dinero para la empresa.

Lo considero el más grave porque el fin de cualquier página web de venta es vender.

¿Cómo solucionarlo?

Aportando más información al usuario, a veces no basta solo con un icono y hacen falta palabras o un icono/foto mucho más específica.

2. Prevención de errores

En el registro debería exigirse repetir el email y la contraseña para que el usuario no tenga erratas clásicas como poner «con» o escribir en mayúsculas cuando quiere escribir la contraseña en minúsculas y viceversa.

¿Cómo solucionarlo?

A pesar de que para el usuario puede ser tedioso el mandarle repetir el email y la contraseña evitan muchos errores.

3. Prevención de errores

La barra de búsqueda debería conocer las erratas simple como saltarse una letra o desordenarlas, si el usuario no puede encontrar el producto no va a poder comprar.

¿Cómo solucionarlo?

Configurando la ventana de errores para que entienda que esas erratas pueden ser las palabras correctas.

4. Consistencia y estándares

La mezcla de idiomas puede resultar confuso para el usuario que además de eso ha seleccionado el idioma español en la parte superior.

¿Cómo solucionarlo?

A pesar de que el inglés está estandarizado en internet se debería configurar la página de tal manera que el usuario pueda escoger el idioma que quiere.

5. Libertad y control por parte del usuario

El usuario debería poder revertir sus acciones o debería tener que confirmar a la hora de eliminar un producto de su cesta ya que si elimina uno que no quiere le obligaremos a volver a buscarlo en la web.

¿Cómo solucionarlo?

Se puede añadir la opción de abrir una ventana emergente de confirmación y un botón de deshacer en algún lugar de la ventana de carrito de la compra.

6. Visibilidad del estado del sistema.

La consulta de las diferentes secciones debería ser clara y el usuario debería saber en todo momento en dónde se encuentra.

¿Cómo solucionarlo?

Para enmendar este tipo de errores es tan sencillo como programar un cambio de estado de la sección, si además del cambio de color al pasar el cursor por encima este se mantuviera diferente al clickar sobre él.

Otra opción sería mantener la sección actual subrayada para que así el usuario sepa donde se encuentra.

7. Ayuda a los usuarios a reconocer, diagnosticar y recuperarse de los errores

Hay muy poca información a la hora de reconocer errores, el usuario debería tener más información para poder solucionarlos.

¿Cómo solucionarlo?

Identificando los errores más comunes y configurando copys en ventanas emergentes para cuando ocurran.

8. Reconocimiento antes que recuerdo

El uso de filtros debería mantenerse fijo en todo momento aunque en este caso no es tan grave ya que la colección de artículos es pequeña pero en vistas a un crecimiento de la misma debería permanecer presente.

¿Cómo solucionarlo?

Manteniendo la barra de filtros fija mientras se hace scroll

Desde una visión de género e inclusión 

La web de Vazva vende productos diferenciados por género, utiliza la denominación binaria. Vamos a olvidarnos en este análisis de la sección kids, que sí es neutra.

El producto de Vazva se basa básicamente en camisetas y sudaderas, puede tener algún producto más específico como pantalones, pero la marca se ve dominada por su sección circular de prendas.

Las sudaderas y camisetas consideramos que a nivel patronaje no tienen género, por lo que Vazva podría añadir una sección neutra si quisiera mantener las secciones de hombre y mujer podría añadir también una llamada «unisex». Aun así entendemos que en moda es bastante complicado no diferenciar por sexos binarios porque a nivel patronaje hay cosas que cambian,

Otro aspecto a tener en cuenta es que esa diferenciación no existe en la sección de niños, que sí es neutra por lo que Vazva entiende que su ropa no tiene género en cierto modo.

A la hora de registrarse tampoco de pregunta tu sexo ni como quiere que se refieran a ti, ni hay ningún tipo de indicio en su página de que la manera en la que te hablan sea relevante.

Como conclusión podemos decir que al tratarse del mundo de la moda entendemos esta diferenciación pero Vazva podría hacer un esfuerzo para añadir otra sección en la que cualquier persona de cualquier género se sienta identificada.

Muchas gracias por leer

Bibliografía de la web de Vazva

Vazva. (n.d.). Retrieved November 19, 2022, from http://www.vazva.es/

En este post se va a analizar la plataforma web de la Universidad Internacional de Andalucía (UNIA), concretamente el espacio web del máster de Formación del Profesorado. Este máster es de modalidad semipresencial y, por tanto, esta plataforma supone una herramienta indispensable para los estudiantes del mismo.

Dentro de esta plataforma el usuario (estudiante) puede realizar las tareas de:

• Encontrar el temario, documentos e información relativa a cada una de las asignaturas que supone el curso.
• Acceder a tareas de evaluación.
• Chat/foro con estudiantes y profesores.
• Evaluaciones recibidas.
• Consulta y modificación de información personal.
• Acceso a salas virtuales.
• Soporte y ayuda al usuario.

Metodología de análisis

Para su análisis, se ha usado los 10 principios heurísticos de Nielsen, como aplicación de metodología sin usuarios en búsqueda de analizar la usabilidad de este sitio web.

El proceso consiste en conocer cada uno de los diez principios establecidos por Nielsen en 1994, sus diez heurísticas, y tras su comprensión y análisis; se aplican estos principios a la interfaz a analizar, en este caso, la plataforma de la UNIA.

A continuación, se van a desarrollar dada una de las diez heurísticas, explicando en qué se enfocan cada una de ellas y tras ello, haremos una evaluación de estos principios en la interfaz seleccionada.

1-Visibilidad del sistema

Este principio hace referencia a la capacidad de retroalimentación que ofrece la interfaz al usuario. Se basa en mostrar al usuario la información necesaria para que en cualquier momento de la navegación sepa adónde está y hacia donde tiene que ir para alcanzar su objetivo.

En el caso de la interfaz que nos ocupa, este principio se ha aplicado, pero no de la forma más óptima.

Al entra en cualquier página secundaria, como la página de una asignatura concreta, nos aparece en la parte superior un indicador de la página en la que os encontramos y todas sus sucesoras. Sin embargo, el color, tamaño, tipografía y posición que se ha usado; hace que el usuario no identifique de forma clara e inmediata este canal de retroalimentación y se pueda encontrar perdido.

2-Empate entre el sistema y el mundo real

Se basa en introducir un lenguaje familiar al usuario, usando terminologías, iconografía, estándares, etc., pertenecientes a su ambiente socio-cultural y, por tanto, sean entendidos y reconocidos por él mismo.

En nuestra interfaz sí se implementa de forma correcta y óptima la presentación del contenido. Las razones son las siguientes:

-Hay una sola opción de idioma, el español (preestablecido), ya que todos los usuarios de esta plataforma son de origen español y dominantes del castellano (las clases son impartidas en este idioma y por tanto, se da por hecho que todos los usuarios dominan este idioma, siendo su lengua materna).

-Infografía correcta: iconos conocidos por toda la comunidad.

-Archivos en formatos estandarizados de fácil lectura: pdf, doc

3-Control y libertad del usuario

Se refiere a la capacidad de la interfaz de ofrecer salidas o retrocesos inmediatos y sencillos cuando el usuario realiza una operación no deseada por equivocación, o simplemente desea deshacer algún cambio realizado.

En este caso pienso que se ha implementado de forma correcta la libertad de navegación, el usuario puede avanzar y retroceder de página de forma sencilla y libre. En ciertas tareas es cierto que no se permite el retroceso, concretamente en la entrega de actividades o realización de cuestionarios, pero al ser actividades evaluables veo correcto que no se implemente esta funcionalidad, ya que se perdería la esencia y fin de la propia evaluación (llevada a cabo por el profesorado). No obstante, si introduciría alguna ventana de observaciones en las páginas de entregas y evaluación para que el estudiante pudiese comunicar algún imprevisto o error sufrido; y tenga la oportunidad de ser valorado por sus profesores.

Dentro del desarrollo de los cuestionarios sí que nos permite avanzar y retroceder de preguntas para seleccionar la respuesta deseada, y sólo es en el último paso del proceso dónde tras haber pulsado la aceptación de entrega dónde ya no podemos hacer cambios. Aquí también se implementa de forma correcta esa libertad de navegación, permitiendo al usuario una elaboración fluida de estos test. Por último, remarco como aparecen barras de estado donde identificamos la pregunta o cuestión en la que nos encontramos, las totales, y las contestadas y no contestadas; teniendo así una visión global del estado del examen durante su realización (con un tiempo limitado indicado en forma de cuenta atrás).

Finalmente, sí que quizás implementaría la funcionalidad de cancelar el envío de un mensaje por chat, al menos en un límite de 10-20 minutos tras su envío; sobre todo porque existe la posibilidad de escribir mensajes personales y comunitarios y por tanto, el usuario se puede encontrar en el apuro de haber enviado un mensaje personal a toda la comunidad por equivocación, y tal como está implementada la web ahora no es posible de subsanar el error.

4-Consistencia y estándares

Se basa en implementar un diseño de la web que sea globalmente aceptado, es decir, que el usuario encuentre un portal de navegación que le resulte familiar. Esto se consigue usando patrones e iconografía estandarizados, distribución habitual, etc.

En el caso de la web de la UNIA pienso que sí han implementado este principio de forma correcta, puesto que no encontramos elementos desconocidos ni botones en lugares no frecuentes.

Por optimizar al máximo la web si cambiaría la disposición de la página principal, que deja oculto algunos cursos y la zona de mensajes (lo vemos cuando deslizamos hacia abajo). Pondría un mayor número de ventanas emergentes de menor tamaño a las actuales pero que permitiesen ver al usuario de un vistazo todas las zonas principales.

5-Prevención de errores

Evitar que el usuario realice tareas erróneas por confusión o desconocimiento.

En la parte de cuestionarios se informa antes de comenzarlo todas las “reglas del juego” (tiempo, intentos, etc.). Por tanto, lo veo muy correcto ya que el usuario dispone de toda la información necesaria para que no comience el test sin conocer como tiene que actuar y por tanto, no se encuentre ante dudas frecuentes durante su realización.

Sí que implementaría una notificación cuando hay tareas sin realizar y queda poco tiempo para su cierre, puesto que puede ocurrir que el usuario no la haya visualizado y no sea consciente de su presencia y, por tanto, no la realice por desconocimiento de la misma.

El resto de la web creo que tiene un buen diseño que no evoca a error.

6-Reconocimiento mejor que el recuerdo

Hacer que la página delate fácilmente la ruta que debe seguir el usuario para alcanzar su objetivo y que el usuario no tenga que así recordar como usarla, sino simplemente adentrarse en ella e ir navegando con fluidez.

En el portal que nos ocupa este análisis creo que este criterio ha sido bien implementado, puesto que es fácil navegar a través de la web gracias a que con etiquetas textuales (algunas acompañadas de iconografía para enfatizar) se ha destacado y desvelado a la ventana que nos lleva cada una de las pestañas.

7-Flexibilidad y eficiencia de uso

Se basa en la introducción de atajos a usar los usuarios expertos para llegar de forma más inmediata a su objetivo.

En este caso, se han implementado algunos accesos directos. Estos han sido los mostrados en la columna lateral derecha, donde podemos acceder de forma directa a las actividades más relevantes: actividades próximas, visualización de valoraciones de los profesores y chat. El resto de páginas y rutas no tienen accesos directos, pero no lo considero un punto relevante ya que la web es bastante simple y tiene funcionalidades muy concretas, por lo que tal como está diseñada presenta una buena usabilidad y las rutas son en general de pocos pasos.

8-Diseño estético y minimalista

Eliminar toda aquella información no relevante para evitar confusión sobre su importancia respecto a la verdaderamente destacable.

Este punto pienso que también se cumple ya que sólo aparecen en la página principal aquellas pestañas de las acciones más directas y relevantes que tienen como finalidad el portal. Además, dentro de cada página secundaria nos encontramos directamente todo el contenido directo que estamos buscando, de forma clara y concisa.

Al ser una web con una funcionalidad muy específica y acotada, el diseño minimalista no es muy complicado de llevar a cabo: podemos visualizar todas las acciones relevantes de forma directa sin haber información secundaria en competencia de ubicación con la primaria (realmente prácticamente toda la información que se adjunta es primaria, por lo que aparezca toda junta no afecta al minimalismo de la web).

9-Ayuda a reconocer, diagnosticar y recuperarse de errores

No debe indicarse el código de error tras sufrir uno, si no mostrar un mensaje explicativo al usuario de qué debe hacer para subsanar el error.

En este caso, si hay algún error debido a la arquitectura de la web, el buscador nos muestra un mensaje estándar donde se indica el código de error directamente. Por tanto, esto es un aspecto negativo que para solucionarlo se debería implementar una página de muestra de datos donde aparezca un mensaje explicativo de lo ocurrido y cómo debe actuar el usuario al respecto.

10-Ayuda y documentación

Aportar al usuario uno o varios enlaces a centros y páginas de ayuda para resolver los problemas que se le pueden plantear durante el uso de la web (como acceder a una determinada página, como usar una funcionalidad, etc.).

En nuestro caso, sí se aporta un espacio con pestañas de ayuda. Además, este espacio se mantiene en cualquier página, estando por tanto presente en cualquier momento y facilitando al usuario la navegación. Por tanto, este aspecto se implementa de forma correcta.

Hallazgos negativos, ¿cómo los solucionamos?

• Canal de retroalimentación poco diferenciado: aparece una barra superior con una guía de la pestaña en la que se encuentra el usuario y todas sus antecesoras, pero su estética hace que no sea lo suficientemente diferenciada. Solución: hacer una guía más completa en la que se incluyan las ventanas sucesoras también. Para mayor diferenciación introduciría el texto en un cuadro de fondo (ahora está sobre imagen), ampliaría un poco su tamaño y pondría el cuadro de fondo en transparencia en todas las ventanas sucesoras y antecesoras, y el fondo de la ventana actual lo remarcaría sin transparencia (así el usuario localiza más fácilmente donde se encuentra).

• Posibilidad de hacer una valoración o comentario ante una actividad ya entregada, para así evitar la preocupación del usuario y saturar el chat del profesor (actualmente no hay opción de deshacer o comentar tareas ya entregadas). Implantaría una ventana de comentarios bajo cada actividad (bajo el cuadro de entrega completada).
• Eliminación de mensaje en un margen de tiempo de diez minutos tras su envío, para evitar daños personales ante equivocaciones de envío de mensajes a personas incorrectas o dudas ya resueltas.
• Cambio de estructura de página principal: introduciría pestañas nuevas, incluyendo todas las asignaturas activas del momento (y eliminando las no activas), eso en la zona central. En el lado lateral incluiría una pestaña de mensajes (sin aparecer minización de mensajes actuales), pestaña de calendario y pestaña de actividades. El encabezado no lo modificaría, lo veo correcto. Así corregiríamos el problema explicado de tener que deslizar la ventana principal para ver mensajes y actividades, quedando de cierta forma ocultos y difícil de localizar por los usuarios, aún siendo una parte fundamental de esta página. Simplificaría también las asignaturas no activas para buscar mayor minimalismo de la web (reflejar exclusivamente la información más relevante en esta página principal).
• Notificación de tareas pendientes, o barra temporal de actividades; para así aumentar la retroalimentación y facilitarle al usuario la información (recordatorio constante).
• Eliminación de texto de error (ante error del sistema, se enuncia el código de error) por un mensaje más personal y un enlace a “ayuda”.

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

En la web a tratar considero que, el lenguaje y entorno es respetuoso e inclusivo, gracias a las herramientas expuestas, aunque se podría optimizar este aspecto.

En el apartado de datos personales, en el campo de nombre, ya que debemos introducir nuestro nombre legal y no nuestro nombre social. Desgraciadamente hay muchos usuarios que en su DNI se refleja un nombre con el que no se sienten identificados y aquí no se da la oportunidad de expresarse y poder ser identificados con el nombre que ellos mismos se identifican. Sin embargo, la web subsana esto implantando otra ventana de datos adicionales, donde ahora sí podemos introducir el nombre con el que queremos que nos llamen. Considero que el término de nombre adicional no es el más adecuado, aunque valoro la oportunidad de expresar otros nombres a sus usuarios.

Respecto al sexo, no se pregunta, así que en este aspecto veo la web inclusiva (con o sin quererlo) ya que no se hace una diferenciación de este aspecto de la persona.

Como diseñadores, cuando creamos un sito web es importante evaluar la usabilidad de este, tenemos el deber de comprobar mediante diferentes métodos si nuestro producto es entendible por nuestros usuarios, de lo contrario este podría fracasar al no poder ser usable.

A lo largo del post mediante el análisis de la web de IKEA veremos cómo el diseño influencia en la experiencia que el usuario tiene al navegar por la web tanto las que resultan buenas prácticas como malas.

Existen varios métodos para llevar esto a cabo y uno de los más importantes es la evaluación heurística. Este método no implica la participación de posibles usuarios por lo que es un buen método para empezar a comprobar la usabilidad de tu prototipo. Se rige por los 10 principios de Jakob Nielsen, investigador de la interacción humano-computadora.

• Visibilidad del estado del sistema.
• Adecuación entre el sistema y el mundo real.
• Libertad y control por parte de la persona usuaria.
• Consistencia y estándares.
• Prevención de errores.
• Reconocimiento antes que recuerdo.
• Flexibilidad y eficiencia en el uso.
• Diseño estético y minimalista.
• Ayuda a reconocer, diagnosticar errores y recuperarse.
• Ayuda y documentación.

El usuario ha de estar informado sobre lo que ocurre en el sistema en todo momento, Esto se realiza por medio de un constante feedback. Veremos unos ejemplos de cómo la página nos ofrece información o no del lugar en el que nos encontramos dentro de ella.

Mala práctica: El menú superior se divide en diferentes categoría, pero no ofrece ninguna información              sobre en que sección nos encontramos. Además este                                                                                                              desaparece cuando hacemos scroll.

Buena práctica: Por el contrario, dentro de las novedades nos encontramos con un nuevo tipo de menú que proporciona la información de                                                                                                                  manera distintiva y se mantiene                                                                                                                      en el header durante toda la página.

Para ayudar a identificar diferentes elementos estos han de hablar en el lenguaje del usuario con conceptos que sean familiares y reconocibles para él. Esta información ha de presentarse de forma natural y lógica. Veremos este principio a través de la utilización de iconos.

Buena práctica: Muchos de los elementos que utiliza son los que podemos encontrar en cualquier otra interfaz web y, estos, son la representación gráfica de sus homónimos fuera de la interfaz.

Mala práctica: La web utiliza para su menú desplegable con icono      de hamburguesa. Es cierto que cómo los anteriores es fácilmente encontrarle en muchas otras páginas pero está demostrado que el usuario todavía  no esta tan familiarizado con él y muchas veces                            no es consciente de su uso.

                                                            El usuario ha de poder controlar diversos aspectos del sistema, sin esto se sentiría impotente ante el modelo y puede llevar a ocasionar fallos. La acciones que este realiza, especialmente las que puedan ser críticas, han de poder resolverse. Veremos cómo funcionan los controles para acciones rápidas sobre productos.

Buena práctica: Al querer guardar un producto en favoritos pulsarás sobre el corazón. Este se mantiene pulsado haciendo saber al usuario que ya lo ha seleccionado y permite también deseleccionar esta opción fácil y rápidamente.

Mala práctica: La opción de añadir al carrito, sin embargo, produce una animación cuando se selecciona pero vuelve a su estado inicial. Esto puede producir que el usuario la reseleccione múltiples veces.

Seguir unas normas y convecciones lógicas a lo largo de tu página es importante porque esto ayudara al usuario a entender y a relacionar elementos en nuestro sitio, por ejemplo, si vemos elementos que son similares tenderemos a pensar que son de la misma categoría, al igual que si su forma o posición es parecida.

Buena práctica: La mayoría de los elementos de las distintas categorías que crea IKEA en su página tienen un estilo similar, pondremos un ejemplo de los muchos que nos podremos encontrar. Esto nos hace pensar que estos elementos contienen todos el mismo tipo de información.

Mala práctica: En la esquina inferior de la izquierda aparece generalmente una flecha que te ayuda a volver a subir al principio de la página pero, en algunas páginas este botón cambia levemente y su función es la de descargar contenido. Por la similitud de los              iconos y su exacta posición el usuario                                                                                                              tenderá a equivocarse.

Antes de que el usuario cometa un error, aunque este pueda ser reversible es mejor evitar que ocurra. Para ello se pueden implementar medidas que intenten evitar que esto pase.

Buena práctica: Como todos sabemos los nombres de los productos de IKEA no son fáciles de recordar por tanto serán difíciles de buscar en su página. Para ello se implementa en el buscador una función de autocompletar que además muestre una imagen del producto, ya que los nombres de por si solos no son muy explicatorios.

Mala práctica: Al abrir el portal de la web nos encontramos con una sección a la que es prácticamente imposible volver. Si un usuario avanza a la tienda no hay forma fácil de que pueda volver a visitar la página anterior.

Como diseñadores hemos de reducir la carga que la memoria del usuario soporta para que su experiencia sea más simple y eficaz. Hemos de mantener a la vista ciertas opciones o acciones para no entorpecer la experiencia y que el usuario no se sienta perdido o frustrado.

Buena práctica: Para facilitar encontrar un producto la web se divide en sin fin de secciones y para que el usuario sepa siempre donde se encuentra se incorpora una barra que recuerda no solo la sección si no el recorrido que ha realizado hasta ella por si en algún momento quiere volver hacia atrás pero no hasta el principio.

Mala práctica: La mala práctica se encuentra también en esta misma barra ya que, pese a ser de mucha ayuda esta desaparece en cuanto se hace scroll hacia abajo por la página dejándonos a ciegas.

El diseño y la estética están muy relacionados y no soló influye en la experiencia visual que el usuario pueda tener, estos van mucho más allá dado que una buena composición influye en la que el usuario se relaciona con la interfaz. Tiene que ver con la accesibilidad y la usabilidad, conservar una apariencia minimalista ayuda a eliminar los componentes que no ofrecen información alguna, los pesos, tamaños y espacios en blanco dan jerarquía al contenido ayudando al usuario a identificar más rápidamente lo que busca.

Buena práctica:  Prácticamente toda la web tiene un diseño y una estética consistentes, no presenta apenas ruido, mostrando solo los elementos necesarios y con una relación entre sus componentes que amplifica el affordance de estos. Todo esto evita que el usuario se sienta confuso y pueda identificar y centrarse fácilmente en las interacciones                                                                                                        que realiza.

Mala práctica: Por ponerle alunga pega a la web, la sección de muestra de productos en novedades pierde el equilibro entre sus componentes, el no alinear los componentes de estos, dando una sensación de desorden y haciendo el producto menos atractivo al cliente.

Habíamos hablado antes de la importancia de prevenir errores por parte del usuario, igual de importante que esto es ayudar al usuario una vez los ha cometido, identificando el error para que pueda reconocerlo, aportar un feedback que ayude a entender por qué este ha sucedido y proporcionar una a ayuda para solucionar este.

Buena práctica: Habíamos visto que buscar un producto por su nombre puede ser complicado y confundirse escribiendo es muy sencillo, por eso cuándo buscar algo con algún error el buscador te  ofrecerá los productos que creen que has intentado buscar, te informa del error y te avisa que mostrará productos que creen que intentabas encontrar.

Mala práctica: Para una mala práctica pondremos el ejemplo anterior del icono del carrito de la cesta, al no recordar que el usuario ya ha realizado una acción este puede cometer el fallo de volver a realizarla sin querer. La web no ofrece ningún feedback sobre si este elemento ya había sido añadido a la cesta aunque si ofrece una opción de recuperación si es que el usuario es consciente de su fallo.

Pese a que todos los anteriores principio ayudan a mejorar la comprensión del sitio una web ha de ofrecer e incluir acceso a una sección de ayuda y documentación ya que pese a todo el usuario puede tener dudas. Muchas veces se recoge información que por temas de diseño no se suelen incluir en las páginas principales y ayuda a eliminar la carga.

Buena práctica: Ikea incluye en el bottom de su página una sección de ayuda dividida en múltiples categorías para que el usuario acceda al área en cuestión, haciéndola así mucho más accesible.

Una vez hemos completado nuestra evaluación hemos de analizar la gravedad de los problemas presentados. Para medir esta gravedad nos ayudamos de tres parámetros, la frecuencia con la que ocurre este problema, el impacto que tiene este problema sobre las decisiones que tome el usuario y si este puede resolverlo fácilmente y la persistencia del problema, es decir, este consigue resolverse o se repite continuamente.

Analizaremos la gravedad de los problemas cualitativamente, empezando por aquellos que necesitan resolverse con la mayor urgencia y terminando con aquellos a los que prestaremos atención únicamente cuando hayamos solucionado los más graves.

Es el error al que mayor atención hay que prestarle ya que es el que mayor conflicto crea a la hora de utilizar los servicios prestados. Recordamos que hablamos del problema de la interacción de añadir un artículo a la cesta. Estando el portal destinado a la compra de productos la frecuencia con la que se puede repetir este error es altísima y el impacto de este error puede ser crítico, ya que si el usuario no revisa bien la cesta antes de la facturación podría acabar comprando de más. Este problema persiste en todas las secciones y todos los objetos que presenta y siendo una web con un volumen tan alto de compras debería notificar de una manera más correcta esta acción.

Solución: Mantener al final de la animación el tick que confirmaba la acción de compra y, para ocasiones en las que se quiera comprar repetidamente un producto, cambiar este por el número de artículos que quiere.

No mantener una buena consistencia también puede llevar a provocar errores y el lo que más debemos evitar al crear nuestro sitio. Habíamos visto como el botón de descarga esta situado justo donde típicamente hay un botón para volver arriba de la página y estos tienen unos colores y forma muy similares. También habría que apuntar que el proceso de descarga no lleva doble confirmación por lo que si lo pulsas esta comenzará automáticamente aunque se deba de un fallo.

Solución: Se debería cambiar, primero de todo la posición, el aspecto puede conservarse para mantener una relación en los elementos interactivos pero el lugar en el que se coloca lleva inequívocamente al fallo por lo que se debería, como mínimo, reubicar.

Ikea posee un portal con infinidad de páginas dentro de ella para agrupar las categorías y así disponer la información sobre sus productos más accesible y fácilmente encontrarle, pero como dijimos esto puede hacer que el usuario acabe perdido y desorientado dentro de la web. Se incorporaba una barra que iba mostrando las categorías por las que habíamos pasado, permitiéndonos ubicarnos con ella pero esta desaparecía según hacía scroll por lo que el usuario quedaba a ciegas. Se repite con frecuencia aunque el impacto que este tiene no es muy alto y depende del manejo que el usuario tenga este puede ser más o menos fácil de resolver.

Solución: Mantener esta barra siempre en la parte superior de la página de manera que este visible en todo momento para ser operada por el usuario.

Por último, se deberá poner cuidado en la elaboración del sitio, la disposición y alineamiento de los elementos, el peso y equilibrar el espacio en blanco. Un fallo en la consistencia del diseño afectará a la visión global que tenemos del sitio y no queremos que este transmita desorden ni inestabilidad como pasaba en la sección de novedades.

Solución: Poner atención por el detalle y cuidar todos los elementos de la web.

La perspectiva de género y la inclusión son grandes puntos que tenemos que tener en cuenta a la hora de diseñar. Como bien sabemos, en la mayoría de los aspectos, incluido el de la tecnología, diversas minorías se encuentran excluidas y es nuestro trabajo contribuir a reducir esta desigualdad y no promoverla con prácticas erróneas en el diseño. Volviendo a IKEA, su web presenta un muy buen ejemplo de estas prácticas.

Si nos fijamos en el diseño, este no se ajusta a ningún tipo de estereotipos, está diseñado en un corte muy minimalista con tonos y tipografías muy neutras. El lenguaje que se presenta durante toda su página es inclusivo, dirigiéndose de esta manera a cualquier género con el que se identifique el usuario. Además, al entrar en la web te el código postal, de esta manera, entre otras cosas, puede ajustar el idioma de procedencia del usuario lo que es una gran facilidad para una empresa internacional como esta.

En resumen la web de Ikea cumple con los principios y ofrece unos buenos mecanismos que favorecen la usabilidad de sus usuarios, haciendo de la experiencia de estos más satisfactoria.

Cuando hablamos de usabilidad, o más bien de la evaluación de la usabilidad, puede llegar a relacionarse con un trabajo directamente asociado a los usuarios, y sí. En gran medida, los resultados obtenidos directamente de usuarios finales pueden ser más relevantes o tener más importancia, pero no siempre se puede trabajar así. Existen varios métodos de evaluación de usabilidad sin usuarios, como el Recorrido Cognitivo, o la Evaluación Heurística. Y este segundo método mencionado es el que vamos a desarrollar en este Post.

En primer lugar, y para esclarecer un poco el orden del contenido que nos vamos a encontrar, marquemos un índice:

1. En la primera parte hablaremos de qué es la evaluación heurística, cómo se hace, y las ventajas y desventajas de este método de evaluación de la usabilidad.
2. Teniendo clara la primera parte, en esta segunda parte del Post profundizaremos en los 10 principios Heurísticos de Nielsen (con sus 10 buenos y 10 malos ejemplos).
3. Realizaremos un análisis heurístico «individual» aplicado al Aula Virtual de la UOC.
4. ¿Perspectiva de género e inclusión?

¿Qué es una Evaluación Heurística?

Se trata de un método de evaluación de la usabilidad de un producto. Un grupo de evaluadores expertos examinan la calidad de una interfaz y la facilidad para ser aprendida, en base a unos principios, también conocidos como heurísticas.

Por lo general, se trata de un método pensado para realizar entorno a un grupo de trabajo (al menos entre 3 y 5 personas), ya que una sola persona difícilmente llega a encontrar todos los problemas que se puedan encontrar en una interfaz. Dependiendo de su experiencia personal, cada persona será más hábil a la hora de encontrar unos problemas u otros. Por lo general los problemas sencillos los encuentra casi todo el mundo, pero siempre existen problemas puntuales que tan solo pueden encontrar unos pocos. No porque sean mejores o peores evaluadores, si no porque la diversidad de experiencia de los evaluadores es clave a la hora de desarrollar este método.

La evaluación heurística como tal, debe realizarla cada evaluador de manera individual, y después de que se hayan completado todas las evaluaciones, serán los evaluadores los que pongan en común cada uno de sus hallazgos. En ocasiones, en lugar de compartir los hallazgos encontrados, un observador supervisa las sesiones de evaluación de cada evaluador y va anotando los puntos en común, e interpretando las acciones del usuario sobre la interfaz, lo que reduce el tiempo invertido en extraer conclusiones.

Pero… ¿y cuándo se utiliza?

Realmente, al tratarse de un método relativamente rápido y ágil de realizar, puede realizarse en cualquier momento dentro de la línea temporal de un proyecto.

En las fases iniciales, ayuda a encontrar errores previos a la realización de los test de usuario.

Durante el proyecto suele utilizarse para localizar y corregir errores a bajo coste

Y después del proyecto es útil como carta de presentación para mostrar y vender tu producto final.

¿Ventajas y Desventajas?

Obviamente, como todo, la evaluación heurística tiene sus partes positivas y negativas, y aquí es donde vamos a enumerar las ventajas y desventajas de utilizar dicho método:

Ventajas

• Es una práctica rápida y muy económica en cuanto a tiempo y dinero, ya que los recursos que necesitas en comparación a otros métodos es menor.
• Es aplicable a cualquier fase del proyecto.
• Es fácil de combinar con otras metodologías, como por ejemplo Test de Usuario.

Desventajas

• Requiere de expertos con conocimiento en la materia y experiencia previa.
• La subjetividad de los expertos puede llegar a ser un inconveniente a tener en cuenta.
• Muchos de los errores identificados terminan siendo ‘falsos positivos’, de hecho, según el artículo «Usability testing vs. heuristic Evaluation» de Robert W. Bailey, estima que sucede con el 43% de los problemas encontrados.
• A más expertos, más tiempo se necesita para recopilar la información encontrada y extraer conclusiones de los resultados.

Principios Heurísticos

Una vez ha quedado clara la definición de Evaluación Heurística y cuándo y por qué se debe aplicar el método, vamos a profundizar un poco más en cómo se realiza, o más bien, qué principios Heurísticos deberían utilizarse para realizar una Evaluación Heurística.

Existen varias listas de principios heurísticos que se deben analiza para llevar a cabo la prueba, pero todo el mundo conoce «los 10 Principios Heurísticos que Jakob Nielsen» estableció en su libro «Usability Inspection Methods» en 1994. Así que vamos a profundizar y ejemplificar cada uno de ellos:

1. Visibilidad del estado del Sistema.

El sistema debe ser el encargado de notificar a los usuarios sobre lo que está ocurriendo.

✔️ Una buena práctica: Las aplicaciones con Bottom bar de iconos inferior, como la de Twitter o Instagram, siempre notifican al usuario de en qué parte o sección de la aplicación se encuentran.

❌ Una mala práctica: La página web del el Corte Inglés, una vez seleccionas una sección a la que querer navegar, al carga la nueva página, no hay forma de saber en qué sección te encuentras. Debes desplegar el Hamburguer Menu para tener una idea de en qué parte de la página web estás.

2. Relación entre el Sistema y el Mundo Real.

El Sistema debe adecuarse al lenguaje del usuario, utilizar frases, palabras y concepto familiares a él. De esta manera el usuario percibirá la información de una manera mucho más lógica y natural.

✔️ Una buena práctica: La papelera de reciclaje del escritorio de cualquier ordenador. El icono del Sistema Operativo cambia en función de si la papelera contiene o no elementos para que el usuario sepa que la tiene que vaciar.

❌ Una mala práctica: Siguiendo el ejemplo de los iconos. Cualquier icono que no quede claro cuál es su funcionalidad, o que simplemente no represente su utilidad real. No he encontrado una app con este ejemplo porque hoy en día se tiene mucho más en cuenta, pero supongamos que alguien utilice una flecha que apunte hacia la izquierda para ir a «la página siguiente» en «el mundo occidental».

3. Control y libertad del usuario.

Como su propio nombre indica, se trata de la heurística que evalúa las herramientas de control de la aplicación, es decir, cuánto permite o restringe el Sistema las acciones que un usuario puede realizar.

✔️ Una buena práctica: Las aplicaciones que permiten deshacer o cancelar cambios aplicados, como cuando eliminas un mensaje en Gmail, que la propia app te propone deshacer la acción.

❌ Una mala práctica: Cuando el Sistema muestra alertas que no se pueden cerrar, o botones deshabilitados (que no se pueden pulsar).

4. Consistencia y estándares.

Este principio habla sobre conservar o mantener el mismo lenguaje durante todo el flujo de interacción con el Sistema. De otra manera, esto puede provocar confusión en los usuarios.

✔️ Una buena práctica: Hacer uso de un Sistema de Diseño. Colores, tipografía, iconos, formas, y comportamientos exactamente iguales en cada pantalla de la aplicación. Si un error muestra un Pop-up, que los errores su muestren todos por Pop-up.

❌ Una mala práctica: Utilizar 2 elementos diferentes para realizar una misma acción, como por ejemplo, una papelera o una cruz para «eliminar». O al contrario, utilizar un elemento para dos acciones diferentes, como por ejemplo una cruz para «eliminar» y para «cerrar».

5. Prevención de errores.

Desde un punto de vista objetivo, los usuarios son personas, y las personas tienden a hacer errores. Esta heurística evalúa cuán bueno es el Sistema evitando estos errores.

✔️ Una buena práctica: Últimamente ha destacado mucho y es digno de mención: utilizar la palabra «adjuntar» en la app de Gmail sin adjuntar ningún documento. Simplemente brillante.

❌ Una mala práctica: Por otro lado, no marcar los campos obligatorios de un formulario sería muy mala práctica por parte del diseñador. Al igual que el uso del Datepicker, esta práctica se ha convertido en un estándar, y es algo que los usuarios tienen en cuenta para no cometer el error de que sus pantallas se llenen de Inputs rojos con mensajes alarmantes de error en el proceso.

6. Reconocimiento antes que recuerdo.

Siempre hay que tener en cuenta que es más fácil reconocer algo que recordarlo. Cuando vas al supermercado ¿prefieres que las cosas lleven etiqueta o acordarte de lo que pagaste la última vez? Pues esto funciona de la misma manera.

✔️ Una buena práctica: Diseñar buscadores como los de Google o Youtube que muestran las últimas búsquedas del usuario. Esto permite a los usuarios, no solo saber lo que ya han buscado y les ha funcionado, si no que también les permite saber lo que ya han buscado y no les ha funcionado, para así poder variar su búsqueda.

❌ Una mala práctica: El selector de tipografía de Figma. Tratándose de una herramienta de diseño como Figma es de suponer que lo cambiarán en un futuro, pero actualmente el selector de tipografías de Figma no muestra el aspecto de la tipografía. an solo muestra el nombre, lo que lo vuelve algo incómodo y complicado de utilizar.

7. Flexibilidad y eficiencia de uso.

Este principio heurístico tiene en cuenta que el diseño sea beneficioso tanto para usuarios experimentados como para usuarios inexpertos.

✔️ Una buena práctica: Las aplicaciones que permitan configurar comandos de teclado para realizar ciertas acciones, a parte de poder utilizar la interfaz a través de menús y botones de manera habitual.

❌ Una mala práctica: Cualquier aplicación «premium» que bloquee contenido a los usuarios que no son de pago. En este caso ofrecen flexibilidad y eficiencia a cambio de dinero. Además si limitan de más, o incluso de menos, la funcionalidad, corren el riesgo de que un usuario gratuito jamás pase a pagar por su producto final.

8. Diseño estético y minimalista.

Nunca hay que poner la estética por encima de la funcionalidad de un producto, pero sí que es clave que el Sistema te muestre tan solo la información que es esencial y evitar la sobrecarga visual en los usuarios con demasiados elementos.

✔️ Una buena práctica: Si alguien debe su éxito a su diseño minimalista y eficaz esa es la página principal de Google. Una barra de búsqueda, un par de accesos a sus herramientas principales, y no hay ni un solo elemento extra que cubra la pantalla.

❌ Una mala práctica: No me preguntéis cómo, pero he encontrado como ejemplo la página de Gates N Fences. Se trata de un sitio extremadamente sobrecargado de información y elementos por pantalla, tanto que ni siquiera sería capaz de decir cuál es el objetivo principal de esta página. Es un claro ejemplo de mala práctica en este caso.

9. Ayudar a los usuarios a reconocer y solucionar errores.

Si uno de los principios evaluaba la capacidad del Sistema para omitirlos, este principio está destinado justo a evaluar el paso de después. Cómo indica el Sistema al usuario qué debe hacer para solucionar cualquier error planteado.

✔️ Una buena práctica: Inputs que indican con mensajes de apoyo al usuario que la entrada de datos que ha realizado no tienen el formato correcto o el valor requerido para continuar.

❌ Una mala práctica: Páginas web o aplicaciones que indican el error que ha ocurrido mediante un código de error sin dar ningún tipo de explicación. Códigos como el 404 son reconocidos por algunos usuarios, pero ¿por qué ha ocurrido?¿cómo lo soluciona el usuario?¿quién lo ha provocado? El no resolver estas dudas hace que los usuarios desconfíen de sus acciones a la hora de utilizar ciertas aplicaciones.

10. Ayuda y documentación.

Por último, y no por ello menos importante: Aunque el Sistema pueda funcionar sin documentación, nunca está de más ofrecer una ayuda «extra» al usuario a la hora de utilizar la interfaz. Puede que haya pasado mucho tiempo y que haya habido un cambio drástico en la página principal, y aquí es donde la «ayuda y documentación» aporta su granito de arena.

✔️ Una buena práctica: Aplicaciones con onboarding, o con Tooltips que indican qué hace o qué es cada cosa.

❌ Una mala práctica: Aunque no lo parezca, Minecraft, el juego más vendido de la historia empieza sin tutorial, sin información previa, sin nada. Es parte del encanto del juego que cada uno vaya descubriendo poco a poco como funciona, pero cada vez hay más vídeos de gente probando el juego por primera vez y la reacción siempre es la misma: Poner cara de estar confusos y decir «¿y ahora qué?».

Y con esto, estarían definidos y ejemplificados los principios que definió Nielsen hace casi ya 30 años. Hoy por hoy siguen siendo muy utilizados, están muy presentes, y son aún clave para muchas de las Evaluaciones Heurísticas que se realizan hoy en día.

Ejemplo de Análisis Heurístico: Aula Virtual de la UOC

Llegados a este punto, en el que ya conocemos lo qué es un Análisis Heurístico y los 10 principios de Nielsen, ya podemos elaborar nuestro propia Evaluación Heurística. Y para esto, voy a coger como ejemplo el Aula Virtual de la UOC.

Lo primero sería definir qué es lo que se va a evaluar para cada principio. Por ejemplo, el principio de «Control y Feedback» se podría desglosar en los siguientes puntos a evaluar:

1. ¿La respuesta del sistema es rápida y adecuada después de cada acción (fallida o exitosa)?
2. ¿Pueden los usuarios deshacer, retroceder, cancelar, o cambiar acciones realizadas con facilidad?
3. ¿Existen mensajes de confirmación antes de realizar una acción clave en el flujo?
4. ¿Pueden los usuarios dar su opinión fácilmente a través de algún contacto/formulario?

Y, dependiendo de la cantidad de sub-apartados, y la importancia de cada sub-apartado, se le asigna una importancia. Para hacerlo más fácil: Hay 10 principios, así que supongamos que cada principio puede aportar un valor de entre 0 y 1, así obtendremos una nota de entre 0 y 10 en nuestra evaluación. Por tanto, la suma de los valores de cada sub-apartado debe dar 1 punto como máximo.

Volviendo al ejemplo:

El principio de «Control y feedback» tiene un peso total de 1 punto.

• Sub-apartado 1 -> Peso total: 0,3 puntos
• Sub-apartado 2 -> Peso total: 0,2 puntos
• Sub-apartado 3 -> Peso total: 0,4 puntos
• Sub-apartado 4 -> Peso total: 0,1 puntos

De esta manera, obtendríamos una «nota» entre 0 y 1 por principio que nos ayudaría saber qué principios se aplican mejor o peor, y tendríamos una nota global sobre 10 que determinaría cuán bueno sería el producto analizado.

Siguiendo con el ejemplo del Aula Virtual de la UOC, vamos a otorgar una nota de entre 0 y 1 a cada principio, sin establecer sub-apartados, para que podamos verlo de forma rápida:

Nota total de la Evaluación Heurística: 6,1 (La suma de la nota de todos los principios)

Habiendo obtenido ya la nota global, se pueden establecer unos puntos de corte que sirvan para describir un poco más el producto más allá de tan solo «la nota», así que proponemos los siguientes:

• Menos de 2,9 (Producto muy pobre): es probable que los usuarios experimenten dificultades muy importantes al utilizar el producto y podrían no ser capaces de completar un número significativo de tareas importantes.
• Entre 2,9 y 4,9 (Producto pobre): es probable que los usuarios experimenten algunas dificultades a la hora de utilizar el producto, y podrían no ser capaces de completar algunas tareas importantes.
• Entre 4,9 y 6,9 (Producto mejorable): los usuarios deberían poder utilizar el producto sin mayor dificultad y completar la mayoría de las tareas importantes, aunque la experiencia del usuario podría mejorar significativamente.
• Entre 6,9 y 8,9 (Buen producto): los usuarios deberían poder utilizar el producto con relativa facilidad y deberían poder completar la gran mayoría de las tareas importantes.
• Más de 8,9 (¡Excelente!): el producto proporciona una experiencia de usuario excelente a los usuarios. Los usuarios deben ser capaces de realizar todas las tareas importantes en el sitio o sistema.

Así pues, habiendo realizado la Evaluación Heurística del Aula Virtual de la UOC podemos extraer las siguientes conclusiones. Se trata de un producto mejorable, que permite a los usuarios completar la mayoría de tareas importantes, pero su experiencia de usuario podría mejorar significativamente. Además, por la nota evaluada para cada principio, podríamos decir que los puntos fuertes del Aula Virtual serían su «Consistencia y estándares» y su «Ayuda y documentación», mientras que las áreas a mejorar de la misma serían los principios de «Reconocimiento antes que recuerdo» y «Diseño estético y minimalista».

En definitiva, podríamos decir que el Aula Virtual tiene toda la documentación necesaria, y consistencia en cuanto a las acciones de usuario se refiere, pero tiene tantísimo contenido que su propio diseño es un impedimento para el usuario, para que pueda identificar los elementos que aparecen por pantalla y tenga que recordar cómo se utiliza el Aula antes que navegar por ella de manera intuitiva.

Perspectiva de género e inclusión

El User Centered Design o Diseño Centrado en el Usuario han hecho que poco a poco se tienda a universalizar «el usuario» independientemente de las capacidades de cada persona, su género, las diferentes etnias que componen la sociedad, etc. Como resultado, ha surgido un nuevo factor a tener en cuenta como lo son los problemas de representación e inclusión del usuario a la hora de utilizar una interfaz. ¿Estaremos ante un nuevo Principio Heurístico que añadir al listado que hemos mencionado en los apartados anteriores?

¿Cómo podemos saber si un diseño es inclusivo?

Mientras que el sexo es algo biológico, el género es un aspecto cultural, y a medida que la sociedad avanza, la tecnología avanza con ella. Que el mundo tecnológico está predominado por el género masculino no es un misterio, pero ¿cómo podríamos hacer de internet, o de los productos digitales un mundo más inclusivo?

Existen 3 principios fundamentales para diseñar de manera inclusiva:

1. Cuestionar y probar si el género es algo necesario o determinante para la utilización del producto. Esto podría ser mediante de test de usuario, o incluir en la fase de investigación a usuarios con varios géneros.
2. Utilizar lenguaje inclusivo. Según la RAE podríamos utilizar las letras «x» o «e» para eliminar los mascadores de género propios del castellano, pero desde la perspectiva del diseño la solución correcta sería reelaborar la fórmula planteada P.E: «Personas que trabajan en» en lugar de «empleados».
3. No asumir la identidad de género. Hoy en día los productos están muy orientados a analizar a sus usuarios, y muchas veces ofrecen otros productos en base a la suposición de género extraída a través de un algoritmo. Esto es algo a evitar, y en caso de ser necesario habría que informar, permitir escoger, y corregir al usuario su asunción de género.

Para saber más y aprender cómo aplicar estos principios de diseño de inclusivo podemos ver algunos consejos en este artículo de GammaUX.

Índex:

I. L'objecte de la investigació.

II. Dades de la intefície analitzada.

III. Metodologia emprada.

IV. Anàlisi heurístic.

V. Resum dels principals problemes esmentats.

VI. Inclusió i diversitat.

V. Bibliografia i recursos emprats.

I. L’objecte de la investigació:

Piskel és una aplicació gratuita i de codi obert que permet a l’usuari crear imatges en dues dimensions (sprites fixes o animats) fent servir la hipèrbole del píxel com a unitat gràfica, mirant d’evocar el look de les produccions multimèdia d’èpoques passades.

L’aplicació disposa d’una sèrie d’eines comunes a d’altres softwares similars, que permeten el dibuix sobre d’un llenç, on el tamany i disposició de la quadrícula és capital.

El dibuix a baixa resolució o pixel art ha vist com creixia la seva influència durant els últims anys, derivant en una infinitat de noves produccions que arriben als mercats en tota mena de suports, especialment a la branca d’oci electrònic, però també com a corrent d’expressió artística, com el cinema.

El producte que s’obté d’aquesta aplicació es sol fer servir com a recurs gràfic per a tercers. 

Octopath Traveller (Square-Enix, 2018, https://www.square-enix-games.com/en_EU/games/octopath-traveler).

Survival of the Sublime (The Poncho Pilgrim, 2016, https://www.youtube.com/watch?v=nnneLbP8iQQ).

Actualment la tenim a diferents plataformes, com ara aplicació mòbil, d’escriptori i aplicació web. Aquesta última és el subjecte de la nostra anàlisi.

II. Dades de la interfície analitzada:

Piskel App, la interfície analitzada (https://www.piskelapp.com/).

Piskel App, versió web (v.0.15.2).

Idioma: anglès.

Plataforma: Google Chrome, macOS 13.0.

III. Metodologia emprada:

Per a la realització d’aquesta anàlisi sense usuaris es duran a terme una sèrie de tasques senzilles amb objectius molt concrets, sempre de manera que s’exposi la bona o mala praxis en l’execució de cada principi heurístic. Per a cadascun dels principis analitzats es disposaran una sèrie de fitxes que contindran:

• Nom del principi heurístic sota estudi i breu definició.
• Relació d’elements que es veuen implicats.
• Tasca proposada.
• Resultat obtingut.
• Valoració sobre si és o no un bon exemple d’aplicació del principi.
• Gravetat del problema, si s’escau.
• Proposta de millora, si s’escau.

IV. Anàlisi heurístic:

#1_ Visibilitat de l’estat del sistema.

Definició breu del principi: La interfície ha d’informar de quin és l’estat actual de l’activitat de l’usuari fent ús dels diferents mecanismes a l’abast.

Elements implicats: Missatges emergents, simbologia.

Tasca / objectiu: Guardar el progrés d’un arxiu. Es crea una imatge nova i es guarda amb una de les opcions facilitades.

Passar el ratolí per sobre dels elements que conformen l’UI fa que es diferencïin de la resta per indicar-nos quina eina esten fent servir.

Elements seleccionats, indicats amb color tònic (Piskel, 2022).

Nom de l’arxiu, el símbol * indica temporalitat (Piskel, 2022).

Feedback com a missatge emergent (Piskel, 2022).

Resultat: El sistema ens alerta a cada operació de l’estat de l’arxiu que estem treballant mitjançant missatges emergents. Les eines seleccionades també estan resaltades. Aquests indicadors fan servir el color groc com a tònic per sobre de la resta.

Valoració: Es fa un ús correcte del principi, donat que s’avisa en tot moment i temps real a l’usuari de quin és l’estat del sistema.

#2_ Sistema i món real.

Definició breu del principi: El sistema ha de fer servir un lleguatge el més humà possible, que faciliti la comunicació entre la màquina i l’usuari.

Elements implicats: Simbologia, convencionalisme, semàntica, iconografia.

Tasca / objectiu: Reconèixer els conceptes i l’organització de la informació de manera innata durant tasques de caire comú, com l’us de la metàfora per millorar la comprensió del UI.

Ús del llenguatge visual i la metàfora (Piskel, 2022).

Resultat: La interfície fa ús d’un llenguatge familiar per a l’usuari. Les formes de les eines i les accions derivades de les mateixes tenen relació amb el món real (com ara la manera de dibuixar una figura geomètrica).

Valoració: Es fa un ús correcte del principi en general, però admet certa ambigüitat en alguns grafismes que es podria millorar.

Proposta de millora: No totes les tasques es poden entendre de manera orgànica i l’usuari es veu obligat a passar el ratolí per sobre del butó per conèixer exactament la seva funció. Escollir nous grafismes per a segons quines funcions seria ideal. Un exemple:

Eines de transformació (Piskel, 2022).

#3_ Llibertat i control.

Definició breu del principi: Un usuari ha de tindre la possibilitat de desfer-se d’un error inmediat d’una manera directa i senzilla.

Elements implicats: Eines per desfer i refer.

Tasca / objectiu: Provar una sèrie d’accions per comprovar si l’usuari té la opció de tornar a un estat anterior en tot moment o si només es compleix en llocs concrets.

Dreceres de teclat, desfer i refer (Piskel, 2022).

Resultat: Es permet al usuari desfer-se d’errors i tornar a un estat anterior o posterior, sempre i quan es tracti de l’àmbit de creació o edició de l’arxiu de treball.

Valoració: Un altre cop, trobem que es fa un ús correcte, però parcialment. L’opció per desfer-se dels errors d’execució existeix, però l’UI no conté cap botó implementat que permeti accedir a aquesta operació més enllà de la drecera de teclat, cosa que sí que ofereixen aplicacions d’ús similar.

Proposta de millora: És necessari implementar botons que contemplin les opcions de refer i desfer. També seria interessant incloure una opció que permetés recuperar arxius esborrats per accident.

#4_ Consistència i estàndards.

Definició breu del principi: Seguir un model establert comú en contextes similars ajuda a que l’usuari es pugui moure per l’aplicació d’una manera més intuitiva i sense haver de provar una funció per confirmar el seu funcionament.

Elements implicats: Elements comuns entre aplicacions del mateix àmbit.

Tasca / objectiu: Comprobar si les funcions bàsiques i la seva disposició espacial comparteixen criteris d’aplicacions d’àmplia difusió al mercat.

Piskel UI (Piskel, 2022).

Pixelorama UI (Pixelorama, 2022, https://orama-interactive.itch.io/pixelorama).

Adobe Illustrator UI (Adobe, 2022, https://www.adobe.com/es/products/illustrator.html/).

Resultat: Si comparem la primera imatge (Piskel) amb les altres dues (Pixelorama i Adobe Illustrator) podem comprovar que, efectivament, existeixen certes convencions que es respecten. Les eines principals es situen en una o dues columnes a l’extrem esquerra de l’UI, mentres que el costat dret queda reservat per als inspectors i les paletes. Per una altra banda, la gestió d’arxius es situa a la part dreta quan totes les aplicacions la tenen a la part superior.

Valoració: L’ús és correcte, però la disposició del menú d’arxiu (a la dreta) no resulta natural, tenint en compte l’interioritzada que està aquesta part del UI en aquesta i d’altres aplicacions semblants.

Proposta de millora: Seria interessant incloure l’opció de personalitzar la disposició dels elements del UI per part de l’usuari. D’altres aplicacions si disposen d’aquesta opció, que normalment ajuda a millorar el flux de treball.

#5_ Prevenció d’errors.

Definició breu del principi: Sempre serà millor crear un sistema que eviti els errors que un que informi correctament d’aquells que ocorren.

Elements implicats: Bon disseny d’UI.

Tasca / objectiu: Comprobar si el disseny del UI és prou consistent per evitar que l’usuari sigui objecte de errors o dificultats que condueixin a errors.

Dibuixant a mà alçada (Piskel, 2022).

Resultat: El cursor sempre previsualitza quina serà l’àrea de dibuix que ocuparà el nostre traç abans de començar a clicar. Té en compte el tamany i la forma. Això comunica en tot moment a l’usuari com està situat sobre la creació i quin serà el seu resultat aproximat a mesura que faci el dibuix.

Valoració: L’ús és correcte, però l’aplicació no dona peu a gaire més exemples.

#6_ Reconeixement abans que record.

Definició breu del principi: Fer visibles certes funcions o informacions fa que l’usuari disposi d’elles en tot moment, de manera que no hagi de recordar-les constantment.

Elements implicats: Informació en temps real.

Tasca / objectiu: Comprobar l’arquitectura de la informació emprada i difosa per la interfície.

Posició de la capa de treball (Piskel, 2022).

Zoom, coordenades i tamany de l’àrea de treball (Piskel, 2022).

Tamany del pinzell actual (Piskel, 2022).

Resultat: L’UI fa servir el color groc per resaltar les opcions escollides arbitràriament o per comunicar informació del que passa al usuari, com per exemple la capa a la que s’està treballant actualment, el tamany de l’àrea de treball, o la eina seleccionada.

Valoració: L’ús és correcte. En aquest sentit, l’aplicació fa un ús escrupulós.

#7_ Flexibilitat i eficiència d’ús.

Definició breu del principi: Permetre que l’usuari pugui adaptar l’UI ha diferents contextes d’ús (personalització).

Elements implicats: Elements dinàmics.

Tasca / objectiu: Comprovar si l’aplicació permet personalitzar la disposició d’elements o els seus atributs de manera que es pugui adaptar a necessitats diferents independentment de l’usuari.

Panell de configuració (Piskel, 2022).

Resultat: En aquest aspecte podem comprovar les limitacions de personalització de l’aplicació. No hi ha cap opció que permeti canviar res de la interfície, només de les característiques de la creativitat a realitzar.

Valoració: L’ús és incorrecte. Es busca que l’usuari no tingui opció de personalitzar la seva experiència.

Gravetat: Lleu. L’aplicació té un ús que deriva en un tipus de producte molt específic. Si es tractés d’una aplicació amb un ventall d’usuari més obert, la gravetat seria més gran.

Proposta de millora: Valorar la possibilitat de fer que alguns conjunts d’eines fosin modulars i es poguessin distribuir de manera arbitrària per l’UI.

#8_ Minimalisme.

Definició breu del principi: Controlant la quantitat i qualitat d’informació que s’entrega visualment a l’usuari repercuteix en una millora clara en l’us de la interfície.

Elements implicats: Disseny estètic, informació rellevant.

Tasca / objectiu: Analitzar com es fa servir l’espai de la interfície i l’eficiència de la comunicació amb l’usuari amb un recorregut visual.

Resultat: Per una banda, trobem que el disseny és força clar, amb colors de forts contrasts i molt d’espai negatiu, que separa bé uns elements dels altres i els diferencia. Per l’altra, trobem botons que mostren més informació de la necessària o conjunts d’eines que no es poden minimitzar de cap manera.

Valoració: L’ús és incorrecte. El conjunt d’eines que es posen a disposició de l’usuari, que són ben poques, podrien estar conjuntades d’una manera més cohesionada. Els tons de negres i grisos en el disseny d’alguns elements fa que sigui difícil delimitar-los a simple vista per alguns usuaris.

Gravetat: Mig. L’estat actual fa que les sessions llargues de treball (com ara el dibuix d’una animació) siguin difícil de dur a terme.

Proposta de millora: Un redisseny de la interfície, amb un model més clar i de millor contrast tindria un impacte en la productivitat molt important.

#9_ Ajudar als usuaris a reconèixer, diagnosticar i recuperar-se dels errors.

Definició breu del principi: Una vegada hi ha un error, el sistema ha d’ésser capaç de guiar al usuari, mitjançant missatges clars, en la manera de trobar una solució.

Elements implicats: Comunicació de l’error, visibilitat de l’error, guia en el procés de solució.

Tasca / objectiu: Generar una situació d’error per a que el sistema ens procuri una solució a l’abast de l’usuari mig.

Possible error i relació de solucions disponibles (Piskel, 2022).

Resultat: Al carregar el servei mitjançant un navegador no compatible, s’avisa a l’usuari de la situació, s’explica clarament quin és el problema i s’indica una solució que, en aquest cas, passa per a que l’usuari mateix sigui qui faci servir un navegador alternatiu per accedir-hi.

Valoració: L’ús és correcte. L’error s’indica d’una manera transparent i es proposen una sèrie de directrius a seguir per arribar a una solució.

#10_ Ajuda i documentació.

Definició breu del principi: És necessària la presència d’una relació d’articles d’ajuda no molt extensa, d’utilitat per a l’usuari, fàcilment localitzable i profundament adaptada al contexte de l’aplicació o servei.

Elements implicats: Eines d’ajuda i documentació per a l’usuari (instruccions d’ús, suport).

Tasca / objectiu: Revisar quina documentació inclou l’aplicació i si és d’utilitat real.

Relació de dreceres de teclat (Piskel, 2022).

Informació emergent en l’ús d’eines concretes (Piskel, 2022).

Enllaços a documentació externa (Piskel, 2022).

Resultat: La documentació present in-app queda relegada a dos enllaços externs a la seva pàgina de GitHub corresponent (recordem que es tracta d’un projecte open source). L’arxiu referent a preguntes freqüents és gairebé inexistent. La documentació per comprendre cada eina a disposició es troba com a informació emergent, no sempre explicada amb el mateix nivell de detall.

Valoració: L’ús és incorrecte. S’obliga a l’usuari a buscar documentació en direccions externes. En el cas de GitHub, la documentació subministrada i la manera en que es presenta pot resultar poc accessible per alguns perfils d’usuari més casuals.

Gravetat: Greu. No presentar un mínim d’informació accessible per al ventall d’usuaris objectius corresponent és una errada que influeix directament en el percentatge d’adopció de l’aplicació i relega el seu ús a sectors o processos concrets, desaprofitant tot el potencial que s’ofereix.

Proposta de millora: Implementar un arxiu d’ajuda i tutorials contemporani, accessible i efectiu per a tota mena d’usuaris.

V. Resum dels principals problemes esmentats:

La relació, per tant, dels problemes apareguts, serien els següents:

• Greu: Manca documental.
• Mig: Disseny massa complex per les eines ofertes.
• Lleu: Impossibilitat per personalitzar l’experiència d’usuari a preferències o metodologies de treball.

VI. Inclusió i diversitat:

• Llenguatge emprat, culturització, contextualització: L’aplicació escull arbitràriament tindre poca documentació, dirigida principalment a desenvolupadors en lloc de l’usuari final. Per tant, no es fa un ús inclusiu ni contempla la diversitat de l’usuari.
• Identitat de gènere: No es fa cap referència ni existeix una diferència de serveis ofertats depenent d’identitat de cada usuari, cosa que és positiva en aquest sentit.
• Característiques del disseny: la paleta de colors emprada és molt neutra i amb un contrast interessant, que manté una cohesió continua. Per una altra banda, aquesta cohesió tan estricta fa que no hi hagi opció de personalització o adaptació de la interfície, cosa que deixa a una bona part dels usuaris potencials a un nivell d’us desfavorable si els comparem amb els usuaris més experts.

V. Bibliografia i recursos emprats: