Prácticas Diseño Interfaces de Usuario 2023-24 (Tema: .... )
Grupo: DIU2_Real_Betis. Curso: 2023/24 Updated: 21/3/2024
Proyecto: Azucareros Anónimos
Descripción: Nuestro proyecto consiste en un club gastronómico de postres donde las personas aprenderán a crear una variedad de dulces, desde lo básico hasta lo más elaborado. Siendo un maestro pastelero, entrado en el tema o un recién empezado, se ofrecen cursos que contemplan todos los rangos de dificultad y gustos, a la carta del usuario.
Logotipo:
Miembros
- 👤 Francisco de Asís Rivas Fernández
- 👤 Gonzalo Morato de Tapia Caro
En esta práctica nos hemos centrado en conocer la empresa y su página web y tratar de diferenciarlas de las demás opciones, buscando los puntos fuertes y los débiles. Esto ha sido gracias a métodos como la creación de Personas ficticias y User Journey Maps, que nos han permitido hacer más fácil la comprensión de posibles usuarios a la hora de interactuar con la página.
Hemos decidido elegir a CookEle, ya que es la que pensamos que es la más corregible y a la que podemos hacer un mejor análisis, ya que los defectos y las virtudes están mucho más claras en ésta que en las otras. Elegir esta por encima de las otras ha sido meramente por el hecho de que tenemos que proponer una mejora de cara a los usuarios que vayan a hacer uso de dicha página y que quieran por tanto usar los productos que ofrecen estas empresas. En vista a ese objetivo, hemos visto que esta opción sobresale por encima de las demás. Sobresale en cuanto se refiere a posibilidad de mejorar y de incrementar la experiencia de las personas al querer hacer uso de este servicio. Las empresas competidoras están a un nivel mucho más alto comparado con la que hemos elegido, así que el análisis hubiera sido más difícil.
-
Persona 1
Javier González representa un perfil de usuario común en la sociedad contemporánea: un adulto mayor recién divorciado y jubilado que busca reinventarse y encontrar nuevas pasiones en esta nueva etapa de su vida. Su lucha con la tecnología proporciona un contexto realista para explorar como está estructurada la página web, y permite destacar los puntos fuertes y débiles de la página cuando la utiliza una persona con poca experiencia digital. -
Persona 2 Alejandro García González tiene un perfil demográfico representativo de la generación actual de jóvenes adultos. Alejandro está inmerso en la tecnología y las plataformas en línea, lo que le permitiria abordar el proceso de inscripción en clases de cocina con facilidad. Sin embargo, esto también permite resaltar los fallos de diseño de la página cuando le faltan funciones que los usuarios con experiencia consideran básicos, como poder inscribirse de manera online.
En esta hoja de cálculo, hemos calificado cada uno de los aspectos de la página web de la empresa, para obtener así una calificación general que nos indique un grado de posible mejora a la hora de hacer cara a las necesidades del usuario. La empresa que está calificada es CookEle, la que hemos elegido anteriormente por su gran cantidad de aspectos mejorables y escalables.
Hemos escogido esta opción ya que vemos que es la más adecuada a la hora de visualizar claramente los cuatro pilares que harán de base al diseño de nuestra página.
Nuestro proyecto consiste en un club gastronómico de postres donde las personas aprenderán a crear una variedad de dulces, desde lo básico hasta lo más elaborado. Siendo un maestro pastelero, entrado en el tema o un recién empezado, se ofrecen cursos que contemplan todos los rangos de dificultad y gustos, a la carta del usuario.
En nuestro ScopeCanvas hemos reflejado la propuesta de valor anterior, y hemos rellenado la plantilla con la información referente a lo que queremos conseguir y cómo mediremos que nuestra página funciona.
En esta matriz se reflejan diferentes tareas a realizar y diferentes grupos de usuarios. Cada tarea tiene una prioridad para cada grupo de usuarios. De esta tabla sacaremos tres tareas y les haremos un User Flow.
Hemos decidido que las páginas más importantes son:
En esta etapa del diseño, nos hemos topado con decisiones que marcaran el resto de las prácticas. Estas decisiones sentarán las bases de las siguientes prácticas. Esta parte del diseño ha sido bastante laboriosa y ha requerido bastante tiempo en estar complicada. Lo más dificil ha sido la parte de la malla receptora, la propuesta de valor y el ScopeCanvas, ya que requerían de un proceso de creación muy elaborado.
3.a Moodboard
Plantear Diseño visual con una guía de estilos visual (moodboard) Incluir Logotipo Si diseña un logotipo, explique la herramienta utilizada y la resolución empleada. ¿Puede usar esta imagen como cabecera de Twitter, por ejemplo, o necesita otra?
Plantear Landing Page
El patrón de diseño de Onboarding se utiliza para guiar a los usuarios a través de la configuración inicial o introducción a una aplicación o plataforma. Es especialmente útil cuando se trata de una primera interacción del usuario con el producto. Proporciona una experiencia de bienvenida que ayuda a los usuarios a comprender rápidamente cómo utilizar la aplicación y qué esperar de ella.
El menú es un componente esencial en cualquier diseño de interfaz de usuario. Proporciona una forma organizada y accesible para que los usuarios naveguen a través de las diferentes secciones y funciones de la aplicación. Un menú bien diseñado facilita la navegación y la ubicación de información importante, lo que mejora la usabilidad y la experiencia del usuario.
El uso de una imagen destacada (Hero Image) junto con un carrusel de imágenes permite captar la atención de los usuarios de manera visualmente atractiva. Esto es especialmente útil para resaltar contenido importante, promociones o características clave de la aplicación. El carrusel también permite presentar múltiples imágenes de forma compacta, lo que puede ser útil para mostrar una variedad de contenido en un espacio limitado.
Los wizards, o asistentes, son útiles para guiar a los usuarios a través de procesos complejos o multipartitos, como las reservas de las diferentes actividades. Dividen el proceso en pasos más manejables y proporcionan orientación contextual en cada etapa, lo que ayuda a reducir la carga cognitiva y mejorar la experiencia del usuario.
La lista de artículos es un patrón comúnmente utilizado para mostrar una colección de contenido, como noticias, publicaciones de blog o productos. Proporciona una manera organizada y fácil de explorar y acceder a diferentes elementos de contenido, generalmente presentados de manera jerárquica o cronológica.
Este patrón se utiliza para mostrar detalles específicos de un elemento. Si es una sesión, muestra más información acerca de la sesión y como registrarse. En el caso de los eventos o el concurso, imprime información acerca de el evento o el tema del concurso en concreto.
El patrón de reserva se utiliza para facilitar a los usuarios la programación o reserva de servicios, citas o eventos. Proporciona un flujo de trabajo claro y guiado que permite a los usuarios seleccionar fechas, nivel y otras opciones relevantes para completar la reserva de manera eficiente.
Los formularios son elementos fundamentales en muchas aplicaciones y sitios web, ya que permiten a los usuarios proporcionar información o interactuar con el sistema. El patrón de entrada de formularios se utiliza para diseñar campos de entrada de manera clara y accesible, facilitando a los usuarios la introducción de datos de manera precisa y sin problemas.
La sección "Acerca de" proporciona información adicional sobre la aplicación, el servicio y la empresa detrás de ella. Es útil para compartir detalles como la misión, el equipo, las características clave o cualquier otra información relevante que ayude a los usuarios a comprender mejor el contexto y el propósito de la aplicación. Esto puede ayudar a construir confianza y credibilidad con los usuarios.
) 5.b Eye Tracking method
Tareas realizadas
Se han realizado distintas tareas:
-
Tarea 1: Registrarse en la plataforma.
-
Tarea 2: Reservar una sesión
-
Tarea 3: Reservar una plaza para un evento
-
Tarea 4: Apuntarse a un concurso
-
Mapas de calor
- Mapa de calor del prototipo A: Algunas capturas de pantalla de los mapas de calor del prototipo A:
Vemos que las imágenes son lo qué más llama la atención al usuario, y es capaz de asociar la imagen al texto que se muestra debajo, por lo que mira discretamente o directamente no mira.
-
Mapa de calor del prototipo B:
Objetivo: Identifica como reservar una actividad.
Objetivo: Identifica las fechas importantes.
Resultados y valoración
El heat map del usuario experto es similar al del usuario objetivo porque la app "EGO" tiene un diseño intuitivo que guía a todos los usuarios, independientemente de su experiencia, hacia las mismas áreas clave. Esta consistencia en la atención visual sugiere que la interfaz está bien diseñada y facilita la navegación, mostrando que tanto expertos como novatos comparten objetivos similares al usar la aplicación.
UsabilityReport La app "EGO" es una aplicación de gastronomía japonesa diseñada para ofrecer a los usuarios una experiencia culinaria completa. La aplicación permite a los usuarios explorar recetas tradicionales y modernas, y ofrece cursos, talleres y actividades únicas para todos los niveles de conocimiento
Estos usuarios se han elegido tirando los dados y eligiendo el tipo de persona, la actividad y la emoción que tendría al usar la aplicación. Los usuarios son los siguientes:
- Usuario 1:
Como vemos en esta tabla, este usuario tiene un rasgo de "Enfadado" a la hora de evaluar la aplicación. Por tanto, es un usuario que va a tener una percepción negativa de la aplicación. Esto hace que a la hora de evaluar la aplicación, sea un usuario que va a tener una percepción negativa de la aplicación, por lo que la puntuación normalmente va a ser baja. Si tenemos una puntuación entre decente y buena, podemos decir que la aplicación es bastante buena.
- Usuario 2:
Como vemos en esta tabla, este usuario tiene un rasgo de "Asco" a la hora de evaluar la aplicación. Por tanto, es un usuario que va a tener una percepción negativa de la aplicación. Esto hace que a la hora de evaluar la aplicación, sea un usuario que va a tener una percepción negativa de la aplicación, por lo que la puntuación normalmente va a ser baja. Si tenemos una puntuación entre decente y buena, podemos decir que la aplicación es bastante buena.
- Usuario 3:
Como vemos en esta tabla, este usuario tiene un rasgo de "Miedo" a la hora de evaluar la aplicación. Por tanto, es un usuario que va a tener una percepción ansiosa y cautelosa de la aplicación. Esto hace que, a la hora de evaluar la aplicación, sea un usuario que va a tener una tendencia a destacar posibles riesgos o problemas, por lo que la puntuación puede ser influenciada negativamente por sus inquietudes. Si, a pesar de esto, obtenemos una puntuación entre decente y buena, podemos decir que la aplicación es confiable y ofrece una sensación de seguridad adecuada.
- Usuario 4:
Como vemos en esta tabla, este usuario tiene un rasgo de "Tristeza" a la hora de evaluar la aplicación. Por tanto, es un usuario que va a tener una percepción pesimista y reservada de la aplicación. Esto hace que, a la hora de evaluar la aplicación, sea un usuario que tiende a enfocarse en aspectos negativos o deficiencias, lo que puede influir negativamente en su puntuación. Si, a pesar de esto, obtenemos una puntuación entre decente y buena, podemos decir que la aplicación tiene una capacidad notable para ofrecer una experiencia positiva y mejorar el ánimo del usuario.
Atendiendo a los scores obtenidos en el cuestionario SUS, vamos a obtener un score agregado de cada uno de los prototipos. Para ello, vamos a sumar los valores de cada uno de los usuarios y dividirlo entre el número de usuarios. En el caso del A, el usuario 1 ha obtenido una puntuación del 57,5, mientras que el usuario B ha obtenido una puntuación de 60. Por tanto, el score agregado del prototipo A es:
Esta puntuación puede parecer baja, pero es importante tener en cuenta que el cuestionario SUS es un cuestionario subjetivo y que, por tanto, puede variar en función de la persona que lo realice. En este caso, las personas que evaluaban el prototipo A tenian el rasgo "Asco" y "Enfadado" en la tabla de evaluación de usuarios, lo que muestra que aún a persar de tener las emociones más negativas a la hora de evaluar el prototipo, la puntuación obtenida es bastante buena.
Esto indica que los usuarios que peor puedan evaluar la aplicación no van a ser detractores, sino que van a ser pasivos. Por tanto, aquellos usuarios que tomen la aplicación con un estádo de ánimo más positivo, van a tener una puntuación mucho más alta y van a ser promotores de la aplicación.
El resultado de 63,75 en el SUS, con evaluadores que tenían rasgos de "Miedo" y "Tristeza", indica que, a pesar de sus percepciones pesimistas y cautelosas, la aplicación es vista de manera bastante positiva. Esto sugiere que usuarios con estados emocionales más positivos probablemente otorgarán puntuaciones mucho más altas, lo que destaca la capacidad de la aplicación para satisfacer y atraer a una audiencia más amplia.
Comparado con el resultado de 58,75 del proyecto A, ambos resultados reflejan que incluso evaluaciones de usuarios con emociones negativas no son indicativas de una mala aplicación, sino que los usuarios con mejores estados de ánimo pueden ser promotores activos.
Las técnicas aplicadas fueron útiles para detectar varios errores de usabilidad que no eran evidentes inicialmente. La combinación de pruebas de usuarios y análisis de eyetracking proporcionó una visión completa de los problemas y áreas de mejora. En general, estas técnicas demostraron ser efectivas para identificar y abordar los fallos de usabilidad en la app "EGO".
Usability Report de nuestra práctica: (https://github.com/jseg380/DIU/blob/master/P4/Usability-Report24.md) La evaluación del proyecto mediante pruebas de usabilidad, pruebas A/B y seguimiento ocular ha sido integral para entender y mejorar la experiencia del usuario. El informe de usabilidad mostró cómo las pruebas iterativas ayudaron a identificar y solucionar problemas en el diseño, mejorando la claridad y la navegación del sitio web.
Las pruebas A/B permitieron comparar diferentes versiones del diseño para seleccionar los elementos más efectivos, mientras que el seguimiento ocular proporcionó datos sobre cómo los usuarios interactúan visualmente con el contenido. Aprendimos la importancia de la retroalimentación continua y de la adaptación del diseño para satisfacer las necesidades de los usuarios).
El proceso de desarrollo de diseño siguiendo la metodología UX ha sido una experiencia enriquecedora y formativa. A través de la investigación, pruebas de usuario y análisis de datos, pudimos iterar y mejorar continuamente nuestro diseño, asegurando que satisface las necesidades y expectativas de los usuarios. La metodología UX nos permitió abordar el diseño de manera estructurada y centrada en el usuario, lo que resultó en una interfaz más intuitiva y eficiente. La valoración general de las prácticas ha sido positivo, ya que hemos aprendido maneras nuevas de crear proyectos y aplicaciones.