PEC4 Sergio Molina - Solución Pec 1 primer semestre. Nota obtenida A. PDF

Preview

Summary

Interacción Persona OrdenadorPEC 4: Generación: implementación de un prototipo de altonivelNombre SergioApellidos Molina GonzálezNombre de usuario UOCmolinagonzalezsergio1. USER JOURNEY.1.1ón de USER JOURNEY.1.2ón de las tareas necesarias para 3 requisitos fundamentales.1.3 una pantalla de tu borrad...

Description

Interacción Persona Ordenador PEC 4: Generación: implementación de un prototipo de alto nivel Nombre

Sergio

Apellidos

Molina González

Nombre de usuario UOC

molinagonzalezsergio

1. USER JOURNEY.

1.1. Definición de USER JOURNEY. 1.2. Definición de fundamentales.

las

tareas

necesarias

para

3

requisitos

1.3. Utiliza una pantalla de tu borrador para acompañar cada tarea 1.4. Use Journey tipo happy path. Enumeración, Fases, Emociones y Oportunidades. 1.5. Reflexión sobre los Paints Points detectados y las posibles soluciones. 2. PROTOTIPADO.

2.1. Link del prototipo. 2.2. Descripción del prototipo. 2.2.1. Página de inicio. 2.2.1.1.

Interacción Persona Ordenador · PEC 4 Sergio Molina González

Encabezado o Header.

p1

2.2.1.2.

Cuerpo o Body.

2.2.1.3.

Pie de página o Footer.

2.2.2. Página búsqueda. 2.2.2.1.

Encabezado o Header.

2.2.2.2.

Cuerpo o Body.

2.2.2.3.

Pie de página o Footer.

2.3. Estilos de interacción. 2.4. Principios de diseño. 2.5. Presentación de 3 funcionalidades, en un vídeo publicado en Langblog. 2.6. Participa y comenta el prototipo de al menos un Compañero de clase.

3. CONCEPTOS FUNDAMENTALES DE LA INTERACCIÓN. BIBLIOGRAFÍA.

4.

Interacción Persona Ordenador · PEC 4 Sergio Molina González

p2

1. USER JOURNEY.

1.1. Definición de USER JOURNEY.

“A la hora de afrontar un proyecto, un punto crítico es entender las verdaderas necesidades y expectativas de los usuarios y cómo éstos interaccionan con el producto o servicio a lo largo de todo su ciclo de vida: cómo lo descubren, cómo lo usan, qué problemas encuentran, cuándo lo recomiendan, e incluso cómo terminan su relación de uso. Si queremos diseñar correctamente un producto digital, es necesario comprender exactamente cómo se siente el usuario en cada fase del proceso. Conseguir sentir esa empatía con el usuario es clave en el proceso de diseño. (“User Journey como herramienta clave para ganar empatía ...”)

Para obtener esa información, los especialistas usamos diferentes métodos basados en la etnografía, como las entrevistas o la observación participante, grupos de enfoque, test con usuarios, analítica… Y es que si no experimentas algo personalmente, es complicado sentir y pensar que es lo que de verdad necesita el usuario. Por ello, es muy importante, sobre todo en las fases iniciales, usar aquellas técnicas de investigación que permiten entrar en contacto con los usuarios, aprendiendo y recopilando toda la información posible de cada momento del proceso. (“User Journey como herramienta clave para ganar empatía ...”)

Crear un mapa del User Journey.

Interacción Persona Ordenador · PEC 4 Sergio Molina González

p3

Todos esos datos que recogemos con distintas técnicas se vuelcan en un documento de trabajo llamado “User Journey Map”, que traza un mapa del viaje que realiza el cliente, así como el cuándo, el cómo y el sentimiento que le suscita, normalmente en cuanto recuerdos positivos y negativos. Como no se puede realizar un User Journey individual para cada cliente existente, es preciso definir previamente unos arquetipos llamados personas y trabajar de forma separada cada uno, entendiendo su experiencia completa.” (“User Journey como herramienta clave para ganar empatía ...”)

1.2. Definición de las tareas necesarias para 3 requisitos fundamentales.

En una primera instancia, hemos de definir cuáles serán los tres requisitos fundamentales que utilizaremos para preparar nuestro User Journey y que serán los que utilizaremos para nuestros usuarios que seleccionamos en las prácticas anteriores.

Interacción Persona Ordenador · PEC 4 Sergio Molina González

p4

Para elaborar nuestro User Journey de las tareas seleccionadas, hemos de tener en cuenta los siguientes aspectos



Fijar cuál va a ser el objetivo que queremos obtener.



