IPO - PR - Reto 4 PDF

Preview

Summary

4. GENERACIÓNImplementación de un prototipo de altafidelidadContenido 4 User Journey Tabla de contenido 4.1 ¿Que es? 4.1 Objetivos 4.1 Metodología 4.1 Resultados 4.1 Pain Points 4.1 Conclusiones 4 Prototipo 4.2 ¿Que es? 4.2 Objetivos 4.2 Metodología 4.2 Resultados 4.2 Justificaciones 4.2 Estilos de ...

Description

4. GENERACIÓN Implementación de un prototipo de alta fidelidad

Miguel Manzano García – Grado de Ingeniería Informática

Contenido

Tabla de contenido 4.1 User Journey .................................................................................................................................................. 3 4.1.1 ¿Que es? ............................................................................................................................................................... 3 4.1.2 Objetivos ............................................................................................................................................................... 3 4.1.3 Metodología ......................................................................................................................................................... 3 4.1.4 Resultados ............................................................................................................................................................ 3 4.1.5 Pain Points ............................................................................................................................................................ 5 4.1.6 Conclusiones ......................................................................................................................................................... 5 4.2 Prototipo ....................................................................................................................................................... 6 4.2.1 ¿Que es? ............................................................................................................................................................... 6 4.2.2 Objetivos ............................................................................................................................................................... 6 4.2.3 Metodología ......................................................................................................................................................... 6 4.2.4 Resultados ............................................................................................................................................................ 6 4.2.5 Justificaciones ....................................................................................................................................................... 7 4.2.6 Estilos de interacción ............................................................................................................................................ 8 4.2.7 Principios de diseño para todos ........................................................................................................................... 9 4.3 Conceptos fundamentales de la interacción ..................................................................................................10

Miguel Manzano García – Grado de Ingeniería Informática

4.1 User Journey 4.1.1 ¿Que es?

Un User Journey es una metodología para el diseño en la que aparecen todas las interacciones que tendrá el usuario con el sistema, incluyendo la descripción de emociones y reacciones en los touchpoints. Los touchpoints, son los puntos de contacto que tendrá el usuario con el producto. Esto nos permite conocer con mayor profundidad cómo es la interacción, localizando los puntos débiles y posibles mejoras en la experiencia de usuario. Happy Path es un tipo de User Journey que no tiene en cuenta los posibles errores que puedan surgir.

4.1.2 Objetivos Debemos analizar las siguientes acciones: -

Consulta por restaurantes o tipo de comida

-

Consulta de promociones

-

Consulta de condiciones de envío (zona de entrega, costo, tiempo de entrega)

-

Realización de una orden (agregar al carrito de compra y pago)

4.1.3 Metodología Se tendrán en cuenta los diagramas de flujo y los tests de usuario de la fase de definición. El fin de esto es encontrar la mejor experiencia de usuario que sea posible.

4.1.4 Resultados El siguiente Happy Path podría tener una mejor experiencia de uso para las tareas definidas en los objetivos:

Miguel Manzano García – Grado de Ingeniería Informática Consultar por restaurantes o por tipo de comida

Consultar promociones

Consultar condiciones de envío

Miguel Manzano García – Grado de Ingeniería Informática Realizar una orden (agregar al carro o bolsa de compra y el pago)

4.1.5 Puntos problemáticos -

No se admiten todavía todas las plataformas de pago existentes (PayPal, AmazonPay, GooglePay)

-

Tiempos de espera elevados.

4.1.6 Conclusiones Las búsquedas por restaurante y por tipo de comida tienen un flujo muy similar, lo que mejora la experiencia del usuario. Se ha buscado un proceso similar al de las plataformas analizadas, ya que son un buen punto sobre el que apoyarse, al ser muy utilizadas en el mercado. El proceso de pago también es muy parecido a las plataformas analizadas. Este es un punto crítico y es muy importante que no haya problemas o inconsistencias en el mismo. Por otro lado, las promociones son uno de los aspectos más valorados por los usuarios en los servicios de comida a domicilio. Para dar mayor preponderancia a este punto, se encuentran en la página principal de la aplicación. El punto anterior puede constituir un incentivo para que los restaurantes que deseen anunciar sus promociones paguen por este servicio.

Miguel Manzano García – Grado de Ingeniería Informática

4.2 Prototipo

4.2.1 ¿Qué es?

Se define un prototipo como el modelo del producto o servicio. Debe incluir la funcionalidad y la apariencia que finalmente tendrá el producto final. Permite que los usuarios potenciales puedan evaluar la propuesta.

4.2.2 Objetivos Realización de un modelo de la plataforma del servicio de mensajería. Los requisitos residen en las funcionalidades del producto final:

-

Consulta por restaurante o tipo de comida.

-

Consulta de promociones.

-

Consulta de condiciones de envío.

-

