Prácticas Diseño Interfaces de Usuario 2023-24 (Tema: .... )
Grupo: DIU3_02DTR. Curso: 2023/24 Updated: 11/2/2024
Proyecto:
Decida el nombre corto de su propuesta en la práctica 2
Descripción:
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
Miembros
- 👤 David Martinez Diaz
- 👤 Jose Luis Rico Ramos
- 👤 Miguel Tirado Guzmán
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
Con este documento de planificación de investigación de usuario, se establece un enfoque estratégico y detallado para evaluar y optimizar la experiencia de usuario y usabilidad del sitio web "Vinos de Granada". Centrándose en comprender las necesidades, expectativas y desafíos de los usuarios actuales y potenciales, el plan aborda aspectos críticos como la calidad y relevancia del contenido, la estética de la interfaz, y la identificación de barreras de usabilidad.
A través de métodos de investigación cualitativos, incluyendo la etnografía y análisis de feedback directo de los usuarios, se busca generar recomendaciones concretas que mejoren la interacción y satisfacción de los usuarios, promoviendo un aumento en la fidelización del cliente y contribuyendo a los objetivos de negocio de crecimiento de ingresos y expansión del mercado.
Adjunto el documento: User Research Plan
Para el análisis de competidores hemos escogido diferentes páginas que ofrezcan los mismos servicios o similares, tales como catas de vinos ferias de vinos o ambas:
La cata con botas: Esta fue la primera en la que nos fijamos ya que cuando realizas la búsqueda en Google es de las primeras que sale referenciada, lo que la convierte en una de nuestras principales competidoras ya que al ser todo online el posicionamiento SEO es clave.
Feria de vinos Granada: Esta es otra página especializada en las ferias de vinos como producto sustitutivo al nuestro, lo que lo convierte en competidor también, tiene una interfaz menos usable peor un posicionamiento SEO mejor al cuadrar directamente
Granada Cooking: Esta página ofrece diferentes servicios tales como las catas de vinos, talleres, cooking partys, tiene una interfaz muy user friendly hasta el punto que cuenta con un calendario interactivo, lo único que las fechas suelen estar agotadas y precios elevados
En conclusión del análisis competitivo la mejor selección de competidor sería Granada Cooking, ya que a parte de ofrecer nuestros mismos servicios con una interfaz más usable y amigable para el usuario, también ofrece otros servicios sustitutivos y complementarios a los nuestros a unos precios muy competitivos.
Adjunto el documento: Competivive Analysis PDF
Luis Lozano, enólogo de 42 años en Logroño, es un apasionado del vino, dedicado a mejorar su calidad y a compartir su conocimiento. Sociable y extrovertido, Luis se preocupa por la autenticidad y la ética en la industria del vino. Planea visitar bodegas andaluzas para degustar y conocer en profundidad los vinos, reflejando su enfoque práctico y su deseo de interacción con marcas genuinas y de calidad.
Lucía Herrerías, una jubilada española de 69 años residente en Murcia, disfruta de su pasión por el vino y las relaciones sociales. Viajera y entusiasta, busca compartir experiencias en ferias vinícolas y encontrar vinos que sorprendan a su marido. A pesar de su preocupación por la salud de su hijo y su dependencia económica de la pensión, Lucía se mantiene activa en la comunidad vinícola, esperando que la tecnología le facilita seguir participando en eventos y fortalecer su círculo social. Con un carácter abierto y colaborativo, tiene habilidades de empatía y comunicación, y confía en marcas como La Sportiva, García Carrion y Eileen Fisher.
Elegimos la experiencia de Luis Lozano para ilustrar las dificultades cotidianas que enfrentan incluso usuarios técnicos al navegar por sitios web de turismo vinícola. A pesar de su conocimiento y pasión por el vino, Luis se topa con páginas poco intuitivas y con información insuficiente, un problema recurrente que afecta la experiencia de reserva en línea y demuestra la necesidad de mejorar la accesibilidad y comprensión en las plataformas digitales.
La experiencia de Lucia Herrerias refleja un desafío común para muchas personas de su edad: la lucha por encontrar y reservar rutas de vino en línea. A sus 69 años, Lucia enfrenta obstáculos tecnológicos que complican lo que debería ser una reserva sencilla. Aunque cuenta con la ayuda de una amiga y eventualmente logra su objetivo, el proceso evidencia la necesidad de sitios web más accesibles y comprensibles, especialmente para los usuarios senior que desean participar en el enoturismo sin la frustración de la tecnología.
Tras el análisis de experiencia de usuario vamos a comentar algunos puntos a mejorar propuestos por nosotros como expertos en usabilidad:
Interfaz pobremente adaptable: Como se comenta en el Usability-review la interfaz es muy poco adaptable y se acopla malamente a las herramientas del browser, cuando no se encuentra en pantalla completa los menús desplegables de arriba muchas veces no funcionan, al utilizar las flechas de alante y atras dejan de funcionar algunos menus, etc…
Herramientas: Añadir algunas herramientas como las que cuentan los competidores ayudaría mucho, como puede ser un elemento search o incluso un calendario interactivo, que dado que muchas de las personas que acceden a la web son personas muy poco hechas a las tecnología, sería de gran utilidad.
Estos no son todos, sino algunos de los puntos a mejorar que se pueden ver más reflejados en el documento de usabilidad, para que la página web aporte más valor a los clientes objetivos y se les facilite la experiencia de uso maximizando nuestro beneficio.
Adjunto el documento: Usability Review
Adjunto el documento: Empathy Map
Comenta con un diagrama los aspectos más destacados a modo de conclusion de la práctica anterior,
| Interesante | Críticas |
|---|---|
| La personalización y la interacción comunitaria han emergido como aspectos cruciales. Los usuarios valoran una experiencia adaptada a sus preferencias y la oportunidad de conectar con otros con intereses similares. | Podría existir una necesidad de mejorar la integración entre las diferentes funcionalidades ofrecidas y asegurar que la interfaz sea lo más intuitiva posible para facilitar la navegación. |
| Preguntas | Nuevas ideas |
|---|---|
| ¿Cómo podemos fomentar aún más la participación de los usuarios en la creación de contenido? ¿De qué manera podemos garantizar que la experiencia sea inclusiva y atractiva para un espectro más amplio de usuarios? | Incorporar elementos gamificados para incentivar la participación y el compromiso. Explorar la implementación de funcionalidades de realidad aumentada para enriquecer las experiencias virtuales y las interacciones dentro de la aplicación. |
¿Que planteas como "propuesta de valor" para un nuevo diseño de aplicación para economia colaborativa ?
Actualmente, muchas personas buscan formas más sostenibles y comunitarias de consumir productos y servicios. Sin embargo, encuentran barreras en la falta de plataformas que faciliten de manera efectiva el intercambio y la colaboración.
Nuestra aplicación une a personas con intereses y necesidades complementarias, promoviendo un intercambio seguro y eficiente de bienes y servicios, y fomentando una comunidad sostenible y conectada.
Adjunto el documento: Propuesta de Valor
- User task Matrix:
- User flow:
Adjunto el documento: Task Analysis
- Sitemap:
- Labelling:
Adjunto el documento: Labelling
Plantear el diseño del layout para Web/movil (organización y simulación )
-
Pagina de inicio. Es lo primero que vera el cliente al ingresar en la web, esta se encuentra dividida en 3 apartados.
- El header. Es donde encontrara el contacto con la empresa y la informacion del usuario. En caso de no esta loggeado se le dara la opcion de hacerlo o registrarse.
- El cuerpo de la pagina. Donde encontraremos dos opciones de busqueda, una de libros y otra de actividades.
- El footer. Donde encontraremos la fecha y el nombre de la empresa.
- Pagina de busqueda. En esta pagina se vera reflejado la busqueda que el usuario haya realizado. Se mostraran los resultados de la busqueda.
- Pagina del libro. En esta pagina se mostrara la informacion del libro seleccionado. Se mostrara la portada, el autor, la sinopsis y las opiniones de otros usuarios ademas de los descuentos el librerias y bibliotecas.
- Pagina de error. En caso de que el usuario haya introducido mal la url, la pagina no exista o no haya realizado una busqueda buena, se le mostrara esta pagina.
Adjunto el enlace a figma: Figma
Adjunto el pdf del wireframe: Wireframe
Adjunto el documento: Moodboard
.jpg)
La herramienta utilizada es:
https://www.designevo.com/es/logo-maker/
La resolución del logo es 500x500px. Para utilizarlo para la cabecera de Twitter utilizaría el logo principal, sin embargo, también puedo utilizar el secundario.
Adjunto el documento: LandingPage
El objetivo principal que se persigue en la selección de los distintos elementos es conseguir una interfaz sencilla e intuitiva, la cual sea fácilmente reconocible. Por ello elegimos en primer lugar el paquete de Google Material design 3 y sus líneas elegantes y simples.
Tras seleccionar cada elemento se modifican sus colores, y en ocasiones sus formas, para que se ajuste a lo determinado en el moodboard (paleta de colores, inspiración, tipografía...)
Los patrones utilizados para esta práctica son:
-
Onboarding. Pantalla que encuentra un usuario al usar la aplicación. En ella se usa el azul característico del club además de un fondo de color blanco para dejar que respire la pantalla. También se encuentra, en grande, una frase positiva que motiva al usuario a usar la aplicación.
-
Menú de navegación. Se emplea el menú de navegación propio de Google Material de 4 opciones. Para el club de lectura se adaptan los iconos usando unos cuyos significados sean fácilmente reconocibles:
-
Iconos de barra de navegación. Utilizamos los iconos proporcionados por el Material 4 que más se adaptan a nuestra interfaz amigable e intuitiva, seguida durante todo el proyecto.
-
Carrusel de imagenes. Para hacer más intuitiva nuestra página de inicio, hemos introduco en esta un carrusel con algunas de las imagenes, actividades y lecturas mas destacadas.
-
Wizards. Para ayudar en la decripción de las distintas interfaces de usuario de nuestro proyecto, utilizamos Wizards, con descripciones representativas de cada una de estas.
-
Lista Card. Para ayudar al usuario a encontrar su actividad o lectura favorito hacemos uso de las listas proporcionadas por el Material 3, tanto en la pagina de inicio como en los listados,dandole los colores representativos de nuestro proyecto y nuestra tipologia.
-
List item. Los distintos elementos que se muestran dentro de las listas se proporcionan con una interfaz priorizando la facilidad de entendimiento de nuestros usuarios, nuevamente extraido de las opciones de Guidelines de Material 3, con un nombre descriptivo, imagen representativa, caracteristica y opcion de saber más.
-
Input Form. Otro elemento adaptado a nuestra aplicacion que proporciona la libreria de Materials 3 es en de los formularios, el cual hemos utilizado dandole nuestros colores caracteristicos, para poder realizar inicios de sesión y registros de usuarios.
Adjunto el documento: Guidelines
Adjunto el documento: Layout HI-FI
Para ver el proyecto en general:
Para ver el prototipo (Utilizar el modo pantalla completa para mejorar la experiencia):
El caso asignado es la evaluación del proyecto "Amigos Solidarios". Este proyecto consiste en la realización de una página web perteneciente a una organización sin ánimo de lucro que busca la realización de actividades sociales de todo tipo y en todos los niveles de la sociedad. Para ello, se pretende crear un sistema con un amplio catálogo de actividades y un sistema de búsqueda eficaz para permitir al usuario realizar un uso fácil de la página y motivar al usuario para que participe en las actividades propuestas, además de incluir una manera de contactar e informar de nuevas actividades que podrían realizarse.
Para la realización del role play se han simulado 4 tipos de usuarios ficticios con diferentes características. Se han expresado las ideas de posibles situaciones conflictivas de cada persona en las propuestas evaluadas. A continuación se detallan los usuarios asignados a cada caso (A/B):
| Usuarios | Sexo/Edad | Ocupación | Exp.TIC | Personalidad | Plataforma | TestA/B |
|---|---|---|---|---|---|---|
| María | M / 45 | Oficinista | Media | Emocional | Web | A |
| Juan | H / 38 | Estudiante | Alta | Racional | Web | A |
| Ana | M / 25 | Estudiante | Alta | Extrovertida | Móvil | B |
| Manuel | H / 70 | Jubilado | Baja | Meticuloso | Web | B |
- María: Necesita coordinar actividades familiares de manera eficiente. Se frustra cuando la plataforma no es intuitiva.
- Juan: Busca cursos de idiomas. Encuentra problemas de accesibilidad y desea más opciones de cursos.
- Ana: Disfruta de eventos sociales y fotografía. Quiere opciones fáciles para encontrar actividades y compartir fotos.
- Manuel: Requiere una interfaz sencilla para gestionar sus actividades diarias. Se siente decepcionado cuando la plataforma no es lo suficientemente clara.
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 siguiendo las pautas para usar la escala SUS e interpretar los resultados.
El equipo DTR ha desarrollado este informe evaluando el proyecto "Amigos Solidarios". Nuestra experiencia abarca diversas áreas del diseño y desarrollo web, incluyendo la creación de interfaces de usuario intuitivas y atractivas, así como la implementación de sistemas de navegación eficientes y accesibles.
En general, el diseño del proyecto "Amigos Solidarios" es visualmente atractivo y funcional, con una paleta de colores coherente que facilita la navegación y mejora la experiencia del usuario. Sin embargo, hemos identificado varios problemas que afectan la usabilidad:
- Visibilidad de la Barra de Navegación: La barra de navegación no es suficientemente destacada, lo que dificulta que los usuarios la encuentren y utilicen eficientemente.
- Atención al Footer: La carga del contenido principal desvía la atención del usuario del footer, sugiriendo la necesidad de optimizar el diseño.
- Diferenciación Visual en el Formulario de Registro: Los campos del formulario podrían beneficiarse de una mayor diferenciación visual para evitar confusiones.
- Consistencia y Facilidad de Uso: Los usuarios percibieron inconsistencias en el diseño y encontraron la plataforma complicada de usar en comparación con otras aplicaciones.
El análisis de eye tracking proporcionó información detallada sobre los patrones de visualización de los usuarios mientras navegaban por el sitio web:
- Pantalla de Inicio: Los botones de inicio de sesión y de menú no captaron la atención necesaria. Los usuarios se centraron en las imágenes y texto de la tarjeta de actividad.
- Menú de Navegación: El menú carece de información visual atractiva y utiliza etiquetas pequeñas, dificultando su uso.
- Formulario de Registro: El botón para enviar el formulario no llama suficientemente la atención y se pierde en el diseño.
- Selección de Fechas: El calendario carece de diferenciación visual suficiente para destacar elementos importantes.
- Información de Actividades: La información dividida en recuadros puede parecer inconexa, dificultando la comprensión.
Puntos Positivos a Destacar:
- Diseño Atractivo: Visualmente atractivo con una paleta de colores coherente.
- Funcionalidades Útiles: La selección de fechas mediante un calendario y la sección de detalles de actividades son útiles y bien implementadas.
- Proceso de Registro Intuitivo: El formulario de registro facilita la inscripción a nuevas actividades.
Puntos de Mejora:
- Mejorar la Visibilidad de la Barra de Navegación: Hacerla más destacada y accesible.
- Optimizar el Footer: Asegurar que reciba la atención adecuada.
- Diferenciación Visual en el Formulario de Registro: Mejorar los campos del formulario para evitar confusiones.
- Consistencia en el Diseño: Asegurar una mayor consistencia en la plataforma.
- Mejoras en Accesibilidad: Realizar ajustes para mejorar la navegación para usuarios con discapacidades.
- Aumentar la Visibilidad de Botones Críticos: Destacar los botones de inicio de sesión, menú y envío del formulario.
- Simplificar el Menú de Navegación: Reducir el número de opciones y usar íconos junto a las etiquetas para mejorar la navegación.
La aplicación de técnicas de usabilidad como el eye tracking, A/B testing y el cuestionario SUS ha sido muy útil para detectar errores ocultos y fallos de usabilidad en la plataforma "Amigos Solidarios". Estas técnicas han proporcionado datos valiosos que han permitido identificar áreas críticas de mejora y desarrollar recomendaciones específicas para optimizar la experiencia del usuario.
La diversidad en los perfiles de usuarios utilizados en las pruebas ha permitido obtener una visión amplia y detallada de cómo diferentes tipos de usuarios interactúan con la plataforma, lo que ha sido fundamental para identificar problemas de usabilidad y proponer soluciones efectivas. En general, consideramos que estas técnicas han sido efectivas para evaluar la usabilidad de la plataforma y proporcionar una base sólida para futuras mejoras.
) 5.b Eye Tracking method
Indica cómo diseñas experimento y reclutas usuarios (uso de gazerecorder.com)
Uso de imágenes (preferentemente) -> hay que esablecer una duración de visualización y
fijar las áreas de interes (AoI) antes del diseño. Planificar qué tarea debe hacer el usuario (buscar, comprar...)
cambiar img por tu diseño de experimento
Recordar que gazerecorder es una versión de pruebas: usar sólo con 3 usuarios para generar mapa de calor (recordar que crédito > 0 para que funcione)
Cambiar por tus resultados
recupera el usability report de tu práctica (que es el caso B de los asignados a otros grupos) 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
(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