Establecer los pasos que los conforman y así obtener un guion. Dependerán y variarán dependiendo del tipo del producto y de la información definida en el modelado.



Definir los contenidos, la información relevante que deben tener. Si es necesario incluir un diagrama. Los aspectos que normalmente se incluyen son:

o Touchpoints: ¿motivo para interactuar con el producto? o Acciones: ¿qué acciones realiza cada usuario en cada paso? ¿Qué hacer para continuar y pasar al siguiente paso? o Pain points: ¿obstáculos que puedan aparecer? o Emociones: ¿cómo se siente durante la interacción con el producto? o Oportunidades: ¿qué hacer para mejorar la experiencia en este paso?



Diseñar el modelado y crear el diagrama.



Formato con el que queremos trabajar.

Interacción Persona Ordenador · PEC 4 Sergio Molina González

p5

Recopilando la información de prácticas anteriores, tenemos que los 3 requisitos que seleccionamos para el análisis de los diagramas de flujo fueron:



Consultar por experiencia de los clientes.



Consultar promociones.



Realizar una reserva (proceso de compra y el pago).

A partir de los tres requisitos seleccionados obtendremos el Use Journey que mostramos en el punto 1.4.

Interacción Persona Ordenador · PEC 4 Sergio Molina González

p6

1.3. Utiliza una pantalla de tu borrador para acompañar cada tarea. CONSULTAR PROMOCIONES

Interacción Persona Ordenador · PEC 4 Sergio Molina González

VALORAR EXPERIENCIA

p7

REALIZAR UNA RESERVA

Interacción Persona Ordenador · PEC 4 Sergio Molina González

p8

Seleccionar Comentari os

Buscar alojamiento

Abrir App

Valorar Comentari os

Aplicar Filtros

Validar los datos

Escribir un comentario

Valorar Estancia

1.4. Use Journey tipo happy path. Enumeración, Fases, Emociones y Oportunidades. Consultar experiencia de los clientes. Objetivo: queremos valorar la utilidad ofrecida por la experiencia de los clientes. Fases

Paint Points

No encontrar el alojamiento por no estar dado de alta en la página

Ninguno

6574 0

O bj

Encontrar el botón de selección

O bj

No encontrar el filtro deseado O bj

No tener los datos de la reserva para poder valorar

Ninguno

O bj

O bj

Añadir varias valoracione s

Ninguno

O bj

O bj

Emoci

Oportunida des

Asistente Virtual para que la búsqueda sea más amena, divertida y fácil de usar

Interactuar entre usuarios

Añadir emoticonos

Añadir videos y poder publicarlos en redes sociales

p9

Interacción Persona Ordenador · PEC 4 Sergio Molina González

Abrir App

Seleccionar habitación/ es

Seleccionar disponibilid ad

Aplicar filtros

Seleccionar oferta

Decidir ver más ofertas

Ver oferta

Realizar la reserva

Consultar Promociones. Objetivo: saber como se desenvuelve en seleccionar una oferta alojativa hasta completar el paso de realizar la reserva final. Fases

Paint Points

No encontrar el destino deseado

Ninguno

6574 0 1

757401

No indica los precios en diferentes periodos del año

Tener que retroceder

6574 0 1

757104

Perderse con tantos filtros

O bj

Demasiada información

O bj

Tiempos de respuestas

O bj

Ninguno

O bj

Emociones

Oportunida des

Interacción Persona Ordenador · PEC 4 Sergio Molina González

Incluir visitas virtuales en 3D

Añadir botones de retroceso

Añadir gráfica indicando los diferentes precios/peri odos

Interactuar con el asistente Virtual

Cambiar por emoticonos

p 10

Viene del paso anterior

Introducir datos personales

Añadir opciones

Leer informació n de condiciones

Aceptar condiciones

Seleccionar forma de pago

Completar la reserva

Recibir confirmaci ón correcta

Ninguno

Ninguno

Realizar una reserva (proceso de compra y el pago). Objetivo: valorar la facilidad y rapidez de esta tarea. Fases

Paint Points Ninguno

Ninguno

Faltan algunas opciones

Demasiada información escrita

No poder preguntar antes de aceptar

No disponer forma de pago y no poder guardar

Emociones

Oportunida des

Añadir Bizum

Interactuar con el asistente Virtual

Guardar selección

Interacción Persona Ordenador · PEC 4 Sergio Molina González

p 11

Interacción Persona Ordenador · PEC 4 Sergio Molina González

p 12

1.5. Reflexión sobre los Paints Points detectados y las posibles soluciones.

