PR3 JMF - Práctica 3 resuelta. Nota: A. PDF

Preview

Summary

Interacción Persona OrdenadorPráctica 3Juan Marín FidalgoDNI: 47755618MProfesor: Luciano WehrliCurso 2020-21, semestre 1ÍndiceÍndice---------------------------------------------------------------------------- 1URL del prototipo-------------------------------------------------------------- 2Descripci...

Description

!

Interacción Persona Ordenador Práctica 3

!

Juan Marín Fidalgo! DNI: 47755618M! Profesor: Luciano Wehrli! Curso 2020-21, semestre 1

Juan Marín Fidalgo

Práctica 3 IPO 20-21

Índice Índice ----------------------------------------------------------------------------1 URL del prototipo --------------------------------------------------------------2 Descripción del prototipo -----------------------------------------------------3 Funcionalidades"................................................................................ 3! Interacciones en el diseño".................................................................7! Página principal:"

7!

Página ResultadoIda:"

7!

Página ResultadoVuelta:"

8!

Página CompraBillete:"

8!

Página NormativaCovid:"

8!

Página Rutas:"

8!

Página CambiosAnulaciones:"

9!

Estilos de interacción"...................................................................... 10! Menú de selección o navegación:"

10!

Formularios:"

10!

Manipulación directa:"

10!

Principios de diseño para todos"......................................................11! Uso equiparable:"

11!

Simple e intuitivo:"

11!

Información perceptible:"

11!

Referencias -------------------------------------------------------------------12

1 de 12

Juan Marín Fidalgo

Práctica 3 IPO 20-21

URL del prototipo La URL para consultar el prototipo en la nube desde un navegador es la siguiente:!

https://www.justinmind.com/usernote/tests/48297745/49515448/49536216/index.html! !

2 de 12

Juan Marín Fidalgo

Práctica 3 IPO 20-21

Descripción del prototipo Funcionalidades En el prototipo se han implementado las cinco funcionalidades principales que se proponían en el enunciado de la práctica 1:!

Consultar rutas: existe una sección en la página principal del prototipo con enlaces a las rutas de las principales compañías ferroviarias en Europa. Pulsando en cualquiera de los enlaces, se accede a una página en la que se muestran las rutas. Esa página se ha implementado únicamente con las rutas de Renfe, así cualquier enlace de rutas en la página principal conduce a la página de rutas de Renfe.! En la página de rutas, hay la opción de seleccionar una ruta cualquiera mediante la pulsación del botón “Seleccionar”. Esto conduce a la página de resultados de trenes de ida. Luego, en esa misma página de ida, se podría modificar la fecha.! Consultar horarios: La consulta de horarios se realiza en el cuadro de búsqueda de la página principal, igual que haríamos durante el proceso de reserva. En dicho cuadro de búsqueda, se introduce la ciudad de origen, la de destino, la fecha de ida, y, si está seleccionada la ida y vuelta, la fecha de vuelta. Al apretar el botón “Buscar”, se muestran los resultados con los horarios y precios de la ida. Si se selecciona cualquiera, se muestran los resultados de la vuelta, si es que se seleccionó la opción.! Reservar o comprar billetes: una vez realizada la búsqueda según lo explicado en el punto anterior, se seleccionan los trayectos y, una vez seleccionados, en la parte inferior de la página se muestran los trenes seleccionados y el precio, junto con el botón “Continuar con la compra”. Pulsando el botón, se muestra la página para seleccionar diversas opciones de billete y formularios para introducir los datos del pasajero y los datos de pago.!

Buscar por ruta, horario o tipo de tren o palabra clave: se ha añadido, a la derecha de la cabecera de cada página, un campo de búsqueda libre.! 3 de 12

Juan Marín Fidalgo

Práctica 3 IPO 20-21

Consultar las medidas de bioseguridad: En la página principal, justo debajo del cuadro de búsqueda, existe un enlace destacado que conduce a una página con toda la información sobre las medidas de seguridad y restricciones codid-19. Hay la posibilidad de consultar las medidas en origen y en destino, en cualquier ciudad de Europa.!

Adicionalmente, se han implementado todos las funciones identificadas en los insights de la práctica 1:! Política de cambios y anulación de billetes: en la página principal, junto al enlace de medidas de seguridad y restricciones por covid-19, hay un enlace que conduce a la página para recuperar una reserva y poder realizar modificaciones. En la página de compra de billetes, justo debajo del formulario para introducir los datos de pago, también se ha implementado un enlace a la página de modificación de reservas. Se ha implementado la funcionalidad que enlaza con dicha página.!

