INTRODUCCIÓN

Hoy en día el consumo de productos digitales toma importancia en cuanto al uso de normas y reglas que guíen la correcta distribución y manejo de los contenidos. Los criterios de diseño editorial en el contexto de los impresos son una guía para la elaboración de retículas, selección tipográfica, jerarquía de contenidos y demás. Todo esto ha migrado orgánicamente a entornos digitales como la web, apps y redes sociales. La aparición de Material Design representa una guía de criterios de diseño aplicados a entornos interactivos para una mejor experiencia de usuario.

El factor humano ha ido añadiendo calidad al producto y facilidad en su uso, no obstante, la usabilidad esta basada en el grado de satisfacción del usuario. Algunas industrias basan también su diseño en la pirámide de necesidades de Maslow [1], quien relaciona la contribución del usuario con el diseño del producto considerando funcionalidad, usabilidad y placer.

La participación del ser humano en el diseño de un producto se ha ido incrementando de manera notable en los últimos años. Su participación se ve reflejada en diferentes medios tales como revistas, libros, productos, aplicaciones digitales, entre otros. En la actualidad, los individuos son expertos en contribuir a la creación de usabilidad y de establecer una serie de principios a los cuales el diseño debe adherirse para ser fácil de usar [2]. A través del tiempo se han creado una serie de productos utilizables, lo que ha provocado que la gente demande cada vez más productos sofisticados y con determinadas características relacionadas con beneficios funcionales y emocionales. En este sentido, el desafío al que se enfrenta el factor humano es desarrollar productos que puedan generar diferentes emociones y sentimientos en las personas [3].

De lo expuesto, el diseño y la intervención del ser humano a través de sus emociones ha ayudado a formalizar el vínculo entre el Diseño y la generación de experiencias de usuario. Es así que, el placer y las emociones que se pueden generar por el uso de un producto o sistema tecnológico, promueve la satisfacción de las necesidades básicas a través de interacciones tecnológicas. Por otro lado, la creación de experiencias significativas mediante la apropiación de una tecnología sigue siendo responsabilidad del "usuario". Siendo el diseño de experiencias sinónimo de tecnología, que sugiere experiencias significativas, atractivas, valiosas y estéticamente agradables en sí misma [4].

Es importante mencionar que la percepción que un usuario tiene de los sistemas tecnológicos y de la información que este sistema muestra está influenciada cada vez más sobre aspectos del contexto y del estado anímico [5]. Viéndose de esta manera directamente relacionado el Diseño con el usuario y su percepción ante el producto generado.

Al hablar de la experiencia del usuario y del diseño de una interfaz gráfica de usuario (GUI-Graphical User Interface), se debe tener en cuenta ciertos parámetros como: (1) el Ícono, que tiene que ver con la forma y la apariencia, (2) el índice, que tiene que ver con el estilo y particularidades de la imagen a la que hace referencia -se trata de un hecho concreto que se encuentra relacionado con las acciones- y (3) el símbolo, que da coherencia y sentido al signo, da la relación de pertenencia y pertinencia del signo de los sistemas de signos, este se relaciona con la experiencia, la intuición, y normas culturales [6].

Por lo expuesto, es importante tener encuenta que a la hora de diseñar un producto digital para el contexto educativo, brindar una sensación de confianza y seguridad es el principal enfoque a considerar. Por ello se plantean retos sobre el diseño de productos digitales en el ámbito académico que utilicen recursos visuales e interactivos, además de incluir el manejo de entornos retóricos que emulan mundos fantásticos o escenas de la cotidianidad que llamen la atención de los usuarios.

En esta línea, los Agentes Conversacionales (AC), también denominados chatbots, son paquetes de software capaces de establecer interacciones con el ser humano utilizando el lenguaje natural [7], se pueden representar con personas, animales, cosas que pueden hablar con sonido o texto [8] , puede solventar dudas e inquietudes, respondiendo a las necesidades de los usuarios en una interacción directa [9]. En el ámbito educativo, los Agentes Conversacionales son considerados como pedagógicos dado que se integran en sistemas interactivos que pueden enseñar a los estudiantes asumiendo el rol de profesor, estudiante o acompañante mediante un diálogo en lenguaje natural [10].

