PR3 IPO 2020/21 PDF

Preview

Summary

PRACTICA PARTE 3DC: Prototipo y evaluaciónKevin Ricardo Ibarra Borja 75 interacción persona ordenador Aula 2 Profesor: Luciano WerhliSEMESTRE 1 2020 - 2021Ta bla de con ten ido 1. Introducción 2. Prototipo de la solución 2. Herramienta: JustInMind 2. El prototipo 2.2. Login 2.2. Pantalla de registro...

Description

PRACTICA PARTE 3 DC: Prototipo y evaluación

Kevin Ricardo Ibarra Borja 75.590 interacción persona ordenador Aula 2 Profesor: Luciano Werhli SEMESTRE 1 2020-2021

PEC2

IPO 2020-21

KEVIN RICARDO IBARRA BORJA

Tabla de contenido 1.

Introducción ............................................................................................................. 2

2.

Prototipo de la solución ........................................................................................... 3 2.1.

Herramienta: JustInMind ......................................................................................... 3

2.2.

El prototipo ................................................................................................................. 4

2.2.1. Login......................................................................................................................................4 2.2.2. Pantalla de registro ................................................................................................................5 2.2.3. Confirmación del registro ......................................................................................................6 2.2.4. Búsqueda del billete...............................................................................................................6 2.2.4.1. Campo Origen ..............................................................................................................7 2.2.4.2. Campo Destino.............................................................................................................8 2.2.4.3. Campo fechas ...............................................................................................................8 2.2.4.4. Numero de acompañantes ............................................................................................9 2.2.4.5. Conjunto de búsqueda ..................................................................................................9 2.2.5. Resultados de la búsqueda ...................................................................................................11 2.2.6. Pago .....................................................................................................................................13 2.2.7. Confirmación de la compra ................................................................................................. 15

3.

Evaluación Heurística ........................................................................................... 15 3.1. 3.1.1.

Evaluación Heurística (Checklist)........................................................................... 15 Desarrollo del análisis de heurísticas ...................................................................................17

4.

Resultados .............................................................................................................. 23

5.

Tests con usuarios.................................................................................................. 27 5.1.

Guion ......................................................................................................................... 28

5.2.

Desarrollo ................................................................................................................. 29

5.3.

Análisis ...................................................................................................................... 31

5.3.1.

5.4.

6.

Observaciones después de realizar las pruebas ...................................................................33

Informe ..................................................................................................................... 34

Conclusiones .......................................................................................................... 35

1

PEC2

IPO 2020-21

KEVIN RICARDO IBARRA BORJA

1. Introducción El siguiente documento está dividido en tres apartados.

En la primera parte de la práctica nos centraremos en la confección de nuestro prototipo de alta fidelidad de la solución propuesta. Explicaré las funciones principales, las herramientas implementadas en el sistema y los motivos que me ha llevado a decidirme por este diseño.

A continuación, detallaremos la aplicación del proceso de evaluación heurística sobre nuestro prototipo. De primera mano describiré el checklist sobre lo que hemos basado todo el procedimiento. Seguidamente, describiremos el proceso llevado a cabo para comprobar el nivel el cual se cumple cada uno de los ítems de la lista, con el objetivo de poder sacar conclusiones para un análisis cuantitativo y cualitativo del prototipo. Finalmente, basándome en este análisis, se presentarán posibles propuestas de mejora.

La tercera parte consistirá en el proceso de testeado con los usuarios incluyendo los resultados que hemos extraídos y expondré estas conclusiones extraídas de los test realizados.

2

PEC2

IPO 2020-21

KEVIN RICARDO IBARRA BORJA

2. Prototipo de la solución La solución se basa en el prototipo de baja fidelidad presentado en la fase anterior de la practica, pero con algunas modificaciones que han venido forzadas por las herramientas con las que he trabajado.

2.1. Herramienta: JustInMind La herramienta escogida para crear el prototipo es JustInMind. Esta herramienta resulta ser más intuitiva, permitiendo simular una gran cantidad de funciones. El programa nos permite crear tal y como queremos cada una de las pantallas, con el añadido de hacerlas interactuar entre ellas.

A pesar de que un programa completo, me he encontrado con varias dificultades, des de el punto de primero familiarizarme y tratar de conocer la herramienta hasta el punto de saber usarla, pero no poder añadir exactamente lo que tenia pensado en mi esquema, y es por ese motivo que algunas pantallas se pueden ver afectadas en el diseño con respecto a las otras.

