PEC2: Evaluación heurísitca

1. Objetivos

1.1. Interfaz

La interfaz elegida es la aplicación Style DNA: Your Pocket Stylist. Se trata de un virtual closet outfit planner que tiene como objetivo ayudar al usuario a almacenar su ropa, así como las distintas combinaciones que se pueden realizar con ellas y descubrir nuevas marcas. Contiene las siguientes funciones principales:

  • Un armario virtual donde los usuarios pueden tomar fotos de su ropa o buscar imágenes en línea para agregarlas a su colección de ropa.
  • Categorización de prendas que las organiza las prendas en diferentes categorías para una fácil navegación.
  • Creación de conjuntos que permite a los usuarios arrastrar y soltar prendas en una interfaz visual y guardar los conjuntos completos en su armario virtual.
  • Recomendaciones de conjuntos que utiliza un algoritmo de inteligencia artificial para ofrecer recomendaciones personalizadas en función de las prendas que el usuario tiene en su armario virtual, así como poder incluir a estos conjuntos ropa nueva que puede adquirir el usuario.
  • Seguimiento de tendencias que permite a los usuarios estar a la moda con las últimas tendencias y recibir sugerencias para incorporarlas en su estilo personal.

1.2. Metodología

Se llevará al cabo la evaluación a través de los diez principios de Nielsen, justificando en cada parte cómo afecta ese principio a la interfaz e interacción del usuario. Así mismo, he señalado un listado de gravedad respecto a la experiencia del usuario.


2. Análisis

2.1. Los diez principios heurísticos de Nielsen

1. Visibilidad del estado del sistema.

Descripción: Después de realizar el test personalizado, la app enseña una pantalla de carga. A medida que sube la barra de carga, la app enseña al usuario distintas funcionalidades, como podemos observar en la foto.

Valoración: No obstante, tengo la impresión de que realmente es un simulador de carga, pues mientras lo hacía, aparecía la opción de subscribirte a un plan y los distintos precios, desapareciendo por completo la pantalla de carga; esto provocaba que rompiera dicha simulación.

Gravedad: 2. No demuestra de verdad una barra de carga, sino que se realiza como una estrategia para atraer al usuario a subscribirse a un plan de pago y estropea su experiencia del usuario, al percibirse como spam.

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

Descripción: La aplicación se ajusta a los objetos de la vida real.

Valoración: Las subclases del índice son abundantes. Quizás una segunda agrupación resultaría más sencilla para el usuario.

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

Descripción: Esta captura de pantalla muestra el test inicial que se le realiza al usuario para personalizar mejor el contenido expuesto.

Valoración: El usuario no puede rectificar lo que ha elegido después de darle «next», lo cual resulta bastante problemático, ya que no se puede volver a realizar el test una vez estás registrado.

Gravedad: 1. Este error perjudica en gran medida la experiencia el usuario, pues realizar de nuevo el test supondría borrar su cuenta y volver a realizarlo. Debería ser un proceso fácil y rápido.

4. Consistencia y estándares.

Descripción: Este es el menú principal de la aplicación, situado en la esquina inferior izquierda. Como se puede observar, la aplicación cumple con la consistencia y estándares, como por ejemplo el símbolo situado en la esquina superior izquiera: la bolsa indica el carro de la compra, pero en este caso se ajusta al contexto de compra de ropa.

Valoración: El icono de la bolsa de compra resulta ser muy pequeño. Un tamaño más grande ayudaría a encontrarlo al usuario, sobre todo con problemas de visión.

5. Prevención de errores.

Descripción: Después de realizar el test personalizado, se le pide al usuario un selfie para comprobar los colores más acordes a su constitución.

Valoración: La prevención de realizar una mala foto está muy bien expuesta e ilustrada en este caso.

6. Reconocimiento antes que recuerdo.

Descripción: En el perfil, se puede observar las estadísticas de la cantidad de cada uno de los parámetros estéticos que mejor le quedan al usuario. Además, todos los iconos van acompañados de un icono.

