Trabajo Fin de Gradooa.upm.es/68057/1/TFG_ZHUQI_JIANG.pdf · 5.1.1 Actualización de Las mascotas...

Universidad Politécnica de Madrid

Escuela Técnica Superior de Ingenieros Informáticos

Doble grado en Ingeniería Informática y

Administración y Dirección de Empresas

Trabajo Fin de Grado

Aplicación Móvil de Juegos Infantiles Educativos

Autor: Zhuqi Jiang Tutor: Cristian Moral Martos

Madrid, mayo de 2021

Este Trabajo Fin de Grado se ha depositado en la ETSI Informáticos de la Universidad Politécnica de Madrid para su defensa.

Trabajo Fin de Grado Grado en Doble grado en Ingeniería Informática y Administración y Dirección de Empresas Título: Aplicación Móvil de Juegos Infantiles Educativos Mayo del 2021

Autor: Zhuqi Jiang Tutor: Cristian Moral Martos

Departamento de Lenguajes y Sistemas Informáticos e Ingeniería de Software Universidad Politécnica de Madrid

1

Resumen Los cambios tecnológicos de los últimos cincuenta años nos han llevado a una nueva era tecnológica. El número del uso de dispositivos electrónicos entre los menores cada vez es superior, quienes no tienen mucha idea de lo potente que es la herramienta que se están utilizando. Ante ese continuo crecimiento del uso de internet de los niños a edad escolar, y las preocupaciones de los padres ante esta evolución, identificamos la oportunidad de proporcionar un producto educativo, pero a la vez entretenido. De este modo, los niños cambian sus actitudes ante el estudio y encuentran lo divertido que puede ser.

La idea es desarrollar aplicación Android, concretamente un videojuego infantil de carácter educativo que engloba distintas materias de estudio. Utilizaremos la aplicación Android Studio, un entorno de desarrollo del sistema Android basando en lenguaje java y que dispone de un emulador, lo cual nos facilita mucho la visualización del producto.

El desarrollo de un software pasa por distintas fases, desde la planificación inicial hasta la presentación del producto final. Es importante tener en mente que nuestro software está dedicado a niños de edad escolar con acceso a dispositivos electrónicos. Esto es especialmente interesante a la hora de diseñar la apariencia y el contenido del software, que convendría ser lo más visual posible.

2

Abstract The technological changes of the last fifty years have brought us into a new technological era. Nowadays, the number of technology use among minors is increasing. That is worrisome because the children do not know how powerful is the internet.

The parents were worried about this increase in internet use. So, we identified the opportunity to solve the concern by providing an educated product, but at the same time entertaining. In this way, children may change their attitudes towards studying and find how much fun it can be.

The main idea is to develop a mobile application for the Android system. The application consists of an educated video game which including the different subject. We will use the Android Studio application. It is a development environment for the Android system based on java language, with an emulator which makes it much easier for us to visualize the product.

The development of software goes through different phases, from the project planning to the final product. It is essential to consider that our software focuses on children of school-age. That is especially interesting to remember when we are designing the appearance and content of the software, which should be as visual as possible.

3

Índice 1 Introducción 8

2 Contexto 9

2.1 Mercado actual de videojuegos 9

2.1.1 Investigación de mercado 12

3 Fundamentos teóricos y tecnológicos 14

3.1 Proceso centrado en usuario 14

3.2 Co-diseño con los clientes 15

3.3 Prototipos 16

3.4 Usabilidad 16

3.5 Test de usabilidad SUS 17

3.6 Entorno de desarrollo 18

3.7 Herramientas 20

3.8 Pruebas del sistema 23

4 Diseño de solución 25

4.1 Especificación de requisitos 25

4.1.1 Requisitos funcionales 26

4.1.1.1 Requisitos funcionales del juego de matemáticas e inglés 27

4.1.1.2 Requisitos funcionales de la funcionalidad de lectura 27

4.1.2 Requisitos no funcionales 28

4.1.3 Recomendaciones de usabilidad 28

4.2 Co-diseño de Eastudy 29

4.2.1 Esquema de diseño 29

4.2.2 Mapa de navegación 31

4.2.3 Diagrama de flujo 32

4.2.4 Diseño gráfico 34

4.2.5 Prototipo 36

4.2.6 Evaluación de usabilidad 38

4.2.6.1 Tareas planificadas 38

4.2.6.2 Resultado de evaluación 39

4.2.6.2.1 Efectividad 40

4.2.6.2.2 Eficiencia 41

4.2.6.2.3 Satisfacción 42

4.2.6.3 Problemas identificados 43

5 Implementación del sistema 45

5.1.1 Actualización de Las mascotas 45

5.1.2 Desarrollo e implementación 45

5.1.2.1 Logo de la aplicación 46

4

5.1.2.2 Emulador 46

5.1.2.3 Almacenamiento de datos 47

5.1.2.4 Toast personalizado 50

5.1.2.5 Alert Dialog 51

5.1.2.6 Estructura del código 53

5.1.3 Sistema final 55

5.1.3.1 Pantalla principal 55

5.1.3.2 Juego educativo 56

5.1.3.3 Lectura 57

5.1.3.4 Perfil 58

5.1.3.5 Mascotas 59

5.1.3.6 Compra-in app 60

5.1.4 Pruebas técnicas 61

5.1.4.1 Pruebas unitarias 61

5.1.4.2 Pruebas de integración 62

5.1.5 Resultado de evaluación de usabilidad 63

5.1.5.1 Efectividad 63

5.1.5.2 Eficiencia 64

5.1.5.3 Satisfacción 65

6 Los Objetivos de Desarrollo Sostenible. 66

7 Conclusiones y trabajos futuras 67

8 Bibliografía 69

5

Índice de Ilustraciones

Ilustración 1: Top juegos de gratuitos ....................................................... 9

Ilustración 2: Aplicaciones educativas .................................................... 10

Ilustración 3: Juegos populares entre niños ........................................... 10

Ilustración 4:Dispositivos electrónicos usados ........................................ 11

Ilustración 5: Resultado de la entrevista. Funcionalidades ..................... 12

Ilustración 6: Resultado de la entrevista: Aspectos ................................. 13

Ilustración 7: Modelo en cascada ............................................................ 14

Ilustración 8: Atributos de la usabilidad ................................................. 17

Ilustración 9: Ejemplo del resultado de test de usabilidad ...................... 18

Ilustración 10: Eclipse ............................................................................ 19

Ilustración 11: Android Studio ................................................................ 20

Ilustración 12: Google Drive .................................................................... 21

Ilustración 13: Draw.io ........................................................................... 21

Ilustración 14: Google Form .................................................................... 22

Ilustración 15: Figma .............................................................................. 22

Ilustración 16: IbisPaint ......................................................................... 23

Ilustración 17: Menú principal-boceto .................................................... 30

Ilustración 18: Juego-boceto ................................................................... 30

Ilustración 19: Lectura-boceto ................................................................ 31

Ilustración 20: Diagrama de navegación ................................................. 32

Ilustración 21: Diagrama de flujo_Juegos ............................................... 33

Ilustración 22: Diagrama de flujo_Mascotas ............................................ 33

Ilustración 23: Diagrama de flujo_Perfil .................................................. 34

Ilustración 24: Gama de colores.............................................................. 35

Ilustración 25: Fuente de diseños gráficos .............................................. 35

Ilustración 26: Mascotas ......................................................................... 36

Ilustración 27: Prototipo-Menú principal ................................................ 36

Ilustración 28: Prototipo-juego ................................................................ 37

Ilustración 29: Prototipo-mascota ........................................................... 37

Ilustración 30: Prototipo-perfil ................................................................ 38

Ilustración 31: Número de fallos-prototipo .............................................. 40

Ilustración 32: Tiempo empleado ............................................................ 41

Ilustración 33: Test de satisfacción-prototipo .......................................... 42

Ilustración 34: Pantalla de fin del juego .................................................. 43

Ilustración 35: Diseño de mascotas ........................................................ 45

6

Ilustración 36: Icono de la aplicación ...................................................... 46

Ilustración 37: Emulador elegido ............................................................ 46

Ilustración 38: Opciones de configuración del emulador ......................... 47

Ilustración 39: Tipos de almacenamiento ................................................ 48

Ilustración 40: Toast personalizado ........................................................ 51

Ilustración 41: AlertDialog ...................................................................... 52

Ilustración 42: Clases Java ..................................................................... 53

Ilustración 43: Drawable......................................................................... 54

Ilustración 44: clases xml ....................................................................... 54

Ilustración 45: Aplicación-menú principal .............................................. 55

Ilustración 46: Aplicación-juego .............................................................. 56

Ilustración 47: Aplicación-toast .............................................................. 57

Ilustración 48: Aplicación-lectura ........................................................... 57

Ilustración 49: Aplicación-perfil .............................................................. 58

Ilustración 50: Aplicación-mascotas ....................................................... 59

Ilustración 51: Aplicación-compra .......................................................... 60

Ilustración 52: Número de fallos-Aplicación ............................................ 63

Ilustración 53: Número de éxitos-Aplicación ........................................... 64

Ilustración 54: Tiempo-Aplicación ........................................................... 64

Ilustración 55: Test de satisfacción ......................................................... 65

Ilustración 56: Obejtivo de Desarrollo Sostenible .................................... 66

7

Índice de Tablas

Tabla 1: RF_01. Seleccionar un juego ..................................................... 26

Tabla 2: RF_02. Seleccionar un nivel ...................................................... 26

Tabla 3: RF_03. Consultar mi perfil ........................................................ 26

Tabla 4: RF_04. Modificar datos personales ............................................ 26

Tabla 5: RF_05. Elegir recompensa ......................................................... 26

Tabla 6: RF_MA_EN_01. Iniciar juego ..................................................... 27

Tabla 7: RF_MA_EN_02. Introducir la respuesta ..................................... 27

Tabla 8: RF_MA_EN_03. Pasar a la siguiente pregunta ........................... 27

Tabla 9: RF_LE_01. Iniciar lectura .......................................................... 27

Tabla 10: RF_LE_02. Finalizar el cuento ................................................. 27

Tabla 11: RNF_01. Transmitir conocimientos .......................................... 28

Tabla 12: RNF_02. Consistencia de datos ............................................... 28

Tabla 13: Recomendaciones de usabilidad .............................................. 28

Tabla 14: Tarea_01 ................................................................................. 39

Tabla 15: Tarea_02 ................................................................................. 39

Tabla 16: Tarea_03 ................................................................................. 39

Tabla 17: Tarea_04 ................................................................................. 39

Tabla 18: Pruebas unitarias .................................................................... 61

Tabla 19: Pruebas de integración ............................................................ 62

8

1 Introducción El mercado de juegos infantiles es un mercado con futuro gracias al continuo crecimiento de número de usuarios a edades escolares. Aunque mucha gente está preocupada por la evolución, este se convierte en un hecho inevitable cuando convivimos con la tecnología. Los niños nacen con esas inquietudes y curiosidades que les permiten descubrir el mundo, los padres deberían orientar a sus hijos por el buen uso del internet en vez de prohibirlos. Indudablemente, el uso de dispositivo electrónico a una edad muy temprana tiene sus ventajas e inconvenientes. Por una parte, los niños se distraen fácilmente y se crean dependencias a estos dispositivos, pero, por otra parte, las nuevas tecnologías dan acceso a un mundo totalmente abierto, lleno de informaciones y conocimientos. Haciendo un control y orientación adecuado, podemos evitar al máximo el riesgo que puede contener el mundo de internet, y de esta forma los niños puedan beneficiarse de todas las ventajas de los dispositivos electrónicos. Nuestro objetivo es aprovechar esta oportunidad, convirtiendo la tecnología en una herramienta de desarrollo de las distintas capacidades y habilidades de los niños, y ayudarles a descubrir sus pasiones. Nuestros clientes objetivos serían los padres y familiares de los hijos a edad escolar, mientras los usuarios finales son los niños, lo cual el mercado objetivo es el mercado de videojuegos infantiles de España. Los dispositivos más usados por los niños son móviles y Tablet, por lo que nos olvidamos de las páginas web y nos dedicaremos a desarrollar una aplicación móvil. La aplicación se desarrollará en lenguaje java dentro del entorno de desarrollo Android Studio. Es un entorno especializado y más utilizado por programadores para crear aplicaciones móviles destinado al sistema de Android. Cabe remarcar que dicho entorno de desarrollo proporciona un emulador que facilita el control del diseño de nuestro producto final. La aplicación contendrá distintos juegos orientados a diferentes materias, concretamente son matemáticas, inglés y lectura. El usuario puede acceder a cualquier juego que desee dentro de la aplicación sin ningún tipo de restricciones, y puede abandonar la partida iniciada cuando considere oportuno. En cuanto al diseño del producto, dado que nuestros usuarios son niños a edad escolar, haremos que sea lo más animado y gráfico posible para atraer sus atenciones. También cabe destacar que el diseño debería ser intuitivo y no usar vocabulario complejo que dificulte su uso por los niños pequeños. Por último, con la finalidad de fomentar el interés de nuestros usuarios, conforme va ganando puntos en los distintos juegos que proporciona la aplicación, el usuario tendrá la posibilidad de desbloquear diversas mascotas que los acompañarán durante en el juego.

