diff --git a/P1/Competitor Analysis.pdf b/P1/Competitor Analysis.pdf new file mode 100644 index 000000000..d3bd4d532 Binary files /dev/null and b/P1/Competitor Analysis.pdf differ diff --git a/P1/Empathy Map.pdf b/P1/Empathy Map.pdf new file mode 100644 index 000000000..557319959 Binary files /dev/null and b/P1/Empathy Map.pdf differ diff --git a/P1/Persona #1.pdf b/P1/Persona #1.pdf new file mode 100644 index 000000000..10028ced4 Binary files /dev/null and b/P1/Persona #1.pdf differ diff --git a/P1/Persona #2.pdf b/P1/Persona #2.pdf new file mode 100644 index 000000000..143b62f2a Binary files /dev/null and b/P1/Persona #2.pdf differ diff --git a/P1/README.md b/P1/README.md index 1ffe68b9d..925291835 100644 --- a/P1/README.md +++ b/P1/README.md @@ -8,5 +8,25 @@ - 2 User Journey Map ( 1 por persona) - Revisión de Usabilidad +![Método UX](../img/Competitive.png) 1.a Competitive Analysis +----- -(valoración y conclusiones de esta etapa) +>>> En el análisis hemos comparado 3 páginas que ofrecen servicios típicos de Granada. Todas presentan una interfaz de baja calidad pero en general cumplen con el mínimo que ofrecen. Nosotros hemos elegido la página del free tour de Granada ya que nos parece la mejor de las 3 páginas. + +![Método UX](../img/Persona.png) 1.b Persona +----- + +>>> Hemos elegido a esas 2 personas porque ambas tienen cosas en su vida que los convierten en especiales y nos dan diferentes enfoques de cómo puede usar una persona la página web. + +![Método UX](../img/JourneyMap.png) 1.c User Journey Map +---- + +>>>Hemos escogido esas experiencias de usuario porque nos parecen que son las más realistas teniendo en cuenta el conocimiento que tienen dichas personas de las tecnologias. + +![Método UX](../img/usabilityReview.png) 1.d Usability Review +---- +>>> Revisión de usabilidad: (toma los siguientes documentos de referncia y verifica puntos de verificación de usabilidad +>>>> SE deben incluir claramente los siguientes elementos +>>> - Enlace al documento: (sube a github el xls/pdf) +>>> - Valoración final (numérica): 51 +>>> - Comentario sobre la valoración: Como resultado de la valoración nos ha salido moderate y es que en general la página cumple con los que promete hacer implementando sus funciones básicas pero es en general un poco pobre diff --git a/P1/Usability-review-template.pdf b/P1/Usability-review-template.pdf new file mode 100644 index 000000000..f5cda2efd Binary files /dev/null and b/P1/Usability-review-template.pdf differ diff --git a/P1/User Journey Map #1.pdf b/P1/User Journey Map #1.pdf new file mode 100644 index 000000000..81ad023ff Binary files /dev/null and b/P1/User Journey Map #1.pdf differ diff --git a/P1/User Journey Map #2.pdf b/P1/User Journey Map #2.pdf new file mode 100644 index 000000000..9aac7a5dc Binary files /dev/null and b/P1/User Journey Map #2.pdf differ diff --git a/P2/Documentacion de la Propuesta.pdf b/P2/Documentacion de la Propuesta.pdf new file mode 100644 index 000000000..a947b674d Binary files /dev/null and b/P2/Documentacion de la Propuesta.pdf differ diff --git a/P2/Malla Receptora de Informacion.pdf b/P2/Malla Receptora de Informacion.pdf new file mode 100644 index 000000000..baf420fa8 Binary files /dev/null and b/P2/Malla Receptora de Informacion.pdf differ diff --git a/P2/README.md b/P2/README.md index c264b1242..b1822c8a6 100644 --- a/P2/README.md +++ b/P2/README.md @@ -2,28 +2,53 @@ ### Ideación * Malla receptora de información -* Mapa de empatía -* Point of View - ### PROPUESTA DE VALOR * ScopeCanvas - ### TASK ANALYSIS * User Task Matrix -* User/Task flow - ### ARQUITECTURA DE INFORMACIÓN * Sitemap * Labelling - ### Prototipo Lo-FI Wireframe -### Conclusiones -(incluye valoración de esta etapa) +![Método UX](../img/feedback-capture-grid.png) 2.a Feedback Capture Grid / EMpathy map / POV +---- + + +>>> En esta malla hemos comentado los aspectos más importantes de la práctica anterior + +>>> ¿Que planteas como "propuesta de valor" para un nuevo diseño de aplicación para economia colaborativa ? + +>>> La propuesta de valor de nuestra aplicación de economía colaborativa se centra en la experiencia del usuario, ofreciendo una plataforma intuitiva, segura y transparente para conectar a proveedores y consumidores de servicios. Además, nuestra aplicación se enfoca en fomentar la confianza y el compromiso entre los usuarios, a través de un sistema de valoración y recomendaciones. Todo esto con el objetivo de crear una comunidad colaborativa basada en la confianza, la calidad y la innovación + + + +![Método UX](../img/ScopeCanvas.png) 2.b ScopeCanvas +---- +>>> Propuesta de valor + +![Método UX](../img/Sitemap.png) 2.b Tasks analysis +----- + +>>> Hemos seleccionado los distintos grupos de usuarios que pueden usar nuestra aplicación y los distintas tareas que pueden hacer y hemos etiquetado la frecuencia en la que cada grupo podría realizar esas actividades + + +![Método UX](../img/labelling.png) 2.c IA: Sitemap + Labelling +---- + + +>>> Hemos realizado la estructura de las diferentes páginas que tiene nuestra página web y la manera en la que están organizadas y además hemos hecho el labelling con las diferentes actividades y términos de nuestra página web + + +![Método UX](../img/Wireframes.png) 2.d Wireframes +----- + +>>> Por último hemos realizado el boceto de las páginas principales de nuestra aplicación y como se vería una vez implementada dicha página + diff --git a/P2/Task analisis.pdf b/P2/Task analisis.pdf new file mode 100644 index 000000000..1f45d864c Binary files /dev/null and b/P2/Task analisis.pdf differ diff --git a/P2/labelling.pdf b/P2/labelling.pdf new file mode 100644 index 000000000..883c648f0 Binary files /dev/null and b/P2/labelling.pdf differ diff --git a/P2/prototipo.pdf b/P2/prototipo.pdf new file mode 100644 index 000000000..04c17de25 Binary files /dev/null and b/P2/prototipo.pdf differ diff --git a/P2/scope_canvas.pdf b/P2/scope_canvas.pdf new file mode 100644 index 000000000..b06a7737f Binary files /dev/null and b/P2/scope_canvas.pdf differ diff --git a/P2/sitemap.pdf b/P2/sitemap.pdf new file mode 100644 index 000000000..247629cc1 Binary files /dev/null and b/P2/sitemap.pdf differ diff --git a/P3/GuideLines.pdf b/P3/GuideLines.pdf new file mode 100644 index 000000000..36fb79cf3 Binary files /dev/null and b/P3/GuideLines.pdf differ diff --git a/P3/Layout+Simulacion.pdf b/P3/Layout+Simulacion.pdf new file mode 100644 index 000000000..620d3c25f Binary files /dev/null and b/P3/Layout+Simulacion.pdf differ diff --git a/P3/landing_page.pdf b/P3/landing_page.pdf new file mode 100644 index 000000000..a7db13deb Binary files /dev/null and b/P3/landing_page.pdf differ diff --git a/P3/moodboard.pdf b/P3/moodboard.pdf new file mode 100644 index 000000000..f894143c1 Binary files /dev/null and b/P3/moodboard.pdf differ diff --git a/P3/readme.md b/P3/readme.md index 4dddfac57..dafcb3aba 100644 --- a/P3/readme.md +++ b/P3/readme.md @@ -2,15 +2,122 @@ ## Moodboard (diseño visual + logotipo) +Para desarrollar el moodboard de nuestra página web, hemos realizado una investigación de imágenes, tipografías, colores y elementos visuales relacionados con nuestra temática y público objetivo. Nos sirvió como referencia çpara establecer el estilo y la dirección creativa de nuestra página + ## Landing Page +La creación de la landing page para nuestra página web se basó en el objetivo principal de atraer nuevos clientes. Diseñamos una estructura clara y llamativa, utilizando secciones distintas y visibles. En el encabezado, destacamos el nombre y la propuesta de valor de nuestra página. Luego, resaltamos los beneficios clave de unirse a nuestros tours, como experiencias únicas y guías expertos. Finalmente, incluimos una llamada a la acción clara y convincente para que los visitantes se registren o reserven un tour + + + ## Mockup: LAYOUT HI-FI +Para crear el Mockup Layout Hi-Fi de nuestra página web. Utilizando los elementos y estilos definidos en nuestro guideline, hemos diseñado cada una de las 30 páginas de simulación, que incluyen secciones como tours, packs, sobre nosotros, información, contáctanos, registrarse e inicio de sesión. Hemos asegurado que el diseño sea visualmente atractivo y coherente en todas las páginas, utilizando botones interactivos para simular acciones como la navegación entre secciones, la selección de opciones y el envío de formularios. Este Mockup Layout Hi-Fi nos ha permitido obtener una representación detallada y realista de la experiencia de usuario en nuestra página web, facilitando la identificación de posibles mejoras y refinamientos antes de su implementación final. + ## Documentación: Publicación del Case Study +La publicación del case study se puede ver en el readme principal de dicho repositorio en él hemos explicado todo paso a paso detalladamente para que se pueda entender + +## GuideLines (Lo hemos entregado como PDF para que sea más facil y legible) + +Guidelines +En esta sección, definiremos el estilo visual de todos los componentes de la aplicación. +Logotipo + +"SenseGranada": El nombre "SenseGranada" intenta evocar una conexión profunda o una experiencia sensorial relacionada con la ciudad de Granada. El término "sense" (sentir o experimentar) sugiere una experiencia enriquecedora a través de los sentidos, como la vista, el oído, el gusto, el olfato y el tacto. El logo quiere transmitir esa idea de explorar y sumergirse en los sentidos de Granada. + + +Color verde: El color verde se asocia comúnmente con la naturaleza, la frescura, la calma y la tranquilidad. Se desea representar la belleza de los paisajes naturales de Granada, como sus montañas, parques y jardines, así como la sensación de relajación y paz que se busca al visitar la ciudad. + + +Icono de ubicación: El icono de ubicación puede indicar que su página se dedica a ofrecer información, guías o servicios relacionados con los lugares destacados de Granada, ya sea turísticos, culturales o de interés general. + + +Paleta de colores +Elegimos la paleta de colores de SenseGranada a partir de las imágenes del Moodboard. + +Muddy Waters: Este color recuerda a sabor, especias y condimentos que está relacionado con tours gastronómicos. También evoca a los paisajes naturales que se visitan en los tours de naturaleza, como los árboles de los parques. + + +Texas Rose: Se asemeja al color del atardecer, la luz de las velas de los spa de los tours de relax e incluso la luz ambiente con la que se iluminan las discotecas y recintos musicales. + + +Olivine: Color que predomina en parques, en bosques y en la mayoría de tours de naturaleza. Además es un color que invita a la calma y a estar en paz, lo que hace que también esté bastante relacionado con los tours de relax. + + +Iconografía + + +Hemos escogido estos iconos (de Canva) para la aplicación, puesto que son muy legibles y expresan muy intuitivamente la actividad que se quiere representar. +La imagen que aparece en la landing page también se encuentra en Canva. + + +Tipografías +Principalmente se usarán dos tipografías: +La tipografía utlizada para los títulos es CoffeCake. Tiene un estilo informal y amigable, sus trazos suaves y redondeados transmiten una sensación de calidez y accesibilidad. Hemos elegido esta fuente para crear una impresión acogedora y amigable, lo que puede ayudar a atraer y conectar con nuestra audiencia. También tiene un carácter distintivo: un estilo único y distintivo, con elementos decorativos en los caracteres que le dan un toque especial. Esto puede hacer que el título de su página se destaque y sea memorable. + + +Para el cuerpo y los subtítulos usaremos Belleza. Elegida por varias razones: +Elegancia y sofisticación: estilo elegante y sofisticado. Sus trazos finos y fluidos transmiten una sensación de refinamiento y buen gusto. + + +Legibilidad y claridad: fácil de leer, incluso en tamaños más pequeños. Sus caracteres tienen una forma clara y distintiva, lo que facilita la legibilidad del texto. + + +Versatilidad: puede adaptarse a diferentes estilos y propósitos. Puede ser utilizada tanto para el cuerpo del texto como para los subtítulos, lo que brinda coherencia y uniformidad en el diseño de su página. Esta coherencia ayuda a crear una experiencia de usuario agradable y profesional. + + +Complemento estético: complementa y armoniza con otros elementos visuales presentes. + + +Patrón de diseño + +Teniendo en cuenta la información proporcionada en https://ui-patterns.com/patterns. Algunas funcionalidades no se ven en el diseño pero se describen a continuación: + +Caja de búsqueda: se ha utilizado para la búsqueda de tours en las vistas principales de la aplicación.. + +Filtro de búsqueda: permite a los usuarios buscar y filtrar contenido específico en función de criterios seleccionados. Los usuarios podrían filtrar los resultados por ubicación, horario, duración, tipo de actividad, precio, idioma, packs, sentido, etc. Se presenta como una barra de búsqueda avanzada en la página. Los usuarios pueden seleccionar o ingresar valores en los campos de filtro y luego aplicar los filtros para mostrar solo los resultados relevantes que coincidan con los criterios seleccionados. + +Autocompletado: a la hora de realizar las búsquedas se incluirá la opción de autocompletado. + +Formato estructurado: se centra en los formularios con entrada de datos y se utiliza sobre todo en la creación y modificación de las rutas, además de para la reserva de tours. + +Mapa: sección de localización del tour. + +Calendario Picker: seleccionar fechas de manera intuitiva y fácil utilizando un calendario interactivo. + +Ajustes: útil para la vista asociada a los ajustes del sistema, aunque personalizado al caso particular. + +Deshacer (Undo): la capacidad de deshacer acciones o revertir cambios realizados en la página. + +Valoración: valoración de los tours y guías. + +Arrastrar y soltar (Drag and drop): permite a los usuarios arrastrar elementos y soltarlos en áreas designadas para realizar acciones como organizar, cargar o reordenar contenido. + +La aplicación cuenta con una barra de navegación inferior que permite desplazarse entre las vistas principales de la aplicación. + +Retroalimentación de entrada (Input Feedback): proporciona comentarios en tiempo real a medida que los usuarios ingresan información en formularios, como validar la fortaleza de una contraseña o mostrar sugerencias mientras escriben. + +Edición en su lugar (Inplace Editor): permite editar el contenido directamente en la página sin tener que abrir una ventana o pantalla adicional. + +Vista previa (Preview): vista previa de cómo se verá el contenido antes de guardarlo o publicarlo. + +Las regiones de cada vista deben diferenciarse correctamente, haciendo uso de una rejilla en el diseño para garantizar que la aplicación es responsiva. + +Todas las vistas (salvo la vista principal), deben contar con una flecha situada en la esquina superior izquierda que permita volver a la vista anterior. + +Todos los componentes deben cumplir con el contraste suficiente como para ser distinguidos a simple vista, teniendo en cuenta la presencia de usuarios potenciales con dificultades visuales o daltonismo. + +Estilo de lenguaje +En SenseGranada, utilizamos un lenguaje cautivador y evocador para transmitir la experiencia única que ofrecemos a nuestros visitantes. Nuestro objetivo es despertar emociones y crear un sentido de asombro y fascinación al describir las maravillas de Granada. +Optamos por un estilo descriptivo y poético para capturar la belleza y el encanto de los lugares turísticos que ofrecemos, como la Alhambra y el Sacromonte. Utilizamos metáforas y adjetivos evocadores para pintar imágenes vívidas en la mente de nuestros lectores y transportarlos a través de las palabras a los escenarios nocturnos llenos de misterio y magia. +Al elegir este lenguaje, buscamos despertar el interés y la curiosidad de los visitantes, invitándolos a sumergirse en una experiencia memorable y única. Queremos transmitir la sensación de estar viviendo un momento especial, donde la historia, la arquitectura y la cultura se entrelazan en un ambiente nocturno lleno de poesía y encanto. +En resumen, utilizamos un lenguaje evocador y descriptivo para crear una conexión emocional con nuestros lectores, inspirándolos a explorar Granada de una manera única y sensorial. Queremos que sientan la magia y el esplendor de esta ciudad, y que se sientan tentados a descubrir todas las maravillas que SenseGranada tiene para ofrecer. + +## Valoración final -(incluye) Valoración del equipo sobre la realización de esta práctica o los problemas surgidos +Como valoración final podemos añadir que esta práctica ha sido un poco densa de desarrollar pero bastante divertida a la hora de realizarla y no nos hemos encontrado ninguna dificultad grande diff --git a/P4/Asignacion_ABtesting.pdf b/P4/Asignacion_ABtesting.pdf deleted file mode 100644 index 5b0f75c13..000000000 Binary files a/P4/Asignacion_ABtesting.pdf and /dev/null differ diff --git a/P4/Cuestionario SUS DIU .pdf b/P4/Cuestionario SUS DIU .pdf new file mode 100644 index 000000000..425421364 Binary files /dev/null and b/P4/Cuestionario SUS DIU .pdf differ diff --git a/P4/Cuestionario SUS DIU.xlsx b/P4/Cuestionario SUS DIU.xlsx deleted file mode 100644 index 326a4b771..000000000 Binary files a/P4/Cuestionario SUS DIU.xlsx and /dev/null differ diff --git a/P4/DIU_Toolkit_2021 - SUS.pdf b/P4/DIU_Toolkit_2021 - SUS.pdf deleted file mode 100644 index 081140597..000000000 Binary files a/P4/DIU_Toolkit_2021 - SUS.pdf and /dev/null differ diff --git a/P4/DIU_report-template-usability-test_1.docx b/P4/DIU_report-template-usability-test_1.docx deleted file mode 100644 index 30f93cc55..000000000 Binary files a/P4/DIU_report-template-usability-test_1.docx and /dev/null differ diff --git a/P4/UXCaseStudy-review - DIU3.ElMedusa.pdf b/P4/UXCaseStudy-review - DIU3.ElMedusa.pdf new file mode 100644 index 000000000..0f37ce2cf Binary files /dev/null and b/P4/UXCaseStudy-review - DIU3.ElMedusa.pdf differ diff --git a/P4/UXCaseStudy-review.xls b/P4/UXCaseStudy-review.xls deleted file mode 100644 index 390a8c273..000000000 Binary files a/P4/UXCaseStudy-review.xls and /dev/null differ diff --git a/P4/Usability Report .pdf b/P4/Usability Report .pdf new file mode 100644 index 000000000..423351679 Binary files /dev/null and b/P4/Usability Report .pdf differ diff --git a/P4/proyectos.md b/P4/proyectos.md deleted file mode 100644 index 82de3cc6a..000000000 --- a/P4/proyectos.md +++ /dev/null @@ -1,55 +0,0 @@ -# Listado de Proyectos HOSTEL - 2021/2022 - -Tema: ​GRUPO DIU1 (VIERNES) - - -* DIU1.01 JJ-Team https://github.com/jmnavas3/DIU_practicas -* DIU1.02 equipo2 https://github.com/verdx/DIU1.equipo2 -* DIU1.03 MBM https://github.com/MBM-devs -* DIU1.03 MBM https://github.com/MBM-devs -* DIU1.04 Estrellas https://github.com/amt911/DIU-Estrellas -* DIU1.05 Sigma https://github.com/SigmaDIU1/DIU -* DIU1.06 PM_A1 https://github.com/PedroCapilla/DIU -* DIU1.07 PF https://github.com/SrOverlord/DIU1_PF -* DIU1.08 10Fasilito https://github.com/toniiFDEZ/DIU -* DIU1.09 JR https://github.com/jmegui/DIU -* DIU1.10 2computing https://github.com/rafaacano/DIU - ----------- - -Tema: DIU2 (MARTES) - - -* DIU2.01 AshenTwo https://github.com/PalomoVirtual -* DIU2.02 LosMejoresDeDiu https://github.com/joseptnl/DIU -* DIU2.03 nombreJA https://github.com/albertollamass/DIU -* DIU2.04 tarnishedBoys https://github.com/Pablo01bm -* DIU2.05 ML https://github.com/manuelcoor66/DIU-Practicas -* DIU2.06 teamposits https://github.com/dacal01/DIU -* DIU2.07 HichAaron github.com/AaronPorcel/DIU -* DIU2.08 Loading https://github.com/lgomxz/DIU2.Loading -* DIU2.09 Unknown https://github.com/luciasalamanca/DIU -* DIU2.10 4TheWin https://github.com/Richi76/DIU4TheWin -* DIU2.11 Backyardigans https://github.com/annacarlosdiu -* DIU2.12 PaquitoGaming https://github.com/Astropollo/DIU.git - ----------- - -Tema: DIU3 (JUEVES) - -* DIU3.01 MetaRocket https://github.com/vdeq79/DIU -* DIU3.02 RAYSE https://github.com/antoniogamiz/DIU/ -* DIU3.03 Mosqueteros https://github.com/mario-gil/DIU -* DIU3.04 Elcuatro https://github.com/marfc/DIU22 -* DIU3.05 LaBamba https://github.com/albertomv00/DIU -* DIU3.06 https://github.com/Javidroid/DIU -* Diu3.07 Seven Deadly https://github.com/quepereza/DIU -* DIU3.08 JNMM https://github.com/miguemedina11/DIU -* DIU3.09 Largo sobre Congo https://github.com/wastedDavid/DIU -* DIU3.10 Snowy Team https://github.com/LegalyAlexander/DIU -* DIU3.12 DoubleAI https://github.com/adelatorresaavedra/DIU -* DIU3.13 SS-Team https://github.com/Gogilga/DIU -* DIU3.14 PI https://github.com/alerodger/DIU -* DIU3.15 https://github.com/laurasanchezsanchez/DIU - -Actualizado 19/05/2021 diff --git a/P4/readme.md b/P4/readme.md index f6cb4ac15..66bda6915 100644 --- a/P4/readme.md +++ b/P4/readme.md @@ -1,17 +1,17 @@ -# DIU - Practica 4, entregables +# DIU Practica 4 +**CUESTIONARIO SUS ** -* Users +Se contó con la participación de cuatro usuarios en este estudio: Dora, Sandra, Raúl y Adrián. Dora y Adrián son usuarios reales , mientras que Sandra y Raúl son usuarios ficticios, representando diferentes perfiles de usuario. Todos los participantes completaron el cuestionario SUS después de interactuar con ambos sitios webs -Elección y características +**Usability report del caso B** -* A/B Testing. +Para el caso B llevamos a cabo un Usability Review detallado. En este análisis, se describió el sitio web y se evaluaron varios aspectos relacionados con la usabilidad. Se identificaron fortalezas, debilidades y se proporcionaron recomendaciones para mejorar la experiencia del usuario. Así también hablamos de las metodología, se recopilaron datos cuantitativos y cualitativos utilizando el cuestionario SUS, que evalúa la usabilidad y la satisfacción del usuario. Los resultados del cuestionario SUS indicaron que el caso B obtuvo una puntuacion positiva en términos de usabilidad. Los participantes destacaron la facilidad de uso, la claridad de la información y la navegación intuitiva como puntos fuertes en ambas prácticas. +**Conclusiones** +Basándonos en los resultados del cuestionario SUS y el Usability Review, podemos concluir lo siguiente: -* Tareas realizadas - - -* Usability Report de Caso B -* Template de usability.gob (https://www.usability.gov/how-to-and-tools/resources/templates/report-template-usability-test.html) - -* Conclusiones +- Ambos casos evaluados obtuvieron puntuaciones positivas en términos de usabilidad. +- El caso A mostró una ligera ventaja en cuanto a la satisfacción del usuario. +- Se identificaron áreas de mejora en el caso B a través del Usability Review. +-Recomendamos implementar las mejoras sugeridas en el caso B para mejorar la experiencia del usuario. diff --git a/README.md b/README.md index 4bacef4d6..f56c92e21 100644 --- a/README.md +++ b/README.md @@ -1,28 +1,28 @@ # DIU23 Prácticas Diseño Interfaces de Usuario 2022-23 (Tema: .... ) -Grupo: DIU1_01AABB. Curso: 2022/23 -Updated: 11/1/2023 +Grupo: DIU2_Lospibes Curso: 2022/23 +Updated: 4/05/2023 Proyecto: ->>> Decida el nombre corto de su propuesta en la práctica 2 +>> SenseGranada Descripción: +>> Hemos diseñado una página web llamada SenseGranada donde ofrecemos tours de diferentes temáticas para conocer Granada en todos sus sentidos. En nuestra página principal podrá encontrar los tour ordenados en función de duración, por popularidad y por sentido. Además ofrecemos en la pestaña de tours los tours ordenados por temática para escoger en función de los gustos de cada persona. Ofrecemos también packs para realizar más de un tour en un día y ofertas especiales para exprimir al máximo la experencia en un solo día, ideal para viajeros que cuenten con el tiempo justo para visitar la ciudad. Contamos además con guías expertos para ayudar a entender más la historia de la ciudad. También contamos con una sección de comentarios para que puedas ver experiencias de anteriores usuarios. En resumen nuestra página proporciona todo tipo de servicios para que los usuarios puedan conocer a la perfección Granada ->>> Describa la idea de su producto en la práctica 2 Logotipo: ->>> Opcionalmente si diseña un logotipo para su producto en la práctica 3 pongalo aqui + +![Imagen](img/logotipo.png) Miembros - * :bust_in_silhouette: AA :octocat: - * :bust_in_silhouette: BB :octocat: + * :bust_in_silhouette: Sergio Muñoz Gómez :octocat: + * :bust_in_silhouette: María Mingjie Párraga Ramos :octocat: ----- ->>> Este documento es el esqueleto del report final de la práctica. Aparte de subir cada entrega a PRADO, se debe actualizar y dar formato de informe final a este documento online. Elimine este texto desde la práctica 1 # Proceso de Diseño @@ -32,26 +32,30 @@ Miembros ![Método UX](img/Competitive.png) 1.a Competitive Analysis ----- ->>> Describe brevemente características de las aplicaciones que tienes asignadas, y por qué has elegido una de ellas (150-300 caracteres) +>>> Hemos realizado un análisis de 3 páginas que fomentan el turismo en Granada, una sobre un espectaculo en un Tablao Flamenco, otra sobre una página de free tours y otra sobre un taller de artesanía. Hemos valorado diversos aspectos de dichas páginas con 3 iconos para cada uno de estos aspectos en función del estado en el que consideramos que esta trabajado. Alguno de los aspectos que hemos valorado son el precio, si se puede hacer una cuenta o no en la página, la fluidez de la página, el diseño, la utilidad, la seguridad... Al finalizar hemos realizado la media de los puntos que hemos asignado a cada aspecto y le hemos dado una nota final a la página. En general las páginas estan bastante bien exceptuando la de artesanía, estan bastante completas aunque tienen bastante aspectos en los que tendrían que mejorar ![Método UX](img/Persona.png) 1.b Persona ----- ->>> Comenta brevemente porqué has seleccionado a esas personas y sube una captura de pantalla de su ficha (80-150 caracteres) +>>> Hemos realizado la creación de dos personajes ficticios que representan diferentes dificultades que los usuarios pueden encontrar al utilizar la página de free tours en Granada. Las dos personas que hemos creado son : Mary, una exitosa diseñadora de moda en el Reino Unido que se enfrenta a dificultades al utilizar la página web de free tours en Granada. A pesar de su éxito en su campo, Mary confiesa que no es muy hábil con la tecnología y tiene dificultades para navegar por la web. Además, no entiende el idioma español, lo que dificulta aún más su experiencia al utilizar la página. Pablo, un joven delegado de su curso, cuya vida ha sido algo complicada debido al divorcio de sus padres cuando era muy pequeño. Pablo está emocionado por organizar un viaje de fin de curso a Granada y desea utilizar la página web de free tours para seleccionar las mejores opciones para sus compañeros. Sin embargo, debido a las responsabilidades y desafíos que ha enfrentado, se siente abrumado y busca una experiencia fácil y accesible en la página. + + ![Método UX](img/JourneyMap.png) 1.c User Journey Map ---- - ->>> Comenta brevemente porqué has escogido estas dos experiencias de usuario (y si consideras que son habituales) (80-150 caracteres) +>>> En este paso hemos realizado una representación de la experiencia de Mary y Pablo al utilizar la página web, lo hemos realizado como un recorrido diciendo paso por paso como se han sentido, las acciones que han ido realizado en cada paso y las acciones que les ha devuelto la página. El User Jorney Map de Mary comienza bien, con emoción por explorar Granada. Sin embargo, debido a sus dificultades con la tecnología se enfrenta a un obstáculo cuando intenta realizar la reserva. Aunque sigue los pasos indicados, Mary no recibe la confirmación de su reserva, lo que genera frustración y dudas sobre si ha realizado correctamente el proceso. Por otro lado, el User Journey Map de Pablo muestra su determinación por organizar un viaje de fin de curso en Granada. Sin embargo, se encuentra con dificultades al tratar de reservar para un grupo numeroso de compañeros. La falta de opciones claras y accesibles para reservar para tantas personas dificulta su proceso de reserva. Pablo se siente abrumado y frustrado al no encontrar una solución sencilla y eficiente para asegurar el viaje de su grupo. Después de ver la experiencia de estos dos usuarios podemos ver con más claridad los distintos fallos que tiene la página. ![Método UX](img/usabilityReview.png) 1.d Usability Review ---- +>>> En esta parte hemos realizado el Usability Review de la página web de free tours en Granada donde se ha evaluado exhaustivamente todos los aspectos clave de la plataforma. El objetivo de esta revisión fue identificar cualquier problema o dificultad que los usuarios pudieran encontrar al interactuar con la página y proporcionar comentarios de los fallos de cada apartado. Sobre la navegación, se ha evaluado la estructura y disposición de los elementos en la página, asegurándose de que la información esté organizada de manera clara y accesible. Se han analizado los menús, enlaces y botones para garantizar que sean intuitivos y fácilmente reconocibles, facilitando la orientación del usuario en la plataforma. También , se ha prestado especial atención a la experiencia del usuario durante el proceso de reserva. Se han evaluado los formularios y campos de entrada, asegurando que sean fáciles de completar y entender. Se han verificado los mensajes de confirmación y las notificaciones enviadas a los usuarios, garantizando que sean claros y den información relevante. En cuanto al aspecto visual, se ha realizado una revisión de la estética general de la página. Se han tenido en cuenta los colores, tipografías e imágenes utilizadas, asegurándose de que sean atractivos y coherentes con la identidad de la marca. Además, se ha considerado la legibilidad de los textos, asegurando que sean de un tamaño y contraste adecuados para facilitar la lectura. La revisión también ha tenido en cuenta la compatibilidad con diferentes dispositivos y navegadores, verificando que la página se visualice correctamente y funcione de manera óptima en diferentes plataformas. + + >>> Revisión de usabilidad: (toma los siguientes documentos de referncia y verifica puntos de verificación de usabilidad >>>> SE deben incluir claramente los siguientes elementos >>> - Enlace al documento: (sube a github el xls/pdf) ->>> - Valoración final (numérica): ->>> - Comentario sobre la valoración: (60-120 caracteres) +>>> - Valoración final (numérica): 51 +>>> - Comentario sobre la valoración: Como resultado de la valoración nos ha salido moderate y es que en general la página cumple con los que promete hacer implementando sus funciones básicas pero es en general un poco pobre ## Paso 2. UX Design @@ -61,8 +65,7 @@ Miembros ---- ->>> Comenta con un diagrama los aspectos más destacados a modo de conclusion de la práctica anterior, - +>>> En este caso hemos realizado una malla receptora de información para recopilar y analizar distintos aspectos de la página web de free tours de Granada. En primer lugar hemos resaltado las cosas interesantes como que ofrecen tours a casi todas las horas del dia, los precios suelen ser bastante económicos, ofrecen bastante imágenes, recomiendan otro tipo de actividades e información relevante sobre Granada y ofrecen tours privados que pueden ser interesantes. Para seguir, realizamos críticas constructivas de dicha página, a grandes rasgos hemos hablado de que no ofrecen comodidades ni servicios extras, son unos tours muy convencionales en los que no incorporan nuevas tecnologías, ofrecen muy poca variedad de guías turisticos, no ofrecen mapas con el recorrido que van a realizar y además el abanico de idiomas es muy bajo, ya que la mayoría de los tours son en español o ingles. Además hemos realizado preguntas a partir de la experiencia que tanto nuestras personas ficticias de las que hablamos anteriormente , como nuevos usuarios que utilicen la paǵina se podrían plantear, dichas preguntas hablan sobre la incertidumbre de si con un tour podremos recorrer los sitios más importantes de Granada, si se puede elegir el guia del tour, si hay que tener edad minima para realizarlo o cuando se realiza el pago de este tour. Por último hemos propuesto nuevas ideas para mejorar dicha página web como aplicar unos filtros para buscar los productos que más nos interese, como por ejemplo buscar por día, buscar por duración, etc, ofrecer packs de tours que puedes realizar en el mismo dia ya que para personas que están poco tiempo en Granada puede ser bastante interesante, establecer tours para diferentes edades e intereses como tours de discotecas, tours de bares de tapas y más tours de distinta índole y para terminar añadir un factor sorpresa a los tours para tener una experiencia más personalizada Interesante | Críticas | ------------- | ------- @@ -70,37 +73,31 @@ Miembros >>> ¿Que planteas como "propuesta de valor" para un nuevo diseño de aplicación para economia colaborativa ? ->>> Problema e hipótesis ->>> Que planteas como "propuesta de valor" para un nuevo diseño de aplicación para economia colaborativa te ->>> (150-200 caracteres) - +>>> Nuestra propuesta de valor para el nuevo diseño de la aplicación de economía colaborativa en nuestra página es dar una experiencia única y personalizada, conectando a los usuarios con guías expertos y ofreciendo tours sensoriales que estimulen todos los sentidos. Creemos que al combinar la economía colaborativa con la experiencia sensorial, podemos crear una plataforma innovadora que fomente la participación y el intercambio de conocimientos, mientras se brinda a los usuarios una experiencia turística enriquecedora y memorable ![Método UX](img/ScopeCanvas.png) 2.b ScopeCanvas ---- ->>> Propuesta de valor +>>> En este paso hemos realizado un ScopeCanvas para planificar y describir de manera clara los diferentes aspectos clave del proyecto a realizar. Hemos detallado varios aspectos como como los objetivos, las necesidades del público objetivo, las acciones que buscamos que los usuarios realicen, las métricas con las que vamos a medir nuestro éxito y los propósitos de nuestro proyecto. En general hablamos de que lo que queremos es llegar a públicos con distintos intereses y distintos gustos para fomentar el turismo en Granada capital. Mediremos el éxito dependiendo del feedback que tengamos de nuestro público. Todo esto lo haremos incorporando nuevos productos que inciten al público a usar nuestra web. Buscamos que los usuarios encuentren paz, relax y diversión mientras que conocen a Granada en todas sus facetas ![Método UX](img/Sitemap.png) 2.b Tasks analysis ----- ->>> Definir "User Map" y "Task Flow" ... +>>> Hemos realizado un task analysis que se basa en una tabla donde se enumeran diferentes tipos de públicos que pueden interactuar con nuestra página, y en las filas se presentan acciones específicas, como usar filtros, contactar, reservar packs, compartir, comentar y reservar tours individuales. En cada celda de la tabla, hemos asignado una clasificación de "a", "m" o "b" (alto, medio o bajo) según el nivel de interés que creemos que cada tipo de usuario tendrá en realizar esa acción en particular. Esto nos permite evaluar y comprender las preferencias y necesidades de los distintos públicos objetivo en relación con las diferentes acciones disponibles en nuestra página web. Al asignar clasificaciones de interés, podemos identificar las acciones que son más relevantes y atractivas para cada grupo de usuarios, lo que nos ayuda a priorizar y enfocar nuestros esfuerzos en mejorar la experiencia de usuario en esas áreas específicas ![Método UX](img/labelling.png) 2.c IA: Sitemap + Labelling ---- ->>> Identificar términos para diálogo con usuario +>>> Hemos creado el Sitemap y el Labelling de nuestra página web siguiendo un proceso estructurado. En primer lugar, hemos identificado las diferentes secciones y páginas clave de nuestro sitio web. La paǵina de inicio que nos lleva a diferentes secciones como , los tours , los packs, la página de contacto, información, sobre nosotros, entre otros. A continuación, hemos organizado estas secciones en un Sitemap, que es una representación visual de la estructura jerárquica de nuestro sitio web. En el Sitemap, hemos establecido la relación entre las diferentes páginas, destacando las secciones principales y sus subpáginas correspondientes. Esto nos permite tener una visión general clara de la navegación y la arquitectura de nuestro sitio web. Además, hemos aplicado el Labelling, que consiste en asignar etiquetas o nombres descriptivos a cada página en nuestro Sitemap. Estas etiquetas reflejan de manera concisa el contenido y la función de cada página, lo que facilita la comprensión y navegación para los usuarios -Término | Significado -| ------------- | ------- - Login¿? | acceder a plataforma ![Método UX](img/Wireframes.png) 2.d Wireframes ----- ->>> Plantear el diseño del layout para Web/movil (organización y simulación ) +>>> Durante la fase de plantear el diseño del layout de nuestra página web de tours, hemos llevado a cabo un proceso detallado para crear bocetos que nos ayuden a visualizar la estructura general y la disposición de los elementos en cada página. Para ello, hemos utilizado herramientas de diseño que nos permiten plasmar nuestras ideas de forma rápida y sencilla. Estos bocetos son representaciones visuales, donde nos hemos enfocado principalmente en la distribución y organización de los elementos clave, sin entrar en los detalles de diseño como colores, tipografías o estilos visuales. El objetivo principal de esta etapa ha sido capturar la arquitectura de la información y la disposición general de los elementos para obtener una comprensión clara de la estructura de la página ## Paso 3. Mi UX-Case Study (diseño) @@ -108,37 +105,30 @@ Término | Significado ![Método UX](img/moodboard.png) 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? +>>> En este paso hemos realizado un moodboard de nuestra página web que ha implicado la recopilación de diversos elementos visuales que nos ayudan a establecer la estética y la identidad visual de la página. Hemos seleccionado el tipo de tipografía que utilizaremos en nuestra página web para los encabezados y subtítulos. Hemos elegido imágenes que representen visualmente el contenido y el tema de nuestra página web. Hemos definido una paleta de colores que refleje la personalidad de nuestra página web. Hemos seleccionado iconos relevantes que complementen la información y mejoren la usabilidad de nuestra página web. Hemos incluido el logotipo de nuestra página web en el moodboard. El logotipo es la identidad de nuestra marca y nos ayuda a establecer una imagen reconocible y memorable. El moodboard nos sirve como una guía visual durante el proceso de diseño, asegurando la coherencia y la armonía en todos los elementos visuales de la página web ![Método UX](img/landing-page.png) 3.b Landing Page ---- - ->>> Plantear Landing Page +>>> En el proceso de creación de nuestra landing page para atraer nuevos clientes a nuestra página web de tours por sentidos, hemos diseñado una estructura clara y concisa, resaltando los beneficios más importantes que ofrecemos y utilizando una llamada a la acción persuasiva. Además, hemos cuidado el diseño visual para transmitir confianza y hemos redactado un mensaje claro y convincente que destaca nuestra propuesta de valor. Con secciones distintas y visibles, un encabezado llamativo, beneficios destacados y una acción directa, nuestra landing page busca captar la atención del usuario y motivarlo a registrarse o reservar un tour, generando así nuevas oportunidades de negocio. ![Método UX](img/guidelines.png) 3.c Guidelines ---- +>>> Hemos creado un guideline para nuestra página web, estableciendo una identidad visual coherente. El logotipo "SenseGranada" evoca una experiencia sensorial en la ciudad, mientras que la paleta de colores representa la naturaleza y la calma. Para la tipografía, utilizamos CoffeCake para transmitir calidez y Belleza para ofrecer elegancia y claridad. Siguiendo los patrones de UI-Patterns, incorporamos funcionalidades como búsqueda, filtro y mapa, y garantizamos accesibilidad visual. Además, hemos integrado características como retroalimentación, edición en su lugar y vista previa. En cuanto al lenguaje, evocamos emociones y transportamos a los usuarios a escenarios llenos de magia, invitándolos a explorar y disfrutar de las maravillas de Granada con SenseGranada ->>> 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. ![Método UX](img/mockup.png) 3.d Mockup ---- ->>> Layout: Mockup / prototipo HTML (que permita simular tareas con estilo de IU seleccionado) +>>> Para diseñar el layout de nuestra página web, hemos creado un mockup que nos ha permitido simular tareas con los botones interactivos seleccionados. Hemos desarrollado alrededor de 30 páginas de simulación, incluyendo tours, packs, sobre nosotros, información, contacto, registro, inicio de sesión y más. Utilizando herramientas de diseño y desarrollo web, hemos creado una representación visual de cada página, estableciendo la disposición de los elementos, la navegación y la interacción con los botones. Este proceso nos ha permitido visualizar y evaluar cómo se verá y funcionará la página en tiempo real, identificar posibles problemas de usabilidad y realizar ajustes antes de la implementación final. Con el mockup, hemos logrado obtener una visión clara y tangible de la estructura y el flujo de las 30 páginas, brindando una experiencia de usuario intuitiva y atractiva. ![Método UX](img/caseStudy.png) 3.e ¿My UX-Case Study? ----- ->>> Publicar my Case Study en Github.. ->>> Documente y resuma el diseño de su producto en forma de video de 90 segundos aprox +>>> Lo hemos documentado en este mismo readme, explicando paso a paso lo que hemos realizado en cada una de las partes que hemos realizado para llegar a la versión final de nuestra página web ## Paso 4. Evaluación diff --git a/img/logotipo.png b/img/logotipo.png new file mode 100644 index 000000000..7de650db4 Binary files /dev/null and b/img/logotipo.png differ