3

PEC2

IPO 2020-21

KEVIN RICARDO IBARRA BORJA

2.2. El prototipo En este apartado mostraré todas las pantallas que he creado en el sistema, en cada una de las capturas mostraremos una breve explicación. 2.2.1. Login

Ilustración 1. Plana de login del prototipo

En esta pantalla se puede apreciar el logotipo corporativo y la paleta de colores que se ha escogido para representar la supuesta pagina web de compra de billetes de tren. En esta pantalla el usuario puede introducir sus credenciales de acceso en donde se pide un usuario y una contraseña. En cuanto al diseño, se han escogido colores intensos de manera que el rojo indica que una acción se realizará, en este caso el log-in.

4

PEC2

IPO 2020-21

KEVIN RICARDO IBARRA BORJA

También se han añadido dos botones de inicio de sesión a través de credenciales de redes sociales, en este caso son Facebook y google ya que son las mas conocidas.

2.2.2. Pantalla de registro

Ilustración 2. Pantalla de registro a la plataforma

En esta pantalla el usuario es capaz de registrarse llenando todos los campos del formulario, siendo todos estos campos obligatorios, además, en el caso de que el usuario quiera acceder a través de una red social, también lo podrá hacer, pulsando los iconos de registro rápido de Facebook y google. Este formulario viene con un botón de ayuda, para que un asistente pueda dar soporte al registro. Asimismo, si selecciona registrarse, el sistema confirmará la acción del usuario con un mensaje claro y conciso.

5

PEC2

IPO 2020-21

KEVIN RICARDO IBARRA BORJA

2.2.3. Confirmación del registro

Ilustración 3. El sistema informa del correcto registro

Una vez el usuario ha registrado, el sistema pide una confirmación a través del e-mail ingresado en la fase de registro. En esta pantalla el usuario sólo puede realizar una acción que seria ingresar a su cuenta en el caso de que todo el proceso se haya ejecutado correctamente.

2.2.4. Búsqueda del billete La pantalla principal con la que se encontrará el usuario a la hora de la búsqueda del billete consta de diferentes campos que se detallaran a continuación y finalmente se juntaran todos los campos dando un diseño con colores coherentes a las pantallas ya mostradas (por ejemplo, la de log-in) para que haya una coherencia y una estética atrayente.

6

PEC2

IPO 2020-21 2.2.4.1.

KEVIN RICARDO IBARRA BORJA

Campo Origen

Primero quiero dar detalles a la hora de crear el campo origen, debido a que hay infinitas posibilidades, para hacer la prueba sólo he puesto de ejemplos las siguientes ciudades para comprobar el funcionamiento.

Ilustración 4. Definición del campo Origen

La idea principal fue hacer un campo con el funcionamiento de autocompletado, de esta manera solo al poner una inicial o el principio de la ciudad, el sistema detectará la ciudad que se desea. Por ejemplo, en un principio sólo veremos este campo:

Resultado de escribir alguna inicial:

7

PEC2

IPO 2020-21 2.2.4.2.

KEVIN RICARDO IBARRA BORJA

Campo Destino

La idea es idéntica a lo explicado en el apartado anterior, funcionalidad de texto predictivo a la hora de buscar el destino.

Ilustración 5. Definición del campo Destino

Ejemplo:

2.2.4.3.

Campo fechas

Para hacerlo más intuitivo, he preferido que en vez de dar clic a un campo para que aparezca el cuadro de fechas, mejor que el calendario ya este presente de primeras y que solo tenga que ser ajustado directamente por el usuario.

Ilustración 6. Definición del campo fecha ida/vuelta

8

PEC2

IPO 2020-21 2.2.4.4.

KEVIN RICARDO IBARRA BORJA

Numero de acompañantes

Este apartado me gustaría hacerlo más completo, primero por ejemplo especificar cuantos viajaran, posteriormente dando detalles de su edad. He diseñado una simple pestaña en donde se describirá el rango de edad de la persona que viaja.

Ilustración 7. Definición del número de acompañantes

2.2.4.5.

Conjunto de búsqueda

