Prácticas Diseño Interfaces de Usuario 2023-24 (Tema: Experiencias gastrónomicas )
Grupo: DIU2_kebabmixto. Curso: 2023/24 Updated: 31/5/2024
Proyecto:
Descripción:
Nuestra página web se centra en ofrecer experiencias gastronómicas a través de una variedad de cursos y talleres de cocina. Nuestro objetivo es proporcionar a los usuarios una experiencia agradable y enriquecedora, facilitando el aprendizaje de habilidades culinarias en un entorno accesible y bien diseñado.
Logotipo:
Miembros
- 👤 Luis Arrabal Gutiérrez
- 👤 Helena Ruiz Aranda
El objetivo del User Research es establecer el contexto y objetivos de la investigación y descubrir lo que es importante para los usuarios y cómo esto puede impactar en nuestro diseño. Definir unos objetivos claros es importante para el desarrollo de nuestro producto. La investigación la hemos realizado mediante nuestras experiencias, además de algunas encuestas a nuestro entorno.
GranadaCooking ofrece ventajas para socios y tiene una página bien construida, sin embargo presenta algunos fallos que pueden hacer que la experiencia del usuario sea desagradable, como el calendario para seleccionar talleres que es poco intuitivo e incomódo.
PilsaEduca también ofrece una gran variedad de talleres de cocina y es fácil de usa. Aunque tienen un gran abanico de talleres, la información de la web nos ha parecido escasa lo que puede complicar la elección de una actividad.
Hemos seleccionado a estas personas porque nos parecía interesante ponernos en la piel de personas que pueden tener problemas más allá de la tecnología. Helen, una estudiante de nutrición extranjera, enfrenta desafíos adicionales debido al idioma, lo que complica su interacción con la web. Por otro lado, Leonardo, un padre de mediana edad con un horario apretado, necesita aprender a cocinar para cubrir una necesidad urgente, lo que añade presión a su experiencia de usuario.
Esta selección nos permite explorar y abordar una variedad de problemas reales que los usuarios pueden enfrentar, desde barreras lingüísticas hasta restricciones de tiempo, lo que enriquece el desarrollo y diseño de nuestro producto .
Hemos elegido la experiencia de Leonardo porque es representativa de usuarios con limitaciones de tiempo y responsabilidades familiares, lo cual es una situación habitual para muchos adultos. Esto nos ayuda a identificar y solucionar problemas relacionados con la accesibilidad y eficiencia de la web. Hemos elegido la experiencia de Helen para representar a los usuarios que enfrentan desafíos adicionales debido al idioma y la falta de familiaridad con la plataforma. Esta situación es común para muchos estudiantes internacionales y usuarios no nativos, lo que nos permite diseñar soluciones más inclusivas y accesibles.
- Enlace al documento:
- Valoración final (numérica): 71
- Comentario sobre la valoración: Granada Cooking presenta una usabilidad moderada. Aunque la web tiene una navegación consistente y enlaces claros, su sobrecarga de información y procesos de reserva complicados pueden frustrar a los usuarios. Sin embargo, cuenta con secciones bien organizadas y suficiente contenido visual.
.png)
- Azul claro (#70a3d9): Confianza y serenidad.
- Blanco nieve (#f8fbff): Luminosidad y contraste.
- Azul de información (#c7e0f9): Claridad en secciones clave.
- Amarillo de advertencia (#ffe079): Alertas importantes.
- Verde de éxito (#4b83bd): Estabilidad y logro.
- Rojo de peligro (#ff6868): Precauciones críticas.
Promovemos la gastronomía con talleres culinarios que exploran la historia y cultura de cada plato, creando experiencias educativas inclusivas.
- Merriweather: Legible y elegante.
- Montserrat: Accesibilidad y modernidad.
Muestran la colaboración entre chefs y estudiantes, destacando la enseñanza experta y la superación de desafíos culinarios en un entorno acogedor.
- Logo: Diseño moderno con gorro de chef y tenedor en azul claro, evocando confianza y serenidad.
- Eslogan: "Sabores que cuentan historias y unen culturas."
Guía visual basada en pautas de marca, enfocada en estrategia, imágenes, colores, iconos, tipografía, comentarios y diseño del logo.
En resumen, nuestro moodboard combina colores claros, tipografías legibles, imágenes inspiradoras y un diseño de logo inclusivo para nuestra academia culinaria.
Nuestra landing page de Sabor Artesanal está diseñada para atraer a entusiastas de la cocina de todos los niveles, ofreciendo talleres culinarios variados. Hemos utilizado los colores y tipografías de nuestra marca para asegurar una experiencia de usuario coherente y atractiva. Esta landing page combina colores atractivos, tipografías legibles y contenido inspirador para promover nuestra academia culinaria y atraer a nuevos estudiantes.
Estudio de Guidelines y Patrones IU a usar Tras documentarse, muestre las deciones tomadas sobre Patrones IU a usar para la fase siguiente de prototipado.
Guidelines Los patrones que vamos a utililzar para el diseño son los siguientes:
- Onboarding: Es la secuencia de pantallas iniciales que guían a los nuevos usuarios a través de las principales características de la aplicación.
- Menu (Navbar adaptada a móvil): Es una barra de navegación superior diseñada para facilitar la navegación del usuario por la aplicación.
- Hero image y Carrousel: Una imagen grande y llamativa sobre uno de los talleres colocada en la parte superior de la página, acompañada de un carrusel de imágenes de otros talleres que rota.
- Search: Una barra de búsqueda en la parte superior de la pantalla que permite buscar cursos, recetas, etc.
- Wizards (explain process): Una serie de pantallas que guían a los usuarios a través del proceso de inscripción en un curso, paso a paso.
- Article List (5-7 Cards items): Una sección que muestra tarjetas de cursos cada una con una imagen, título y una breve descripción.
- Item Details + Actions: La página de detalles de un curso que incluye la descripción del curso, la duración, el precio y botones para inscribirse.
- Reserva: Un formulario de reserva donde los usuarios pueden seleccionar la fecha y hora de una clase de cocina y confirmar su reserva.
- Form Input: Campos para ingresar el nombre, correo electrónico y otros detalles para contactar con la empresa.
- Shopping Cart: Un carrito de compras que muestra las ofertas y/o cursos seleccionados, con opciones para ajustar cantidades o eliminar artículos.
- About: Una sección "Sobre Nosotros" que incluye la historia de la academia de cocina y su misión.
- Event Calendar (disponibilidad): Un calendario donde los usuarios pueden ver todas las clases de cocina programadas para el mes.
- Tags/Etiquetas/Categorías: Etiquetas como "Pastelería", "Cocina Italiana", "Principiantes" para filtrar recetas o cursos.
El mockup nos lleva por varias tareas destacables en nuestra web, como son: iniciar sesión, seleccionar un taller del calendario, contactar con la empresa, ver las reservas del usuario y reservar un taller.
Publicar my Case Study en Github.. Documente y resuma el diseño de su producto
) 5.b Eye Tracking method
Para el estudio hemos utilizado gazerecorder.com, esta web nos permite comprobar cuáles son los puntos d einterés y que más atención se llevan de una página web para detectar posibles mejoras. Este estudio lo hemos hecho para la aplicación de SaborGranada que nos ha sido asignada, en el siguiente enlace se pueden comprobar los resultados:
La tarea que va a realizar el usuario es reservar un taller.
Areas de interés:
Para el test hemos añadido un usuario experto, y 2 usuarios objetivo, como los de la tabla anterior, dándonos unos resultados casi idénticos en los usuarios objetivo, y unos resultados también muy parecidos respecto al usuario experto, ya que todos se han centrado en lo primordial para hacer la reserva.
Y los puntos de interés obtenidos han sido idénticos para todos los usuarios, siendo esto así, porque al ser el objetivo principal la reserva, se han centrado en seguir los pasos principales para poder hacerla.
Como conclusión, podemos decir que la aplicación se centra en lo importante, haciendo una experiencia más rápida y satisfactoria, por su sencillez y formato, bien diseñada, teniendo todo accesible y cerca, con una paleta de colores y tipografía de letras de son agradables.
Se nos ha asignado la página web de SaborGranada, esta propone una versión combinada de las tradicionales webs sobre gastronomía, ofreciendo no solo información sobre restaurantes y la posibilidad de reservar mesa en ellos, sino también talleres para aprender sobre cocina.
[https://github.com/carmenqr/DIU.git]
Seleccione 4 personas ficticias. Exprese las ideas de posibles situaciones conflictivas de esa persona en las propuestas evaluadas. Asigne dos a Caso A y 2 al caso B
Usaremos el Cuestionario SUS para valorar la satisfacción de cada usuario con el diseño (A/B) realizado. Para ello usamos la hoja de cálculo para calcular resultados sigiendo las pautas para usar la escala SUS e interpretar los resultados http://usabilitygeek.com/how-to-use-the-system-usability-scale-sus-to-evaluate-the-usability-of-your-website/) Para más información, consultar aquí sobre la metodología SUS
Hemos contado con cuatro usuarios distintos, que han sido inventados, y en los que nos hemos puesto en su piel, es decir, hemos hecho la técnica de role playing. Las conclusiones a las que hemos llegado, es que la web está muy bien diseñada y el que el diseño te vaya guiando hace que sea fácil de navegar, y no necesites ayuda, pero ha sido un poco larga la espera para la confirmación de un taller reservado, aunque los usuarios no han tenido gran problema en eso.
La página web ofrece talleres de cocina de diversas culturas, y poder descubrir nuevos restaurantes.El objetivo principal es descubrir sabores, recetas y pasártelo bien. Ofrecen un viaje gastronómico, acompañado por un chef experimentado que te va a guiar todo el rato en el caso de coger un taller, y una gran facilidad para reservar en restaurantes.
En cuanto al diseño podemos observar como el color naranja y blanco son los que más destacan, teniendo las letras en color negro, que transmite una sensación de sencillez y elegancia a su vez. Es una página web bastante bien elaborada, ya que su formato es simple en cuanto a contenido, pero muy completa, ya que tiene para poder buscar blogs de otras personas, reservar un restaurante, y reservar talleres, siendo estas dos últimas opciones muy fáciles de hacer, porque la página web nos va guiando sobre qué hacer, y no da lugar a perdernos y no saber cuál es el siguiente paso. Tiene la opción de crearte un perfil, y el logo es elegante, perfecto para atraer a más clientes.
Usability report con los resultados del A/B testing, de eye tracking y del usability report: comentad en 2-3 parrafos cual es la conclusion acerca de la realización de la práctica y su evaluación con esas técnicas y que habéis aprendido
A la hora de realizar el test de usabilidad, lo primero que hemos hecho es crear nuestros cuatro usuarios ficticios utilizando un dado, una vez creados hemos determinado la interacción de cada uno con la página, teniendo roles muy diversos que abarcan una gran mayoría de las personas. Para la realización de las tareas nos hemos centrado en las preguntas del test de usabilidad, por ejemplo, ver si es complejo navegar en la página, si necesitaría ayuda, si necesitan saber algo antes, etc. Como resultado del test nos ha dado una valoración de +80 lo cuál está muy bien, como se aprecia en el apartado 4 del documento. Y también a cada usuario se le ha hecho un test de eye tracking, cuyos resultados se ven en el apartado 3.
Conclusiones: Como aspecto negativo solo hemos notado una cierta demora en cargar las páginas, y que no hay un apartado de “Quienes somos”. Aún así, a nosotros nos ha gustado bastante la página, ya que nos parece estética, y que se centra en lo importante, haciendo una experiencia más rápida y satisfactoria, por su sencillez y formato, bien diseñada, teniendo todo accesible y cerca, con una paleta de colores y tipografía de letras de son agradables.
(90-150 palabras) Opinión FINAL del proceso de desarrollo de diseño siguiendo metodología UX y valoración (positiva /negativa) de los resultados obtenidos