9

2 Contexto

Este capítulo sirve de introducción al trabajo que se van a realizar, es decir, nos dedicaremos a describir el mercado actual de videojuegos en dispositivos móviles con la finalidad de analizar la competencia y de aprender cosas de otras aplicaciones ya desarrolladas.

2.1 Mercado actual de videojuegos

Nuestro mercado objetivo es el mercado de videojuegos infantiles gratuitos en el sistema Android.

La ilustración 1 muestra el top de los juegos gratuitos del Google Play, una plataforma de distribución digital de aplicaciones móviles más usado para el sistema Android, en la cual los usuarios pueden descargar e instalar aplicaciones.

La gran parte de las aplicaciones que aparecen son juegos de acción o juegos de roles, que permite la interacción entre distintos jugadores, es una funcionalidad importante para que el juego sea más divertido. Fuente: Google Play (febrero del 2021)

Ilustración 1: Top juegos de gratuitos

Entre todos los juegos que hay disponible, nos fijamos en las aplicaciones de carácter educativo, destinadas a niños. Reflejamos un ejemplo de las aplicaciones disponibles en Google App en la ilustración 2.

Primero, quiero comentar que el icono de estas aplicaciones es animado y colorido que llama la atención a la primera vista.

En segundo lugar, cabe destacar que la mayoría de las aplicaciones tiene una sola área de conocimiento integrado, es decir, los niños pueden conocer de una sola materia en cada aplicación. En cambio, nuestra aplicación posibilita el desarrollo en tres materias distintas al mismo tiempo.

10

Fuente: Google Play (febrero del 2021)

Ilustración 2: Aplicaciones educativas

Dado que los usuarios son niños a edad escolar, vamos a centrar el análisis de los juegos más populares entre usuarios de esta edad, con el objetivo de conocer sus requerimientos. La ilustración 3 nos muestra los juegos online más populares, preferido por la población de 4 a 15 años en España 2020, publicado por Abigail Orús en el 10 junio. 2020.

Fuente: Statista

Ilustración 3: Juegos populares entre niños

11

De acuerdo con la gráfica anterior, Brawl Stars es en el juego online preferido por los niños de 4 a 15 años según un estudio realizado en febrero de 2020. Aproximadamente el 40% de los niños encuestados afirmó jugar a este videojuego multijugador para móviles. El siguiente es el Clash Royale, un juego de estrategia, con un porcentaje de uso entre la población infantil de un 27%. Clash of Clan es un juego de estrategia y construcción, junto con Roblox, videojuego de creación e imaginación, los dos alcanza a un 17% de los niños encuestados. Finalmente, Subway Surfers, videojuego de acción, que juega un 15% de niños encuestados.[1]

Por último, quiero ilustrar el porcentaje de población infantil que juega videojuegos, categorizado por grupo de edad y dispositivo usado para ello en el año 2019. Fuente: Statista

Ilustración 4:Dispositivos electrónicos usados

Como podemos observar, la videoconsola es el dispositivo más usado tanto en jugadores con edades comprendidas entre los 11 y los 14 años como entre jugadores de 6 a 10 años, después le sigue los jugadores con móvil/tabletas, que es nuestro usuario final, aproximadamente 40% de los niños de los dos grupos de edades.[2]

Como conclusión, podemos considerar que aproximadamente un 40% de los niños que juega a videojuegos usan móvil o Tablet, aunque la mayor parte se trata de videojuegos multijugadores de acción o estrategia. Los juegos infantiles educativos actualmente en el mercado tienen funcionalidades muy básicas, mientras nuestra aplicación intenta proporciona una plataforma de estudio más completa.

12

2.1.1 Investigación de mercado

Es importante conocer a las preferencias de los clientes para decidir el estilo y el contenido de una aplicación, por este motivo se ha realizado esta investigación de mercado. El método utilizado es la encuesta, para estudiar los distintos clientes, y basándose a ese estudio podremos decidir el modelo de negocio, el diseño de la empresa y las estratégicas a implementar por la empresa.

La encuesta se ha elaborado con la herramienta Formulario de Google, en la cual permite crear encuestas ofreciendo distintas plantillas, además recogen y agrupan las respuestas de los encuestados para análisis posteriores de los datos.

La encuesta elaborada es corta, que se responde de 3-5 minutos, estas encuestas se ha realizado por internet por difusión de amigos y familiares, ya que nuestro objetivo es captar opiniones del público general, tantos niños menores de 12 años, para conocer preferencias de nuestros usuarios, como mayores de 12 años para conocer opiniones de los potenciales clientes, que son quienes van a pagar por el producto. En total se ha conseguido 99 respuestas de la encuesta, seguidamente analizaremos estos datos obtenidos para extraer información útil.

Centraremos en la comparación de las diferencias que existen entre las preferencias de los clientes, es decir los familiares de los niños y de los usuarios, que son los propios niños:

1. Clientes: a continuación, presentaremos el resultado de los clientes en cuanto a la función y el aspecto más importantes de una aplicación infantil. Fuente: Formulario Google

Ilustración 5: Resultado de la entrevista. Funcionalidades

13

más de la mitad de los entrevistados que tenga familiares de 6 a 12 años piensan que la principal función de un videojuego educativo debería ser de ayudar a mejorar las notas de los niños. Mientras un 29,4% cree que debe servir para despertar la imaginación y creatividad de los usuarios y el resto piensan que debe servir para que los niños aprendan culturas generales. Lo cual estaría bien que nuestra aplicación centre en temarios relacionados con lo que se estudia en la escuela de una manera creativa y dinámica.

Una parte importante de los clientes objetivos esperan que la aplicación aporta conocimientos reales, mientras una pequeña parte considera que la aplicación debería ser lo suficientemente atractivo para que los niños les apetezcan jugar, mientras a los usuarios les interesa más que el juego sea divertido y creativo.

2. Usuarios: La ilustración 6 muestra el resultado de la encuesta para los niños, con diferencia destacable con respecto a las opiniones de los clientes. Fuente: Formulario Google

Ilustración 6: Resultado de la entrevista: Aspectos

Con respecto a la funcionalidad de la aplicación la mayoría de los niños creen que lo más importante es que sea divertido o que despierte imaginación y creatividad.

Un tercio de los usuarios, es decir, los niños menores de 12 años consideran que lo más importante que el juego sea atractivo, entorno a un cuarto de ellos creen que debe aportar conocimientos reales y otro cuarto les importa más el diseño de la aplicación, finalmente un 13,3% espera que la aplicación sea fácil de manejar.

14

3 Fundamentos teóricos y tecnológicos

El desarrollo del proyecto está basado en distintos principios. Explicaremos los fundamentos teóricos y tecnológicos empleados durante la elaboración de la solución propuesta. A demás indicaremos las herramientas utilizadas tanto para desarrollar la solución como para mantener o ayudar el desarrollo.

En un primer lugar, introducimos el ciclo de vida que va a seguir el proyecto. Existe tres principales modelos de ciclo de vida cada uno con sus ventajas e inconvenientes, que son cascada, incremental y evolutivo. La modelo cascada es la que finalmente vamos a seguir, es un modelo que, una vez identificadas las fases, se ejecuta secuencialmente. La desventaja que tiene este modelo es que no permite grandes modificaciones una vez planificada las fases, lo cual debemos cuidar especialmente la fase inicial. Su ventaja es la facilidad de comprender y muy fácil de seguir. En la ilustración 7 mostramos la estructura de una modelo cascada con las fases que generalmente se sigue. Fuente: Wikipedia

Ilustración 7: Modelo en cascada

3.1 Proceso centrado en usuario

El diseño centrado en el usuario es un método de diseño iterativo en el que los desarrolladores se centran en los requerimientos de los usuarios durante todos los procesos de la implementación de la solución.

El usuario de nuestra aplicación son los niños a edades escolares, mientras los clientes son generalmente los padres o familiares de los niños. El diseño gráfico debe estar centrando en las peticiones de los niños, quienes realmente usaría nuestra plataforma. Este procedimiento es especialmente importante dado que la aplicación a desarrollar es un videojuego infantil, que depende profundamente a los gustos y necesidades de los usuarios.

El diseño centrado en el usuario es un proceso iterativo que se enfoca en los usuarios durante todas las etapas de diseño y desarrollo. El carácter iterativo del procedimiento implica repetir varias veces un proceso con la intención de alcanzar el objetivo deseado. En otras palabras, podemos realizar varias iteraciones de estas 4 fases hasta que los resultados de la evaluación sean satisfactorios.

15

Normalmente, cada iteración del diseño centrado en el usuario implica 4 distintas fases [9]:

1. Entender el contexto del usuario. Debemos tratar de comprender el contexto en el que los usuarios usan un sistema, es decir, realizar investigación de mercado analizando distintos factores de la empresa y hacer encuestas a los clientes y usuarios para conocer sus necesidades.

2. Especificar requerimientos del usuario. Extraemos los requerimientos de la encuesta realizado en el apartado 2.1.1. Luego, identificar y especificar los requisitos funcionales y no funcionales de los usuarios.

3. Solución propuesta. En esta fase desarrollamos soluciones específicas de acuerdo con los requisitos definidos anteriormente.

4. Evaluación de resultados. En esta etapa evaluamos los resultados elaborados a fin de verificar qué tan bien se está desempeñando el diseño. Es decir, se visualiza qué tanto se acercó al nivel que coincide con los requerimientos específicos de los usuarios y si satisface todas sus necesidades relevantes.

3.2 Co-diseño con los clientes

El Co-diseño o co-disign o llamados también diseño participativo es un proceso de construcción de los aspectos del diseño colaborando con los clientes, esto permite la participación directa de los clientes y los usuarios en todo el proceso de desarrollo de nuestra aplicación. "la mejor forma de crear un Sitio Web usable es realizando un diseño centrado en el usuario, diseñando para y por el usuario, en contraposición a lo que podrá ser un diseño centrado en la tecnología o uno centrado en la creatividad u originalidad"(Yusef Hassan).

Esta perspectiva se basa en la creencia de que las personas son creativas y que los usuarios son especialistas de sus propias experiencias, dado que cada colaborador tiene diferentes puntos de vista, el diseño estará enriquecido por gran diversidad de ideas. De hecho, el co-diseño requiere un enfoque creativo e iniciativa, tanto por parte de los investigadores, diseñadores y clientes como por parte de las personas que en última instancia se beneficiarán de la experiencia de co-diseño.

Además, el co-diseño fomenta la relación usuario/diseñador: la confrontación con los usuarios a menudo actúa como una fuente de inspiración y aumenta la empatía hacia ellos. La información necesaria pasa directamente del usuario al diseñador, aumentando así el potencial para la comprensión de las diversas dimensiones del artefacto inherente a cada proyecto.[10]

Con la colaboración de los usuarios en las distintas etapas de proyecto, garantizamos al máximo que el producto final cumple los requerimientos de los usuarios y, es más, el diseño ha sido elaborado de acuerdo con las preferencias de los usuarios. Desde otra perspectiva, las técnicas usadas como la distribución de las encuestas, el proceso de co-diseño o la evaluación del producto, sirve como un primer anuncio de nuestra marca y producto. Y también transmitimos una buena imagen de la empresa que cuida y da importancia a las sugerencias de los usuarios.

16

3.3 Prototipos