En este apartado se unirá todo lo diseñado intentando crear un prototipo más completo pero esta vez añadiendo finalmente el toque de diseño de la interfaz y algunas funciones que iré explicando y que considero relevantes a la hora de crear esta pagina web para un uso global y dirigido para todo tipo de personas. Comenzaré describiendo que el prototipo contiene todas las funciones previamente mencionadas y además explicaré las nuevas funcionalidades que serían idóneas añadir. En primer lugar en el prototipo definitivo de pantalla tenemos un micrófono en todos los campos para que ofrezca

9

PEC2

IPO 2020-21

KEVIN RICARDO IBARRA BORJA

la posibilidad de hablar y no tener que escribir, seria como interactuar con un ‘agente’. He añadido opciones de accesibilidad para que la pagina sea apta para cualquier tipo de usuarios, por ejemplo: -

La función VoiceOver lee en voz alta los campos de la pantalla depende de cual se seleccione.

-

La función Auto Description, en función del campo seleccionado, el sistema dará una breve explicación de que hay que poner, como hay que rellenarlo y para que se necesita. Desde el punto de vista de usuario creo que sería muy útil y ayudaría a que la experiencia sea satisfactoria y rápida, impidiendo fallos por parte del usuario.

-

Se ha añadido un icono que representa una lupa, ya que por intuición se puede deducir que es el botón para realizar la búsqueda.

-

Por último, función de tamaño de letra, así las personas que tienen una visibilidad menor pueden jugar con el tamaño de letra para adaptarla a sus capacidades visuales, y evitar tener que forzar la vista.

10

PEC2

IPO 2020-21

KEVIN RICARDO IBARRA BORJA

Ilustración 8. Definición de la pantalla de búsqueda de billete

2.2.5. Resultados de la búsqueda En este apartado describiré todos los detalles de la pantalla de resultado una vez la búsqueda se ha realizado, explicando cada detalle de la nueva ventana y también conservaré alguna opción de accesibilidad de la pantalla anterior. Primero me gustaría plasmar la idea de la información del billete de ida, después la de vuelta. He optado por un diseño muy sencillo, y que no llame la atención por la cantidad excesiva de datos, creo que para una persona con discapacidad visual por ejemplo no le interesan que haya publicidad de otros vuelos en ofertas, o demasiados precios para un vuelo.

11

PEC2

IPO 2020-21

KEVIN RICARDO IBARRA BORJA

Ilustración 9. Definición de la pantalla de resultados

En este caso se ha conservado la opción de auto descripción ya que mientras este activa, siempre se podrá interactuar con la plataforma, el audio que describiré será algo como lo siguiente: Para la fecha de salida seleccionada se han encontrado 3 resultados que destacan por su precio: Las horas del primer vuelo 12:03 -> 15:03 con una escala y una duración de 3 horas por 81,53€, tasas incluidas…etc. Para continuar diga o seleccione la opción 1, 2 o 3 que mejor se adapte a sus necesidades y seguidamente diga siguiente.

12

PEC2

IPO 2020-21

KEVIN RICARDO IBARRA BORJA

Ilustración 10. Selección de trayectos ida/vuelta

Una vez la selección sea efectuada y finalizada con el comando de voz ‘siguiente’ o pulsando el botón, automáticamente aparecerá la siguiente pantalla para la selección del billete de regreso. Una opción interesante que añadí fue la de ‘comprar el ticket rápido’, donde aparecerá una ventana directamente donde añadir el método de pago y el proceso quedará finalizado.

2.2.6. Pago Una vez el usuario haya realizado la confirmación de la compra, llegará a las siguientes paginas, donde podrá elegir el método de pago que se quiere utilizar: pagar con tarjeta:

13

PEC2

IPO 2020-21

KEVIN RICARDO IBARRA BORJA

Ilustración 11. Definición del pago con tarjeta

o por paypal (ya que es uno de los métodos de pago más usados y seguros):

Ilustración 12. Definición del pago mediante Paypa l

En cada campo estará la opción del micrófono habilitada en el caso de querer ir llenando los campos por medio de la voz.

14

PEC2

IPO 2020-21

KEVIN RICARDO IBARRA BORJA

2.2.7. Confirmación de la compra Una vez que nuestro cliente haya realizado la compra, el sistema mostrará un mensaje de confirmación en el que confirmaremos la compra, con el objetivo que el cliente tenga el recibo de compra, al ser un mensaje informativo, el usuario sólo tendrá la opción de volver al menú principal. Además, al tener activada la opción Autodescripcion, el sistema leerá el mensaje.