En la presente investigación se ve a la participación del usuario como un ente de participación en el co diseño como apoyo del diseño, diagramación y esquematización de un producto digital, a través de la retroalimentación por parte del usuario. Se aborda la diagramación de la interfaz de un agente conversacional, cuya función será la de acompañar en el aprendizaje de programación por medio de actividades prácticas planteadas bajo metáforas.

MÉTODO

El presente trabajo, tiene como objetivo realizar la diagramación y el diseño de la interfaz de una aplicación orientada a la enseñanza de programación basado en un agente conversacional. Con la finalidad de alcanzar este propósito, se trabaja con un enfoque mixto y tiene un alcance experimental.

Normas éticas de investigación

La presente investigación no requirió de información personal de los estudiantes, ni otros datos que afecten a su integridad ni privacidad. Se mantuvo reuniones con los directivos de la escuela para la autorización de trabajo con los estudiantes en el aula, a fin de colectar las opiniones y narrativas de la interfaz en la que actuará el agente conversacional, describiendo sus intereses y necesidades.

Técnicas de análisis de datos

Para la recolección de datos se aplicó una encuesta basada en preguntas sobre las especificaciones que debe cumplir la interfaz además de la aplicación de un storytelling para el desarrollo de una historia que permita identificar las principales características del agente conversacional y la forma de comunicarse.

Procedimiento

Para el desarrollo de la propuesta se aplicó la metodología Design Thinking mediante el desarrollo de cada una de sus 5 etapas: Empatizar, Definir, Idear, Prototipar y validar.

A continuación se detalla las etapas como manifiesta Luka[11]:

- Empatizar, se busca identificar el público al que va dirigido el estudio, además se determina que esperan los futuros usuarios de la aplicación.

- Definir, se identifica toda la información además de las oportunidades de mejora y se prioriza las necesidades.

- Idear, se define la problemática en función de los requerimientos de los usuarios y se empieza a generar ideas, mismas que deben ser ejecutables y viables.

- Prototipar, consiste en generar varias versiones del producto en función de las diferentes necesidades identificadas.

- Testear, los usuarios trabajan con los prototipos con la finalidad de empatizar nuevamente, mejorar las ideas,volver a prototipar si es necesario y determinar la factibilidad de uso y aplicación del producto.

RESULTADOS

El proceso enmarcado en las etapas del Design Thinking aborda la creación tanto del personaje como de los entornos donde se desarrolla las actividades lúdicas. La interfaz propuesta es clave en las interacciones, debiendo ser práctica y de fácil uso para una navegación fluida. Para el desarrollo se plantearon las siguientes acciones:

(1) Empatiza: se propuso un abordaje desde el trabajo conjunto con el equipo de docentes que dieron las primeras pautas desde las necesidades pedagógicas para la construcción del brief de diseño de interfaz. En esta primera etapa se obtuvo criterios como:

· Estructura sencilla

· Uso de formas básicas

· Colores claros o pasteles

Las ideas iniciales con las que se partió la propuesta se validaron con un equipo de trabajo pequeño de 66 individuos, conformado por niños de entre 8 a 10 años de una institución de educación básica de España. Mediante un proceso de co-creación se obtuvieron narrativas sobre las expectativas y personalidad de los niños con el personaje, además de los contextos donde este se desenvolvería.

(2) Define: en esta etapa se destaca las características que permitieron definir al personaje. El nombre del agente conversacional ALCODY nace del contexto de la tecnología y la computación; conecta dos palabras: algoritmos y códigos, que en su contracción conforman el nombre del personaje. ALCODY, por tanto, refleja atributos definidos en la etapa de empatía, y proyecta una imagen que se asimila como actual y futurista, a fin de conectar con los niños, como se presenta en la tabla 1.