Opción de ida y vuelta: hay un botón junto al cuadro de búsqueda de la página principal para seleccionar ida y vuelta en la búsqueda.! Filtro de los resultados de la búsqueda: en las páginas que muestran los resultados con los trenes de ida y de vuelta, hay campos a la derecha desde donde modificar la búsqueda y filtrar los resultados según diversos criterios que aparecen en un desplegable.!

Información turística de los principales destinos: en la página principal, hay una sección con información turística de los principales destinos.!

Creación de cuenta para almacenar datos personales de forma segura: en el encabezado de cada página, existe la opción de registrar o entrar a la cuenta personal. También se ofrece la opción de entrar en el formulario de introducción de datos personales de la página de compra de billete. De esta manera, no sería necesario rellenar todos los datos personales, ya que estarían almacenados en la cuenta personal.!

4 de 12

Juan Marín Fidalgo

Práctica 3 IPO 20-21

Recomendación de la mejor opción según precio y duración del trayecto: en las páginas que muestran los resultados, se ha señalizado la mejor opción (según precio y duración del trayecto) con un aviso textual.! Combinación con otros medios de transporte: en las páginas que muestran los resultados de la búsqueda, junto con los filtros, existe la opción de mostrar resultados de otros medios de transporte como avión o autobús.!

Posibilidad de pago con medios digitales como Apple Pay, Google Pay o PayPal: se han tenido en cuenta todas estas opciones en el formulario de entrada de datos de pago.!

Emisión de billete digital: se ha implementado un botón debajo del formulario de datos de pago para emitir un billete digital en formato QR.! Elección de asientos: existe una opción en la página de compra de billete para seleccionar el asiento directamente de un plano de un vagón.!

Seguros de cancelación o de protección de equipaje: existe una opción en la página de compra de billete para seleccionar un seguro de una de las compañías de seguros propuestas.!

Posibilidad de obtener factura: se ha implementado un botón debajo del formulario de datos de pago para emitir factura.!

Ver ruta en mapa o secuencia de paradas: en las páginas de resultados, aparece un mapa señalizando el origen y el destino de cada uno de los trayectos.!

Posibilidad de buscar alojamiento en destino: en la página principal, bajo el cuadro de búsqueda, existe la opción de seleccionar la opción para buscar alojamiento en la ciudad de destino. No se ha implementado su funcionalidad. La idea sería que al pulsar “Buscar” con ese campo seleccionado, se abriera una página adicional con los resultados de la búsqueda de alojamientos en destino.!

5 de 12

Juan Marín Fidalgo

Práctica 3 IPO 20-21

App para móviles: en el pie de cada página, existen dos enlaces que conducen a las tiendas de Google y Apple para descargarse las aplicaciones correspondientes. También se han implementado los enlaces a redes sociales.!

6 de 12

Juan Marín Fidalgo

Práctica 3 IPO 20-21

Interacciones en el diseño Se resumen las distintas interacciones que se han implementado en el prototipo:!

Página principal: En el encabezamiento, el logo de Omio y la sección trenes (aparece siempre seleccionada), enlazan con la página principal. Se ha considerado la sección “Trenes” como página principal, puesto que el prototipo está centrado en la venta de billetes de tren.!

En el cuadro de búsqueda, el botón “Buscar” conduce siempre a la misma página de resultados, independientemente de si se han modificado los contenidos de los campos de búsqueda que aparecen por defecto.!

Los enlaces “Consulta aquí la normativa de seguridad COVID-19” y “Cambios y anulaciones” conducen cada uno a su respectiva página.!

En la sección “Consulta las principales rutas de tren en Europa”, todos los enlaces conducen a la misma página de rutas de Renfe.!

En el pie de la página, el logo de Omio conduce a la página principal, los logos de Google Play y App Store, conducen a las páginas de descarga de las aplicaciones móviles, y los logos de redes sociales están enlazados con sus respectivas páginas en redes sociales.! El comportamiento de el encabezamiento y pie de todas las páginas es el mismo.!

Página ResultadoIda: Todas las opciones conducen a la misma página de trenes de vuelta.!

7 de 12

Juan Marín Fidalgo

Práctica 3 IPO 20-21

Página ResultadoVuelta: Cuando se pulsa cualquier tren de vuelta, se añade a la selección y se hace scroll a parte inferior de la página.!

Una vez se ha seleccionado cualquier tren, pulsando “Continuar con la compra” se va a la página de compra del billete.!