Valoración: Los iconos de «Color» y «Fabric» no representan del todo el concepto asignado. Quizás el cambio a otros símbolos más universales (una paleta de pintor, un rollo de tela) ayudarían más al usuario con su asociación.

7. Flexibilidad y eficencia en el uso.

Descripción: Se trata de la función de añadir prendas al armario virtual.

Valoración: El usuario puede realizar una foto de su compra, pero para aquellos usuarios que quizás, por diversos motivos de salud o desconocimiento de tecnología, les resulte más difícil utilizar la cámara, añadir las prendas desde el catálogo ya formado es buena idea.

8. Diseño estético y minimalista.

Descripción: Este es el apartado del catálogo, donde el usuario puede buscar los objetos que desea.

Valoración: Precisamente al tratarse de un apartado de búsqueda, debería ser un diseño mñas estructurado.

Gravedad: 5. Hay muchas objetos en una interfaz de búsqueda. Debería tener un diseño más sencillo, así como una ligera reducción de tamaños de algunas letras, que disconcordan con la página en general.

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

Descripción: Se trata de la pantalla de ayuda de la aplicación.

Valoración: Más opciones ayudarían al usuario, de diversas índoles.

Gravedad: 3. Resulta ser demasiado escaso ante los numerosos problemas a los que se puede encontrar el usuario (problemas con la cámara, etc.).

10. Ayuda y documentación.

Descripción: Se trata de los ajustes de la apliación.

Valoración: Se debería incluir ajustes de usuario, como por ejemplo, las preferencias.

Gravedad: 4. Los ajustes, realmente, no incluyen la opción de modificar, por ejemplo, las preferencias o ajusted de perfil.

2.2. Consideraciones: inclusión y género

Este tipo de aplicaciones suelen ir enfocadas exclusivamente a mujeres con bastantes consecuencias negativas, como por ejemplo un mayor foco de consumismo y un reforzamiento de los esteriotipos de género. La ropa no tiene género, ni debería ser catalogada dependiendo de ello: un hombre puede ponerse un vestido. No obstante, la implementación futura que realiza la aplicación para incluir también hombres usuarios me parece buena idea; espero que el catálogo no se limite a cada género y cada usuario pueda acceder al otro si así lo desea.


3. Conclusiones

La aplicación es relativamente nueva y tiene margen de mejora; una vez solventados los problemas que presenta, podría resultar en una aplicación muy cómoda para el usuario.

Diseño de interacción

Diagramas de flujo

¡Hola a todos! Para esta entrada he decidido escoger la página web del Museo del Prado: https://www.museodelprado.es/en y Bilbao International Art and Fashion: https://biaaf.com/. Presentaré sus diagrmas de flujo, así como un análisis crítico de cada uno de ellos; también realizaré una evaluación heurística.

 

Museo del Prado

Este diagrama de flujo muestra cómo un usuario navegaría por la página web del Museo del Prado. El inicio comienza en la página principal, donde el usuario puede elegir entre tres secciones: Colección, Visitas e Investigación. Todas ellas permiten al usuario retroceder y seleccionar otra sección, así como salir de la página web con facilidad.

Este diagrama muestra una estructura lógica y clara en la navegación de la página web. Sin embargo, una posible mejora sería incluir opciones de búsqueda y filtros para ayudar a los usuarios a encontrar obras de arte específicas dentro de una categoría, así como una funcionalidad de búsqueda mediante palabras clave.

La evaluación heurística se ha realizado con los 10 principios de Nielsen:

√ = Cumple con el principio

× = No cumple con el principio

  1. Visibilidad del estado del sistema: √
  2. Coincidencia entre el sistema y el mundo real: √
  3. Control y libertad del usuario: √
  4. Consistencia y estándares: ×
  5. Prevención de errores: √
  6. Reconocimiento en lugar de recordar: ×
  7. Flexibilidad y eficencia de uso: ×
  8. Estética y diseño minimalista: √
  9. Ayuda a los usuarios a reconocer, diagnosticar y recuperarse de errores: ×
  10. Ayuda y documentación: ×