Se define a ALCODY como un personaje dinámico y con rasgos humanos, es comunicativo, tranquilo y deportista. Además de estos rasgos, se deriva la necesidad de emular reacciones humanas, dando a entender emociones y complementando estas acciones con movimientos de las extremidades para acentuar el mensaje. Debe poseer rasgos característicos de los ordenadores o dispositivos móviles que permitan una referencia tecnológica, los elementos decorativos y rasgos base del personaje deben relacionarse con la rapidez de respuesta y el avance continuo en el conocimiento y apoyo o guía al aprendizaje en diferentes situaciones.

Idea: la propuesta gráfica conlleva la generación de un personaje que acompañe a los niños en la ejecución y aprendizaje de actividades lúdicas basadas en el contexto diario; la anatomía propuesta se basa en una estructura base de esferas que conectan con el cuerpo y permiten una dinámica fluida (Fig. 1, a la izquierda); se busca también un eje central y proporciones para dar peso visual al cuerpo y cabeza (Fig. 1, centro); el paso a la propuesta final llega con la colorización en tonos grises y el manejo de detalles alusivos a la tecnología (Fig. 1, derecha).

Figura 1.
Conceptualización del agente conversacional.

La propuesta final se centra en formas básicas, ojos expresivos y dinámicas a través de las manos, que se convierten en una estrategia de interacción con los niños; se omite el uso de piernas para el personaje ya que no son requeridas para las actividades lúdicas planificadas.

Las gafas representan un elemento de identidad referido desde el estereotipo del conocimiento y la ciencia; eso se convierte en estrategia de diferenciación creativa que genera más dinamismo a la creación del personaje, esto contrasta con una estructura simple y la posibilidad de variar colores en los elementos decorativos como las gafas (Fig. 2). Los ojos destacan, además de la pantalla en el cuerpo del personaje, estos elementos también complementan atributos de identidad y comunicación del personaje.

La propuesta y su enfoque tecnológico se aproxima al contexto real de los niños y el manejo de dispositivos móviles, además de un entorno experiencial con asistentes inteligentes y drones; que en primera instancia, deben tener una interacción mediante el habla, unos deonandos o textos para interactuar con estos.

Figura 2.
Conceptualización del agente conversacional.

Las acciones de ALCODY se desarrollan en situaciones cotidianas, por tanto, deben ser representadas en un contexto real (Fig. 3), basado en elementos comprensibles de la proximidad de experiencias del niño. El entorno se asocia a la personalidad de ALCODY, por tanto, se propone espacios coloridos, hacia un entorno mas limpio y conjugado con la tecnología; se manejan líneas y formas muy sutiles que no interfieren con las actividades ludicas del personaje y el usuario.

Figura 3.
Propuesta de escenarios para actividades.

Prototipa: La construcción de la propuesta busca una interacción usuario-software a través de una interfaz ligera en cuanto a su estructura de contenidos, pero con impacto visual a través de escenarios y elementos. Los fondos propuestos son neutros (Fig. 4) y se prioriza los espacios de información con textos simples contrastantes e ilustraciones coloridas. A cada tipo de información se le asigna un color para ser identificado con mayor facilidad y rapidez. El objetivo de la propuesta busca desarrollar una experiencia positiva y divertida para el usuario; por tanto, el manejo de la interfaz se centra en diálogos e interacciones entre el niño y los pasos a seguir dictados por el agente conversacional.

Figura 4.
Ejemplo de fondo ilustrado.

En cuanto a diseño, se utilizan formas básicas, círculos, rectángulos, cuadrados, formando los entornos y los personajes, se aplican estos elementos con el fin de no saturar la interfaz. Las composiciones logradas son proporcionadas y con una distribución del área de la pantalla según las actividades que se planteen desarrollar (Fig. 5).

Figura 5.
Interfaz del juego.

La estructura se organiza en cuatro bloques que contienen distintos tipos de información, tanto de entrada como de salida (Fig. 6), la distribución de los bloques permite encontrar rápidamente la zona de interacción (2, 3),lectura (1) e ingreso de información (4), que según Material Design, en pantallas grandes puede manejar el espacio dividido en dos [12].

Figura 6.
Retícula constructiva.