El prototipo es un ejemplar de un producto que se elabora antes de su fabricación o desarrollo como producto final, con el objetivo de conocer los defectos del producto, los fallos que pueden contener y las posibles mejoras que se podría implementar. De esta manera evitamos en medida de lo posible la corrección de fallos y defectos después de tener el producto terminado, ya que las modificaciones posteriores implican un gasto de recursos considerable.

Sin duda alguna, preparar un prototipo supone menos inversión en tiempo y dinero que fabricar el producto final, especialmente en el caso de una aplicación móvil. Por lo cual las empresas suelen elaborar prototipos para evaluar las funcionalidades del producto antes de proceder a la producción final del producto. Existe dos tipos de prototipos, el prototipo de alta fidelidad y el prototipo de baja fidelidad, dependiendo de las necesidades y características del producto, la empresa elige desarrollar uno o ambos prototipos.

1. Prototipo de baja fidelidad. Implementan aspectos generales del producto sin entrar en detalles, esto permite abarcar un espectro mayor de la interacción a realizar. Normalmente son bocetos que representa las principales funcionalidades del sistema, se caracterizan por ser económicos, rápidos de construir y de arreglar que no precisan de técnicos expertos [11]. Por ejemplo, se utiliza bastante en la fábrica de coches que construye o bien una maqueta de coche o simplemente un boceto del coche con la finalidad de estudiar aspectos interesados.

2. Prototipo de alta fidelidad. Este prototipo se caracteriza por el uso de herramientas especializadas de prototipado que ofrecen más detalles del sistema y más precisión a la evaluación.

Durante este proyecto, construiremos el prototipo de alta fidelidad, ya que este nos permite medir factores que no podremos medir con el prototipo de baja fidelidad, tales como el rendimiento real del sistema. A demás nos aporta más precisión a la hora de medir la eficiencia y usabilidad del producto.

3.4 Usabilidad

La usabilidad de un sistema es la medida de la calidad de la experiencia que tiene un usuario cuando interactúa con un sistema. Esta usabilidad se mide a través del estudio de la interacción de los usuarios con la máquina, de esta manera conocer las mejoras que podemos llevar a cabo en esa interacción.

Tal y como presenta la figura 8, existe 7 atributos de usabilidad, que son la efectividad, la eficiencia, la seguridad, la utilidad, la facilidad de aprendizaje, el recuerdo en el tiempo y la satisfacción.

17

Fuente: Materia de asignatura IPO

Ilustración 8: Atributos de la usabilidad

No obstante, la norma internacional ISO 9241-11 Usabilidad. Definiciones y conceptos (2018) se acota solo en tres atributos, la eficiencia, la efectividad y la satisfacción. En la ilustración Centraremos la evaluación de la usabilidad en estos tres atributos:

1. Eficiencia: determina la cantidad de recursos requeridos para realizar una tarea, por ejemplo, el tiempo necesitado para llevar a cabo una serie de acciones.

2. Efectividad: determinamos la efectividad mediante dos atributos, la cantidad de fallos cometidos por el usuario a la hora de realizar una tarea planificada y la tasa de éxito de estas tareas.

3. Satisfacción de los usuarios: mide lo satisfecho que quedan los usuarios cuando han realizado las tareas planteadas. Para ello, utilizamos el test de usabilidad SUS.

La evaluación de la aplicación final y del prototipo se desarrollará entorno a estos tres factores definidos, ya que los consideramos como aspectos interesantes para analizar las mejoras a implementar en el sistema.

3.5 Test de usabilidad SUS

Test de usabilidad SUS (System Usability Scale) es una herramienta metodológica que se usa para medir la satisfacción sobre la usabilidad de un objeto, dispositivo o aplicación. Aunque esta escala es extraordinariamente simple de usar, diferentes pruebas y tests han demostrado que los resultados obtenidos a partir de la misma suelen ser muy confiables y acertados, razón por la cual es uno de los métodos de medición de usabilidad m s utilizados en Experiencia de Usuario [13].

18

En cuanto a las preguntas del test de usabilidad, consiste en 10 preguntas, cada una de las cuales puede ser puntuada de 1 a 5, donde 1 significa Total desacuerdo y 5 significa Total acuerdo. Existen distintas variantes en las preguntas del test de usabilidad SUS, pero siempre muy parecidas. Esto es relevante dado que las modificaciones pueden afectar al algoritmo de los cuáles obtendremos los resultados y esto haga que el resultado no sea confiable. A demás es recomendable mantener el orden de las preguntas para una mejor visualización del resultado de la evaluación.

En la ilustración 11 mostramos el test de usabilidad usado por el desarrollador para la evaluación del prototipo y del sistema.

Fuente: Google

Ilustración 9: Ejemplo del resultado de test de usabilidad

3.6 Entorno de desarrollo

Existe multitudes de opciones de entornos de desarrollo disponibles en el mercado destinado al desarrollo de las aplicaciones de Android. Cada uno de ellos soportan un lenguaje distinto para desarrollar códigos. Las herramientas que nos interesa utilizar son las denominadas IDE que dan soporte a lenguaje Java, tales como Eclipse, NetBeans, IntelliJ, Android Studio, Aide. En nuestro caso centraremos los análisis y comparación entre Eclipse y Android Studio.

Antes de seguir convendría aclarar el concepto de IDE, que no es más que un programa informático compuesto por un conjunto de herramientas de programación. Es un entorno de programación que nos provee de un marco de trabajo agradable para la mayoría de los lenguajes de programación. Constan entre sus características básicas con: Editor de código, Compilador, Depurador y Constructor de interfaz gráfica.[3]

Haremos una comparación entre Eclipse y Android Studio, dos programas muy valorados que permite desarrollo de aplicaciones móviles Android.

19

1. Eclipse

La mayoría de los programadores estamos bastante familiarizados con esta herramienta, Eclipse es un entorno de desarrollo muy potente que permite desarrollar en distintos idiomas. En la ilustración 10 reflejamos el Eclipse con herramientas preparadas para desarrollar aplicaciones móviles.

Fuente: StackOverflow

Ilustración 10: Eclipse

Al principio, Eclipse era el IDE recomendado para el desarrollo de aplicaciones. De hecho, fue la opción oficial que se planteaba desde Google hasta la aparición de Android Studio. Desde el lanzamiento de este último, se suele recomendar que los desarrolladores que utilicen Eclipse migren hacia Android Studio.[4]

La configuración de Eclipse y el flujo de trabajo son muy parecidos a los de Android Studio, pero el hecho de que está pensado para desarrollarse en varias plataformas e idiomas, hace que la experiencia en general sea más lenta y que haya cierta tendencia a que se produzcan errores.

2. Android Studio

Android Studio es el IDE oficial creado por Google, especializado para desarrollar aplicaciones del sistema Android. Esta herramienta da soporte a varios lenguajes de programación, entre ellos está Java. También podemos encontrar librerías para facilitar el desarrollo de los proyectos.

En este IDE utiliza referencias al Android SDK, un paquete con todas las herramientas necesarias para desarrollar aplicaciones desde ordenadores, lo cual nos facilita mucho el trabajo.

Este entorno es especialmente bueno para desarrollar servicios. Si queremos hacer aplicaciones mucho más complejas, se necesitará incurrir otros paquetes como Android NDK que permite usar C + +. Dado que nuestro proyecto se trata de juegos infantiles sencillas, podemos asentar perfectamente en el paquete SDK.

20

Fuente: Elaboración propia

Ilustración 11: Android Studio

Balanceando las dos alternativas analizadas anteriormente, decidimos practicar con el Android Studio, ya que es la aplicación oficial recomendado por Google. Quizá cabe destacar también, que todos los manuales y tutoriales de Google está basado en este IDE y, además, se puede encontrar bastantes informaciones al respecto en la web, lo que nos será muy fácil hallar las soluciones a problemas que podemos encontrar en un futuro.

3.7 Herramientas

Hemos tenido que emplear distintas herramientas a la hora de diseñar la aplicación y de implementar las funcionalidades. A continuación, listamos las herramientas implicadas, indicando la finalidad del uso y el valor que aporta a nuestro proyecto.

1. Google drive. Es un servicio que facilita el almacenamiento de archivos en la nube, es decir, permite el acceso de los archivos creados desde cualquier dispositivo. Elegimos esta plataforma porque Google tiene una serie de productos destinados al desarrollo de proyecto, haremos uso de alguno de ellos durante el desarrollo del proyecto. Esta relación nos facilita la gestión de distintos documentos y archivos generados de las distintas herramientas de Google.

El uso principal que haremos de este servicio es el de guardar la copia de seguridad de las memorias y seguimientos. Aunque también nos proporciona una copia de seguridad de los archivos generados de otras herramientas de Google como Draw.io.

21

Fuente: Google

Ilustración 12: Google Drive

2. Draw.io. Es una herramienta online de creación y diseño de una gran variedad de planos. Nosotros lo practicaremos en la fase de diseño con el propósito de realizar el diagrama que representa el flujo del proyecto, tales como mapa de navegación.

El draw.io es un producto más de Google, así pues, los diagramas creados se pueden guardar en el Google Drive del cliente. Esta característica nos permite acceder a los planos creados desde cualquier dispositivo y en cualquier momento. Fuente: Elaboración propia

Ilustración 13: Draw.io

22

3. Google Forms. Es un software un software dedicado a las encuestas, que facilita su creación y permite gestionar estas encuestas creadas. La gran ventaja de la herramienta recae en su poder de almacenamiento de las repuestas de los encuestados y elaborar gráficos que refleja los resultados. Este pequeño análisis de los resultados nos ayuda conocer a la simple vista la evolución y el fruto de las encuestas. Elegimos esta herramienta por las mismas razones explicadas previamente, al tratarse todos los productos de la misma marca, Google, facilita el manejo de los informes. Fuente: Google

Ilustración 14: Google Form

4. Figma. Una herramienta online potente para diseñar los interfaces de navegación con todas las funcionalidades necesarias para elaborar un prototipo. Figam permite crear componentes y compartirlos, de manera que guarden las propiedades de estos al duplicarlos. Así al realizar cualquier cambio, se realiza automáticamente en el resto. Pero también permite la modificación de estos mediante las instancias de manera individual [8]. La utilizaremos para preparar el prototipo de alta fidelidad de nuestro proyecto.

Fuente: Syntonize

Ilustración 15: Figma

23

5. IbisPaint. es una aplicación de diseño gráfico potente, compatible con distinto tipo de dispositivos. mediante vídeos que muestran a los usuarios el proceso real de dibujar. Fuente: Syntonize

Ilustración 16: IbisPaint

3.8 Pruebas del sistema

Las pruebas de software son una parte integral del ciclo de vida del desarrollo de software. El ciclo de vida de nuestro proyecto sigue a la modelo cascada, es decir, ejecución de fases en serie. Las pruebas son la forma de asegurar las funcionalidades, el rendimiento y la experiencia del usuario. Un sistema de prueba bien planificada con abundantes pruebas que analice todas las funcionalidades de la plataforma, más probabilidades de identificar errores y deficiencias del sistema, evitando incidencias futuras. Si los problemas se arrastran al entorno de producción, no solo sale más caros y lentos de solucionar, sino también empeora la experiencia de usuarios [16].

Normalmente, un sistema pasará por pruebas unitarias que examina cada una de las pequeñas funcionalidades por separado, después entra con las pruebas de integración que comprueba las interacciones entre distintos módulos, y, por último, el sistema se somete en las pruebas de sistema que testea la interacción de la aplicación con el sistema y entorno global. De momento, basaremos solo en pruebas unitarias y pruebas de integración, en un futuro cuando tengamos nuestra aplicación exportada en formato APK, es decir, preparado para la descarga al dispositivo móvil, podremos poner en prueba las pruebas de sistema.

1. Las pruebas unitarias consisten en aislar una parte del código del sistema y comprobar que la funcionalidad relacionada funciona a la perfección. Generalmente estas pruebas las llevan a cabo los desarrolladores, como es el nuestro caso.

Estas pequeñas pruebas demuestran que la lógica del código está en buen estado y que funciona en distintos casos planteados por el desarrollador.

24

Aunque un sistema requiere realizar bastantes pruebas unitarias, este tipo de pruebas son pequeñas que se hace en poco tiempo.