Ilustración 13. Confirmación por parte del sistema

3. Evaluación Heurística Una Evaluación Heurística es un método de inspección de la usabilidad sin usuarios. Este, consiste en examinar la calidad de uso de una interfaz por parte de varios evaluadores expertos, a partir del cumplimiento de unos principios reconocidos de usabilidad: los heurísticos. Evaluaremos nuestro prototipo con las 10 reglas heurísticas de Nielsen, son 10 reglas bastante completas en su contenido, y nos ayudarán a probar el prototipo.

3.1. Evaluación Heurística (Checklist)

15

PEC2

IPO 2020-21

KEVIN RICARDO IBARRA BORJA

A continuación, se presentan los ítems que serán frutos de estudio durante la evaluación heurística. 1. Visibilidad del estado del sistema a. Los elementos con los que interactúa el usuario responden a sus acciones de forma evidente. b. Las funciones que puede llevar a cabo la aplicación informan al usuario del estado en el que se encuentra. 2. Relación entre la aplicación y el entorno real al que va dirigida a. El lenguaje se ha redactado con el usuario final en mente, utilizando vocabulario que resulte familiar. b. Los textos informativos se han redactado con claridad. c. Los textos contienen sólo información relevante. 3. Control y libertad usuario a. el usuario puede deshacer acciones en caso de que las haya realizado sin querer. b. Cada paso del proceso es evidente para el usuario. 4. Consistencia del diseño a. El lenguaje utilizado se adscribe a las convenciones. b. No hay textos ambiguos. c. No hay tareas que se puedan confundir entre ellas. 5. Prevención de errores a. Existen diálogos de confirmación cuando el usuario esta a punto de realizar una tarea critica. b. Los procesos son sencillos con tal de dificultar el que el usuario cometa errores. 6. Reconocer en lugar de recordar a. Es fácil identificar donde se encuentran cada una de las tareas criticas. b. Las tareas criticas están claramente distribuidas. c. Las tareas no requieren de un gran esfuerzo memorístico del usuario para completarse. 16

PEC2

IPO 2020-21

KEVIN RICARDO IBARRA BORJA

7. Estética y minimalismo en el diseño a. Se respetan los principios de color y forma de forma transversal en toda la aplicación. b. Se utilizan las fuentes de forma coherente con el diseño. c. No

hay

planas

excesivamente

cargadas

de

información. 3.1.1. Desarrollo del análisis de heurísticas 1. Visibilidad del estado del sistema a. Los elementos con los que interactúa el usuario responden a sus acciones de forma evidente. Entramos en la pagina de login, y el usuario únicamente puede interactuar con los campos de texto para introducir el usuario y la contraseña, juntamente con la pulsación del botón de login. Los campos de texto no cambian de apariencia cuando el ratón se pone encima, ni tampoco cuando clicamos. La respuesta que obtiene el usuario es el de ver que va escribiendo. El botón de login si que cambia de apariencia cuando colocamos el ratón sobre este, su color como que se resalta un poco para indicar que es un elemento que podemos clicar. Una vez entramos en la pagina de búsqueda del billete, no todo es muy estatico ya que hay opciones como el micrófono para hablar en el que al pulsarlo se ilumina, o las opciones para personas con discapacidad como por ejemplo la opción del ‘Voiceover’ que cambia de color mientras este activado. Se aprecian los siguientes problemas:

17

PEC2

IPO 2020-21 •

KEVIN RICARDO IBARRA BORJA

Campos de texto no interactúan con el

usuario •

Parte de la plana de búsqueda es estática.

b. Las funciones que puede llevar a cabo la aplicación informan al usuario del estado en el que se encuentran. Cuando presionamos el botón para iniciar sesión no se aprecia ningún cambio en el diseño visual, ni aparece ninguna barra de carga, ni nada que informe que el inicio de sesión se ha llevado a cabo correcta o incorrectamente. A la plana de realizar el pago para añadir la tarjeta de pago o por medio de paypal no se informa al usuario si la operación ha sido correcta. Apreciamos: •

El usuario no recibe información sobre si ha

realizado una tarea correctamente. 2. Relación entre la aplicación y el entorno real al que va dirigida a. El lenguaje ...