La información textual se presenta de forma dinámica y de fácil asimilación (Fig. 7), los textos emulan interacciones de los chats en aplicaciones móviles o la web, que son entornos propios de los nativos digitales. El contraste de fondo y texto permite una correcta lectura, además del uso de códigos cromáticos usados para identificar las interacciones de quien da una orden, preguntas o respuestas.

Figura 7.
Conceptualización del agente conversacional.

Las actividades lúdicas conjugan iconos e imágenes que deben ser arrastrados desde la zona modular inferior, hasta la zona de actividades, a fin de emular un proceso en una actividad cotidiana. Los utencillos e ingredientes se presentan en un carrusel o galería de elementos de forma dinámica y accesible (Fig. 8).

Figura 8.
Galería de imágenes.

(3) Validación: la propuesta interactiva se validó con un test dirigido a estudiantes de la unidad educativa de España a fin de pulir detalles en cuanto a interfaz de usuario y características del agente conversacional. La muestra inicial de 66 niños trabajó con el docente, especificamente en la asignatura de programación. Además, la propuesta se orientó a necesidades específicas de los docentes y objetivos de formación requeridos. La relación de actividades propuestas plantean que el estudiante comprenda secuencias lógicas para resolver problemas que, análogamente permiten la comprensión del uso de algoritmos y códigos de programación.

Para la etapa de validar se lleva a Alcody a la escuela (Fig. 9), para que los estudiantes puedan interactuar con él y sobre esta pruebas se puedan establecer las acciones de mejora, además de identificar si este cumple con los requerimientos que se establecieron al inicio del estudio.

Figura 9. Validación con estudiantes.

Figura 9.
Validación con estudiantes.

Para definir la experiencia de usuario se validó aspectos respecto al tono de la comunicación con el agente conversacional y las formas de comunicarse, para estos dos criterios se establecieron preguntas de opción múltiple que plantearon acciones de mejora.

En los dos casos (tabla 2 y tabla 3), la propuesta se centra en factores psicológicos y emocionales de los estudiantes. Las decisiones tomadas se suman a otros factores emotivos como los gestos al momento de comunicarse y la voz del personaje. Mediante estas estrategias se busca que los estudiantes tengan una experiencia completa, y que se conecten de forma positiva con las actividades de aprendizaje y creatividad .

Nota. Criterios con mayor puntaje que sirven para plantear acciones de mejora.

DISCUSIÓN Y CONCLUSIONES

La relevancia del desarrollo de software educativo radica en la visión de UNESCO, que en su Informe Reimaginar juntos nuestros futuros: un nuevo contrato social para la educación, de la Comisión Internacional sobre los Futuros de la educación, plantea la necesidad en este siglo del acceso a las tecnologías y el derecho a la alfabetización digital como ejes del desarrollo, teniendo claro que “El uso de la tecnología para promover las capacidades humanas a fin de conseguir un mundo más inclusivo y sostenible debe ser intencional e incentivarse” [13], por tanto, iniciativas como la presente propuesta deben abordarse como una necesidad propia de la educación, donde el diseño toma un papel importante a fin de configurar entornos visuales adaptados a un objetivo pedagógico y pensado para un usuario específico, con sus inquietudes y necesidades.

La presente propuesta también trata de responder a la inquietud planteada por UNESCO, sobre la necesidad de desarrollar software enfocado a la educación, comprendiendo los elementos de su diseño conceptual, donde se resalta al software de tipo II que permita fomentar el pensamiento y no solo acciones simples como los juegos didácticos [14]; por tanto, el enfoque de la propuesta al desarrollar el pensamiento lógico de la programación a través del diseño de entornos dinámicos y como un agente conversacional aportan a suplir brechas en cuanto a procesos de aprendizaje. Tomando en cuenta que los datos del informe Estadística de la Sociedad de la Información y la Comunicación en los centros educativos no universitarios. Para el curso 2020-2021, publicado por el Ministerio de Educación y Formación Profesional de España [15], la viabilidad del proyecto es positiva al tener un promedio de tres ordenadores por estudiante, además de un 97,4% de instituciones educativas con conexión a internet y un 95,9% de conexión inalámbrica; a esto se suma que los niños se consideran como nativos tecnológicos, y los docentes reciben formación continua sobre Tic’s, siendo su manejo generalizado.

