Prácticas Diseño Interfaces de Usuario 2022-23 (Tema: .... )
Grupo: DIU2_Lospibes Curso: 2022/23 Updated: 4/05/2023
Proyecto:
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
Logotipo:
Miembros
- 👤 Sergio Muñoz Gómez
- 👤 María Mingjie Párraga Ramos
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
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.
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.
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): 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
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 |
|---|---|
| Preguntas | Nuevas ideas |
¿Que planteas como "propuesta de valor" para un nuevo diseño de aplicación para economia colaborativa ? 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
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
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
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
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
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
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.
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
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.
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
A nuestro equipo le ha tocado valorar al grupo DIU3.ElMedusa (https://github.com/seeergiovm/DIU-practicas). Dicho grupo ha llevado a cabo la elaboración de una página de Artesanía Nazarí en el que ofrecen una visita guíada al taller de artesía con diferentes descuentos y proporcionando información detallada al usuario de lo que se va a realizar
| Usuarios | Sexo/Edad | Ocupación | Perfil | Exp.TIC | Plataforma | TESTA/B |
|---|---|---|---|---|---|---|
| Dora | M / 36 | Recepcionista | Positiva | Media | Windows | A-B |
| Raul | H / 64 | Taquillero | Frustrado | Bajo | Windows | A-B |
| Sandra | M / 18 | Estudiante | Tranquila | Alta | Windows | A-B |
| Adrían | H / 24 | Camarero | Sociable | Media | Windows | A-B |
Como resultado final tras realizar el cuestionario con 4 muestras el usuario ha obtenido un 76,25 (Aceptable tipo C).
Generalmente las personas que han valorado la página, la han visto fácil de utilizar y agradable a la vista. Se ha hecho un buen diseño de la página, con la navegabilidad clara para una persona con poca experiencia en las nuevas tecnologías. A pesar de eso en algunos aspectos se ha quedado un poco pobre, por ejemplo en el diseño de la página había definido bastantes páginas pero luego solo se ha implementado la de Visita al taller. También se había hecho un wireframe de la página para unirse a un grupo y no se ha incluido en el prototipo de la aplicación.
En este paso hemos realizazdo un informe sobre la usabilidad de la página de Artesanía Nazarí, en el explicamos como hemos realizado el estudio de la usabilidad, captando a unos usuarios que respondieron a las preguntas del cuestionario A/B y valoraron diversos aspectos de la aplicación, mostramos el resultado del A/B testing poniendo la media y añadimos unas conclusiones desde el punto de vista de los usuarios y desde nuestro punto de vista. Para ver más pinche aqui
La página web esta bastante bien pero la hemos encontrado un poco pobre ya que solo tiene dos html y no tiene funcionalidaad ninguna por lo que ha sido muy dificil valorar la usabilidad de algo tan pequeño. En cuanto estilo y diseño esta bastante bien hecho ya que las partes mas importantes son las que más resaltan y los colores estan relacionados con la temática de la página. En resumen, sencillo pero eficiente
5.a Accesibility evaluation Report
Indica qué pretendes evaluar (de accesibilidad) sobre qué APP y qué resultados has obtenido
5.a) Evaluación de la Accesibilidad (con simuladores o verificación de WACG) 5.b) Uso de simuladores de accesibilidad
(uso de tabla de datos, indicar herramientas usadas)
5.c Breve resumen del estudio de accesibilidad (de práctica 1) y puntos fuertes y de mejora de los criterios de accesibilidad de tu diseño propuesto en Práctica 4.
(90-150 palabras) Opinión del proceso de desarrollo de diseño siguiendo metodología UX y valoración (positiva /negativa) de los resultados obtenidos