Prácticas Diseño Interfaces de Usuario 2023-24 (Tema: Cursos de cocina )
Grupo: DIU2_Los_Humildes. Curso: 2023/24 Updated: 21/5/2024
Proyecto:
Cooking Humility
Descripción:
Cooking Humility tiene como objetivo que las personas se acerquen a la cocina de manera innovadora y original a través de cursos y concursos de cocina. También ofrece la posibilidad de conocer gente gracias al ambiente cercano de las clases.
Logotipo:
Opcionalmente si diseña un logotipo para su producto en la práctica 3 pongalo aqui
Miembros
- 👤 Benigno Joaquín Parra Campos
- 👤 Alejandra Gómez Soriano
En el user research se busca recopilar informacíon mediante la observación en el campo para poder posteriormente aplicarla a nuestro proyecto. Esto lo hemos hecho mediante la observación y la experiencia que tenemos en el campo, además de la busqueda de la demografía habitual de este tipo de servicios y disntintos tipos de análisis
En el analísis de competencia hemos comparado tres páginas: Granada Cooking, Pilsaeduca y Aptitü. El proposito de este analisis es comparar distintos apectos de las páginas para no solo averiguar cual de ellas es mejor (en este caso Granada Cooking con 92 puntos) sino además descubrir las fortalezas de cada una para aplicarlas en nuestro proyecto, así como sus debilidades para poder evitarlas.
Hemos creado a dos personas ficticias con contextos distintintos. El primero es Eulalio, un hombre de tercera edad que busca ganar independencia y quitar un peso de encima a su mujer, que ya está muy mayor para encargarse de los dos. La segunda es Mercedes, una viuda ama de casa que busca mejorar sus habilidades culinarias en sus ratos libres para deileitar a su familia. Ambos casos nos han ayudado a enfocar el proyecto desde el punto de vista de posibles usuarios.
Este diagrama nos ha ayudado a enfocar el posible viaje que habrían tenido las personas ficticias por nuestro mapa, ayudandonos así a entender las necesidades que podrían tener futuros usuarios y como solventarlas. En el caso de Mercedes surgen problemas como el alcanzar a potenciales usuarios, la importancia de las opciones de filtrado y la facilitación del seguimiento de actividades Por parte de Eulalio surge la preocupación por la indecisión de como empezar a aprender a cocinar a parte del posible desequilibrio en el bienestar económico de la familia. Se deja aconsejar por su hijos para que se apunta y finalmente encuentra uno cerca de zona
Para la revisión de usabilidad hemos elegido GranadaCooking. Esta ha obtenido una puntuación de 79 puntos sobre 100 destacando en gran variedad de aspectos y quedándose corta en muy pocos.
Para este punto hemos creado un empathy map sobre nuestras 2 personas fictias de la práctica 1. Hay una leyenda indicando qué dice cada uno
En la propuesta de valor hemos establecido nuestras propuestas a corto y largo plazo, las acciones que vamos a llevar a cabo para conseguir nuestros objetivos y las métricas que usaremos para evaluar el éxito que hemos tenido en conseguirlos
Hemos analizado la frecuencia de uso de varias funciones de nuestra página, la más importantes resaltadas en otro color, entre los usuarios registrados y no registrados. En el user flow design hemos diseñado un esquema simple que explicaría el funcionamiento de las funciones más importantes de nuestra página y como llevarlas a cabo
Hemos realizado un diseño sobre el menú de nuestra página con una jerarquía de submenús para explicar su estructura general. En el labelling se lleva a cabo una breve descripción de cada uno de estos
Hemos realizado 4 bocetos que representan las funciones que más interactúan los usuarios que pretende mostrar su visualización en la página
Para el moodboard hemos creado un tablón donde se muestra la esencia e inspiración de nuestra marca. Tiene 2 colores predominantes sobre los que se basan nuestros 2 logos. También se puede apreciar los distintos iconos utilizados en nuestra página, así como los distintos tipos de letra que en total hay 3. Por último se pueden ver varias imágenes inspiradoras que muestran el buen ambiente en nuestros talleres.
En el landing page queremos presentar nuestro proyecto de una forma que resulte atractiva y cautivadora para el usuario. Para ello se pueden apreciar el uso de los colores principales en la página, así como los logos en la parte superior derecha para que el usuario se haga una idea de todo lo que puede hacer. También tenemos los logos en la esquina superior izquierda y un texto de bienvenida en la parte de abajo. Por último tenemos 2 botones de descarga que hace intuir que se trata de una aplicación móvil.
Los patrones usados en el diseño de la aplicación hasn sido los siguientes:
Onboarding: Paǵina principal que ve un usuario al entrar a nuestra página
Menu(Adaptada a móvil): Menú superior para navegar por las páginas de nuestra app móvil.
Carousel: Carosusel pada mostrar varias imagenes de u concurso o las actividades más populares.
Search: Barra de búsqueda para buscar una actividad por una palabra clave.
Card items: Para representar los cursos y su informacion.
Item details: Cada curso tiene un nombre, descrpción de lo que se va a hacer en el y el cocinero que la imparte.
Reserva: Para inscribirse a un curso.
Form Input: Formulario para inscribirse en un curso o cancurso.
About: Una pequeña descrpción de nuestro equipo y los servicios qe ofrecemos.
Como patron extra hemos añadido el siguiente: -Event Calendar para poder buscar una actividad por una fceha o simplementa ver en un dia seleccionado que actividades hay disponibles para poder apuntarse uno.
Este sería nuestro diseño:
Los layouts que hemos hecho son lo siguientes:
Página de beinvenida:
Registrarse:
Iniciar sesión:
Vista curso:
Darse de baja de curso:
Vista concurso:
Calendario:
Y su funcionamiento seria asi: Video funcionamiento
En resumen le hemos podido dar forma a nuestra web y definir la forma de navegación por nuestra página aunque nos hemos encontrado con algunos problemas al hacer los layouts principalmente ya que era lo más complejo de esta práctica.
5.b Eye Tracking method
Hemos hecho uso de gazerecorder para el EyeTracking. Se han cogido a 2 personas diferentes de nuestro círculo cercano para realizar esta prueba.
En una primera instancia se le ha pedido a ambas personas que intentasen acceder al curso partiendo desde la página principal. Después se le ha dado la libertad a estos mismo usuarios para que visualicen lo que más les llamo la atencion de la página principal.
Los resultados obtenidos de la página principal son positivos ya que ambos han podido acceder a alguna actividad, sin embargo dentro de la actividad no son tan buenos pues estos se han dispersado un poco con fotos extravagantes o con los comentarios ya que el color de estos y el del botón de reservar son muy parecidos. Una posible opción hacer más llamativo este botón. Todo esto viene explicado ocn más detalle en nuestro documento de EyeTracking
Se nos ha asignado el proyecto del equipo DIU2.DosVocesUnCompas cuyo enlace a github es este
Su proyecto se llama 'GastroBuddies' y consiste en una aplicación de un club de cocina donde puedes registrarte en su app y reservar distintos cursos de cocina según lo que quieras aprender.
Su diseño HI-FI está subido a figma y se puede encontrar en este enlace
Hemos creado estas 4 personas ficticias con personalidades variadas así como distintos motivos para usar el servicio, el objetivo es poder evaluar de una forma más objetiva ambos casos. Las dos primeras personas serán asignadas el cso A y las dos últimas serán asignadas el caso B. Las principales diferencias entre los usuarios serán los conocimientos tecnológicos que tengan además de los objetivos que tienen para usar la página.
Para conseguir evaluar la experiencia del usuario de forma objetiva hemos usado el cuestionario SUS. Este cuestionario proporciona una cifra concreta que será la forma de ver si nuestros usuarios recomendarina cada caso.
Los resultados muestran que tanto el caso A como el B tiene puntuaciones similares. Ambas páginas serían generalmente recomendadas por los usuarios, aunque presentan ligeros fallos en su diseño.
Para el usability report hemos usado la plantilla proporcionada en el guion de la práctica que está subida a github.
EL archivo se puede acceder mediante este enlace
En este archivo se pueden encontrar la metodología utilizada en la app y los resultados obtenidos, así como conclusiones nuestras.
Valoración personal:
En general la página está bastante bien, los únicos que defectos que tiene son que faltan algunas partes de la app por implementar la posibilidad de desamputarte de un concurso y que a veces se superponen unos elementos con otros en determinadas situaciones.
La práctica utilizando A/B testing, informes de usabilidad y eye tracking nos permitió entender mejor cómo interactúan los usuarios con el producto. El A/B testing nos dio datos claros sobre qué versiones del producto funcionaban mejor. Los informes de usabilidad nos ayudaron a identificar problemas específicos que enfrentan los usuarios.
El eye tracking mostró exactamente dónde los usuarios fijaban su atención, ayudándonos a mejorar el diseño visual. En resumen, aprendimos que usar estas tres técnicas juntas nos da una visión completa y detallada para mejorar la experiencia del usuario.
En resumen, las prácticas realizadas en la asignatura nos han hecho replantearnos la relevancia de la experiencia de usuario, la accesibilidad y el diseño de interfaces. Ahora valoramos mucho más estos aspectos y hemos aprendido a mejorar nuestros diseños para que sean más accesibles para todos los usuarios. Gracias a estas prácticas, hemos adquirido conocimientos y técnicas que nos serán de utilidad en un futuro.
Además, hemos desarrollado una comprensión más profunda de cómo interactúan los usuarios con nuestras aplicaciones, lo cual es esencial para crear productos intuitivos y efectivos. Este aprendizaje nos prepara mejor para enfrentar desafíos reales en el desarrollo de software y garantiza que nuestras futuras páginas y aplicaciones sean más eficientes y centradas en el usuario.
En general las prácticas nos han gustado y nos han sido entretenidas.