La diagramación y diseño de la interfaz responde a conceptos base de diseño editorial, que con el tiempo y avances tecnológicos a migrado al entorno digital, como lo plantea el Interaction Design Foundation [14]; la distribución de los espacios de información y vacíos están acorde a lógicas de orden y jerarquía. Además, el manejo de normas o criterios para el buen diseño de aplicaciones plantea soluciones viables como casos de desarrollo de aplicaciones móviles [16]. La interfaz comprende acciones puntuales para el aprendizaje, de esta necesidad se deriva una estructura simple pero ordenada jerarquicamente para el desarrollo de actividades interactivas y de comunicación. La validación final por los estudiantes de escuelas permite depurar procesos y mejorarlos a fin de llegar con un producto de calidad para el ámbito educativo.

Por último, el objetivo del proyecto es brindar una experiencia más real a los estudiantes, y comprometerlos más en la tarea, al mismo tiempo que el Agente Conversacional se contempla como un ayudante para desarrollar el pensamiento computacional; pretende también ayudar a desarrollar la inteligencia creativa y emocional de los niños. En este sentido, el agente conversacional ha tenido que pasar por el cumplimiento de varias características derivadas de las necesidades pedagógicas y preferencias de los usuarios, siendo un factor clave la fusión del concepto tecnológico y antropomórfico del personaje, que en proyecto similares de otras actividades [17], se maneja el enfoque antropomórfico como estrategia social.

DECLARACIÓN DE CONFLICTO DE INTERÉS

Los autores declaran que se desarrolló un proceso con niños que fue controlado bajo estrictas normas de respeto a la integridad de los participantes, con los debidos permisos de la institución educativa para el desarrollo de las actividades, confirmando que no existe conflicto de interés.

APORTE DEL ARTÍCULO EN LA LÍNEA DE INVESTIGACIÓN

Este trabajo aporta sobre como a través de la aplicación de una metodología se puede estructurar la diagramación, diseño de interfaz y la estructuración gráfica de un agente conversacional y como este incide en el Diseño Centrado en el usuario.

DECLARACIÓN DE CONTRIBUCIÓN DE CADA AUTOR

Todos los autores contribuyeron en igual medida en la elaboración de este trabajo: conceptualización, búsqueda bibliográfica, metodología estadística, análisis y redacción.

NOTA BIOGRÁFICA

Jorge Santamaría Aguirre. ORCID iD https://orcid.org/0000-0001-7896-3657 Doctor en Diseño, Fabricación y Gestión de Proyectos Industriales de la Escuela Técnica Superior de Ingeniería en Diseño de la Universidad Politécnica de Valencia; Máster en Ingeniería del Diseño y Especialista en diseño y animación web; actualmente es docente de las carreras de Diseño Industrial y Diseño Gráfico, también es Director subrogante del Grupo de investigación GIDDIC en la Facultad de Diseño y Arquitectura de la Universidad Técnica de Ambato en Ecuador. Desarrolla Proyectos en el campo del hábitat, la sociología y antropología del diseño, la calidad en procesos de la producción gráfica y la gestión de procesos de diseño del sector del calzado.

Elizabeth Katalina Morales Urrutia. ORCID iD https://orcid.org/0000-0001-9297-5881 Es profesora de computación e imparte clases de software para diseño en la Facultad de Diseño y Arquitectura de la Universidad Técnica de Ambato. Es PhD en Tecnologías de la Información y las Comunicaciones. Lleva 17 años ejerciendo la profesión de docente. Ha escrito un libro sobre el aprendizaje de Libre in Office en Kichwa. Asimismo, sus investigaciones incluyen temas relacionados con la programación de procesos de enseñanza y aprendizaje y las tecnologías de la información en la educación.