Con el objetivo de efectuar buenas pruebas unitarias, debemos estar estructuradas siguiendo las tres A’s del Unit Testing. Se trata de un fundamento importante respecto a este tipo de pruebas, que describe un proceso de pruebas compuesto de tres pasos [17].

- Arrange (organizar). Es el primer paso de las pruebas unitarias. En esta parte se definen los requisitos que debe cumplir el trozo de código elegido a testear.

- Act (actuar). Es el paso intermedio de las pruebas unitarias, es el momento de ejecutar la prueba planificado, estas pruebas darán lugar a los resultados que deberá ser analizado posteriormente.

- Assert (afirmar). En el último paso, es el momento de comprobar si los resultados obtenidos de la ejecución de la prueba son los que se esperaban. Si es así, se valida y se sigue adelante. En caso contrario, se corrige el error identificado y vuelve a comprobar hasta subsanar el bug.

2. Las pruebas de integración en cambio valoran el correcto funcionamiento

de la interacción de los diferentes módulos de nuestro sistema, es decir, testea distintos módulos dentro de un mismo caso de prueba. El objetivo de esta prueba es la localización de errores de interfases y comprobar el correcto funcionamiento conjunto de los componentes. [18]

Antes de realización a las pruebas de integración, debemos haber pasado sin error por las pruebas unitarias explicadas previamente. En las empresas grandes, este tipo de prueba se realiza generalmente con la colaboración de los departamentos involucrados. Pero en nuestro caso, el desarrollador se encargará de gestionar todas las pruebas.

25

4 Diseño de solución

Este capítulo engloba todo el proceso de desarrollo de nuestra aplicación. Empezando por la especifica los requisitos que debe cumplir la aplicación siguiendo el proceso centrado en usuario explicado en el apartado 3.1. Asentando en los requisitos anteriores haremos el diseño del producto junto con los clientes, o, en otras palabras, el co-diseño con los clientes mencionado en el punto 3.2.

Lo siguiente, prepararemos un prototipo a fin de dar una primera idea del diseño gráfico del producto. Balanceando las características del prototipo de alta fidelidad y el prototipo de baja fidelidad explicada en el punto 3.3, decidimos llevar a cabo el prototipo de alta fidelidad por un diseño más cercano al producto real, ya que el diseño es un punto importante de videojuego a testear.

Por último, trabajaremos en la evaluación del prototipo elaborado centrando en la usabilidad del sistema comentado en el apartado 3.4. Para ello basaremos en el test de usabilidad SUS descrita en el 3.5.

4.1 Especificación de requisitos

Los requerimientos y las necesidades que los llega por la parte de los niños y por la parte de los padres son bastante diferentes.

Lo más importante para los padres es la calidad del contenido la aplicación, la variedad y cantidad de los conocimientos que aporta nuestro producto, para lo cual, planteamos un sistema que aporta conocimientos de distintas áreas o materias.

Los requerimientos de los niños se centran más en la parte de gamificación del juego, piden algún sistema de recompensas como incentivo o como manera de hacer el juego más entretenido. Por otra parte, también dan bastante importancia al diseño gráfico del juego, los niños tienden por el futurismo mientras las niñas por la fantasía.

Se quiere desarrollar una aplicación móvil con distintos juegos educativos integrados. Una vez que el usuario entra al sistema, puede acceder a todos los juegos de la plataforma sin ningún tipo de restricción, estos juegos son matemáticas, lecturas e inglés. Cada juego se divide a su vez en distintos niveles para satisfacer las necesidades de los niños con distintos niveles de conocimiento. El juego de matemáticas e inglés consiste en la resolución de problemas, en la cual el jugador debe elegir una respuesta ante un problema planteado. Mientras la opción de la lectura no requiere que el usuario realice acciones complejas. Cada juego funciona independientemente y el usuario puede interrumpir el juego cuando desee.

Como recompensa, el jugador puede ganar puntos en todos los juegos. Con los puntos ganados pueden ir desbloqueando distintos animales que los acompañarán durante el juego.

Partiendo de la especificación anterior de las funcionalidades que realizan nuestro sistema, podemos identificar una serie de requisitos. Podemos distinguirlos entre dos tipos, requisitos funcionales y requisitos no funcionales.

26

Los requisitos funcionales son aquellos que describen actividades que deben realizar el sistema, mientras los requisitos no funcionales que define las características generales del sistema.

4.1.1 Requisitos funcionales Tabla 1: RF_01. Seleccionar un juego

ID RF_01 Título Seleccionar un juego

Descripción El sistema permite que el usuario entre a cualquier juego que desee acceder.

Fuente: Elaboración propia.

Tabla 2: RF_02. Seleccionar un nivel

ID RF_02 Título Seleccionar un nivel

Descripción El sistema dispondrá de distintos niveles por cada juego, el usuario puede escoger el nivel que mejor le convenga para iniciar el juego seleccionado previamente.


Tabla 3: RF_03. Consultar mi perfil

ID RF_03 Título Consultar mi perfil

Descripción El usuario podrá acceder a su perfil, en la cual aparecen los datos del propio usuario.


Tabla 4: RF_04. Modificar datos personales

ID RF_04 Título Modificar datos personales

Descripción El usuario puede modificar sus datos personales, tales como nombre, sexo y fecha de nacimiento, y guardarlos en base de datos.


Tabla 5: RF_05. Elegir recompensa

ID RF_05 Título Elegir recompensa

Descripción En la pestaña de mascotas se muestra todos los animales disponibles, el usuario podrá desbloquear y elegir animales.


27

4.1.1.1 Requisitos funcionales del juego de matemáticas e inglés Tabla 6: RF_MA_EN_01. Iniciar juego

ID RF_MA_EN_01 Título Iniciar el juego

Descripción Al iniciar el juego, el sistema debe mostrar el ejercicio a resolver por el usuario.


Tabla 7: RF_MA_EN_02. Introducir la respuesta

ID RF_MA_EN_02 Título Introducir la respuesta

Descripción El usuario introduce una respuesta, el sistema se encargará de comprobar de la respuesta y avisa al usuario con el resultado de la comprobación.


Tabla 8: RF_MA_EN_03. Pasar a la siguiente pregunta

ID RF_MA_EN_03 Título Pasar a la siguiente pregunta

Descripción Esta funcionalidad permite avanzar el juego mostrando la siguiente pregunta, hasta finalizar con la partida


4.1.1.2 Requisitos funcionales de la funcionalidad de lectura Tabla 9: RF_LE_01. Iniciar lectura

ID RF_LE_01 Título Iniciar lectura

Descripción Al iniciar la lectura, el sistema mostrará un cuento.


Tabla 10: RF_LE_02. Finalizar el cuento

ID RF_LE_02 Título Finalizar el cuento

Descripción Con esta funcionalidad, el usuario finaliza la lectura del cuento actual obteniendo los puntos correspondientes.


28

4.1.2 Requisitos no funcionales Tabla 11: RNF_01. Transmitir conocimientos

ID RNF_01 Título Transmitir conocimientos

Descripción El usuario puede acceder a cualquier materia de estudio sin ninguna restricción.


Tabla 12: RNF_02. Consistencia de datos

ID RNF_02 Título Consistencia de datos

Descripción Los datos e informaciones interesados deberían estar guardados en un base de datos para usos futuros.


4.1.3 Recomendaciones de usabilidad

A parte de los requisitos funcionales y no funcionales, tenemos una serie de recomendaciones en torno a la usabilidad del sistema. Estas recomendaciones tienen como fundamento en las reuniones que se hicieron para conocer las necesidades y los requerimientos que deben satisfacer nuestra aplicación. Tabla 13: Recomendaciones de usabilidad

Recomendaciones

La interfaz del sistema debe ser sencilla de manejar, para que los niños pequeños puedan utilizar sin problema.

El diseño gráfico debe ser lo más visual posible para captar a la primera la atención de los usuarios.

El usuario debe poder salir o terminar el juego en curso cuando quiera, para no crear la sensación de estar estancado.

Es aconsejable que el sistema tenga un ambiente de juego adecuado, cuyo caso nos referimos a un ambiente tranquilo, confiado y agradable

La originalidad es otro punto por destacar. La aplicación debe tener elementos que lo identifique, de esta manera diferenciar de las otras aplicaciones.


29

4.2 Co-diseño de Eastudy

La función principal de nuestra aplicación es proporcionar una plataforma para que los niños puedan aprender conocimientos de distintas materias.

A continuación, destacamos los puntos importantes a tener en cuenta a la hora de desarrollar el diseño de la aplicación, basándonos en la recomendación de usabilidad citados anteriormente.

1. Sencillez: hay que evitar cualquier tipo de ambigüedades o confusiones posibles, usando figuras o textos sencillos. El diseño de la funcionalidad debe ser claro favoreciendo el manejo de la aplicación a nuestro usuario, que en principio no están capacitados para utilizar aplicaciones complejas.

2. Visual: Los botones funcionales deberían ser explicativo en sí mismo, obviando el uso de texto en medida lo posible, sustituyendo estos por figuras. Siguiendo al mismo hilo, también hay que evitar el uso de palabras o frases complejas.

3. Colorido: su finalidad es de atraer a los niños. Teniendo en cuenta que podemos encontrar con usuarios daltónicos, es decir que tienen dificultad para distinguir alguno de los colores, debemos evitar el uso exclusivo de colores para transmitir informaciones, sino añadir figuras explicativas para un mejor entendimiento.

4. Animado: al igual que el punto anterior, un diseño animado tiene como propósito el de atraer usuarios, que en este caso son los niños. Todos los personajes que aparecen en la aplicación serán personajes animados. Obviamente, el diseño gráfico va a ser visual y atractivo en general.

5. Confianza: se habilita un sistema de mascotas dentro de la aplicación como recompensa, el usuario puede elegir acompañante entre los animales desbloqueados previamente. El objetivo de dicha funcionalidad es que el usuario se siente acompañado.

6. Libertad: se habilitará la opción de volver al menú principal en todos los juegos, de esta manera, los usuarios podrán salir de una partida en curso cuando quiera, y cambiar a otros juegos de la aplicación con toda la libertad. Es especialmente importante para los niños, ya que son menos pacientes y pueden ocurrir muchas veces que se quieran salir de la partida antes de que se acabe.

4.2.1 Esquema de diseño

Existe mucha manera de decidir el diseño de la aplicación, optamos por realizar el método de co-diseño explicado previamente en el apartado 3.2. Convocamos una reunión junto con los padres para crear colaborativamente un boceto de las pantallas más importantes del juego, concretamente las pantallas de menú principal, de inicio de juego de matemática o inglés y de lectura.

Los padres aportan distintas ideas o requerimientos sobre el diseño de estas pantallas durante la reunión, las discusiones que se producen son interesantes de cara a las decisiones de diseño. Seguidamente presentaremos el resultado de la co-diseño.

30


Esta pantalla de menú principal permite al usuario acceder a distintos juegos.

En la parte inferior de la pantalla se presenta dos funcionalidades. La primera sirve para acceder el sistema de mascotas y el otro para acceder al perfil de usuario.

En el centro de la pantalla se destaca las tres principales funciones, estos tres botones ocupa una parte importante de la pantalla principal para que los usuarios puedan encontrarlos fácilmente.

Por último, tenemos dos iconos en la parte superior de la pantalla. El icono de la izquierda da acceso al ajuste del sistema y el icono de la derecha sirve de ayuda para los usuarios.


La pantalla del juego es un diseño compartido para matemática e inglés.

La esencia de esta funcionalidad es que el sistema sea capaz de hacer preguntas al usuario, el usuario devuelve la respuesta, el sistema hará comprobaciones partiendo de la respuesta recibida y devuelve el resultado de la comprobación.

La parte superior se presenta la opción de volver al menú principal cuando el usuario quiera.

Ilustración 17: Menú principal-boceto

Ilustración 18: Juego-boceto

31


La pantalla de la lectura se divide en tres partes, la parte superior con la función para volver al menú principal y la función de realizar ajustes durante la lectura. La parte central ocupa más espacio, con el contenido de la lectura. Finalmente, en la parte inferior de la pantalla se presenta dos funcionalidades destinadas a modificar la visualización del texto. Concretamente, ajustar el tamaño de la letra y para modificar el color del fondo. Estas dos últimas funciones son ideas del desarrollador, aceptado por los clientes.

.

4.2.2 Mapa de navegación