Gracias a los resultados obtenidos en el User Journey de cada uno de los apartados definidos, hemos podido detectar algunas deficiencias de nuestro diseño de la interfaz y de esta manera los hemos podido corregir.

Según la observación tenemos que los Paints Ponis detectados y sus soluciones son para:



Valoración de la experiencia de los clientes:

o No encontrar el alojamiento por no estar dado de alta en la página. Puede darse el caso de que el alojamiento que se está buscando no se encuentre dado de alta en nuestra página web, en este caso, gracias a la ayuda del asistente virtual y a la integración de la inteligencia artificial, se puede ofrecer otras alternativas similares con el fin de mantener al cliente en nuestra web. También el asistente virtual ayudará a que esta búsqueda sea más amena y divertida, además de facilitar la búsqueda. o Encontrar el botón de selección. En el diseño se detecta la dificultad de encontrar el botón para añadir una valoración al establecimiento, por lo que se da como solución hacer más visible este botón y la posibilidad de que el asistente virtual haga su accesibilidad más rápidamente. o No encontrar el filtro deseado. Con tantos filtros disponibles, es fácil perderse en ellos, por lo que se propone como

Interacción Persona Ordenador · PEC 4 Sergio Molina González

p 13

solución evitar textos y añadir más gráficos y más emoticonos. o No tener los datos de la reserva para poder valorar. Una de las condiciones para poder valorar una estancia es de disponer los datos de la reserva. En este caso, se permitirá interactuar con otros clientes, haciéndoles preguntas y poder obtener el feedback deseado. o Añadir varias valoraciones. Hemos detectado la falta de poder subir videos para mostrar y la falta de publicar en redes sociales. En este caso, se añaden estas nuevas funcionalidades con el fin de satisfacer la demanda de los clientes en poder subir videos y poder publicar en redes sociales.



Consultar promociones:

o No encontrar el destino. Aún existiendo una gran diversidad de destinos disponibles en nuestra web, pude darse el caso de no encontrar la oferta esperada. Como indicamos en el aparatado anterior, gracias al asistente virtual podemos redirigir al cliente a que continúe la búsqueda en otros lugares similares. También añadiremos videos virtuales en 3d para mejorar la experiencia de la visita guiada en la oferta publicada. o Tener que retroceder. Se aprecia que para retroceder a páginas anteriores no se dispone de botón de retroceso teniendo que cerrar ventanas. Se corrige añadiendo más funcionalidades de botones de retroceso y se ayuda también con el asistente virtual. o No indica los precios en diferentes periodos del año. El cliente quiere saber los periodos del año en el que la estancia es más económica o más caras, es por ello, que damos como

Interacción Persona Ordenador · PEC 4 Sergio Molina González

p 14

solución el proporcionar una gráfica indicando los precios por periodos del año. o Perderse con tantos filtros. En ocasiones, el facilitar tantas opciones, como es el caso de los filtros, el cliente se puede perder con tantas posibilidades, para ello el asistente virtual le hará mas fácil esta selección. o Demasiada información. Como indicamos, demasiado texto, imposibilita al cliente poder leer tanta información, como resultado, se reduce el texto y se cambia por gráficos y por emoticonos. o Tiempos de respuestas. En determinados puntos, existe un retraso en proporcionar la información, se detectan los puntos críticos y se mejora los motores de búsquedas.



Realizar una reserva: o Faltan algunas opciones. No existe la posibilidad de pago por BIZUM, que tan de moda está actualmente, por lo que se añade esta posibilidad como medio de pago. o Demasiada información en texto para aceptar condiciones. Reduciremos tanta información escrita y se añade más funcionalidades al asistente virtuales y se añaden ventanas modales para ampliar información y reducir de esta manera a primera lectura del cliente. o No disponer del medio de pago en el momento y no poder guardar la selección. Se complementa, añadiendo la posibilidad de realizar el pago más adelantes, y de volver a recuperar la reserva. Siempre y cuando siga disponible.

Interacción Persona Ordenador · PEC 4 Sergio Molina González

p 15

2. PROTOTIPADO.

2.1. Link del prototipo. Para la implementación del prototipo de nuestra interfaz se ha utilizado la herramienta de “Justinmind” facilitado por la UOC. Por lo que para su visualización y evaluación se puede consultar a través del siguiente link: https://cloud.justinmind.com/usernote/tests/67394225/68831211/68883169/inde x.html#/screens/d12245cc-1680-458d-89dd-4f0d7fb22724 2.2. Descripción del prototipo. Daremos una explicación inicial de lo que nos podemos encontrar desde el inicio de la pantalla principal hasta llegar a poder realizar una reserva según los filtros aplicados. La intención de esta implementación de la interfaz es Interacción Persona Ordenador · PEC 4 Sergio Molina González