En general, la pagina web del Museo del Prado cumple con varios de los principios de usabilidad: Utiliza terminología adecuada al contexto, la visualidad es clara y ofrece opciones de navegación coherentes, asi como también muestra dvertencias antes de acciones irreversibles. No obstante, hay margen de mejora: por ejemplo, la agregación de opciones de deshacer o inclusión de una funcionalidad de búsqueda y filtros para una mayor personalización del usuario. Por último, podría proporcionar más información sobre cómo solucionar los posibles errores que aparacen.

Como conclusión, la página web tiene unas buenas bases en términos de usabilidad, pero puede tener muy buenas oportunidades de mejora.

BIAAF

Este segundo diagrama de flujo representa la navegación de un usuario en la página wed de BIAAF(Bilbao International Art & Fashion Forum). Comienza su inicio en la página principal y permite al usuario elegir entre las diferentes secciones: About BIAAF, News, Events, Designers y Awards.

Muestra una estructura clara y coherente y facilita a los usuarios a encontrar la información que desean. No obstante, las opciones de navegación podrían ser más visibles y accesibles para cada sección, para que los usuarios pudieran distinguir los distintos tipos de secciones que hay. Asimismo sería interesante añader una funcionalidad de búsqueda.

Respecto a su evaluación heurística:

√ = Cumple con el principio

× = No cumple con el principio

  1. Visibilidad del estado del sistema:
  2. Coincidencia entre el sistema y el mundo real:
  3. Control y libertad del usuario: ×
  4. Consistencia y estándares:
  5. Prevención de errores:
  6. Reconocimiento en lugar de recordar:
  7. Flexibilidad y eficencia de uso:
  8. Estética y diseño minimalista:
  9. Ayuda a los usuarios a reconocer, diagnosticar y recuperarse de errores: ×
  10. Ayuda y documentación: ×

En general esta página web cumple con muchos de los principios de usabilidad, pues muestra una visualización clara, terminología adecuada al contexto y una estructura de navegación coherente, así como su estética concuerda con lo que se trata en su página web. Si embargo, se podría proporcionar de una mayor ayuda al usuario enc aso de errores.

Conceptualización de la interacción.

¡Hola a todos! Aquí presento tanto el escenario como el user journey (en el que he integrado, de nuevo, el escenario). Un saludo 🙂

Persona:

Jan Simon

Tarea: 

Disfrutar de la exhibición de uno de sus artistas preferidos.

Antecedentes:

Con la modalidad híbrida, se puede disfrutar de las exhibiciones con la experiencia viewing room 360º.

Escenario:

  • Jan entra a la página web desde el navegador de su dispositivo.
  • Pulsa el enlace que le permite descargarse la aplicación.
  • Debe registrarse como usuario (guest) del festival.
  • Introduce sus datos de usuario.
  • Selecciona viewing room 360º.
  • Busca la exhibición que más le gusta.
  • Se mete dentro de la sala virtual.
  • Puede observar todo lo que hay a su alrededor moviendo el móvil.
  • Anda alrededor de su habitación para el visionado.
  • Da por finalizada la experiencia y sale de la aplicación.

 

Información del campo recorrido

El gimnasio

Voy a describir un recorrido habitual que realizo cinco veces a la semana al gimnasio para hacer ejercicio. Debido a la gran variedad de máquinas que se encuentran dentro del recinto, he decidido describir particularmente el día en el que solo realizo entrenamiento de cardio, por lo que solo describiré una máquina en concreto.

1. Ascensor