Este diagrama de navegación sirve para plasmar la estructura de la aplicación. En el diagrama debe contener todas las pantallas que sea necesario diseñar, los cuales cumple la navegabilidad e interactividad entre usuario y producto.

La construcción de este diagrama permite anticipar la organización de la información, de esta manera evitamos los posibles errores antes de construir el producto. No vamos a entrar en los detalles del diseño gráfico, sino que centraremos en cómo van a estar implementados las funcionalidades en distintas pantallas.

Existe distintos tipos de navegación:

1. Navegación lineal: es muy sencilla, en la cual quiere ejecutar cada pantalla paso a paso.

2. Navegación lineal en estrella: en este tipo de navegación, cada pantalla se ejecuta a partir de la pantalla inicial y al terminal de ejecutar vuelve a la pantalla principal.

3. Navegación jerárquica: es un árbol donde la raíz es la página principal y de

ahí se distribuyen las pantallas en distintas ramas.

4. Navegación no lineal: es perecido a la navegación lineal con la variación de que puede tener desviaciones controladas de algunas páginas.

Ilustración 19: Lectura-boceto

32

5. Navegación compuesta: es uno diagrama compuesto por varios tipos de navegación.

6. Navegación múltiple: es la estructura en el que cada una de las pantallas

están vinculadas con todas las demás pantallas.

A continuación, presentamos nuestro diagrama de navegación en la cual está representado todas las posibles pantallas de la aplicación y las relaciones que existe entre ella. Fuente: Elaboración propia

Ilustración 20: Diagrama de navegación

4.2.3 Diagrama de flujo

El diagrama de flujo es una representación gráfica que utilizamos para mostrar los procesos de nuestra aplicación. De esta manera queda la ejecución de distintas funcionalidades representada de una manera visual. Otra de las ventajas que tiene, es que nos va a facilitar la construcción tanto de prototipos como de producto final, evitando los posibles errores o conflictos que puede tener.

Dividimos el proyecto en tres principales funcionalidades independientes, presentándolos en la ilustración elaboramos un diagrama de flujo para cada una de esas funciones:

1. Juegos: es la función más importante de la aplicación, en la cual los usuarios pueden seleccionar y empezar el juego.

33


Ilustración 21: Diagrama de flujo_Juegos

2. Mascota: este sistema permite que el usuario bloquea las mascotas si consigue suficientes puntos, y cambiar de mascota siempre y cuando el animal elegido está desbloqueado previamente.


Ilustración 22: Diagrama de flujo_Mascotas

34

3. Perfil: las acciones que puede ejecutar los usuarios en esta función son relativamente limitadas, solo permite la visualización y modificación de sus datos personales.


Ilustración 23: Diagrama de flujo_Perfil

4.2.4 Diseño gráfico

En este apartado describiremos el diseño gráfico elegido para el desarrollo del prototipo, y si todo va bien, se dotará los mismos para el desarrollo del sistema final.

Los elementos gráficos es un componente importante de una aplicación móvil, un buen diseño gráfico no solo facilita el manejo de la aplicación, sino también motiva al uso del software.

La plataforma utilizará el color naranja como el color principal, acompañando de otros colores análoga. La ilustración 33 muestra la gama de colores sugeridas de la misma sección y que la utilizaremos para construir distintas piezas de la aplicación.

35

Fuente: Pinterest

Ilustración 24: Gama de colores

Hoy en día existe páginas webs dedicadas al desarrollo de iconos gratuitos, entre ellas encontramos Google Fonts con una gran cantidad de iconos disponible para la descarga y todas ellas sigue un estilo simple basado en dos simples colores, blanco y negro. Es una opción ideal para botones funcionales, sin más decoraciones y fácil de entender. Por otra parte, también hemos utilizado símbolos de la página web Icons8 que contiene iconos más animados y coloridos, ideal para videojuegos infantiles.

Con la ilustración 34 presentamos los resultados de la búsqueda del icono “home” en ambas páginas web con el objetivo de presentar la diferencia del estilo entre las dos páginas webs.

Fuente: Google Front y Icons8

Ilustración 25: Fuente de diseños gráficos

36

En cuanto a los diseños de las mascotas, decidimos escoger entre las imágenes del Google, en la ilustración 26 mostramos alguna de las mascotas seleccionadas para el sistema.

Fuente: Google Front y Icons8

Ilustración 26: Mascotas

4.2.5 Prototipo

Tras la valoración de las características explicadas en el apartado 3.3, optamos por el prototipo de alta fidelidad. El prototipo de nuestra aplicación contendrá todas las funcionalidades planteadas. Realizaremos evaluaciones por usuarios de dicho prototipo, con la finalidad de encontrar defectos o limitaciones de nuestro producto e intentar eliminarlas antes de proceder a su implementación.

Primero mostramos la pantalla del menú principal con la ilustración 27, donde se refleja todas las funcionalidades de nuestra aplicación. Esta pantalla es muy importante porque es la primera página que ve el cliente, es el más accedido por los clientes, y todo el resto de la pantalla comienza su ejecución desde esta página inicial.


Ilustración 27: Prototipo-Menú principal

37

La aplicación dispone de juegos de resolución de problemas y también de lectura de cuentos. Los juegos de matemáticas e inglés, tal como se observa en la ilustración 28, tienen una estructura casi idéntica y se puede volver a la página principal en cualquier momento. La opción de lectura tiene una estructura distinta, su papel es crear un entorno simple y a gusto para que el usuario pueda disfrutar de su cuento favorito. En la ilustración 26 podemos encontrar presentado el diseño de las tres funciones. Fuente: Elaboración propia

Ilustración 28: Prototipo-juego

Adicionalmente tenemos el sistema de mascota comentado anteriormente, integrada en la aplicación con el objetivo de despertar el interés de los niños. La ilustración 29 mostramos un pantallazo de dicha función.


Ilustración 29: Prototipo-mascota

38

Por último, la aplicación guarda perfiles de los clientes que recoge el nombre, los apellidos y la edad de los usuarios. Presentamos a continuación el esquema de esta pantalla.


Ilustración 30: Prototipo-perfil

4.2.6 Evaluación de usabilidad

El prototipo de alta fidelidad es un tipo de prototipo que se acerca bastante al sistema real, con todos los detalles y funcionalidades principales que se desea testear. La motivación de la evaluación de la usabilidad basando en el prototipo es la disminución de costes, ya que el coste de corregir un fallo en la fase de prototipo es significativamente menor que el coste de llevar a cabo. La modificación en el producto final para eliminar un bug encontrado. Cuantos más errores encontramos, más dinero habremos ahorrado al respecto.

4.2.6.1 Tareas planificadas

Antes de nada, planificaremos una serie de tareas que se desea observar y evaluar. Los usuarios invitados deben realizar estas tareas bajo control del desarrollador, mientras el desarrollador observa y apunta los datos interesados durante la evaluación.

39

Tabla 14: Tarea_01

ID Tarea_01 Título Completar una partida de matemáticas o inglés

Descripción Dada la aplicación, se pide que el usuario comience y complete una partida o bien de matemática o bien de inglés, del nivel que desee.


Tabla 15: Tarea_02

ID Tarea_02 Título Cambiar fondo y completar una lectura

Descripción Dada la aplicación, se pide que el usuario comience una lectura del nivel que desee, cambiar el color del fondo y completar la lectura.


Tabla 16: Tarea_03

ID Tarea_03 Título Desbloquear la mascota

Descripción El usuario debe acceder al sistema de mascota desde la página inicial y desbloquear una mascota.


Tabla 17: Tarea_04

ID Tarea_04 Título Modificar datos de perfil

Descripción El usuario debe acceder a su perfil desde la página inicial, introducir sus datos personales y guardar las modificaciones


4.2.6.2 Resultado de evaluación

El prototipo desarrollado se somete a la prueba por los usuarios de 6 a 12 años de acuerdo con las tareas planteadas previamente. Durante la realización de las tareas, el desarrollador tomará el papel de observador, apuntando los datos interesados de la prueba, como por ejemplo el tiempo tardado y el número de fallos.

Una vez finalizada las tareas, haremos un test de satisfacción a los usuarios implicados con el objetivo de encontrar posibles problemas de usabilidad del sistema y corregirlas antes de desarrollar el sistema final.

Debido a la pandemia, ha sido complicado llevar a cabo este tipo de evaluaciones, lo cual solo hemos podido probar con cinco usuarios.

40

4.2.6.2.1 Efectividad

Mediremos la eficiencia del sistema basando en dos atributos, el número de fallos cometidos y la tasa de éxito.

El diagrama de número de fallos representa el número de error cometido por todos los usuarios en cada una de las tareas planificadas. Cabe destacar que, consideramos un fallo todas aquellas acciones efectuadas por el usuario fuera de lo esperado, es decir, el acceso a una pantalla inesperada o clicar en un botón erróneo. De esta manera identificamos fácilmente qué tarea tiene una mayor tasa de fallo, y de ahí determinar qué funcionalidades o pantallas se necesita una mejora en su especificación.

Tal y como representa el diagrama de la ilustración 31, el fallo se centra en la tarea 3 y tarea 4. En cuanto a la tarea 3, el problema recae en la dificultad en localizar la mascota a desbloquear. Y los fallos de la tarea 4 va relacionado con la opción de la modificación de datos. Como tenemos


Ilustración 31: Número de fallos-prototipo

El número de éxitos mide la cantidad de tareas finalizadas correctamente, es decir, que el usuario haya logrado el objetivo de la tarea independientemente de los fallos cometidos. Una tarea fallida en cambio es aquella actividad rendida y que el usuario no haya conseguido terminar.

Conseguimos el 100% del éxito a pesar de los fallos cometidos a la hora de realizar las tareas planteadas. Esto significa que el sistema es eficiente.

En definitiva, ambos diagramas sirven de indicador de la efectividad del sistema. Analiza si el sistema presenta un diseño ambiguo que impide la correcta identificación de las funcionalidades de los elementos presentes en una pantalla. Es importante esta apreciación porque un diseño confuso dificulta el alcance de los objetivos y los usuarios se sentirá obstaculizado. Los resultados han sido bastante buenos, la tasa de éxito ha sido un 100% y solo tenemos 3 fallos encontrados sobre un mismo problemático, lo cual implica una sola modificación.

0%

20%

40%

60%

Tarea 1 Tarea 2 Tarea 3 Tarea 4

Número de fallos

Número de fallos

41

4.2.6.2.2 Eficiencia

El tiempo utilizado para terminar cada tarea indica la eficiencia del sistema. Está claro que el tiempo en sí no aporta un mayor significado, debemos hacer una comparación entre los tiempos, esto es, comparar el tiempo que tarda el usuario en realizar la tarea y el tiempo que tardaría un experto del sistema en terminar la misma tarea.

La ilustración 32 muestra el diagrama del tiempo tardado por cinco usuarios y por cada tarea, junto con el tiempo requerido para completar distintas tareas por experto. Se considera experto aquellas que conoce el sistema y maneja con fluidez el sistema proporcionado, en este caso es el desarrollador del programa.


Ilustración 32: Tiempo empleado

Como podemos observar, existe una diferencia notable entre el tiempo requerido por experto y el tiempo usado por el usuario. Analizaremos en detalle cada una de las tareas.

Se ha decidido no incluir el tiempo de realización de la tarea 1. El motivo de esta consideración se debe a que esta tarea requiere que el usuario solucione los problemas de matemáticas o de inglés planteadas, y los niños tardaron más en resolver los problemas que el experto, como es de esperar.

El problema de la tarea 2 es que, si los niños no están familiarizados con las opciones de lectura, concretamente con las opciones de cambiar el tamaño de la letra o cambio del color del fondo. Aunque no han fallado nadie, sí que han tardado en encontrar el botón y finalizar la tarea. Esto nos lleva a pensar, que estas dos funcionalidades integradas para la lectura no aportan tanto valor, sino que puede confundir y distraer a los niños durante la lectura.

En la tarea 3 el usuario debe acceder al sistema de mascotas, desbloquear una nueva mascota y cambiar de mascota. Al igual que los casos anteriores, los usuarios sometidos a la evaluación tardaron bastante más en completar la tarea de lo previsto. Esta tarea es el foco de fallos, debido a un problema de diseño, en concreto, los botones de la pantalla no reflejan bien claro sus funciones. La desviación del tiempo utilizado frente al tiempo esperado se debe al mismo suceso.