Realización de órdenes (agregar al carrito de compra y pago).

4.2.3 Metodología El prototipo se desarrolla teniendo en cuenta el Happy Path del punto anterior, así como los diagramas de flujo y los tests de los usuarios. Esto nos permitirá estructurar todo el proceso de forma que consigamos mejorar la experiencia del usuario.

4.2.4 Resultados Con la finalidad de mostrar las utilidades más destacadas del prototipo, se ha adjuntado un vídeo explicativo en la sesión Langblog del área de usuario de la UOC.

Asimismo, se puede acceder al prototipo para la aplicación móvil desde los siguientes enlaces:

https://www.figma.com/proto/DtuWRLwHsGCrefS3m52PmV/Untitled?scaling=max-zoom

Miguel Manzano García – Grado de Ingeniería Informática https://www.figma.com/file/DtuWRLwHsGCrefS3m52PmV/Untitled

4.2.5 Justificaciones Se ha realizado un prototipo de alta fidelidad a partir del análisis de las interacciones de los usuarios con la plataforma en la realización de las tareas extraídas de los requisitos. También se ha tenido en cuenta los test de los usuarios.

En este prototipo se mostrarán las pantallas funcionales de la aplicación. Se ha utilizado la herramienta FIGMA por su gran cantidad de características que permiten desarrollar un prototipo lo más fiel posible a la aplicación final.

El nombre de la aplicación es DeliFood, que evoca la pasión por la comida deliciosa y a domicilio que demandarán los usuarios potenciales.

En la pantalla de inicio se encuentran las funcionalidades más importantes de la aplicación. Se puede consultar por restaurante, por tipo de comida y se muestran las promociones de la plataforma.

En la esquina superior izquierda aparece un icono que permite abrir un menú desplegable. Y a la derecha el icono del carrito de compra. Esto elementos son fijos y no dependen de la pantalla en la cual nos encontremos.

En la pantalla principal se muestran tres secciones:

La primera sección es una barra de búsqueda. En esta sección el usuario puede buscar por el nombre de un restaurante, obteniendo un listado de los restaurantes que concuerden con su búsqueda.

La segunda sección es una opción de compra recurrente. En las fases de análisis del proyecto se descubrió que los usuarios valoran de forma positiva la posibilidad de repetir una compra anterior, sin la necesidad de repetir de nuevo todo el proceso de la selección de productos. Por este motivo, el prototipo dispone de esta opción que mejora de forma sustancial la experiencia de usuario.

La tercera sección incluye tres listados de consulta. En concreto, permite listar restaurantes, tipos de comida y promociones. En un primer vistazo únicamente se muestran unos cuantos elementos en cada uno de estos listados. Pero existe la opción de seleccionar el enlace "Ver todos", donde el usuario podrá listar todos los elementos de la opción elegida.

Miguel Manzano García – Grado de Ingeniería Informática El proceso de compra es muy similar al de otras aplicaciones de mensajería. Esto se ha hecho de forma consciente, ya que los usuarios suelen preferir un sistema conocido.

Una vez el usuario ha añadido todos productos a su carrito de compra puede hacer clic sobre el icono del carrito de compra para proceder al pago de su pedido. Además, le permite comprobar que esté todo correcto en cuanto a los productos seleccionado en su pedido. A continuación, pulsa sobre el botón "Pedir" con lo que aparecerá la dirección de entrega que el usuario haya escogido por defecto. De nuevo, esto mejora la experiencia del usuario.

Por último, el usuario elige su método de pago presionando el botón correspondiente. Le aparecerá una pantalla en donde se le solicitarán los datos de pago y, una vez introducidos estos, únicamente deberá presionar el botón: “Completar Pedido”.

Es importante dar un feedback al cliente para que se asegure que todo ha ido bien. En este caso se logra mediante un mensaje de éxito.

4.2.6 Estilos de interacción

Menú de selección o navegación Este estilo de interacción presenta al usuario la lista o opciones posibles en cada momento. El usuario solamente debe escoger una opción: la que se corresponde con su objetivo. En nuestro prototipo podemos ver la utilización de este estilo de interacción en el menú de la pantalla principal donde puede escoger entre consultar por RESTAURANTES, TIPOS DE COMIDA o bien PROMOCIONES. Además, durante los procesos de escoger alimentos y de compra, el usuario también tiene diferentes opciones a escoger según la acción que quiere llevar a cabo. Se ha decidido utilizar este estilo de interacción ya que es de los más comunes en aplicaciones móvil o webs y el usuario suele estar acostumbrado. Además, se comprobó en las fases anteriores que era intuitivo y los usuarios se encontraban cómodos navegado.

Miguel Manzano García – Grado de Ingeniería Informática