p 16

acercarnos de una manera fácil y amena a las diferentes ofertas alojativas que se disponen y gracias a la facilidad de usabilidad poder realizar una reserva. 2.2.1 PÁGINA DE INICIO.

En la página de inicio nos encontramos bien diferenciado tres zonas de actuación: el encabezado, el cuerpo y el pie de nuestra interfaz.

2.2.1.1

Encabezado o Header.



Nos podemos encontrar un grupo de iconos que nos permiten cambiar de moneda, de idioma, contactar con atención al cliente e incluso enviar un email al centro de atención al cliente. Estas funcionalidades no están implementadas, salvo atención al cliente (nos lleva al link de atención al cliente de Booking.com) pero se sobreentienden sus funcionalidades.



Otro link que se facilita es poder registrar nuestro alojamiento, en este caso se enlaza con el registro de alojamientos proporcionado por la web de Booking.



La siguiente opción es la de inicio de Sesión y todas las posibilidades que nos ofrece esta opción de botón, que detallaremos a continuación y que ha sido implementada en su totalidad.

Interacción Persona Ordenador · PEC 4 Sergio Molina González

p 17

Para ver su funcionalidad se complementa con el siguiente diagrama de flujo de interacción, para hacernos una idea de su funcionamiento:

Inte Ser

Interacción Persona Ordenador · PEC 4 Sergio Molina González

p 19

otón

Interacción Persona Ordenador · PEC 4 Sergio Molina González

p 21

Podemos observar que nos da la posibilidad de cancelar el inicio de sesión, haciendo click en la “X” de la ventana modal, en este caso, cerrará la ventana modal y volveremos con la navegación de la página inicial.

Otra característica y que resaltamos es que, si introducimos una dirección de correo electrónico “NO VÁLIDA”, no proporcionará el mensaje correspondiente, e incluso si el formato introducido no es válido, también nos lo indicará. Además, el color de los campos mal introducidos cambiará a color rojo para resaltar el error acometido.

Indicar que, para verificar el funcionamiento de esta ventana modal, el usuario que damos por válido es “ [email protected]” y la contraseña es “123456”.

Si el email introducido es el correcto, al igual que la contraseña, el botón de inicio de sesión se desactivará y en su lugar aparecerá la opción de cerrar sesión.

Una característica común, en nuestro diseño, y que facilita la comprensión de cualquier input, botón, … es que al situar el ratón por encima de cualquiera de las situaciones que hemos indicado, es la aparición de una “callout” que nos servirá de ayuda y así se nos ofrece una mejor aclaración en la navegación de nuestra interfaz.

Interacción Persona Ordenador · PEC 4 Sergio Molina González

p 22

En esta ventana modal también se nos ofrece la posibilidad de recuperar la contraseña, en caso de que se nos haya olvidado.

Interacción Persona Ordenador · PEC 4 Sergio Molina González

p 23

El funcionamiento es el mismo, tenemos la opción de cancelar, haciendo click en la “X” de la ventana modal. Si introducimos una dirección de correo electrónico no existente en nuestra base de datos, nos dará un mensaje de alerta e incluso cambiará el color del input seleccionado. En el caso de haber introducido un correo electrónico existente en nuestra base de datos no emitirá la siguiente ventana modal, que nos indicará los pasos a realizar para recuperar nuestra contraseña.

Interacción Persona Ordenador · PEC 4 Sergio Molina González

p 24

Otra de las posibilidades es que, no tengamos una cuenta creada y no existente en nuestra base de datos. Para ello, existe la posibilidad de crear una cuenta nueva.

Interacción Persona Ordenador · PEC 4 Sergio Molina González

p 25

Interacción Persona Ordenador · PEC 4 Sergio Molina González

p 26

Se realizan capturas de pantallas para contemplar el flujo. Como se puede observar se contempla cualquier posibilidad de error, cancelación, se muestra la protección de datos en caso de seleccionar el enlace correspondiente, y en el caso de ser todo correcto, se muestra el mensaje de cuenta creada correctamente.

Interacción Persona Ordenador · PEC 4 Sergio Molina González

7



Tenemos una “Navbar” o barra de navegación, para seleccionar diferentes opciones de búsquedas. En este caso, al no ser nuestro objetivo de presentación en nuestro prototipo, no se han implementado, pero cabe destacar que, al pasar el ratón por encima de estas opciones, podemos observar cómo cambia de color y nos indica que estas opciones no están disponibles.

Interacción Persona Ordenador · PEC 4 Sergio Molina González

p 28



La siguiente barra de navegac...