0:000:280:571:261:552:242:523:213:50

Tarea 2 Tarea 3 Tarea 4

Tiempo

U1 U2 U3 U4 U5 Experto

42

La última tarea consiste en modificar y guardar los datos personales del usuario, los niños han tardado más en introducir sus nombres que el experto, como es de esperar. Algunos niños no ven el botón de modificar, sino que se dirige directamente al hueco correspondiente para introducir datos. Esto nos lleva a pensar que el botón de modificación es innecesario, ya que podemos dejar habilitada por defecto la posibilidad de modificar datos sin necesidad de clicar a un botón previamente.

4.2.6.2.3 Satisfacción

La satisfacción de los usuarios es un factor importante, especialmente para una aplicación de videojuegos, por ello aprovecharemos la prueba realizada anteriormente para que el usuario rellene un test de satisfacción después de haber probado el sistema. El test utilizado es el SUS descrito en el apartado 3.5, las siguientes preguntas son las originales, traducidas del test original en Usability.gov [13]. Para cada uno de los usuarios anteriores, pedimos que realicen las tareas planteadas. Una vez completadas estas tareas, cerramos la evaluación rellenando una pequeña encuesta con sus experiencias personales.

Las encuestas presentan 10 preguntas, con respuestas escalonadas donde 1 significa totalmente en desacuerdo y 5 significa totalmente de acuerdo. Además, hay un espacio libre para recoger observaciones o comentarios del usuario. Teniendo en cuenta que los encuestados son niños a edades escolares, debemos dar soporte necesario durante la realización de la encuesta.

Asentando en la evaluación del prototipo y el test de satisfacción, extraemos la ilustración 31, la gráfica que muestra los puntos obtenidos por cada pregunta que oscila entre 5 y 25. Como una característica del SUS, cuantos más puntos obtenidos en las preguntas impares mejor y cuantos menos puntos ganados en las preguntas pares mejor. De esta manera se visualiza fácilmente el grado de satisfacción de distintas cualidades de la aplicación.


Ilustración 33: Test de satisfacción-prototipo

43

De las diez preguntas que se interroga en la encuesta, la pregunta 1 y la pregunta 9 son las que presenta un menor grado de satisfacción, que corresponde con la frecuencia del uso y la confianza respectivamente. En otras palabras, debemos reforzar el juego para que sea más divertida y aumentar la confianza de los clientes.

El usuario no tiene un mayor interés por el juego en sí, como es de esperar, ya que al fin y al cabo son ejercicios relacionados con las materias de las clases. Los que muestra interés es al sistema de mascotas y el deseo de desbloquear y conseguir más mascotas.

En cuanto a la seguridad que siente el usuario durante la prueba. Hay usuarios que comenta la inseguridad por no tener ningún conocimiento previo de la aplicación, no se conoce su estructura, su diseño ni su funcionamiento. Este punto se mejoraría con la estrategia de marketing, dando a conocer nuestro producto a la gente, proporcionando en video o imagen del funcionamiento y diseño del producto.

4.2.6.3 Problemas identificados

Tras la evaluación del sistema y una breve conversación con cada usuario implicado, recopilamos los siguientes puntos a reforzar, mejorar o incluir en el sistema:

1. Aumentar presencia de la mascota durante el juego, ya que en el prototipo solo aparece la mascota al finalizar cada partido junto con el mensaje de felicitación.


Ilustración 34: Pantalla de fin del juego

44

2. Indicar brevemente el contenido de cada nivel, de esta forma facilitamos que el cliente elija el nivel que le corresponde o que esté interesado.

3. Eliminar elementos innecesarios en la función de la lectura, ya que los usuarios no les dan una mayor importancia y de alguna manera distrae al usuario.

4. Seguir renovando mascotas constantemente, ya que es una motivación importante para que los niños sigan jugando.

5. Pantalla de bienvenida demasiado simple, sin elemento identificador de la empresa o aplicación

6. Poder elegir el cuento que le interese al usuario, en vez de presentar un cuento aleatorio por nivel.

7. Actualmente las mascotas tienen un diseño convencional que no son atractivos. De acuerdo con la sugerencia de los usuarios, debemos buscar un diseño de mascotas más original o especial, ya que es un elemento importante para atraer a los usuarios.

45

5 Implementación del sistema

Seguidamente entramos en la fase de codificación de las funcionalidades definidas previamente y hacer las pruebas necesarias con la finalidad de eliminar al máximo los posibles errores y asegurar la calidad de nuestro producto.

Partiendo en el resultado de la evaluación del apartado 4.2.5.3, implementaremos nuestra aplicación.

Esta aplicación de versión beta no tendrá desarrollada todos los requisitos especificados, en concreto eliminaremos el juego de inglés que se comporta de una manera similar al juego de matemáticas. El sistema tendrá una estructura y diseño similar al prototipo de alta fidelidad, añadiendo los cambios sugeridos por los usuarios y las mejoras planificadas para resolver algún problema de usabilidad.

5.1.1 Actualización de Las mascotas

Respondiendo a las peticiones de los usuarios de mejorar el diseño de las mascotas, desarrollaremos nuestras propias mascotas.

Primero de nada, he de indicar que se ha decidido basar en animales del mundo real que los niños los conocen y que los puedan adquirir dependiendo de sus preferencias. En la ilustración 35 presentamos alguna de ellas, estos gráficos son elaborados por el propio autor con la aplicación IbisPaint. Fuente: Elaboración propia

Ilustración 35: Diseño de mascotas

5.1.2 Desarrollo e implementación

El proceso de codificación de la aplicación nos llevará la mayor parte del tiempo planificado para el proyecto, en esta etapa describiremos alguno del aspecto que consideremos interesante destacar del desarrollo del sistema. La implementación del código se llevará a cabo únicamente en el entorno de desarrollo de Android Studio sin necesidad de colaborar con ninguna otra aplicación adicional.

46

5.1.2.1 Logo de la aplicación

El logo es un componente fundamental de una aplicación móvil. En primer lugar, mostramos en la ilustración 36 este logo creado por el propio autor. Elegimos el perro como el logo de la aplicación porque es un símbolo de acompañamiento y diversión, también porque es algo conocido y habitual para los niños de la manera que se siente segura con ello.


Ilustración 36: Icono de la aplicación

5.1.2.2 Emulador

Android Studio nos proporciona un emulador destinado al control del diseño gráfico y prueba del correcto funcionamiento de las interacciones codificadas por el desarrollador. Antes de empezar debemos elegir en qué emulador deseamos llevar a cabo la prueba y las características que requiere importar al emulador.

La ilustración 37 presentamos el dispositivo elegido para ejecutar y probar el sistema, el modelo Pixel 3a API 30 dispone de una pantalla grande y un diseño moderno. En el apartado 4.3.3 se encuentra la demostración del sistema en dicho dispositivo. Fuente: Elaboración propia

Ilustración 37: Emulador elegido

47

Por otra parte, el desarrollador del sistema puede manipular todos los aspectos del dispositivo usado para la prueba. Cada desarrollador configurará oportunamente el emulador de acuerdo con las pruebas que se quiera realizar y al requerimiento de la aplicación. Ilustramos en la siguiente figura todas las opciones de configuración del dispositivo que se pueda manipular. Fuente: Elaboración propia

Ilustración 38: Opciones de configuración del emulador

5.1.2.3 Almacenamiento de datos

El almacenamiento de datos es un asunto primordial del sistema, el Android Studio nos proporciona varias opciones de almacenamiento que podemos elegir dependiendo de la característica de los datos a almacenar y el uso que queremos hacer con las informaciones. En la ilustración 39 reflejamos una guía expuesta en la página oficial de Android Developer con la diferenciación de distintos métodos de almacenamiento. La guía explica detalladamente las características de cada uno, las recomendaciones de su uso y los permisos requeridos.

48

Fuente: Devolopers

Ilustración 39: Tipos de almacenamiento

Nuestra aplicación dispone de dos clases de informaciones que debemos almacenar, por lo que usaremos diferentes métodos de almacenamiento para cada una de ellas:

1. Datos personales. Es recomendable guardar esta información usando archivos locales o preferencias, ya que son número reducido de datos y generalmente del tipo primitivo, como por ejemplo int y String. Aunque también nos puede valer un base de datos creado con la herramienta SQLite, no merece la pena hacerlo por la cantidad de datos interesados. Finalmente se decide emplear las preferencias (Shared Preference) para almacenar datos de usuario y de alguna configuración de la aplicación. Shared Preference es una clase disponible en Android Studio con un conjunto de métodos fácil de manejar que permiten almacenar y recuperar datos. Seguidamente mostramos un trozo de código de nuestra aplicación correspondiente al uso de la clase Shared Preference para guardar datos personales de los usuarios.

49


public class Datospersonales extends AppCompatActivity { private EditText t_nombre, t_edad; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_datospersonales); t_nombre=(EditText)findViewById(R.id.nombre); t_edad=(EditText)findViewById(R.id.edad); SharedPreferences preferences=getSharedPreferences("datos", Context.MODE_PRIVATE); t_nombre.setText(preferences.getString("Nombre","")); t_edad.setText(preferences.getString("Edad","")); } public void Guardar(View view){ SharedPreferences preferences=getSharedPreferences("datos", Context.MODE_PRIVATE); SharedPreferences.Editor editor= preferences.edit();//vamos a editar fichero datos editor.putString("Nombre",t_nombre.getText().toString());//guardar texto apuntado por t_nombre a la variable Nombre del fichero editor.commit();//guardar editor.putString("Edad",t_edad.getText().toString());//guardar texto apuntado por t_nombre a la variable Nombre del fichero editor.commit();//guardar Toast.makeText(this,"Guardado",Toast.LENGTH_LONG).show(); /* Intent intent=new Intent(Datospersonales.this,Perfil.class); startActivity(intent); LinearLayout linearLayout = new LinearLayout(this); ImageView imageView = new ImageView(this); imageView.setImageResource(R.drawable.good); linearLayout.addView(imageView); toast.setView(imageView);*/ }

2. Datos diversos para el correcto funcionamiento de los juegos. Tenemos

mucha más cantidad de informaciones a almacenar a parte de los datos personales. Usaremos SQLite para gestionar estos datos, un motor de base de datos que se caracterizan por su pequeño tamaño, no necesitar servidor y precisar poca configuración para su uso [7].

Un base de datos SQLite nos permite crear, actualizar o modificar y borrar un dato, esto actos se consigue a través de una clase auxiliar llamada SQLiteOpenHelper que tienen métodos creados para la gestión de datos, a continuación, presentamos un ejemplo de la clase SQLiteOpenHelper creado para almacenar datos en tablas del sistema. Fuente: Elaboración propia

public class AdminSQLite extends SQLiteOpenHelper{ public AdminSQLite(@Nullable Context context, @Nullable String name, @Nullable SQLiteDatabase.CursorFactory factory, int version) { super(context, name, factory, version); } @Override

50

public void onCreate(SQLiteDatabase BD) { BD.execSQL("create table puntos(puntos int,monedas int)"); BD.execSQL("create table lectura1(codigo int primary key, cuento text)"); } @Override public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) { } }

Esta clase con las tablas de base de dato creado serán llamados posteriormente para gestionar los datos de la tabla, en concreto para insertar, modificar o eliminar informaciones del base de dato. A continuación, mostramos un ejemplo de uso que dimos a esta clase en nuestro sistema: Fuente: Elaboración propia

public void BaseDeDatos(){ AdminSQLite admin = new AdminSQLite(this,"BD",null,1); SQLiteDatabase BD=admin.getWritableDatabase(); Cursor consulta=BD.rawQuery("select * from puntos",null); if(consulta.moveToFirst()){ String temp_puntos=consulta.getString(0); ContentValues modificacion=new ContentValues(); modificacion.put("puntos",(sumapuntos+Integer.parseInt(temp_puntos))); modificacion.put("monedas",0); BD.update("puntos",modificacion,"puntos="+Integer.parseInt(temp_puntos),null); BD.close(); } else{ ContentValues registro=new ContentValues(); registro.put("puntos",sumapuntos); registro.put("monedas",0); BD.insert("puntos",null,registro); BD.close(); } }

5.1.2.4 Toast personalizado

