Después de haber realizado los wireframes y analizado el primer bosquejo de la interfaz, se realizó el diseño inicial, en donde se añadieron y modificaron algunos elementos con respecto del primer diseño en papel, dichos cambios se aplicaron con ayuda de la herramienta de Adobe XD en donde se pudieron replicar los elementos del primer bosquejo y con la información obtenida en el estudio contextual, se diseñaron las interfaces con los colores, elementos y tipografía, que pudiera ser comprensible y visible para los usuarios.
Adobe XD es un editor de gráficos vectoriales ligeros y una herramienta de creación de prototipos, permitiendo conectar visualmente áreas interactivas a otras pantallas usando cables y configurando transiciones, de esta manera se puede ver en la web o la aplicación móvil Adobe XD para poder realizar pruebas de Mago de Oz (Danderfer, 2020).
108 Figura 33. Ventana de prototipo A tu lado en Adobe XD. Fuente: Elaboración propia.
Partiendo del bosquejo de la interfaz se propuso nombrarlo “A tu lado”, ya que el prototipo de la interfaz propone realizar un estudio de seguimiento de trayectos mediante el uso de tecnologías interactivas en niños con TEA grado 1 con necesidad de independencia contextual, de esta forma se propone que las mamás puedan visualizar en tiempo real los recorridos sin acompañamiento de sus hijos, además de poder observar la relación de su ritmo cardiaco con el estado anímico, de esta forma tener la posibilidad de alertar en caso de existir alguna rabieta.
En los siguientes párrafos se describen las modificaciones realizadas y justificación de los elementos utilizados. Este primer diseño fue evaluado posteriormente por las usuarias, mediante la aplicación de la técnica de Mago de Oz para asegurar la facilidad de uso del sistema.
109 4.5.1 Login
A partir del wireframe hecho previamente, se diseñó la interfaz tomando en cuenta los elementos y distribución planteada. La paleta de colores utilizada se mantiene en toda la interfaz los cuales son azul y naranja, ya que, de acuerdo a la perspectiva de la psicología del color, el primero es vinculado al entendimiento, la protección, cuidado de los demás, confianza y credibilidad y el segundo relacionado a la alegría y el entusiasmo.
La descripción y justificación de los elementos utilizados en el diseño inicial se muestran en la tabla 12 de acuerdo a la información obtenida en la investigación realizada previamente.
Figura 34. Interfaz inicial de la interfaz. Fuente: Elaboración propia.
110 Tabla 12. Elementos usados en el login de la interfaz. Elaboración propia.
Elemento Imagen Descripción
Logo
La imagen representa a una madre protegiendo a su hijo, ya que de este modo se busca mostrar la necesidad de supervisión constante, además de tener relación directa con el nombre de la interfaz “A tu lado”, la cual busca empatizar con las madres de familia.
Botón de inicio
El siguiente botón indica que en caso de contar con una cuenta existente puede acceder de este modo.
Botón de registro
El siguiente botón indica que, en caso de no contar con una cuenta existente, tendrá que registrarse en ella.
4.5.2 Crear usuario
La siguiente ventana mantiene la distribución que contiene el wireframe presentado, sin embargo, fue necesario agregar elementos que ayudaran a identificar con mayor claridad la información solicitada. La interfaz se diseñó de acuerdo el estilo propuesto, lo cual se puede apreciar en la figura 35.
111 En la tabla 13 se describen las características de cada uno de los elementos que contiene la interfaz.
Tabla 13. Elementos usados para la ventana de crear usuario. Elaboración propia.
Elemento Imagen Descripción
Representación de una mamá
La siguiente imagen hace alusión a una madre de familia, para que el usuario pueda identificar que estos datos serán sobre ellas.
Iconos de referencia
Los siguientes iconos hacen alusión a elementos conocidos por los usuarios, para que tengan relación con la información solicitada.
Botón de aceptar El siguiente botón indica que se ha finalizado el registro de datos y da apertura para continuar el proceso.
Figura 35. Ventana para crear usuario. Fuente: Elaboración propia.
112 4.5.3 Registro de datos de jóvenes con TEA
Una vez analizado el proceso de la aplicación se decidió agregar una nueva ventana que en donde se soliciten los datos del hijo del usuario, los cuales son el nombre, la fecha de nacimiento y su número de celular. Dichos datos, con la finalidad de mantener en una base de datos las edades en las que se podría requerir la interfaz.
En la tabla 14 se describen las características de cada uno de los elementos que contiene la interfaz.
Figura 36. Ventana de registro de datos de los jóvenes con TEA. Fuente: Elaboración propia.
113 Tabla 14. Elementos usados para la ventana de registro de datos de los usuarios. Elaboración propia.
Elemento Imagen Descripción
Representación de una mamá
La siguiente imagen hace alusión al rostro de una persona joven, para que el usuario pueda identificar que estos datos serán sobre sus hijos.
Iconos de referencia
Los siguientes iconos hacen alusión a elementos conocidos por los usuarios, para que tengan relación con la información solicitada.
Icono de referencia
El siguiente icono hace alusión a que las madres de familia pueden agregar una fotografía de sus hijos.
Botón de aceptar El siguiente botón indica que se ha finalizado el registro de datos y da apertura para continuar el proceso.
4.5.4 Menú principal de la interfaz
La siguiente ventana se modificó para sintetizar la información, el diseño es sencillo y breve, esperando que de esta manera el usuario pueda acceder rápidamente para visualizar la información requerida.
Figura 37. Menú principal de la interface. Fuente: Elaboración propia.
114 En la tabla 15 se describen las características de cada uno de los elementos que contiene la interfaz.
Tabla 15. Elementos usados para la ventada de menú principal. Elaboración propia.
Elemento Imagen Descripción
Representación de los recorridos
El siguiente icono hace alusión a una persona caminando, lo que facilitara la relación con los recorridos realizados.
Representación del ritmo cardiaco
El siguiente icono hace referencia al ritmo cardiaco el cual estará ligado a las emociones de los jóvenes con TEA grado 1.
Icono de referencia
El siguiente icono hace referencia a un apartado de configuración en donde el usuario podrá realizar modificaciones en cuanto a cambios de número de celular, usuario o contraseña.
4.5.5 Ventana de recorridos
Se retomaron elementos básicos del wireframe anterior, sin embargo, fue preciso modificarlo ya que los elementos no eran claros, se agregó un mapa con mayor detalle, en donde se encuentras los nombres de las calles y establecimientos conocidos de la ciudad para dar mayor referencia geográfica, además de agregar elementos gráficos como iconos que ayudan a identificar la distancia o el tiempo de los recorridos.
115 En la tabla 16 se describen las características de cada uno de los elementos que contiene la interfaz.
Tabla 16. Elementos usados para la ventada de recorridos. Elaboración propia.
Elemento Imagen Descripción
Representación de una mamá
En el mapa se visualizan las calles, junto a los nombres de establecimientos conocidos de la ciudad para mayor identificación geográfica.
Iconos de referencia
Los siguientes iconos hacen alusión a los recorridos realizados, de acuerdo a la distancia y el tiempo, más el icono que identifica las veces en las que los jóvenes se detuvieron durante los recorridos.
Figura 38. Ventana de recorridos. Fuente: Elaboración propia.
116 Icono de
referencia
El siguiente icono hace alusión al destino de origen y al destino final de los recorridos.
Botón de aceptar
El siguiente icono funciona como botón para poder redireccionar a un calendario en donde se visualizan los diferentes recorridos durante un tiempo determinado.
4.5.6 Ventana de emociones y ritmo cardiaco
En la siguiente ventana se decidió modificar todos los elementos para que tuvieran mayor relación entre el ritmo cardiaco y las emociones, tomando en cuenta los valores del ritmo cardiaco.
Figura 39. Ventana de emociones y ritmo cardiaco. Fuente: Elaboración propia.
117 En la tabla 17 se describen las características de cada uno de los elementos que contiene la interfaz.
Tabla 17. Elementos usados para la ventada de menú principal. Elaboración propia.
Elemento Imagen Descripción
Representación de una mamá
La siguiente imagen muestra el ritmo cardiaco equivalente a la emoción que presenta el joven durante el recorrido.
Iconos de referencia
Los siguientes elementos se diferencian por colores dependiendo los valores del ritmo cardiaco de los jóvenes.
118