¿Cómo lo hago?: Primero llamo al botón que se encuentra en el rellano de mi piso para llamar al ascensor. Acude, abre las puertas y entro dentro. Observo los botones que hay y escojo a que piso quiero ir. Pulso, se cierran las puertas y baja hasta ese piso. Si alguien ha llamado y se encuentra en un piso inferior al mío, el piso se dentendrá. Sin embargo, si alguien de un piso superior al mío llama, deberá esperar a que yo baje hasta el piso que he seleccionado.

¿Cómo lo siento?: Fácil, no me causa ninguna dificultad. Además, el botón verde que rodea a la B ayuda a comprender que se trata del piso bajo (donde está el portal).

¿Cómo lo conozco?: Es una acción que tengo bastante interiorizada, por lo que me sale de manera automática e intuitiva.

Tipo de interacción: Manipulating, interactúo con los botones.

Estilo de interacción: Touch, pues para interactuar con ellos debo de tocarlos con los dedos (o, en época de pandemia, con la punta de las llaves).

Contexto de interacción: Manipulación tangible, todo lo interactuado es puramente físico.

2. Entrada y salida

¿Cómo lo hago?: Para poder acceder al recinto o salir del mismo debo de acceder a la aplicación de mi gimnasio con mi movil, seleccionar el rectángulo naranja en el que pone mi nombre y escanear el código QR en el lector. Al leerlo, se oirá un «click» y aparecerán las letras en la máquina en la que me confirma que puedo pasar. Sin embargo, a veces el código QR está expirado y la máquina indica que deber de generar uno nuevo.

¿Cómo lo siento?: Me frustra un poco cuando me pide que debo de actualizar el código QR. Además, el lector a veces no lee muy bien la pantalla del móvil y debo de acercarla y alejarla hasta que está en la altura óptima para el lector, lo cual a veces ha ralentizad

o la entrada o salida del gimnasio y se ha formado un poco de fila.

¿Cómo lo conozco?: El primer día que me apunté tuvieron que indicarme verbalmente los entrenadores que debía de descargar la aplicación y me enseñaron cómo utilizarla. De otro modo, no lo hubiera sabido hacer. Pienso que quizás sería mejor que tuvieran folletos informativos, o al menos un cartel explicativo a la entrada del gimnasio; la forma que tienen de hacerlo actualmente es poco efectiva, en mi opinión.

Tipo de interacción: Manipulating, interactúo con la máquina de la entrada / salida a través de mi móvil.

Estilo de interacción: Touch, debo de pulsar con mis dedos en la aplicación el código QR y enseñarlo agarrando el móvil con la mano al lector.

Contexto de interacción: GUI, al fin a cabo esta realización se realiza a través de una app.

3. Cinta de correr o caminar

¿Cómo lo hago?: Primero me subo a la cinta de correr. Pulso al botón verde «quick start». Una vez la máquina se pone en marcha, subo tanto la inclinación como la velocidad con los botónes + y -. En la pantalla me muestra los datos del ejercicio que estoy realizando. Por último, si quiero parar, tengo varias maneras: pulsando el botón «enfiramiento», que no parará la máquina del todo pero se realizará una cuenta a trás con una altura y velocidad menor a la establecida por mí, o «stop» que para totalmente la máquina.

¿Cómo lo siento?: Me parece que la máquina facilita bastante cómo ser usada; me siento cómoda utilizándolo aún siendo que la gran cantidad de botones, a priori, podría ser abrumador para quien nunca hubiera hecho ejercicio en la máquina.

¿Cómo lo conozco?: La primera vez que la utilicé presté atención a lo que hacía cada uno de los botones y fui tanteando, hasta que comprendí perfectamente lo que hacía cada uno de ellos aunque ya se intuía. Actualmente es una acción que me sale casi automática.

Tipo de interacción: Manipulación, hay unos comandos.

Estilo de interacción: Touch, se utilizan los dedos para pulsar los botones y correr sobre la cinta.

Contexto de interacción: Manipulación tangible, la máquina funciona en base a lo que se pulsa.