En Android existen varios métodos destinados a la generación de notificaciones, nos vamos a centrar en Toast, una forma sencilla de notificar al usuario. Esta notificación aparece por defecto en la parte inferior de la pantalla sobre un rectángulo gris, sin necesidad de confirmación por parte de usuario, puesto que desaparece automáticamente [14].

Utilizaremos Toast para notificar si la respuesta dada por el usuario al problema de matemáticas es correcta y para felicitar al usuario de la terminación de una partida. Nosotros apostaremos por un Toast personalizado ya que el diseño por defecto es demasiado aburrido para un videojuego infantil. La ilustración 40

51

muestra el diseño correspondiente al código de los Toast personalizado destinado a la felicitación.


<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/finalizacion" android:id="@+id/toast"> <ImageView android:id="@+id/imageView" android:layout_width="145dp" android:layout_height="137dp" android:layout_marginLeft="40dp" android:layout_marginStart="40dp" android:layout_marginBottom="8dp" android:layout_marginTop="8dp" android:layout_marginEnd="8dp" android:layout_marginRight="8dp" android:background="@drawable/confetti" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.361" /> </androidx.constraintlayout.widget.ConstraintLayout>


Ilustración 40: Toast personalizado

5.1.2.5 Alert Dialog Android Studio dispone de métodos para mostrar diálogos al usuario, sea solo para mostrarle información, o pedirle que seleccione una opción. Esto se puede conseguir con el componente AlertDialog, una venta superpuesta a toda la aplicación en la que mostramos el mensaje con varias botones de acciones que espera la respuesta del usuario [15]. Utilizaremos este componente en el caso de que la acción que se quiere realizar el usuario tiene un impacto importante en el desarrollo del juego, como, por ejemplo, Salir de una partida iniciada pero

52

