Prácticas Diseño Interfaces de Usuario 2023-24 (Tema: Cursos de Cocina )
Grupo: DIU1_01MiG's. Curso: 2023/24 Updated: 11/4/2024
Proyecto: Sabor y Saber
Descripción:
Sabor y Saber se dedica a promover la pasión por la cocina a través de su página web, ofreciendo una amplia variedad de talleres personalizados y experiencias culinarias únicas. Nuestra plataforma permite a los usuarios explorar clases tanto populares como menos conocidas, así como participar en funciones interactivas como guardar recuerdos de las experiencias y seguir a otros usuarios y chefs. Nuestra estrategia se basa en la investigación de mercado y en la retroalimentación de los usuarios para ofrecer constantemente un servicio diferenciado y atractivo.
Logotipo:
Miembros
- 👤 Ángel Muñoz Cortés
- 👤 Ane Anta Iriondo
Este proyecto tiene como objetivo comprender la demografía, preferencias y comportamientos de personas interesadas en asistir a talleres gastronómicos. Nosotros nos centraremos en cómo de fácil es para los usuarios realizar tareas básicas la primera vez que encuentran el diseño. Nuestro público cbjetivo seran principalmente los aficionados a la cocina, los socializadores culinarios y los padres y madres de familias.
Como podemos ver en su sitio web consta de una buena variedad de cursos de alta calidad y donde actualizan con frecuencia los mismos. La página web tiene un diseño bastante intuitivo y consta de un proceso de reserva simple y muchas fotos y videos de los diferentes cursos y la empresa.
En Granada Cooking consta de mucha variedad de cursos de diferentes cocinas, una buena calidad de contenido aunque no actualizan muy frecuentemente los cursos. Su página web tiene un diseño fácil de usar, un proceso de reserva muy simple e intuitivo y consta de muchas fotos de platos, cursos, instalaciones, etc.
La variedad de cursos no es muy extensa en Culinary Spain y, aunque la calidad del contenido parece buena, no recibe actualizaciones de nuevos cursos ni nuevo contenido. El diseño es muy simple y para nada intuitivo, el proceso de reserva no es muy complejo pero para nada es simple y no consta apenas de fotos ni mucho menos videos.
Ainhoa está abierta a nuevas experiencias, aunque demasiado ocupada, por eso cree que le puede venir bien ir a actividades donde conozca gente y pueda desconectar (como un taller de cocina).
Al ser una persona tímida y apasionada por la cocina, un taller de cocina es la mejor opción para empezar a abrirse a conocer más gente y perder la timidez.
Lo peor que le puede pasar a alguien que vive estresado por el trabajo y con poco tiempo libre es que el trámite de reserva sea costoso y lento.
A una persona tímida como Manuel, lo que le hace falta es que la persona a cargo o la dinámica del taller tenga en cuenta eso y le empuje a hablar con gente.
La página web de Pilsaeduca.com ha obtenido 84 puntos sobre 100, por lo que podemos calificarlo con un sitio web bueno, donde los usuarios deberían poder utilizar este sitio o sistema con relativa facilidad y deberían poder completar la gran mayoría de las tareas importantes.
Memoria completa aquí
El principal objetivo de la malla receptora era generar una serie de ideas que definían el rumbo que cogería nuestra empresa.
En nuestro ScopeCanvas recopilamos todo lo necesario para poder seguir avanzando con nuestro proyecto. Algunas de estas directrices son: nuestro propósito general, objetivos a largo, corto y medio plazo, necesidades que preocupan y motivan a los clientes, métricas que seguiremos para evaluar si nuestra evolución es favorable o no y algunas acciones que buscamos que nuestros usuarios lleven a cabo.
En nuestra matriz de tareas de usuario, hemos compilado todas las funciones de nuestra página web, asignándoles una prioridad según si se utilizarán antes, durante o después del tour. Este proceso nos permite organizarlas por su importancia relativa y determinar cuáles deberían ser nuestras prioridades. Aquellas que reciban una puntuación más alta serán las más utilizadas, sin importar cuándo se utilicen, por lo que debemos enfocarnos en desarrollarlas primero. Además de esto, dependiendo de la puntuación de cada tarea, se le ha asignado un color, esto es simplemente para distinguir mejor a primera vista cuáles son las más importantes y cuales menos (aunque lo sigue determinando la puntuación).
En el sitemap se presenta la jerarquía que seguirá nuestra página web, con los menús principales y las secciones que se desglosan. Podemos observar que hay algunas secciones que tienen un color verde, esto es simplemente para distinguir que sin estar asociado al club no se podrá acceder a la reserva de cursos privados o formaciones profesionales.
En el Labelling, explicamos qué son cada una de las secciones de nuestro Sitemap, qué propósito tienen y qué se encontrará el usuario al acceder a ellas.
Al mirar nuestro Task Matrix nos hemos dado cuenta de que tenemos cinco apartados clave, que son los que mayor puntuación han obtenido. Estos son: Página Principal, Curso, Foro, Usuario y Menú de Inicio Sesión.
Página principal
En la página principal mostramos en la parte superior nuestro logo, junto con los menús principales, seguido del nombre de nuestra empresa y una serie de fotos de los cursos destacados que irán desplazándose hacia la izquierda. Después de esto mostraremos una introducción acerca de nuestra empresa y finalmente un apartado del foro con los temas más destacados tras el cual irá el pie de página.
Curso
En esta página se situará toda la información pertinente sobre el curso deseado. El usuario dispondrá de una pequeña descripción de dicho taller, junto con las elaboraciones que se llevarán a cabo y el chef que lo impartirá. Tras esto vendrá el precio y las fechas disponibles para realizarlo. Acompañado a todo este texto tendremos una serie de fotos que ilustrarán cómo será el curso.
Foro
Esta será la página principal desde la cual se podrá acceder al foro en sí y a la galería compartida, por lo que tendrá un resumen de cada una de estas partes. Respecto al foro, al igual que en la página principal tendremos una serie de temas destacados junto a un buscador. Y en cuanto a la galería compartida dispondremos de dos apartados principales, uno de ellos será una galería con todas las fotos disponibles, y la otra contendrá el curso más reciente que se haya realizado.
Usuario
Lo primero que podemos observar en la sección de Usuario será de cuantos seguidores y cuantos seguidos disponemos en el momento, pulsando en cualquiera de ellos, este nos mostrará una lista de los usuarios a los que seguimos o los que nos siguen. Tras esto tendremos un apartado que nos muestre los cursos que hemos marcado como nuestros favoritos y otro en el que tendremos los cursos pendientes de reservar (la cesta). Después vendrá el apartado de las notificaciones, para poder configurarlo como le plazca al usuario y por último, las opciones de cerrar sesión y cambiar la contraseña.
Inicio Sesion / Registro
Esta es la sección por la que todo usuario deberá pasar para poder acceder a la reserva de un taller, por lo que en ella se pide al usuario que introduzca un nombre de usuario junto con una contraseña. Dispondremos de opciones como ver la contraseña, recordarla y poder cambiarla pulsando “¿Has olvidado tu contraseña?” que facilitarán el inicio de sesión o registro a nuestros clientes. Por último tendremos un botón de enviar, para guardar el inicio de sesión o registro que hayamos realizado.
Memoria completa aquí
3.a Moodboard
Hemos creado un tablón inspiracional dónde hemos recogido ideas para realizar el estilo visual de nuestra aplicación Sabor y Saber.
En él, hemos definido el logo de nuestra aplicación sobre el fondo de los dos colores predominantes, nuestra tipografía que consta de dos funtes diferentes y 4 tamaños según el tipo de texto que sea, una paleta de colores, un labeling de iconos y varias fotos de inspiración.
3.b Landing Page
Buscamos una presentación de nuestro proyecto de una manera atractiva para el usuario. Para ello, nos hemos ayudado de la herramienta Webflow. Se puede visualizar comodamente a través de este enlace.
Nuestra landing page cuenta con una cabecera con el logotipo de nuestra empresa y un menu de navgación por las diferentes secciones de nuestra página web, a parte de un apartado para la cuenta del usuario y su cesta. El body de cuenta con una imagen inspiradora y un botón de descarga de nuestra aplicación para dispositivos móviñles, a parte de una pequeña introducción. Finalmente tenemos un pie de página con nuestro logotipo al completo y enlacens de interés para el cliente.
3.c Guidelines
La página principal presenta un header con botones de navegación y acceso al inicio de sesión y perfil del usuario. En el body, hay un carrousel de imágenes destacadas de cursos y una lista de temas destacados del foro.
En la sección de inicio de sesión y registro, el header es similar al de la página principal. El body contiene campos para nombre de usuario y contraseña, opciones para ver la contraseña y recordar sesión, y un botón para recuperar contraseña.
La cuenta tiene un header idéntico al de inicio de sesión y registro. El body incluye botones para ver seguidores, seguidos, cursos favoritos, cesta, notificaciones, cerrar sesión y cambiar contraseña.
Para el foro, el header es similar al de inicio de sesión y registro. El body cuenta con un buscador, lista de temas del foro y carrousels de fotos del último curso y multimedia de todos los cursos.
En cuanto al curso, el header es similar al de inicio de sesión y registro. En el body, hay un date picker para ver disponibilidad de cursos en fechas específicas.
Los elementos no especificados no son patrones IU o guidelines sino imágenes y cuadros de texto.
3.d Mockup
Hemos desarrolado los bocetos realizados en la práctica anterior para dar forma a nuestra web. En esta carpeta se encuentra el archivo figma para poder verlos.
-
En la página principal podemos pulsar el icono de arriba a la derecha para acceder a tu cuenta y podemos pulsar tambien en el foro para acceder al mismo. Finalmente es posible hacer scroll al carrusel de fotos de izquierda a derecha.
-
En el inicio de sesión y registro puedes pulsar los checkbox y los campos de texto, y el boton de confirmar te manda a la pagina con la información de tu cuenta.
-
En el foro puedes pulsar la search bar y hacer scroll en ambos carruseles al igual que en la página principal. Si pulsas en el texto de "último curso" podrás acceder al mismo para informarte y ver próximas fechas.
-
En todas las páginas puedes hacer scroll en vertical para poder visualizar la página de manera completa y si pulsas en el logotipo del header podrás volver a la página principal desde cualquier otra página. Enlace a la página
3.e ¿My UX-Case Study?
En conclusión, hemos conseguido darle forma a nuestra web. Esta ha sido una tarea algo laboriosa que nos ha llevado bastante esfuerzo y tiempo realizar, aunque finalmente hemos obtenido un buen resultado. Es primordial seguir los pasos de investigación indicados para su ejecución para obtener un correcto trabajo.
El caso que se nos ha sido asignado es el del grupo DIU2_Fanculos, que definen su aplicacion como una empresa que irrumpa con fuerza en el sector. Se asegurarán que los clientes vivan una experiencia que sea digna de ser contada. En Sabores del Mundo ofertarán una serie de cursos adaptados a todos los niveles y de los lugares más variopintos del planeta, que no sólo se reduce a enseñar a cocinar sino también tendrá una ambientación digna de ese país.
Hemos simulado mediante la técnica de uso de los dados algunas personas. El resultado de la aplicación de esta es la siguiente:
| Usuarios | Sexo/Edad | Ocupación | Exp.TIC | Personalidad | Plataforma | TestA/B |
|---|---|---|---|---|---|---|
| Maria | M / 35 | Ama de casa | Intermedia | Aburrida | Windows | A |
| Carlos | H / 65 | Jubilado | Intermedia | Entusiasta | Windows | A |
| Juan | H / 28 | Ingeniero de software | Avanzada | Activo | Windows | B |
| Laura | M / 48 | Maestra de secundaria | Intermedia | Divertida | Windows | B |
DESCRIPCION
La aplicación A obtuvo un promedio de 80 puntos, mientras que la aplicación B obtuvo un promedio de 78.75 puntos. Esto sugiere que, en general, la aplicación A es ligeramente preferida sobre la aplicación B en términos de usabilidad. En la aplicación A, la diferencia entre las valoraciones de los dos usuarios es de 5 puntos (82.5 y 77.5). En la aplicación B, la diferencia es más pronunciada, con 7.5 puntos (82.5 y 75). Esto podría indicar una mayor inconsistencia en la percepción de usabilidad entre diferentes tipos de usuarios para la aplicación B.
En cuanto a usability report, a continuación adjuntamos el enlace e insistimos en la lectura del documento Usability Report.
En cuanto a la valoración personal:
- Tiene una interfaz bien definida y estructurada.
- La paleta de colores elegida es agradable visualmente y la agrupación de información ha sido una buena decisión, ya que mantiene la simetría.
Aunque:
- Carece deciertas funcionalidades en cuanto a recordar y manejar los talleres de distintas formas.
Estos son los resultados del Eye Tracking realizado a la aplicación Sabores Del Mundo que hemos obtenido.
/MapaCalor_1.png)
/MapaCalor_2.png)
/MapaCalor_3.png)
/MapaCalor_4.png)
/MapaCalor_5.png)
/MapaCalor_6.png)