Formularios Este estilo de interacción consiste en utilizar la metáfora de los formularios en papel donde se presentan una serie de espacios vacíos con sus etiquetas asociadas que el usuario tiene que introducir o completar. Se ha utilizado en el prototipo ya que resulta altamente intuitivo al ser un elemento que los usuarios conocen físicamente pero trasladada al mundo digital. Para los usuarios resulta totalmente natural apuntar su nombre debajo de la etiqueta nombre o la fecha de caducidad de un documento debajo de la etiqueta que lo indica. Por todas esas razones hemos decidido que los datos de pago de nuestro prototipo se presentarían en un formato de formulario.

4.2.7 Principios de diseño para todos Simple e intuitivo Decimos que un diseño es simple e intuitivo cuando es fácil de usar y de entender sin demasiados conocimientos previos. Nuestro prototipo, gracias a los estilos de interacción comentados en el punto anterior (formularios y menús de selección) ha conseguido que el diseño digital sea más sencillo que nunca de manera que cualquier persona que haga uso de un smartphone, aunque sea de forma muy casual, será capaz de comprender nuestra aplicación. Las instrucciones de los formularios y los menús son claras y sencillas, se usan pocas palabras pero muy concisas para que no den pie a ningún tipo de confusión. Además, el lenguaje es agradable (como si fuese un amigo o un familiar quien te diera las pautas y te propusiera empezar un proceso juntos) hace de nuestro prototipo, un diseño apto para todo tipo de alfabetización.

Con tolerancia al error Decimos que un diseño tiene tolerancia al error cuando minimiza los riesgos y las consecuencias adversas de acciones involuntarias. En las fases anteriores se llegó a una conclusión muy importante relacionada con este aspecto y se decidió que se mantendría siempre la opción de volver atrás durante cualquier proceso que se diese en la aplicación. Por eso, en el proceso de compra y pago del pedido, el botón de volver atrás se mantiene intacto en su sitio. De esta forma conseguimos que el usuario revise todo lo que necesite y que sea el quien lleve el ritmo del proceso y así no se sienta estresado en ningún momento mientras hace uso de la aplicación.

Miguel Manzano García – Grado de Ingeniería Informática

Que exige poco esfuerzo físico Decimos que un diseño exige poco esfuerzo físico si su uso es cómodo y no conlleva fatiga. En nuestro caso, somos conscientes que un smartphone puede no ser el diseño más cómodo para todo el mundo ya que requiere aguantarlo con una mano cerca de la cara y muchas veces tener que doblar la espalda para poder visualizar el contenido. Aún así hemos tenido en cuenta el uso de colore y de contrastes entre ellos en nuestro prototipo para no crear una fatiga todavía mayor en el usuario. Todos los colores son amables a la vista y se ha priorizado el uso de bordes redondeados. Por último, también se han tenido en cuenta los contrastes entre botones y texto o entre el fondo y el color del texto para que el usuario no tenga que forzar la vista en ningún momento.

4.3 Conceptos fundamentales de la interacción Una vez realizada la primera iteración del prototipo, pasamos a analizar como se han aplicado los conceptos fundamentales de la interacción. A continuación, se detalla su presencia en el prototipo con ejemplos.

Metáfora El proceso de compra virtual (añadir un elemento, retirar un elemento, revisar la cesta e ir a pagar) es una metáfora del proceso de compra físico en un supermercado o un TakeAway de comida. Los formularios para los procesos de pago también son una metáfora de los formularios de papel de toda la vida.

Affordance Los iconos de menú y de cesta son tan representativos que el usuario no necesita aprender que significan sinó que instintivamente ya lo sabe. Lo mismo pasa con los “botones” que se pueden “pulsar”.

Visibilidad Todas las imágenes son representativas de su concepto. Además, se ha tenido en cuenta uso de colores agradables, representativos de la marca y el contraste entre texto y fondo o botones.

Retroalimentación La aplicación tiene mucha retroalimentación. Un ejemplo sería en proceso de pago, cuando se ha completado el proceso, el usuario recibe un mensaje de éxito conforme el pedido se ha realizado correctamente.

Restricción En las pantallas del proceso de pago, al usuario no le aparece el botón de proceder al siguiente paso hasta que el

Miguel Manzano García – Grado de Ingeniería Informática usuario no ha introducido todos los datos obligatorios y estos son correctos. Además, aunque no aparezca en el prototipo (sería inviable mostrar todas las posibilidades de pantallas de error), se ha previsto aplicar una restricción antes de cancelar el pedido para que el usuario no pierda su elección de todos los contenidos de la cesta de compra. De esta forma la plataforma se asegura de que los usuarios sepan que cancelar es realmente lo que desean hacer y que no lo hagan por error.

Modelo mental La App está plagada de esto. Aparecen fotografías de distintos tipos de comida muy reconocibles sin que sea necesario citar cuales son, además de aparecer incluso los logos de las marcas bajo las que se comercializan por lo que es inequívoco que se reconozcan....