no acabada. Seguidamente reflejamos el código correspondiente a dicho componente, y el efecto que tiene en el uso real. public void volver(View view) { Alerta = (ImageButton) findViewById(R.id.volver_Alert); Alerta.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { AlertDialog.Builder builder = new AlertDialog.Builder(Juego_Mate.this); builder.setMessage("¿Deseas salir?") .setCancelable(false) // .setPositiveButtonIcon(aceptar) .setPositiveButton("Sí", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { Intent intent = new Intent(Juego_Mate.this, MainActivity.class); startActivity(intent); } }) .setNegativeButton("No", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { dialog.cancel(); } }); AlertDialog titulo = builder.create(); titulo.setIcon(R.mipmap.ic_launcher); titulo.show(); } }); }


Ilustración 41: AlertDialog

53

5.1.2.6 Estructura del código

El proyecto de Android Studio está constituido por varios ficheros. En la parte izquierda de la aplicación encontramos todos los ficheros de una aplicación o proyecto creado que podemos clasificarlos en 3 categorías.

Primero está la carpeta java que contiene todo el código fuente de la aplicación, cada una de la clase java corresponde a una pantalla de la aplicación. En cada una de las clases va incluido los métodos y funciones implementadas en lenguaje java de una pantalla en concreta.

En la ilustración 42 reflejaremos todas las clases Java creada para el sistema desarrollado.


Ilustración 42: Clases Java

Debajo de este archivo encontramos la carpeta drawable que contiene todos los elementos diseño gráfico, tanto iconos funcionales como gráficos destinados a mejorar a apariencia de la aplicación. Todos los elementos gráficos deben ser importado previamente a este fichero para ser usado durante el diseño de las pantallas. En la ilustración 43 mostramos todos los elementos gráficos que han sido importados y empleados en la aplicación.

54


Ilustración 43: Drawable

Por último, está la carpeta de layout que contiene los ficheros de XML correspondiente a la interfaz gráfica de cada pantalla. El diseño de estas interfaces se puede tirar por código o por su editor gráfico. Cada una de las pantallas de la aplicación va relacionada a un fichero XML con la parte de diseño gráfico y una clase java con la parte de funcionalidades. La ilustración 44 tenemos estas interfaces gráficas del sistema desarrollada.


Ilustración 44: clases xml

55

5.1.3 Sistema final

El sistema final está implementado de acuerdo con los requisitos especificados en el apartado 4.1, con la diferencia de que en vez de dos juegos de resolución de problemas que son matemáticas e inglés, nos centramos solo en matemáticas. También tuvimos en cuenta los problemas de usabilidad identificados en el apartado 4.2.5.3 gracias a la evaluación del prototipo.

5.1.3.1 Pantalla principal

Empezando por la pantalla del menú principal. No hay un gran cambio en el diseño con respecto al prototipo, solamente añadimos el logo de la aplicación y la información de los puntos y monedas que tiene el usuario en la parte superior de la pantalla.

Ilustración 45: Aplicación-menú principal

Considerando la sugerencia de los usuarios que han probado el prototipo de alta fidelidad, intensificamos la existencia de la mascota incorporándolo en la parte inferior de la pantalla, de esta manera, el usuario se sentirá acompañado durante toda la partida.

56

5.1.3.2 Juego educativo

Al seleccionar el juego de matemáticas el usuario verá las pantallas presentadas en la ilustración 46 con los distintos niveles del juego y al lado de cada nivel incluimos una pequeña indicación de las operaciones aritméticas que puede encontrar el usuario en el nivel correspondiente. De la manera que el usuario pueda elegir el nivel según su interés o capacidad.

Por otra parte, el usuario puede interrumpir el juego cuando quiera seleccionando el botón de salida que se encuentra en la parte superior izquierda, de esta forma evitamos que el usuario se siente obstaculizado.

La ilustración muestra el juego en sí, el usuario tendrá que responder cinco preguntas por partido y el usuario notificará si la respuesta introducida es correcta o no.


Ilustración 46: Aplicación-juego

A continuación mostramos los toast que aparecería en el caso de que la respuesta introducida por el usuario sea correcta y el caso de que esta respuesta introducida sea incorrecta.

57


Ilustración 47: Aplicación-toast

5.1.3.3 Lectura

El diseño de las pantallas de la lectura es totalmente diferente a la pantalla de matemáticas, como podemos observar en la siguiente ilustración. Al seleccionar la opción de lectura, el sistema presenta la lista de los cuentos disponibles, este diseño fue una de las propuestas de los usuarios sometidos en el proceso de evaluación de prototipo. La razón de dicha petición fue que no les gustan que el sistema muestre un cuento al azar, sino que prefieren elegir por su cuenta. Fuente: Elaboración propia

Ilustración 48: Aplicación-lectura

58

5.1.3.4 Perfil

Con respecto a la modalidad de perfil de usuario, hay un cambio importante. Por el tema de diseño. La configuración y el centro de ayuda que antes aparecían en todas las pantallas de una aplicación, van incluidas en dicha pantalla porque no son funcionalidades al uso frecuente como para mantenerlos en todas las pantallas.

Otro de los cambios está ligado al problema identificado durante la evaluación. Hemos eliminado el botón de modificación en la aplicación final, lo cual si un cliente desea modificar sus datos personales, no tienen que clicar previamente un botón especial, sino que puede editar directamente y guardar el cambio con el botón de guardado. Presentamos en ilustración 49 el diseño de estas pantallas.


Ilustración 49: Aplicación-perfil

59

5.1.3.5 Mascotas

La modalidad de mascotas ha sido la pantalla más problemática de la evaluación de prototipo, en la cual han fallado tres usuarios de cinco. Teniendo en cuenta el problema identificado, que recae en el diseño confuso de los botones de desbloqueo, hicimos unos cambios al respecto. En la aplicación final, los botones de todas aquellas mascotas que el usuario no tenga el permiso de desbloquear aparecen en gris, mientras el botón de la mascota a desbloquear aparecerá iluminado de color naranja para una mejor distinción.


Ilustración 50: Aplicación-mascotas

60

5.1.3.6 Compra-in app

Por último, me gustaría presentar la tienda de la aplicación, en ella incluimos nuestras tarifas de suscripción para eliminar los anuncios y también la venta de las monedas para desbloquear más mascotas.

Aquí destacar que no toda la venta llevada a cabo en esta tienda pasa a formar nuestro beneficio, sino la plataforma encargada de las transacciones, en este caso Google, se quedarían con un 30% de la venta.


Ilustración 51: Aplicación-compra

61

5.1.4 Pruebas técnicas

El sistema desarrollado se someterá a una serie de pruebas por parte del desarrollador, con la finalidad de asegurar el correcto funcionamiento del sistema. Podemos distinguir tres tipos de pruebas, la prueba unitaria, la prueba de integración y la prueba del sistema, aunque esta última prueba no se realizará durante este proyecto.

5.1.4.1 Pruebas unitarias

En las pruebas unitarias haremos pequeñas pruebas por cada trozo de código. En la tabla 18 presentamos las pruebas diseñadas para comprobar las pequeñas funcionalidades que compone la aplicación.

Tabla 18: Pruebas unitarias

ID Descripción Resultado esperado Resultado real U01 Acceder a una partida

del nivel 1 de matemáticas

Los números de la operación aritmética se genera aleatoriamente

Fallido-Solucionado

U02 Intentar introducir la respuesta al problema presentada

Aparece el teclado numérico para introducir respuesta

Correcto

U03 Contestar bien a una pregunta de matemática

El sistema notifica una felicitación

Fallido-Solucionado

U04 Contestar mal a una pregunta de matemática

El sistema notifica con una cara triste

Correcto

U05 Salir de la partida Saltar el diálogo de pregunta con acciones

Correcto

U06 Entrar a la opción de la lectura

Presentar la lista de cuentos

Correcto

U07 Seleccionar el cuento “La liebre y la tortuga”

Presentar el texto en la pantalla con posibilidad de hacer scroll

Correcto

U07 Finalizar la lectura Volver a la lista de cuentos Correcto U08 Comprobar resultado

de la lectura Un incremento de 5 puntos

Correcto

U09 Entrar al sistema de mascotas

Todas las mascotas salen correctamente y se navega sin problema

Fallo-Solucionado

U10 Desbloquear dinosaurio a 0 puntos

Aparece el diálogo de pregunta con acciones

Correcto

U11 Introducir nombres “María Hernández” y edad “9”

Debería aparecer el teclado y permitir la escritura

Correcto

U12 Guardar los datos personales

Al salir y volver a entrar, se comprueba si los datos están guardados.

Correcto

62

5.1.4.2 Pruebas de integración

Estas pruebas requieren interacción de varias funciones testeadas previamente en las pruebas unitarias, con el objetivo de asegurar el correcto funcionamiento del sistema en un contexto más completo. Tabla 19: Pruebas de integración

ID Descripción Resultado esperado Resultado real I01 Desbloquear el

dinosaurio con precio de 0 puntos y acceder a una partida de nivel 1 de matemáticas

La mascota se desbloquea sin problema y aparece correctamente en una partida de juegos

Correcto

I02 Introducir y guardar los datos con nombre “María Hernández” y edad “9” del usuario, posteriormente cambiar la edad del usuario de “9” a “10”

Tanto el primer guardado como el segundo almacena permanentemente los datos del usuario

Correcto

I03 Iniciar y terminar una partida de matemáticas de nivel 1

El juego se procesa correctamente. Las operaciones aritméticas coincidan con el nivel y los puntos sumados corresponde al número de las respuestas correctas

Fallido-Solucionado



Correcto



Correcto

I06 Iniciar una partida de matemáticas de nivel 1, salir del juego antes de terminar.

Podremos salir del juego correctamente y no se sumará ningún punto

Correcto

I07 Seleccionar y terminar el cuento “La liebre y la tortuga”

Termina satisfactoriamente la lectura y se suma 5 puntos

Correcto

I08 Seleccionar el cuento “La liebre y la tortuga”, salir de la lectura antes de terminar.

Podremos salir de la lectura sin problema y no se sumará ningún punto

Correcto

63

5.1.5 Resultado de evaluación de usabilidad

Al igual que la evaluación realizada con el prototipo de alta fidelidad, la aplicación final también debe pasar por este proceso, con la finalidad de refinar todas las funcionalidades y aspectos del diseño antes de presentarlo. Debido a la pandemia, ha sido complicado realizar este tipo de evaluaciones, lo cual solo hemos podido probar con cuatro usuarios.

Usaremos las tareas 1, 2 y 3 planificadas en el apartado 4.2.5.1, con la peculiaridad de que en la tarea 1 los usuarios solo podrán iniciar juegos de matemáticas y no del inglés, ya que no se ha conseguido implementar este último.

5.1.5.1 Efectividad

Basaremos la medición de la efectividad en la tasa de fallos y la tasa de éxito.

El diagrama de número de fallos representa el número total de los errores cometidos por cada tarea planificada. Su finalidad es identificar problemas relacionados con las funcionalidades. En la ilustración 52 detectamos un 25% de fallos en la tara 1, pero esto es un solo fallo de los cuatro usuarios. Este fallo se debe al mensaje confuso del diálogo de confirmación perteneciente al desbloqueo de mascotas. Se ha eliminado el mensaje confuso.


Ilustración 52: Número de fallos-Aplicación

El diagrama de número de éxitos en cambio mide la cantidad de tareas finalizadas correctamente, es decir, que el usuario haya alcanzado el objetivo de la tarea independientemente de los errores cometidos durante la prueba. Teniendo en cuenta que tenemos 4 usuarios frente a 3 tareas, el 4 es el máximo número de éxito.

La ilustración 53 muestra el número de éxitos de la evaluación, encontramos con el máximo éxito en las tres tareas, es decir, 100% del éxito a pesar del fallo cometido a la hora de realizar las tareas.

64


Ilustración 53: Número de éxitos-Aplicación

5.1.5.2 Eficiencia

En el diagrama 54 reflejamos el tiempo requerido por cada usuario para realizar la tarea indica la eficiencia del sistema. Fuente: Elaboración propia

Ilustración 54: Tiempo-Aplicación

La tarea 2 no se ve reflejada en el diagrama porque este tiempo depende de la rapidez que tiene el usuario de resolver un problema, lo cual no es el objetivo de nuestra prueba.

En el diagrama de resultado observamos una desviación destacable en la tarea 1, debido a un dialogo con mensaje confuso explicado previamente en el apartado 4.3.5.1.

00,5

11,5

22,5

33,5

4

Tarea 1 Tarea 2 Tarea 3

Número de éxitos

0:00

0:07

0:14

0:21

0:28

0:36

0:43

Tarea 2 Tarea 3

Tiempo

U1 U2 U3 U4 Experto

65

5.1.5.3 Satisfacción

La satisfacción de los usuarios es un factor importante, especialmente para una aplicación de videojuegos. Por ello aprovecharemos la experiencia de los usuarios que acaban de hacer prueba del sistema, pidiéndoles rellenar un test de satisfacción SUS.


Ilustración 55: Test de satisfacción

Un resultado de test SUS ideal es aquello con las respuestas impares a 0 y los pares al máximo, que en este caso es 20. Esta característica nos permite visualizar claramente el resultado del test. Tal y como se muestra en la ilustración 55. El test tiene buena pinta a excepción de la pregunta 1 que se aleja del objetivo, ese comportamiento no nos sorprende, ya que es normal que los niños no se muestre un mayor interés en nuestro producto. Como solución, debemos centrar en un futuro la gamificación de los juegos.

66

6 Los Objetivos de Desarrollo Sostenible.

El 25 de septiembre de 2015, 193 países se comprometieron con los 17 objetivos de desarrollo sostenible de Naciones Unidas y su cumplimiento para el año 2030.

Los objetivos persiguen la igualdad entre las personas, proteger el planeta y asegurar la prosperidad. Como parte de una nueva agenda de desarrollo sostenible, un nuevo contrato social global que no deja a nadie atrás. Este es un proyecto que requiere la colaboración de todo el mundo. Concretamente, los 17 objetivos de desarrollo sostenible son: Fuente: Ministerio de derechos sociales y agenda 2030

Ilustración 56: Obejtivo de Desarrollo Sostenible

67

Está claro la relación que hay entre nuestra aplicación y la educación de calidad, proporcionamos una plataforma de educación para que todos los niños puedan desarrollar sus habilidades, y lo más importante, despertar sus intereses del estudio. Otro de los objetivos vinculados es la industria, innovación e infraestructura, queremos fomentar la innovación en el área de educación, hacer que el estudio sea más divertido y no como una carga de trabajo para los estudiantes.

7 Conclusiones y trabajos futuras

Este trabajo se basa principalmente en las inquietudes personales del autor, ante la evolución del mundo. Una idea de desarrollar una aplicación que de alguna manera solventa el problema que hay entre los padres y sus hijos.

Muchas veces los padres no entienden cómo un dispositivo puede distraer a los niños con tanta facilidad. Algunos padres intentan acompañar más a sus hijos, de esta manera desviar la atención de los niños de sus dispositivos electrónicos. Pero no todos los padres son capaces de conciliar su vida familiar y laboral, por lo que este tipo de problema se convierte en algo inevitable. Nuestra aplicación está motivada en solventar este tipo de problemas, no impedir que los niños contacten con los dispositivos móviles, sino orientarles, convirtiendo el dispositivo electrónico en una herramienta potente de aprendizaje, mediante las aplicaciones como la nuestra.

Android Studio es el entorno seleccionado para desarrollar el proyecto, es una herramienta fácil de entender. Es una herramienta realmente potente con muchas posibilidades, de hecho, considero que me quedan mucho por explorar de este entorno. Siendo un entorno totalmente desconocido, se ha necesitado bastante tiempo para entender su funcionamiento y sus características. Dado que el tiempo dispuesto para desarrollar este trabajo es muy limitado, no se ha podido completar todo el desarrollo de la aplicación que nos gustaría llevar a cabo, concretamente la funcionalidad relacionada con el juego de inglés. Espero que en un futuro dicha funcionalidad pudiera ser completado independientemente de que la aplicación vaya a estar disponible en el Google Play o no.

Desarrollar una aplicación móvil no es nada fácil, tiene un trabajo significativo por detrás. Considero interesante llevar a cabo esta idea porque me llama atención, es un tema muy interesante, aunque no tenía experiencia en el desarrollo de aplicaciones móviles. Pero durante la carrera hemos aprendido todas las herramientas necesarias para construir una aplicación móvil y debemos aprovechar estos conocimientos para dar un paso más allá.

A medida que avanza el proyecto, siento cada vez más la importancia de los opiniones y peticiones de los usuarios, porque realmente estamos montando una aplicación para ellos, lo cual el desarrollador debe ser lo más objetivo posible y no meter elementos basado en gustos o ideas personales.

Como posibles líneas de desarrollo futuro, me gustaría añadir una funcionalidad que permite la interacción de los padres con la aplicación, es decir, que los padres pudieran obtener un resultado periódica de los alcances adquiridos por sus hijos. Sería interesante si en este resultado pudiéramos incluir un análisis de fortalezas y debilidades de los usuarios, de esta manera los padres podrán conocer mejor a sus hijos y ayudarles eficientemente.

68

Siguiendo esta línea, con la capacidad de sacar un resultado analizando estudios de los usuarios, podemos presentar nuestra aplicación a los colegios. Esta nueva función ayudará que los profesores conociesen las capacidades y deficiencias de todos los alumnos, y analizar los progresos del estudio.

Las evaluaciones efectuadas eran un buen punto de contacto con los usuarios, una oportunidad de obtención de informaciones y opiniones. Es sumamente importante realizar estas evaluaciones porque mediante este proceso podemos descubrimos diversas perspectivas que nos proporcionan los usuarios, estos puntos de vistas nos permiten ver detalles que nunca vería el desarrollador.

En definitiva, adquirí mucho conocimiento, ya sea técnicos o no, durante la realización de este proyecto, espero poder seguir perfeccionando la aplicación y este consiga presentarse algún día como una de las mejores aplicaciones del mercado de videojuegos infantiles.

69

8 Bibliografía [1] Abigail Orús (10 junio 2021). Ranking de los juegos online más populares entre la población de 4 a 15 años en España en febrero de 2020 [Online]. Available: https://es.statista.com/estadisticas/1124360/juegos-online-mas-populares-entre-la-poblacion-infantil-en-espana/

[2] Abigail Orús (29 abril 2020). Porcentaje de población infantil que jugó a videojuegos en España 2019 [Online]. Available: https://es.statista.com/estadisticas/1059858/dispositivos-usados-por-la-poblacion-infantil-para-jugar-a-videojuegos-espana/

[3] David López Villegas. IDE: Entornos Integrados de Desarrollo para Android [Online]. Available: https://es.wikipedia.org/wiki/Entorno_de_desarrollo_integrado

[4] Jonathan Salazar (27 abril 2017). 7 plataformas diferentes para desarrollar Android Apps [Online]. Available: https://tekzup.com/7-plataformas-diferentes-desarrollar-android-apps/

[7] La Geekipedia de Ernesto (2018). Curso Android desde cero [Online]. Available: https://www.youtube.com/watch?v=TxkdWX3UaNk&list=PLyvsggKtwbLX06iMtXnRGX5lyjiiMaT2y&index=31&ab_channel=LaGeekipediaDeErnesto

[8]

Stevdza-San (5 julio 2019). Custom Toast Message/Notification | Android Studio [Online]. Available: https://www.youtube.com/watch?v=H9WF3te9Gdw&ab_channel=Stevdza-SanStevdza-San

[9] Con Figma hacemos realidad las ideas [Online]. Available: https://www.syntonize.com/con-figma-hacemos-realidad-las-ideas/

[10] Dra. Sofía Aguas (16 junio 2016). Qué es el co-design? Algunas ideas sobre esta beneficiosa práctica [Online]. Available: https://www.unibarcelona.com/es/actualidad/artes-graficas/co-design

[11] Curso de interacción personas-ordenadror [Online]. Available: https://mpiua.invid.udl.cat/fases-mpiua/prototipado/categorias-de-tecnicas-de-prototipado/

[12] Qué es la Usabilidad? [Online]. Available: https://www.guiadigital.gob.cl/articulo/que-es-la-usabilidad.html

[13] Fabio Devin (25 febrero 2017). Sistema de Escalas de Usabilidad: ¿qué es y para qué sirve? [Online]. Available: https://uxpanol.com/teoria/sistema-de-escalas-de-usabilidad-que-es-y-para-que-sirve/

[14] Sgoliver (09 junio 2011). Notificaciones en Android (I): Toast [Online]. Available: https://www.sgoliver.net/blog/notificaciones-en-android-i-toast/

[15] Mario Camí (8 diciembre 2019). Como crear un diálogo ‘AlertDialog‘ [Online]. Available: https://mscdroidlabs.es/como-crear-un-dialogo-alertdialog/#:~:text=B%C3%A1sicamente%20un%20AlertDialog%20es%20una,centrar%20la%20atenci%C3%B3n%20del%20usuario.

[16] Glenn Lee (16 octubre 2020). Tipos de pruebas de software: diferencias y ejemplos [Online]. Available: https://www.loadview-testing.com/es/blog/tipos-de-pruebas-de-software-diferencias-y-ejemplos/

70

[17] Qué son las pruebas unitarias y cómo llevar una a cabo? [Online]. Available: https://www.yeeply.com/blog/que-son-pruebas-unitarias/

[18] Nuria Gómez Rodríguez (marzo 2015). Las Pruebas de Integración como Proceso de la Calidad del Software en el Ámbito de las Telecomunicaciones [Online]. Available: https://e-archivo.uc3m.es/bitstream/handle/10016/25775/PFC_Nuria_Gomez_Rodriguez.pdf

[19] Objetivos de desarrollo sostenibles [Online]. Available: https://www.agenda2030.gob.es/objetivos/home.htm

Este documento esta firmado porFirmante CN=tfgm.fi.upm.es, OU=CCFI, O=Facultad de Informatica - UPM,

C=ES

Fecha/Hora Thu Jun 03 22:16:06 CEST 2021

Emisor delCertificado

[email protected], CN=CA Facultad deInformatica, O=Facultad de Informatica - UPM, C=ES

Numero de Serie 630

Metodo urn:adobe.com:Adobe.PPKLite:adbe.pkcs7.sha1 (AdobeSignature)

Trabajo Fin de Gradooa.upm.es/68057/1/TFG_ZHUQI_JIANG.pdf · 5.1.1 Actualización de Las mascotas...

Documents

Transcript of Trabajo Fin de Gradooa.upm.es/68057/1/TFG_ZHUQI_JIANG.pdf · 5.1.1 Actualización de Las mascotas...