Página CompraBillete: En “Opciones de billete” se ha añadido la funcionalidad de seleccionar la clase Turista+. Al pusar el botón, se añade la opción al precio y el foco de la selección se desplaza a Turista+.!

Se ha añadido la funcionalida de seleccionar asiento. Si se pulsa el asiento 156, cambia el texto en la sección “Asiento seleccionado” y se desplaza la señalización en el plano.! En la sección “Datos de pago”, se ha añadido la funcionalidad de seleccionar MasterCard. Cuando se pulsa en MasterCard, cambia la selección del método de pago.! El enlace “Cambios y anulaciones” en la parte inferior derecha de la página, conduce a la página de gestión de reservas.!

Página NormativaCovid: Página informativa sin ninguna funcionalidad adicional implementada.!

Página Rutas: Si se pulsa cualquier botón “Seleccionar”, se abre la página ResultadoIda.!

8 de 12

Juan Marín Fidalgo

Práctica 3 IPO 20-21

Página CambiosAnulaciones: Página informativa sin ninguna funcionalidad adicional implementada.!

9 de 12

Juan Marín Fidalgo

Práctica 3 IPO 20-21

Estilos de interacción De los estilos de interacción presentes en el prototipo, se destacan los siguientes:!

Menú de selección o navegación: En la cabecera de cada página, se encuentra un menú para poder acceder rápidamente y desde cualquier página a la página principal o a otra sección del sitio web. Su uso resulta adecuado para poder estructurar el sitio web en sus áreas principales, accesibles desde cualquier lugar.!

Formularios: Se encuentran presentes en la página de compra de billete para introducir los datos del pasajero y sus datos de pago. Su uso es adecuado para la introducción de información, ya que es una interacción que resulta familiar y sencilla para todo tipo de usuarios, ya que utiliza la metáfora ampliamente conocida de los formularios en papel. Para evitar problemas, se han etiquetado claramente cada uno de los campos.!

Manipulación directa: Se ha utilizado este estilo de interacción para la selección del asiento. Se justifica su uso porque resulta un estilo muy intuitivo para seleccionar gráficamente un asiento del vagón. De esta forma, el pasajero se hace una idea de la localización del asiento y resulta muy fácil seleccionando simplemente pulsando sobre el asiento deseado.!

10 de 12

Juan Marín Fidalgo

Práctica 3 IPO 20-21

Principios de diseño para todos Durante el diseño del prototipo, se han intentado seguir los principios de diseño para todos. Se destacan los siguientes:!

Uso equiparable: Se ha optado por un diseño muy sencillo, basado en tarjetas que contienen la información. El diseño en tarjetas es un diseño que han adoptado la mayoría de redes sociales, por lo que resulta atractivo y sencillo. El tamaño de texto es grande, y el color de fondo, por detrás de las tarjetas, es oscuro para evitar cansar la vista. De esta manera, se intenta que el diseño sea atractivo para un rango muy amplio de usuarios, independientemente de sus capacidades visuales.!

Simple e intuitivo: Como se ha comentado, el diseño es lo más simple posible y siguiendo los principios de diseño actuales. Todos los botones y enlaces son auto-explicativos. Las explicaciones e indicaciones son simples e intuitivas. Se ha agrupado la información de forma sencilla. Por ejemplo: la página de compra del billete engloba la selección de opciones de billete, la entrada de datos del pasajero y los datos de pago. Esta información está dividida en la web actual de Omio.!

Información perceptible: Se ha diseñado el prototipo de manera que su información sea perceptible para todos tipo de usuario. Toda la información está disponible en formato textual, para poder ser leída por lectores de pantallas para usuarios invidentes. El contraste del texto es máximo (texto negro, tarjetas blancas, o al revés en el encabezado y pie)!

11 de 12

Juan Marín Fidalgo

Práctica 3 IPO 20-21

Referencias Hassan, Y. (2020). Introducción a la interacción persona-ordenador. [Material del aula]. Módulo 1 de la asignatura IPO, año 2020/21, Universitat Oberta de Catalunya.! Garreta, M. y Mor, E. (2020). Diseño centrado en el usuario. [Material del aula]. Módulo 3 de la asignatura IPO, año 2020/21, Universitat Oberta de Catalunya.!

Casado, C. y Martínez, L. (2020). Tecnología, diversidad y accesibilidad. [Material del aula]. Módulo 4 de la asignatura IPO, año 2020/21, Universitat Oberta de Catalunya.! Learn how to prototype web & mobile apps from scratch. (2020). Retrieved 25 November 2020, from https://www.justinmind.com/support/start-prototyping-web-andmobile-apps/

12 de 12...