Jose Miguel Ocaña Chiluisa. ORCID iD https://orcid.org/0000-0001-6962-8865 Es responsable de tecnologías de la información y profesor de computación e imparte las asignaturas de matemáticas, estadística y control de calidad en la Facultad de Administración y Negocios de la Universidad Indoamérica. Es PhD en Tecnologías de la Información y las Comunicaciones. Con 20 años ejerciendo la administración de TI y 6 años de docencia de tercer y cuarto nivel. Entre sus investigaciones incluyen temas relacionados con gestores de aprendizaje, procesos educativos mediados por las tecnologías de la información, programación y procesos de enseñanza y aprendizaje.

REFERENCIAS

[1] J. García-Allen, «Pirámede de Maslow:la gerarquia de las necesidades humanas.,» 2015 febrero 15. [En línea]. Available: https://psicologiaymente.com/psicologia/piramide-de-maslow. [Último acceso: febrero 2023].

[2] J. H. Beltrán, La usabilidad en el desarrollo de software: Una exploración teórico–empírica, Camelo Bogoya: INVESTIGACIÓN FORMATIVA EN INGENIERÍA, 2020, pp. 236, 2020..

[3] J. Hollan, E. Hutchins y D. Kirsh, Distributed cognition: toward a new foundation for human-computer interaction research (TOCHI), vol. 7, ACM Transactions on Computer-Human Interaction, 2000, pp. 174-196.

[4] M. Hassenzahl, User experience and experience design, vol. 2, The encyclopedia of human-computer interaction, 2013, pp. 1-14.

[5] J. L. González-Sánchez, F. Montero-Simarro y J. L. Gutierrez - Vela, Evolución del concepto de usabilidad como indicador de calidad del software, vol. 21, Profesional de la información, 2012, pp. 529-536.

[6] E. P. Quezada-Bolaños, L. Gallardo-López y B. A. Gonzalez- Beltran, Estudio de la triada sígnica en los patrones de diseño de interfaces gráficas, vol. 1 , Avances en Interacción Humano-Computadora, 2018, pp. 88-91.

[7] R. Dale, The return of the chatbots, vol. 22, Natural Language Engineering, 2016, pp. 811- 817.

[8] D. Tatar, C. Sacarea y E. Kapetanios, Natural Language Processing:Semantic Aspects, Boca Raton, FL:CRC Press, 2013.

[9] Y. Sumikawa, M. Fujiyoshi, H. Hatakeyama y M. Nagai, Supporting creation of FAQ dataset for E-learning chatbot, In Intelligent Decision Technologies 2019 - Springer, 2020, pp. 3-13.

[10] S. Tamayo y D. Pérez-Marin, ¿Qué esperan los maestros de los Agentes Conversacionales Pedagógicos?, vol. 18, Education in the Knowledge Society (EKS), 2017, p. 59–85.

[11] I. Luka, Design thinking in pedagogy: Frameworks and uses, vol. 54, European Journal of Education, 2019, pp. 499-512.

[12] «Material Design,» Material Design, 21 febrero 2022 . [En línea]. Available: https://m3.material.io/. [Último acceso: 21 febrero 2023].

[13] UNESCO, «Reimaginar juntos nuestros futuros: un nuevo contrato social para la educación,» 2022, p. 35.

[14] UNESCO, «Documento de referencia preparado para el Informe de seguimiento de la educación en el mundo de 2023,,» de Tecnología y educación: La tecnología en la educación, 2021, p. 21.

[15] M. Soegaard, «The Grid System: Building a Solid Design Layout,» [En línea]. Available: https://www.interaction-design.org/literature/article/the-grid-system-building-a-solid-design-layout. [Último acceso: 20 Febrero 2023].

[16] S. Novensa y W. Munggana, Analysis and Development of Interface Design on DKI Jakarta & Tangerang‘S Qlue Application based on Don Norman’s 6 Design Principles, 5a ed. International Journal of New Media Technology, 2018, pp. 1-7.

[17] S. Diederich, A. Brendel y L. Kolbe, «Designing Anthropomorphic Enterprise Conversational Agents,» Bus Inf Syst Eng , vol. 2020, nº 62, p. 193–209, 2020.