EXPERIENCIA INTERACTIVA COMO APOYO A LA DIFUSIÓN DE LA ...

EXPERIENCIA INTERACTIVA COMO APOYO A LA DIFUSIÓN DE LA CAMPAÑA DE RECICLAJE DE TAPAS EN LA FUNDACIÓN CARLOS

PORTELA

VANESSA VELÁSQUEZ OROZCO 2147206

UNIVERSIDAD AUTÓNOMA DE OCCIDENTE FACULTAD DE INGENIERÍA

DEPARTAMENTO DE OPERACIONES Y SISTEMAS PROGRAMA INGENIERÍA MULTIMEDIA

SANTIAGO DE CALI 2020

EXPERIENCIA INTERACTIVA COMO APOYO A LA DIFUSIÓN DE LA CAMPAÑA DE RECICLAJE DE TAPAS EN LA FUNDACIÓN CARLOS

PORTELA

VANESSA VELÁSQUEZ OROZCO

Pasantía Comunitaria para optar al título de Ingeniero Multimedia

Director ANDRÉS FELIPE GALLEGO AGUILAR

Magíster en Diseño y Creación Interactiva

UNIVERSIDAD AUTÓNOMA DE OCCIDENTE FACULTAD DE INGENIERÍA

DEPARTAMENTO DE OPERACIONES Y SISTEMAS PROGRAMA INGENIERÍA MULTIMEDIA

SANTIAGO DE CALI 2020

Nota de aceptación:

Aprobado por el Comité de Grado en cumplimiento de los requisitos exigidos por la Universidad Autónoma de Occidente para optar al título de Ingeniera Multimedia

ANDRES FABIAN AGREDOJurado

Santiago de Cali, 01 de Junio de 2020

4

AGRADECIMIENTOS

A mis padres, por su ayuda y apoyo incondicional; y a mi director de grado, Andrés Gallego, por su eterna paciencia y su colaboración y acompañamiento durante el completo desarrollo de este proyecto.

5

CONTENIDO

Pág.

RESUMEN 13

INTRODUCCIÓN 14

1. PLANTEAMIENTO DEL PROBLEMA 16

2. JUSTIFICACIÓN 17

3. ANTECEDENTES 18

3.1. RECORRIDO VIRTUAL PARA RECLUTAMIENTO DE ESTUDIANTES 18

3.2. ONE STEP: CARTELES INTERACTIVOS PARA CREAR CONCIENCIA SOBRE LA POBREZA 19

3.3. MULTIMEDIA PARA EL PATRIMONIO CULTURAL 22

3.4. CAMPAÑA PARA REDUCIR EL CONSUMO INDEBIDO DE ALCOHOL ENTRE ESTUDIANTES-ATLETAS UNIVERSITARIOS 24

4. OBJETIVOS 25

4.1. OBJETIVO GENERAL 25

4.2. OBJETIVOS ESPECÍFICOS 25

5. MARCO TEÓRICO 26

5.1. EXPERIENCIA MULTIMEDIA 26

5.2. DISEÑO INTERACTIVO 26

5.3. DISEÑO EMOCIONAL 28

5.4. INTERACCIÓN SOCIAL 28

6

5.5. DISEÑO DE EXPERIENCIAS 29

5.6. MARKETING BTL 30

5.7. INBOUND MARKETING 32

6. METODOLOGÍA 34

6.1. ETAPAS DEL PROYECTO 34

6.1.1. Fase cero: definición de la estrategia 34

6.1.2. Fase uno: contexto, usuarios y sistema 34

6.1.3. Fase dos: concepto y prototipo 35

6.1.4. Fase tres: producción e integración 35

6.1.5. Fase cuatro: evaluación 35

7. RESULTADOS Y DISCUSIÓN 37

7.1. FASE CERO: DEFINICIÓN DE LA ESTRATEGIA 37

7.1.1. Identificación preliminar de contexto y negocio 37

7.1.2. Entrevistas con stakeholders 38

7.1.3. Definición de metas tras implementación del sistema 40

7.1.4. Definición cronograma y recursos 41

7.2. FASE UNO: CONTEXTO, USUARIOS Y SISTEMA 41

7.2.1. Identificar contexto y espacio a intervenir 41

7.2.2. Desarrollar un perfil de los usuarios del sistema 42

7.2.3. Elaborar el mapa de proposición de valor 43

7.2.4. Identificación de tareas de interacción (requerimientos funcionales y no funcionales) 45

7.3. FASE DOS: CONCEPTO Y PROTOTIPO 46

7.3.1. Selección de herramientas 54

7

7.3.2. Elaboración de prototipos 55

7.4. FASE TRES: PRODUCCIÓN E INTEGRACIÓN 66

7.5. FASE CUATRO: EVALUACIÓN 74

7.5.1. Diseño de las pruebas 74

7.5.2. Generación de los casos de prueba 74

7.5.3. Definición de los procedimientos de la prueba 76

7.5.4. Ejecución de la prueba 76

Figura 41. Pruebas de usuario – Primera iteración (2) 77

7.5.5. Realización de un informe de la prueba 80

8. CONCLUSIONES 82

9. RECOMENDACIONES 84

BIBLIOGRAFÍA 85

ANEXOS 88

8

LISTA DE FIGURAS

Pág.

Figura 1. Primer póster interactivo de One Step 20

Figura 3. Ejemplos de instalaciones interactivas innovadoras para aplicaciones de patrimonio cultural 23

Figura 4. Cronograma del proyecto 41

Figura 7. Baloncesto con tapas plásticas 47

Figura 8. Póster interactivo 48

Figura 9. Elección de historias 48

Figura 10. Animación evolutiva 49

Figura 11. Escenarios 1 – 4 56



Figura 14. Escenario 13 58

Figura 15. Interfaz inicial 58

Figura 16. Interfaz de instrucciones 59

Figura 17. Interfaz de puntaje con cuenta regresiva 59

Figura 18. Interfaz de puntaje con cuenta regresiva terminada 60

Figura 19. Interfaz de puntaje vs puntaje máximo 60

Figura 20. Interfaz de agradecimientos 61

Figura 21. Prototipo - Mensaje inicial 61

Figura 22. Prototipo - Instrucciones del juego 62

Figura 23. Prototipo - Puntaje inferior a 30 62

Figura 24. Prototipo - Puntaje superior a 30 63

9

Figura 25. Prototipo - Puntaje superior a 50 63

Figura 26. Prototipo - Puntaje logrado vs Puntaje máximo 64

Figura 27. Prototipo – Agradecimientos 64

Figura 28. Prototipo – Contenedor 65

Figura 29. Prototipo integrado 66

Figura 32. Lógica de captura de movimiento 69

Figura 33. Inicialización de interfaz gráfica de usuario 70

Figura 34. Lógica de puntaje y conteo de tapas 71

Figura 35. Función para cambio de secciones 71

Figura 36. Función para cambio de secciones (continuación) 72

Figura 37. Cuenta regresiva del tiempo de juego 72

Figura 38. Estructura del mensaje inicial e instrucciones 73

Figura 40. Pruebas de usuario – Primera iteración 77

Figura 41. Pruebas de usuario – Primera iteración (2) 77

Figura 43. Pruebas de usuario – Segunda iteración (2) 79

Figura 44. Pruebas de usuario – Segunda iteración (3) 79

10

LISTA DE TABLAS

Pág.

Tabla 1. Marketing tradicional vs Inbound Marketing 33

Tabla 2. Stakeholders primarios – Donantes 38

Tabla 3. Stakeholders secundarios – Voluntarios 39

Tabla 4. Stakeholders secundarios - Empleados 39

Tabla 5. Stakeholders secundarios – Recicladores 40

Tabla 6. Stakeholders secundarios - Beneficiarios 40

Tabla 7. Análisis de los usuarios potenciales 42

Tabla 9. Matriz de selección por pares de criterios 50

Tabla 10. Matriz de selección por pares de criterios normalizada 51

Tabla 11. Matriz de selección por pares de alternativas - Costo 51

Tabla 12. Matriz de selección por pares normalizada de alternativas - Costo 51

Tabla 13. Matriz de selección por pares de alternativas - Retroalimentación visual en pantalla 52

Tabla 14. Matriz de selección por pares normalizada de alternativas - Retroalimentación visual en pantalla 52

Tabla 15. Matriz de selección por pares de alternativas - Almacenamiento de información 52

Tabla 16. Matriz de selección por pares normalizada de alternativas - Almacenamiento de información 53

Tabla 17. Matriz de selección por pares de alternativas - Límite de tiempo de uso 53

Tabla 18. Matriz de selección por pares normalizada de alternativas - Límite de tiempo de uso 53

11

Tabla 19. Resultado de calificación de alternativas 54

12

LISTA DE ANEXOS

Pág.

Anexo A. Encuesta de contextualización y análisis de usuarios 88

Anexo B. Entrevista de pruebas de usuario 99

Anexo C. Resultado de entrevistas de pruebas de usuario 103

13

RESUMEN

La Fundación Carlos Portela es una organización sin ánimo de lucro que brinda apoyo integral a los niños con cáncer y sus familias, buscando garantizar su completo bienestar mejorando la calidad de vida de dichas personas al proporcionar ayudas que respondan a sus necesidades inmediatas, las cuales pueden ser útiles de aseo personal, ropa, alimentación, hospedaje, medicamentos, entre muchas otras. Además brinda un continuo acompañamiento económico, jurídico y emocional, este último mediante actividades lúdicas, recreativas y culturales.

La fundación cuenta con varias estrategias para financiarse y adquirir recursos, entre las cuales está la donación de tapas plásticas, siendo su mayor fuente de ingresos hasta el momento, logrando obteniendo este recurso por parte de personas naturales y jurídicas. Pero en la actualidad, dicha donación ha disminuido considerablemente, por lo cual se ve comprometida la misión de la fundación, ya que pone en riesgo el acompañamiento y recursos que esta ha brindado por años a sus beneficiarios.

El presente proyecto describe el proceso llevado a cabo para el desarrollo de una experiencia interactiva que sirva como apoyo a la difusión de la campaña de reciclaje de tapas plásticas perteneciente a la Fundación Carlos Portela, de manera que pueda ser conocida por un nuevo público y que éste participe activamente de ella. Para el desarrollo de este proyecto se utilizó una metodología que se basa en el reconocimiento del usuario, que hace referencia al enfoque de desarrollo de sistemas multimedia y consta de cinco fases subdivididas en actividades a realizar para el correcto cumplimiento de cada una de ellas.

Palabras clave: Experiencia multimedia, experiencia interactiva, reciclaje de tapas, fundación.

14

INTRODUCCIÓN

El reciclaje se ha convertido en un negocio productivo y necesario en el mundo actual. Empresas y pequeños recicladores se dedican a recolectar material industrial, cartón, papel y materiales plásticos comunes con el propósito de generar ingresos1. Este mercado puede movilizar recursos por el orden de $ 658.000 millones anuales a nivel nacional, según el Estudio Nacional del Reciclaje y los Recicladores2.

A pesar de que el reciclaje de plástico no es nuevo, desde hace algunos años es muy frecuente encontrar campañas para reciclar tapas en centros comerciales, supermercados, farmacias, tiendas e incluso restaurantes. Así mismo, cada vez más personas y empresas se unen a fundaciones que a través del reciclaje buscan fondos para financiar su operación y requieren de la participación voluntaria del público para cumplir con su objeto de interés.3

Así pues, la Fundación Carlos Portela es una organización sin ánimo de lucro que desde hace dieciocho años brinda apoyo integral a los niños con cáncer y sus familias, cuya misión es la de mejorar la calidad de vida de dichas personas, proporcionando ayudas que respondan a sus necesidades inmediatas, además de un continuo acompañamiento emocional, jurídico y espiritual, encaminado a su bienestar integral.4

La fundación ha utilizado la campaña de tapas plásticas que se caracteriza por lograr que las personas recuperen este tipo de recursos y con su recolección se generen ingresos que contribuyan al cumplimiento de su misión. Pero actualmente, debido a la disminución de donación de tapas, la Fundación plantea nuevas estrategias de difusión que permitan que nuevos voluntarios se enteren del alcance de esta iniciativa y colaboren con esta labor.

1 Semana Sostenible. (2016, Noviembre 22). ¿Por qué se reciclan tapas plásticas? [en línea]. Disponible en: https://sostenibilidad.semana.com/medio-ambiente/articulo/tapas-plasticas-por-que-se-reciclan/36528. [Accedido: 14-dic-2018]

2 Estudio Nacional del Reciclaje y los Recicladores. Resumen ejecutivo del estudio nacional de reciclaje [en línea]. Disponible en: http://cempre.org.co/wp-content/uploads/2017/05/6575-estudio_nacional_de_reciclaje_resumen_ejecutivo.pdf. [Accedido: 1-feb-2019]

3 ¿Por qué se reciclan tapas plásticas?, Op. Cit. Disponible en internet: https://sostenibilidad.semana.com/medio-ambiente/articulo/tapas-plasticas-por-que-se-reciclan/36528. [Accedido: 14-dic-2018]

4 Fundación Carlos Portela. Conócenos [en línea]. Disponible en: http://fundacioncarlosportela.blogspot.com/p/nosotros.html. [Accedido: 6-dic-2018]

15

Por otro lado, las investigaciones realizadas para el desarrollo de este proyecto, dicen que “la tecnología ayuda a las personas a tomar decisiones informadas de manera efectiva y eficiente”5, y algunas afirman hacer uso de experiencias multimedia interactivas para “evocar en las personas una experiencia inmersiva y encarnada sobre cierta historia”6 y de esta manera el interés del público se puede ver motivado. Por lo tanto, este proyecto tiene como propósito la creación de una experiencia interactiva que funcione como apoyo a la estrategia de difusión de la campaña de reciclaje de tapas para ampliar su mensaje a otros mercados de interés.

5 XIONG, L., ALSADOON, A., MAAG, A., PRASAD, P.W.C., HOE, L. S. y ELCHOUEMI, A. “Rise of Social Media Marketing: A Perspective on Higher Education” en The 13th International Conference on Computer Science & Education (ICCSE 2018), Colombo, Sri Lanka, 2018, pp. 704-709.

6 MICHALSKY, C., TOLER, L. y SYKORA, S. “One Step: Interactive Posters to Raise Awareness of Poverty” en CHI 2018 Student Design Competition, Montréal, QC, Canada, 2018, pp. 1-6.

16

1. PLANTEAMIENTO DEL PROBLEMA

La Fundación Carlos Portela es una organización sin ánimo de lucro que brinda apoyo a los niños con cáncer y sus familias. Como parte de su estrategia para conseguir recursos cuenta con programas como: donación de tapas, siendo esta la mayor fuente de ingresos, recibiendo este tipo de recursos por parte de personas naturales e institucionales; rehabilitación de botellas de plástico, transformando envases reciclados en material utilizable; y por último, está la posibilidad de hacerse socio de la fundación o donar económicamente la cantidad que cada persona desee para contribuir a su causa.7

Según la directora de la fundación, María Fernanda Portela, la campaña de reciclaje de tapas plásticas ha sido en los últimos años la mayor fuente de ingresos, lo que ha permitido financiar las actividades que la fundación ofrece a su público objetivo.

En la actualidad, la cantidad de tapas donadas no es suficiente para cubrir la demanda que tiene la fundación y las posibles causas de esto son: 1) el desinterés de las personas por aportar a dicha campaña dado que el proceso puede ser muy exigente y algunas personas desconfían de la labor de la fundación; 2) las personas no conocen la campaña dado que a esta le hace falta difusión y puede no estar orientada al público objetivo correcto; 3) el proceso de recolección de las tapas puede ser difícil dado que se desconoce el destinatario y los tiempos para su recolecta pueden ser largos; 4) el bajo consumo de productos con tapas debido a los hábitos de alimentación saludable de las personas y de su economía.

Teniendo en cuenta lo anterior, este proyecto busca resolver la pregunta: ¿Cómo lograr con la implementación de una experiencia interactiva, motivar la participación de nuevos públicos en la campaña de donación de tapas para colaborar con la financiación de la Fundación Carlos Portela?

7 Fundación Carlos Portela, Op. Cit. Disponible en internet: http://fundacioncarlosportela.blogspot.com/p/nosotros.html.

17

2. JUSTIFICACIÓN

La Fundación Carlos Portela busca mejorar la calidad de vida de los niños que padecen cáncer y la de sus familias, proporcionando ayudas que respondan a sus necesidades inmediatas. El dinero recolectado sirve para brindarles apoyo integral, de tal manera que con un trabajo organizado puedan ofrecer asistencia económica, asesoría jurídica, necesidades básicas (útiles de aseo personal, ropa y alimentación) brindando también acompañamiento emocional por medio de actividades lúdicas, recreativas y culturales para asegurar en su totalidad su futuro.8

Si no se donan las suficientes tapas para cubrir la demanda de la fundación, es posible que esta no cumpla con sus propósitos organizacionales para brindar ayuda a los niños y sus familias.

Es por eso que se hace importante el desarrollo de este proyecto que busca apoyar la difusión de la campaña en cuestión, haciendo uso de la tecnología, más específicamente de una experiencia interactiva, pues proyectos tales como “One Step”, que fue creado para cerrar la brecha entre las personas afectadas por la pobreza y las que no lo son, emplean instalaciones interactivas y redes sociales para poner a la gente en los zapatos de las personas que viven en la pobreza, logrando atraer la atención de su público objetivo y haciendo que cada vez más personas conozcan la campaña9; también se encuentra el tema de los recorridos virtuales utilizados para el reclutamiento de estudiantes, que utiliza visitas virtuales y Facebook Live para atraer a más estudiantes a un determinado campus, investigación sobre la cual sus correspondientes análisis revelan que el factor tecnológico llevado a cabo tiene un impacto significativo y positivo en la movilización de estudiantes10; y al tener estas investigaciones como referentes, el presente proyecto tiene como meta lograr que un nuevo público conozca esta campaña y participe activamente de ella para ser parte de una iniciativa que beneficia directamente a la comunidad, mediante el desarrollo de una experiencia interactiva

8 Ibíd.

9 MICHALSKY, C. Op. Cit. pp. 1-6.

10 XIONG, L. Op. Cit. p. 704-709.

18

3. ANTECEDENTES

A continuación se presentan diversos estudios que han sido implementados para atender problemáticas similares y que tienen como punto de interés la divulgación de campañas que motiven la participación de usuarios:

3.1. RECORRIDO VIRTUAL PARA RECLUTAMIENTO DE ESTUDIANTES

“Esta investigación tiene como objetivo examinar el impacto de las redes sociales en el marketing de la educación superior, en términos de reclutamiento de estudiantes. Basado en una revisión de la literatura secundaria, este documento propone un marco para el reclutamiento de estudiantes. Los resultados esperados indicaron que existen varios enfoques que los mercadólogos podrían usar para llegar y reclutar a los futuros estudiantes de manera más efectiva. Estos enfoques incluyen el boca a boca electrónico positivo (e-WOM), las campañas de medios sociales, las visitas virtuales al campus y Facebook Live, que tienen un impacto significativo y positivo en el reclutamiento de estudiantes.

Esta investigación dice que la tecnología ayuda a las personas a tomar decisiones informadas de manera efectiva y eficiente. Se centra en dos tipos de tecnologías: visitas virtuales a campus y Facebook Live. En comparación con la visita al campus tradicional, que suele ser costosa y geográficamente desafiante para los estudiantes internacionales, la tecnología de realidad virtual no solo permite a los futuros estudiantes obtener vistas de 360 grados de las instalaciones y el entorno de la universidad, sino que también ahorra tiempo y dinero al personal en el curso de esfuerzo de reclutamiento (“Campus de Realidad Virtual”). Aparentemente, las universidades pueden diferenciarse de otras al mostrar sus mejores características en una gira de este tipo. Una de las compañías más famosas es YouVisit, que ha ayudado a muchas universidades a crear recorridos virtuales con contenido atractivo e informativo. Se sugiere que las visitas al campus desempeñen un papel fundamental en la adquisición de nuevos estudiantes”.11

De este modo, dicho método de reclutamiento se puede utilizar para el desarrollo de este proyecto, dado que se podría hacer uso de un recorrido virtual que pudiera llamar la atención de las personas mostrándoles quizá cómo se vive en la fundación, qué hacen, cómo ayudan a los niños con cáncer y sus familias. Mediante realidad virtual, mostrar de qué manera afecta el apoyo de las demás personas a través de la donación de tapas plásticas con la labor diaria de la

11 Ibíd.

19

fundación. Exhibir los efectos y consecuencias claramente positivas que traen a muchas personas al donar tapas.

3.2. ONE STEP: CARTELES INTERACTIVOS PARA CREAR CONCIENCIA SOBRE LA POBREZA

“One Step fue creado para cerrar la brecha entre las personas afectadas por la pobreza y las que no lo son. Mediante el uso de instalaciones interactivas y redes sociales para poner a la gente en "los zapatos" de las personas que viven en la pobreza, One Step pretende crear una respuesta emocional y comprensión en sus espectadores y fomentar una relación entre las personas afectadas por la pobreza y los estudiantes en Bryan/College Station.

Se cree que la instalación interactiva es una excelente manera de evocar una experiencia inmersiva y encarnada sobre cierta historia.

Por lo tanto, se enfocaron en crear carteles interactivos para que un usuario pueda sumergirse en la historia. El concepto del primer póster fue poner al usuario "en los zapatos" de alguien que vive en la pobreza. La experiencia comienza mostrando al usuario en un hogar seguro. Pero luego, los elementos que los rodean lentamente comienzan a desaparecer para representar los efectos iniciales de la pobreza. De repente, el ambiente cambia a una esquina ruidosa y concurrida para mostrar qué tan rápido alguien puede perder su hogar y caer en la pobreza extrema. Al final de la experiencia, los usuarios pueden optar por participar en la campaña de redes sociales compartiendo su captura de pantalla en Twitter. Todo esto se hacía a través de Arduino, Processing y Madmapper.”12

12 MICHALSKY, C. Op. Cit. pp. 1-6.

20

Figura 1. Primer póster interactivo de One Step

Fuente: MICHALSKY, C., TOLER, L. y SYKORA, S. “One Step: Interactive Posters to Raise Awareness of Poverty” en CHI 2018 Student Design Competition, Montréal, QC, Canada, 2018, p. 4.

“El concepto para la segunda instalación es que trabajar juntos como comunidad es la única forma de superar la pobreza. En el lado izquierdo de un monitor grande, se mostraban estereotipos generales de pobreza. Cuando un usuario se mueve delante de la pantalla, aparecen palabras en el lado derecho del monitor que alteran la frase original de la izquierda. La nueva frase ahora es más positiva y muestra cómo se debe ayudar a los vecinos en la pobreza en lugar de juzgarlos erróneamente. Esto se hizo usando una función de seguimiento de movimiento”.13

13 Ibíd.

21

Figura 2. Segundo póster interactivo de One Step

Fuente: MICHALSKY, C., TOLER, L. y SYKORA, S. “One Step: Interactive Posters to Raise Awareness of Poverty” en CHI 2018 Student Design Competition, Montréal, QC, Canada, 2018, p. 5.

De este proyecto podemos rescatar el uso de herramientas (como el reconocimiento de imagen, seguimiento de movimiento, Arduino) para la creación de experiencias multimedia para crear conciencia de un tema de importancia social, que en este caso vendría siendo la situación de muchas familias en las que se encuentran niños que padecen cáncer.

Se podrían crear entonces, para el desarrollo de este proyecto, posters interactivos o simplemente utilizar el reconocimiento facial y las animaciones para mostrar a las personas un antes y un después de la situación de los niños con cáncer cuando las personas donan tapas plásticas a la fundación. Se puede hacer que las personas externas (posibles contribuidores a la campaña) se “pongan en los zapatos” de las personas afectadas mediante una animación que la haga ver como una beneficiaria de la fundación y pueda ver lo que le ocurriría cuando las personas donen o no tapas.

22

3.3. MULTIMEDIA PARA EL PATRIMONIO CULTURAL

“Esta investigación reúne opiniones e ideas compartidas durante la sesión de discusión final en el 1er Taller Internacional sobre Multimedia para el Patrimonio Cultural, como un resumen de los problemas y posibles direcciones para resolverlos.

Se debe hacer que la tecnología funcione de la manera que los usuarios esperan, empleando paradigmas de interacción natural. Por lo tanto, la intuición de una interfaz natural es necesaria incluso porque la mayoría de estos sistemas están orientados a entornos públicos. Considere, por ejemplo, la navegación interactiva en el sitio arqueológico de Shawbak propuesto por Alisi (Fig. 3, a y b), sistema basado en la interacción natural diseñado para representar contenido multimedia relacionado con el sitio mencionado; o el sistema de comprensión de la señalización manual en entornos 3D propuesto por Colombo (Fig. 3, c), en el que se explota un sistema no intrusivo basado en la visión por computadora para la interacción persona-computadora en 3D para aumentar la recuperación de información (de artistas y obras de arte) mientras se visita un museo. Grana mostró una estación multimedia multitáctil (Fig. 3, d y e) para la exploración interactiva de manuscritos iluminados, utilizando técnicas clásicas de procesamiento de imágenes, como las características de color utilizadas en diferentes contextos y el etiquetado rápido de componentes conectados, combinado con nuevos enfoques de realimentación de relevancia. Estos son ejemplos adecuados para instalaciones interactivas innovadoras de interés para los recursos del patrimonio cultural”.14

14 CUCCHIARA, R., GRANA, C., BORGHESANI, D., AGOSTI, M. y BAGDANOV, A. D. “Multimedia for Cultural Heritage: Key Issues”, pp. 206-216, 2012.

23

Figura 3. Ejemplos de instalaciones interactivas innovadoras para aplicaciones de patrimonio cultural

Fuente: CUCCHIARA, R., GRANA, C., BORGHESANI, D., AGOSTI, M. y BAGDANOV, A. D. “Multimedia for Cultural Heritage: Key Issues”, p. 209, 2012.

De los ejemplos dados en esta investigación, se pueden rescatar varios aspectos, como las herramientas utilizadas para llamar la atención de las personas. Si lo que se quiere en este proyecto es invitar a las personas a conocer y apoyar la campaña de reciclaje de tapas, se pueden emplear técnicas como la navegación interactiva o un sistema no intrusivo basado en visión por computadora para la interacción en 3D para aumentar la recuperación de información, en este caso, concerniente a la campaña y sus antecedentes: cómo empezó, por qué se debe apoyar, qué beneficios trae a la sociedad, de qué forma cambia la vida de una persona el apoyar la campaña.

También se podría recurrir a la creación de una estación multimedia multitáctil, pero esta vez no para la exploración interactiva de manuscritos iluminados, sino para la exploración de la fundación y las personas que de ella se benefician. Para explorar los efectos que trae el apoyar la campaña, cómo cambia el entorno de los niños con cáncer y sus familias con la ayuda de las personas.

24

3.4. CAMPAÑA PARA REDUCIR EL CONSUMO INDEBIDO DE ALCOHOL ENTRE ESTUDIANTES-ATLETAS UNIVERSITARIOS

“Este estudio examina el impacto de una intervención de normas sociales para reducir el uso indebido de alcohol entre los estudiantes atletas. La intervención se diseñó para reducir las percepciones erróneas dañinas de las normas de los compañeros y, a su vez, reducir el riesgo personal.

Se utilizó una variedad de técnicas de intervención que promovieron la información sobre estudiantes atletas, entre ellas: un programa multimedia interactivo permitió a los usuarios desplazarse a través de los medios impresos y datos adicionales, mostrar comentarios en video de educadores pares y personal de estudiantes atletas y competir en concursos de preguntas sobre datos de estudiantes atletas proporcionados por el programa”.15

Con base en lo presentado de esta investigación, se puede llevar a cabo para el desarrollo de este proyecto la creación de un programa multimedia que informe a las personas sobre la campaña de reciclaje de tapas para apoyar a niños con cáncer y sus familias, ofreciendo también juegos de preguntas en los que se puedan sumar puntos y se brinde información adicional con cada nivel acertado sobre las consecuencias positivas que trae a la sociedad al contribuir a la campaña.

15 PERKINS, H. W. y CRAIG, D. W., “A Successful Social Norms Campaign to Reduce Alcohol Misuse Among College Student-Athletes”, pp. 880-889, 2006.

25

4. OBJETIVOS

4.1. OBJETIVO GENERAL

Desarrollar una experiencia interactiva que funcione como apoyo a la estrategia de difusión de la campaña de reciclaje de tapas para la Fundación Carlos Portela.

4.2. OBJETIVOS ESPECÍFICOS

- Analizar el contexto en la fundación Carlos Portela para definir el perfil de usuario y los requerimientos funcionales y no funcionales de la experiencia multimedia.

- Diseñar un objeto interactivo a partir de los requerimientos establecidos.

- Implementar el diseño del objeto interactivo de acuerdo con las características del diseño.

Evaluar el alcance de la experiencia multimedia con el público objetivo seleccionado.

26

5. MARCO TEÓRICO

5.1. EXPERIENCIA MULTIMEDIA

“Según Tim Morris, un sistema multimedia puede considerarse un sistema informático diseñado para reproducir contenido multimedia, ya sea audio, imagen, video o gráfico, simplemente texto. Desde la perspectiva de los usuarios, multimedia significa una combinación de dos o más medios continuos que se reproducen en un intervalo de tiempo, generalmente audio y video. La integración de todos estos medios en una computadora, nos permite usar la potencia de cómputo para representar la información de manera interactiva. Según Jensen, la interactividad es: "una medida de la capacidad potencial de un medio para permitir al usuario ejercer influencia sobre el contenido o la forma de la comunicación mediada".

Para Liu (1999), una experiencia multimedia, inherente a su naturaleza, incluirá diferentes tipos de contenido multimedia.

Hudgeons y Lindley (2010) agregaron que una experiencia multimedia interactiva se ve comprometida con la interacción de la audiencia y su especificación incluye un segmento de experiencia que tiene una pluralidad de elementos multimedia y sus atributos.

Una experiencia multimedia puede utilizar dos o más sentidos, individual o al mismo tiempo. Típicamente, la experiencia multimedia involucra diferentes tipos de medios. Los medios pueden ser presentados individualmente o sincronizados. Los usuarios pueden interactuar con los medios de comunicación, con otros usuarios y coordinar la exhibición de medios (vistas múltiples)”.16

5.2. DISEÑO INTERACTIVO

“El diseño interactivo (también conocido como diseño de medios interactivos o diseño de medios digitales) cubre un amplio espectro de medios, incluidos videojuegos, DVD educativos, sitios web, dispositivos móviles, televisión e interfaces de pantalla táctil.

16 CARDOSO, W., AIRES, T. y SOARES, S. “Multimedia experience in telemedicine: A strategy for recovering live surgery transmissions”.

27

El diseño interactivo expande y enriquece los medios tradicionales; permite que las audiencias se involucren, compartan, comenten e interactúen con el contenido, a diferencia de los medios estáticos (a veces denominados medios pasivos, como películas, impresos y televisión) que no requieren interacción directa ni comentarios de su audiencia. El diseño interactivo se ha convertido en una parte importante de todos los medios, ya que las marcas y las compañías de medios desean conectarse con sus consumidores de manera más significativa”.17

“El diseño interactivo se define como la conformación de productos y servicios digitales para el uso de las personas, aunque se reconoce que el alcance del diseño interactivo se extiende más allá de esta definición para incluir sistemas complejos y entornos inmersivos también”.18

“Un buen diseño interactivo presenta un universo cerrado y completo. Deje de lado las cosas pequeñas para que pueda implementar las características importantes por completo. El énfasis no está en la parsimonia sino en el cierre, aunque el diseño parsimonioso a menudo es necesario para lograr el cierre. Solo recuerde que cada falla en el cierre de su sistema filtrará a los usuarios al vacío de espacio de características no anticipado. Sus usuarios, estrangulados en el vacío, percibirán una deficiencia y lo culparán por ello, con toda razón. La gama expresiva de su diseño debe estar herméticamente sellada contra tales fugas.

Hay dos medios por los cuales puede fallar en lograr el cierre: su elección de conjunto de características y su interfaz de usuario. Demasiados diseñadores sucumben al orgullo excesivo de crear productos que intentan demasiado. En su afán por expandir el universo de su diseño, incorporan características de la mejor manera posible, sin reconocer las crecientes expectativas geométricas que tales características inculcan en los usuarios. Cada vez que agregue una nueva característica a un diseño, esa característica puede interactuar con cualquier otra característica en su diseño. Nunca debe considerar lo que podría suceder si la herramienta de corrección de gamma se usara junto con el traductor de idioma coreano, pero algunos de sus usuarios seguramente lo harán. Le incumbe a usted anticipar todas esas combinaciones posibles y proveerlas.

Pero el problema se extiende más allá de la mera posibilidad de combinaciones no anticipadas de características existentes. Una nueva característica agregada a un

17 SALMOND, M. y AMBROSE, G. The Fundamentals of Interactive Design. Londres: AVA Publishing, 2013.

18 STEANE, J. The Principles and Processes of Interactive Design, Londres: Bloomsbury Publishing Plc, 2014.

28

programa a menudo sugiere características relacionadas al usuario. Si agrega una función sinusoidal hiperbólica a su aplicación de productividad, sería mejor que incorpore la función de coseno hiperbólica y la función de tangente hiperbólica, así como la inversa de cada una de estas funciones; Al crear una función, también ha creado la expectativa de otras cinco. Si permite que el usuario exporte un formato de archivo especial, también debe permitir que el usuario importe ese formato de archivo. Si su juego muestra una puerta, el usuario debe poder abrir esa puerta. Si su procesador de textos ofrece superíndices, también debe ofrecer subíndices.”19

5.3. DISEÑO EMOCIONAL

“El diseño emocional fue propuesto por Donald Norman en su libro, "Diseño emocional". La definición común de diseño emocional es la experiencia, que se basa en las necesidades emocionales y espirituales, crea productos agradables y, finalmente, hace felices a las personas. En este libro, Norman revela tres niveles de la naturaleza humana desde la perspectiva de la psicología perceptiva: instintiva, conductual y reflexiva. Norman considera la relación entre tres niveles de diseño y características de los productos como: nivel instintivo de apariencia de diseño; Diseño a nivel de comportamiento divertido y eficiente; Nivel reflexivo de autoimagen, satisfacción personal y memoria.

El diseño instintivo, que presta atención a la visualización, brinda a los usuarios sentimientos intuitivos. El diseño de comportamiento, que se centra en la operación, presenta la experiencia del usuario desde las operaciones. El diseño reflectivo, que se centra en la emoción, es equivalente a la mejora de la experiencia del usuario”.20

5.4. INTERACCIÓN SOCIAL

“De acuerdo con la disciplina de la sociología, la interacción social es la acción de dos o más personas que pueden observarse mutuamente interdependientes.21

19 CRAWFORD, Chris. THE ART OF INTERACTIVE DESIGN: A Euphonious and Illuminating Guide to Building Successful Software. San Francisco: Judy Ziajka, 1950. p. 85.

20 WANG, S. y YUAN, H. “Deeper User Experience - Emotional Design”, Springer International Publishing AG, pp. 188-195, 2019. 21 MANSOUR, S., BENNETT, L. y RUDE-PARKINS, C. How the Use of Second Life Affects E-Learners’ Perceptions of Social Interaction in Online Courses, SYSTEMICS, CYBERNETICS AND INFORMATICS, vol. 7, no. 2, pp. 1-6, 2009.

29

Se supone que la interacción social es el vehículo fundamental para la transmisión dinámica de los conocimientos culturales e históricos.

Una definición de interacción social establece que, como mínimo, dos personas que intercambian información son esenciales. Además, la interacción social implica cierto grado de reciprocidad y bidireccionalidad entre estos participantes (aunque se debe reconocer que hay grados de ambos). La interacción social asume así la participación activa de ambos participantes en el intercambio, aportando diferentes experiencias y conocimientos, tanto cualitativos como cuantitativos”.22

5.5. DISEÑO DE EXPERIENCIAS

“Nathan Shedroff, un pionero en diseño de experiencia, expande la definición de la siguiente manera:

El diseño de experiencia es un enfoque para crear experiencias exitosas para personas en cualquier medio. Este enfoque incluye consideración y diseño en las 3 dimensiones espaciales, a lo largo del tiempo, los 5 sentidos comunes y la interactividad, así como el valor para el cliente, el significado personal y el contexto emocional. Diseño de experiencia no es simplemente el diseño de páginas web u otros medios interactivos o contenido digital en pantalla. Las experiencias diseñadas pueden realizarse en cualquier medio, incluidas instalaciones espaciales / ambientales, productos impresos, productos duros, servicios, imágenes y sonidos de transmisión, presentaciones y eventos en vivo, medios digitales y en línea, etc.

El objetivo principal del diseño de experiencia no es simplemente proporcionar una experiencia divertida para los clientes. Es encontrar una manera de conectar a sus clientes con algo que creará una impresión positiva y duradera. Si lo hace, obtendrá un negocio leal para usted, una mejor experiencia para su cliente y la posibilidad de que los clientes ayuden a otros en formas que antes eran inalcanzables. Las reseñas de los clientes de Amazon.com son un gran ejemplo de esto.”23

22 GARTON, A. F. Social Interaction and the Development of Language and Cognition. U.K.: Lawrence Erlbaum Associates Ltd., 1992.

23 LEE KING, David. Designing the Digital Experience: How to Use EXPERIENCE DESIGN Tools & Techniques to Build Websites Customers. Nueva Jersey: CyberAge Books, 2008. p. 111.

30

“Creemos que el diseño de la experiencia es un marco estratégico que permite a una empresa colaborar más efectivamente con el diseño con el objetivo de crear valor e involucrar a los clientes, incluso a medida que cambia el contexto ambiental más amplio. Creemos que proporciona la estructura correcta para ayudar a diferenciar a su empresa de sus competidores, a la vez que aborda la innovación y reacciona ante el cambio externo de una manera más informada y antifrágil.

El diseño de la experiencia considera que la naturaleza del valor real proporcionado a los clientes, junto con la naturaleza de las experiencias que los clientes tienen a lo largo del tiempo y en todos los puntos de contacto, definirá cómo se sienten los clientes acerca del negocio, cómo interpretan su marca y cómo refleja la verdadera naturaleza del negocio.

El diseño de la experiencia se enfoca en administrar este sistema a lo largo del tiempo con el objetivo de mantener a los clientes comprometidos con el valor durante el mayor tiempo posible.

El diseño de la experiencia no es lo mismo que el diseño del servicio al cliente, ni el diseño de la organización o de los procesos de negocios. Es el diseño para todas las actividades que dan vida a la marca de manera más efectiva a través del valor real para el cliente y el desarrollo de un nivel de intención y calidad en todo lo que se hace en nombre del cliente. De nuevo, el énfasis está en el por qué, no solo en el cómo.”24

5.6. MARKETING BTL

“Según Guerrilla (2009) la publicidad BTL es reconocida por sus siglas en inglés las cuales se leen como below the line que traducido al español textualmente significa “debajo de la línea”. Esta conceptualización hace referencia a la denominación que se le da a ciertas campañas publicitarias por los tipos de implementos o herramientas que utilizan para dar a conocer la marca.

Según Salazar (2015):

24 NEWBERY, Patrick, FARNHAM, Kevin. Experience Design: A Framework for Integrating Brand, Experience, and Value-Wiley. New Jersey: John Wiley & Sons, Inc., 2013. p. 71–72.

31

El BTL describe todas las actividades de marketing que no involucran la compra de medios tradicionales. Las comunicaciones BTL se han convertido en un importante componente en el desarrollo de la marca. Los BTL son actividades que permiten interactuar con un grupo objetivo de personas, estas actividades son desarrolladas en lugares con grandes afluencias de personas.

Andrade y Cabeza (2013) añaden:

Los medios BTL, o no convencionales, son una técnica publicitaria no masiva y más personalizada, dirigida a segmentos específicos del mercado; se enfocan en los medios directos de comunicación, entre los principales: el telemercadeo, el internet, el e-mailing y la venta personal, los cuales generalmente van destinados a listas de contactos mayormente segmentadas y por ende el mensaje es más personalizado. Sin embargo, los BTL no son únicamente venta personal o e-mailing, no son solo medios directos, sino también es la publicidad exterior y cualquier otro medio creativo e ingenioso el cual llegue con un mayor enfoque a un segmento más específico del mercado. Los BTL son reconocidos por la creatividad que utilizan para transmitir sus mensajes publicitarios y porque permiten al público tener una mayor interacción directa con el anuncio.

Las estrategias BTL por lo general tienen el objetivo de transmitir la marca, pero cabe destacar que dichas estrategias sirven para crear reconocimiento de la empresa en el corto plazo.

Básicamente antes de poner en práctica las técnicas BTL se deben de tomar en cuenta aspectos que son indispensables para las campañas de marketing, los cuales son: conocer el perfil del comprador, tener seleccionado el target, tener una lista actualizada de los clientes y sus datos, seleccionar el instrumento BTL que más se acerque a las necesidades de la entidad. Es por ello que una vez planteadas las diferentes características es necesario que se tomen en consideración las diferentes formas de hacer BTL:

- Activaciones de marca: esta es una de las estrategias BTL más utilizadas, de hecho cuando a un marketero se le habla sobre este tema no cabe duda que planteará como ejemplo este instrumento comúnmente usado. Se vuelve una oportunidad valiosa para que el staff recopile información del consumidor y se cree comunicación estrecha entre los diferentes actores (López, 2017).

- Event marketing: pueden ser mejor comprendidos como congresos, festivales, ferias, convenciones, exposiciones; al igual que las activaciones, este espacio es

32

aprovechado para la recolección de información del consumidor, por medio de las redes sociales, correos o número telefónicos captados se puede hacer envío de noticias de hechos relevantes (MG Global Marketing Razonable, 2015).

- Sampling: generalmente los hacen los retailers. En este sentido el actor principal son los promotores y cuando los individuos se acercan a degustar el producto, estos son capaces de brindar una reseña de los beneficios del artículo que están probando.

- Escaneo de código QR: con la era de los teléfonos smart, ahora es posible a través de un scan de código de barras obtener información en la web en cualquier momento. Esta es conveniente ya que no incurre con costos porque todo se maneja de forma digital.

- Descarga de aplicaciones: En este sentido este es parecido al nombrado anteriormente con la diferencia de que los usuarios tendrán accesos múltiples en la aplicación móvil. La parte complicada es el desarrollo de esta aplicación, misma que si implica altos costos de dinero, pero luego del lanzamiento le dará ventajas competitivas al negocio.”25

5.7. INBOUND MARKETING

“El inbound marketing es una táctica que combina la redacción de contenido con la automatización de marketing y tiene una metodología basada en cuatro acciones: atraer tráfico de visitantes; convertir visitantes en clientes potenciales (clientes potenciales); cerrar contactos con compradores potenciales y cautivar a los consumidores para el boca a boca en el futuro. En general, el modelo de cuatro pasos de inbound marketing sugiere estrategias automatizadas integradas como blogs, redes sociales, marketing por correo electrónico, mensajes, páginas de destino, etc. (Justino, 2016).

El inbound marketing es un conjunto de tácticas de marketing centradas en atraer clientes relevantes a una organización para comprar sus productos y servicios. La propuesta es que los especialistas en marketing produzcan videos que los clientes potenciales deseen ver, publiquen blogs a los que los compradores deseen suscribirse e implementen contenido y herramientas que los líderes calificados pretendan perseguir (Steenburgh, Avery y Dahod, 2011).

25 SALAS LUZURIAGA, Edgar. El BTL como acciones de construcción de marca. [en línea] 2018. Disponible en: http://revistaespirales.com/index.php/es/article/view/357/293.

33

Según Lusch y Vargo (2009, p. 6), el inbound marketing está “diseñado para lograr más efectividad, eficiencia y efectividad cuando los clientes son vistos como socios para trabajar con marketing y co-creadores de valor, que es la esencia de lógica dominante de servicios".

El inbound marketing es la técnica de llegar y convertir a consumidores calificados mediante la creación y la búsqueda de tácticas orgánicas en entornos en línea a través de elementos como la interactividad y el compromiso. La interactividad y el compromiso ofrecen a los especialistas en marketing la oportunidad de fomentar relaciones valiosas que trascienden las limitaciones de los medios tradicionales y permiten conversaciones continuas con clientes interesados en productos o servicios (Opreana y Vinerean, 2015). En la Tabla 1, se presentan las principales diferencias entre el inbound marketing y el marketing tradicional.”26

Tabla 1. Marketing tradicional vs Inbound Marketing

Criterios Marketing tradicional Inbound Marketing

Base Interrupción Orgánico

Enfoque Encontrar clientes Ser encontrado por clientes potenciales, existentes y aspiracionales

Objetivo Aumento de ventas Cree relaciones duraderas al llegar y convertir a los consumidores

Público objetivo

Grandes audiencias Clientes potenciales interesados

Tácticas Anuncios impresos, anuncios de televisión, anuncios de vallas publicitarias, llamadas en frío, ferias comerciales, listas de correo

Blogs, libros electrónicos, libros blancos, videos de Youtube, Vimeo, etc., tácticas de optimización de motores de búsqueda (SEO), infografías, seminarios web, Feeds, RSS, tácticas de marketing en redes sociales.

Fuente: CORRÊA DA SILVA, Nôga Simões de Arruda y VIEIRA, Valter Afonso. Efeitos das Mídias Digitais nas Novas Vendas B2B: Um ensaio sobre inbound marketing, mídias pagas e ganhadas on-line. En: Effects of Digital Media on B2B Sales: An essay on inbound marketing, paid and online media. Mayo-Agosto, 2019, v. 18, n. 2. p. 197.

26 CORRÊA DA SILVA, Nôga Simões de Arruda y VIEIRA, Valter Afonso. Efeitos das Mídias Digitais nas Novas Vendas B2B: Um ensaio sobre inbound marketing, mídias pagas e ganhadas on-line. En: Effects of Digital Media on B2B Sales: An essay on inbound marketing, paid and online media. Mayo-Agosto, 2019, v. 18, n. 2. pp. 196-197.

34

6. METODOLOGÍA

Para el desarrollo de este proyecto se utilizó una metodología que se basa en el usuario, que hace referencia al enfoque de desarrollo de sistemas multimedia y consta de cinco fases subdivididas en actividades a realizar para el correcto cumplimiento de cada una de ellas.

6.1. ETAPAS DEL PROYECTO

6.1.1. Fase cero: definición de la estrategia

Articula los objetivos del negocio, con lo que se desea obtener con el desarrollo del sistema multimedia (en este caso, experiencia interactiva). Se definieron alcance, plan de trabajo, necesidades del equipo. Se deja claro el impacto y lo que se espera obtener con el sistema.

Actividades sugeridas:

Identificación preliminar de contexto y negocio.

Entrevistas con stakeholders.

Definición de metas tras implementación del sistema.

Definición de cronograma y recursos.

6.1.2. Fase uno: contexto, usuarios y sistema

Una vez se identificaron las metas y valores agregados de la potencial solución con la experiencia interactiva, dentro del negocio, se inició lo siguiente:

Identificación de contexto y espacio a intervenir.

Desarrollo del perfil de los usuarios del sistema.

35

Elaboración del mapa de proposición de valor.

Identificación de tareas de interacción (requerimientos funcionales y no funcionales).

6.1.3. Fase dos: concepto y prototipo

Esta fase también es conocida como “Diseño de la interacción”. Según Santiago Bustelo, consultor en UX y diseñador de interacción, “el diseño de interacción es una de las principales disciplinas en el campo de experiencia de usuario. Su alcance es definir las formas en que un usuario puede tomar contacto con maquinarias, sistemas y servicios, las respuestas de estos, y el flujo de los procesos que resultan de ese diálogo interactivo, teniendo como meta lograr mejores experiencias para la mayor cantidad de usuarios”.

Actividades:

Selección de herramientas.

Elaboración de prototipos.

6.1.4. Fase tres: producción e integración

Se trató de la implementación del sistema como tal, teniendo en cuenta todo el proceso de planeación y desarrollo llevado a cabo en las fases anteriores.

6.1.5. Fase cuatro: evaluación

Hace referencia a la evaluación integral del sistema multimedia (funcional, no funcional y de UX).

Tareas para pruebas, desde la ingeniería de software:

Diseño de las pruebas.

36

Generación de los casos de prueba.

Definición de los procedimientos de la prueba.

Ejecución de la prueba.

Realización de un informe de la prueba

37

7. RESULTADOS Y DISCUSIÓN

7.1. FASE CERO: DEFINICIÓN DE LA ESTRATEGIA

7.1.1. Identificación preliminar de contexto y negocio

La Fundación Carlos Portela es una entidad sin ánimo de lucro en la que trabajan con una población de casi 600 menores con cáncer o enfermedades en la sangre, de la mano de padres de familia, voluntarios, empleados y donantes, quienes contribuyen a la causa de la fundación luchando por defender los derechos de dichos menores. Para financiarse, cuentan con estrategias como el reciclaje de botellas de plástico (las cuales son convertidas en material utilizable), la asociación de personas naturales o jurídicas y la donación de tapas plásticas, siendo esta la actividad principal por medio de la cual obtienen la mayor cantidad de ingresos.

La campaña de reciclaje de tapas plásticas, al convertirse en su mayor fuente de ingresos, ha permitido financiar todas las actividades con las que cuenta la fundación. De esta manera, lo que se logra recaudar a través de esta estrategia, sirve para brindar a los beneficiarios de la fundación apoyo integral, ofreciendo así asistencia económica, asesoría jurídica, necesidades básicas (útiles de aseo personal, ropa y alimentación) y acompañamiento emocional por medio de actividades lúdicas, recreativas y culturales.

Sin embargo, hablando con la directora de la fundación, María Fernanda Portela, se obtuvo información valiosa sobre esta campaña de tapas plásticas y su difusión, ya que, según ella misma, “en este momento no hay difusión de la campaña”, pues da por hecho que todo el mundo la conoce y que las alianzas (con personas naturales y jurídicas) ya están establecidas. Expresó que tienen convenios con cadenas de supermercados como Almacenes La 14, Surtifamiliar Alameda y tiendas Cañaveral, también con gran parte de Laboratorios Ángel y algunos colegios. Pero a pesar de estas alianzas y estrategias, afirmó que pasaron de recoger 7 toneladas de tapas plásticas mensuales donadas, a 2 toneladas mensuales, es decir, se redujo en un 72% la cantidad mensual de tapas recolectadas.

Afirmó también que las personas que más donan tapas son la gente mayor, esposas jubiladas, parejas entre los 60 y 70 años de edad, además de ser el estrato alto uno de los diferenciadores de la mayoría de personas que realizan

38

donaciones de tapas. Y añadió que las personas que menos donan, son los adolescentes y personas entre los 20 y 30 años de edad.

7.1.2. Entrevistas con stakeholders

Stakeholders entiéndase como todas las personas que influyen directa o indirectamente con la problemática y experiencia multimedia a desarrollar. En la Fundación Carlos Portela se identificaron cinco stakeholders; como stakeholders primarios se encuentran los donantes, y como stakeholders secundarios se encontraron los voluntarios, empleados, recicladores y beneficiarios. Para este caso, concierne solo tratar con los stakeholders primarios.

7.1.2.1. Stakeholders primarios – Donantes

Tabla 2. Stakeholders primarios – Donantes

Donantes

Datos Demográficos

Hombres y mujeres de todas las edades, desde niños de 6 años hasta gente mayor de 70 años, de todos los estratos sociales (bajo, medio y alto).

Personas jurídicas o empresas, cadenas de supermercados, colegios.

Descripción del perfil

Donan a la fundación tapas plásticas, reciclaje, ropa, implementos de aseo y comida.

Información extra

39

7.1.2.2. Stakeholders secundarios – Voluntarios

Tabla 3. Stakeholders secundarios – Voluntarios

Voluntarios

Datos demográficos

Mujeres y hombres en su mayoría jóvenes, entre 23 y 28 años, pero también están las señoras mayores de 50 años.


Se encargan de la publicidad (fotos, videos, etc.), ayudan en eventos especiales. Algunos acuden de acuerdo a las necesidades específicas que se presenten en ciertos momentos. Realizan inventarios de los implementos de aseo y comida. Organizan el jardín.

Información extra

Estudiantes de colegio, de universidad, profesionales de pregrado, madres de familia.

7.1.2.3. Stakeholders secundarios – Empleados

Tabla 4. Stakeholders secundarios - Empleados

Empleados

Datos Demográficos

Hombres y mujeres, entre 24 y 68 años.


Contestan el teléfono, organizan juntas, están pendientes de las donaciones. Preparan la comida. Hacen las rutas para recoger las tapas plásticas. Seleccionan el reciclaje. Atienden en el “pulguero”.

Información extra

Padres y madres de familia, estudiantes.

40

7.1.2.4. Stakeholders secundarios – Recicladores

Tabla 5. Stakeholders secundarios – Recicladores

Recicladores

Datos Demográficos

Mayores de 17 años.


Le compran tapas plásticas, reciclaje y ropa usada (“pulguero”) a la fundación.

Información extra

7.1.2.5. Stakeholders secundarios – Beneficiarios

Tabla 6. Stakeholders secundarios - Beneficiarios

Beneficiarios

Datos Demográficos

Niños y niñas de todas las edades (desde recién nacidos hasta los 16 años) y sus padres o familiares encargados de su cuidado.


Algunos se hospedan en la sede de la fundación. Otros simplemente se benefician con insumos como medicamentos, comida, implementos de aseo, recreación para los niños.

Información extra

Personas que no tienen suficientes recursos económicos. Muchos no residen en Cali.

7.1.3. Definición de metas tras implementación del sistema

Se estableció una meta global que se debe cumplir una vez el sistema multimedia esté implementado:

Apoyar la difusión de la campaña de reciclaje de tapas de la Fundación Carlos Portela.

41

7.1.4. Definición cronograma y recursos

Figura 4. Cronograma del proyecto

7.2. FASE UNO: CONTEXTO, USUARIOS Y SISTEMA

7.2.1. Identificar contexto y espacio a intervenir

Se realizó un análisis del contexto y usuarios respectivamente, siendo los estudiantes de primer a décimo semestre de la Universidad Autónoma de Occidente el público objetivo de este proyecto. La encuesta (ver Anexo A) realizada a los usuarios constaba de tres partes puntuales: una para contextualizar

42

y conocer a los usuarios, otra para conocer el problema y la última para conocer aspectos de la solución.

Con base en la comunicación y la información recopilada después de entrevistar a los usuarios y analizar su contexto, se logró llegar a un análisis de dicho perfil, el cual es mostrado a continuación en la tabla:

Tabla 7. Análisis de los usuarios potenciales

ANÁLISIS DE USUARIOS

ASPECTOS GEOGRÁFICOS (país, estado, región, ciudad)

Los usuarios son estudiantes de la Universidad Autónoma de Occidente de la ciudad de Cali, Valle del Cauca en Colombia.

ASPECTOS DEMOGRÁFICOS (edad, género, ingresos, profesión, escolaridad)

Los usuarios son de ambos géneros, entre las edades de 17 y 22 años, los cuales su mínima escolaridad es secundaria.

ASPECTOS PSICOGRÁFICOS (Intereses de estilo de vida, motivos para adquirir el producto, características socio-culturales, hábitos)

Contribuyen o han contribuido al reciclaje de tapas para ayudar al medio ambiente. Están dispuestos a colaborar con campañas sociales como las de una fundación, con dicho reciclaje.

ASPECTOS CONDUCTUALES (grado de utilización, motivos de compra, uso de tecnología)

Los estudiantes de la Universidad Autónoma de Occidente tienen acceso a dispositivos tecnológicos como smartphones, tablets, computadores y/o portátiles.

7.2.2. Desarrollar un perfil de los usuarios del sistema

Se detalla información sobre los usuarios (stakeholders primarios) para los cuales es diseñado el sistema multimedia. Se detallan datos demográficos, su relación con la tecnología y los equipos tecnológicos que utilizan habitualmente, intereses y motivaciones relacionados con el proyecto a desarrollar. Se presenta el perfil de los usuarios a continuación:

43

Figura 5. Perfil del usuario

7.2.3. Elaborar el mapa de proposición de valor

El mapa de proposición de valor es una propuesta gráfica que sirve para conocer al cliente, sus tareas habituales y qué problemas o necesidades tiene, en contraposición a la propuesta de valor que se ofrece. De esta manera, muestra también las características del sistema propuesto y los beneficios que el cliente puede esperar de él. Esto se hace identificando, por la parte del perfil del cliente, los siguientes ítems:

Actividades habituales o diarias: hace referencia a los trabajos o actividades que intenta realizar el cliente regularmente, relacionadas con el producto o servicio que se va a ofrecer.

44

Dolores: situaciones o costos no deseados que experimenta el cliente al realizar las actividades anteriores.

Beneficios: hace referencia a los aspectos positivos que el cliente espera obtener al realizar las actividades anteriores.

Y ahora por la parte de la propuesta de valor, los siguientes ítems:

Productos y servicios: son aquellos que se ofrecen al cliente para ayudarlo con las actividades ya señaladas.

Analgésicos: se refiere a cómo se resuelven los problemas o necesidades (dolores) del cliente.

Creadores de valor: se refiere a cómo se están aportando beneficios al cliente con base en las expectativas del mismo, ya señaladas.

Como solución a lo anteriormente señalado, se ideó un juego de baloncesto con tapas plásticas, que muestre puntaje, información básica sobre la fundación y que almacene el número de tapas donadas

.

45

Figura 6. Mapa de proposición de valor

7.2.4. Identificación de tareas de interacción (requerimientos funcionales y no funcionales)

Los requerimientos del sistema nos cuentan las funciones principales que este debe cumplir, las cuales a su vez deben satisfacer las necesidades encontradas en el contexto analizado, brindando la solución más óptima para las mismas.

7.2.4.1. Requerimientos funcionales

El sistema debe permitir depositar tapas plásticas en un contenedor.

El sistema debe identificar cuando se deposite cualquier cantidad de tapas plásticas en el contenedor.

46

El sistema debe transmitir la información que obtenga el sensor a un computador.

El sistema debe dar una retroalimentación visual cuando sea depositada cualquier cantidad de tapas plásticas en el contenedor.

El sistema debe informar a los usuarios que la campaña hace parte de la Fundación Carlos Portela.

El sistema debe almacenar la cantidad de tapas depositadas en el contenedor.

7.2.4.2. Requerimientos no funcionales

El sistema debe identificar cuando se depositen tapas plásticas mediante un sensor de ultrasonido.

El sistema debe transmitir la información que obtenga el sensor a un computador mediante la placa Arduino y cables dupont.

El sistema debe brindar retroalimentación visual cuando sean depositadas tapas plásticas, haciendo uso de una pantalla.

El sistema debe brindar retroalimentación visual cuando sean depositadas tapas plásticas, mediante la comunicación entre Arduino y p5.js.

El sistema debe almacenar la cantidad de tapas depositadas en el contenedor en un navegador web de forma local.

7.3. FASE DOS: CONCEPTO Y PROTOTIPO

Inicialmente, se realizó una lluvia de ideas sobre alternativas de solución que pudieran implementarse para cumplir con el objetivo de este proyecto. Las alternativas fueron las siguientes:

Baloncesto con tapas plásticas: se trata de un contenedor de tapas con un agujero en la parte de arriba y un aro de baloncesto encima de él. Iría

47

acompañado de una pantalla en la que aparecería un mensaje invitando a jugar a las personas. El juego consistiría en que la persona lo active con una tapa y luego le muestre un puntaje, que empezará a contar e irá aumentando en la medida en que logre encestar tapas plásticas, en un límite de tiempo de 15 segundos. Finalmente, aparecería un puntaje máximo global, que se supondría motivaría a las personas a tratar de hacer más puntos, y el último mensaje en la pantalla sería un mensaje de agradecimiento por parte de la Fundación Carlos Portela por jugar mientras donaban tapas plásticas.

Figura 7. Baloncesto con tapas plásticas

Póster interactivo: sería un sistema que consista en una pantalla que muestre inicialmente una imagen del estado de los niños con cáncer y sus familias si no reciben donaciones de tapas (tristes, aburridos, sin los implementos necesarios para hacerle frente a la situación que están viviendo, etc.); y un recipiente en el que se depositen tapas y a medida que se llegue a cierta cantidad establecida, la imagen en la pantalla vaya cambiando y mostrando una evolución positiva.

Se trataría entonces de un recipiente con 3 o más sensores de ultrasonido ubicados a lo largo del interior del contenedor y cuando las tapas depositadas tapen el primer sensor, la imagen debe hacer su primer cambio positivo y el contador debe llenarse hasta la primera meta y así sucesivamente con cada sensor hasta que la imagen sea 100% positiva.

Se mostrarían imágenes de los niños tristes, solos, sin los insumos que necesitan, e irían cambiando mostrando a los niños con medicamentos, servicios médicos, comida, hospedaje, etc. hasta que estén felices y rodeados de su familia.

48

Figura 8. Póster interactivo

Elección de historias: consiste en crear otros pósters interactivos con dos recipientes de tapas y una pantalla. Cuando la gente deposite cierta cantidad de tapas en uno de los dos recipientes, se debe mostrar una determinada historia. Cuando se deposite la misma cantidad en el segundo recipiente, se debe mostrar una historia diferente. Las historias estarían relacionadas con la fundación o algún otro dato de interés para los usuarios, de modo que en el primer recipiente podría haber un cartel que dijera “¿Quieres saber qué ocurre con tus tapas donadas?” y en el segundo recipiente, un cartel que dijera “¿Quieres saber cómo impacta el reciclaje de tapas al medio ambiente?”.

Figura 9. Elección de historias

49

Animación evolutiva: consiste en realizar animaciones repetitivas que cuenten una historia ficticia en la que se represente metafóricamente al cáncer atacando a un niño (como un monstruo) y que lo único que lo salve sea la donación de tapas. Sería un loop (o ciclo) que se pone en marcha iniciando con una escena en la que un niño deba escapar de un monstruo y cuando una persona deposite una o cualquier otra cantidad de tapas previamente establecida en un contenedor, la animación cambie y muestre una siguiente escena en la que el niño haya evitado al monstruo pero no sea el final de la historia. Y así hasta llegar a la última escena en la que se muestre un desenlace feliz para el niño gracias a toda la donación efectuada.

Figura 10. Animación evolutiva

Luego de plantear las alternativas presentadas anteriormente, se realizó un proceso de selección mediante el método denominado AHP, comparando cada una de las alternativas entre ellas con respecto a cuatro criterios que son: costo, retroalimentación visual en pantalla, almacenamiento de información y límite de tiempo de uso, establecidos con base en los requerimientos del proyecto. Entonces, inicialmente se establece el cumplimiento o el valor de cada criterio para cada alternativa, para de esta forma realizar las comparaciones posteriores correctamente y con base en esta información. Esto se muestra a continuación:

50

Tabla 8. Cumplimiento de criterios por alternativa

Criterios Baloncesto Póster

interactivo Elección de

historias Animación evolutiva

Costo $2,391,000.00 $2,398,000.00 $2,503,000.00 $2,378,000.00

Retroalimentación visual en pantalla

Sí Sí Sí Sí

Almacenamiento de información

Sí Sí No No

Límite de tiempo de uso Sí No Sí No

Después se realiza la matriz de comparación por pares de los criterios, para establecer la importancia o prioridad de cada uno, en donde la comparación entre dos criterios iguales (por ejemplo, costo vs costo) tendrá como valor 1, y la comparación entre criterios diferentes (por ejemplo, costo vs tiempo) deberá tener asignado un valor entre 1 y 9 a conveniencia del evaluador. A continuación se muestra dicha matriz y la normalización de la misma:

Tabla 9. Matriz de selección por pares de criterios

Criterios Valores

Costo Retroalimentación visual en pantalla


Límite de tiempo de uso

Costo 1.00 5.00 6.00 5.00


0.20 1.00 8.00 8.00


0.17 0.13 1.00 5.00

Límite de tiempo de uso 0.20 0.13 0.20 1.00

TOTAL 1.57 6.25 15.20 19.00

51

Tabla 10. Matriz de selección por pares de criterios normalizada

Criterios Normalizados

Promedio Costo




Costo 0.64 0.80 0.39 0.26 0.52


0.13 0.16 0.53 0.42 0.31


0.11 0.02 0.07 0.26 0.11


0.13 0.02 0.01 0.05 0.05

TOTAL 1.00 1.00 1.00 1.00 1.00

Luego se realiza la matriz de comparación por pares de las alternativas con respecto a cada criterio, siguiendo el mismo proceso de asignación de valores y mostrando también la normalización de cada matriz, así:

Tabla 11. Matriz de selección por pares de alternativas - Costo

Costo Valores

Baloncesto Póster interactivo Elección de


Baloncesto 1.00 8.00 7.00 0.17

Póster interactivo 0.13 1.00 0.17 0.14

Elección de historias 0.14 6.00 1.00 0.17

Animación evolutiva 6.00 7.00 6.00 1.00

TOTAL 7.27 22.00 14.17 1.48

Tabla 12. Matriz de selección por pares normalizada de alternativas - Costo

Costo Normalizados

Promedio Baloncesto Póster interactivo

Elección de historias

Animación evolutiva

Baloncesto 0.14 0.36 0.49 0.11 0.28

Póster interactivo 0.02 0.05 0.01 0.10 0.04

Elección de historias 0.02 0.27 0.07 0.11 0.12

Animación evolutiva 0.83 0.32 0.42 0.68 0.56

TOTAL 1 1 1 1 1

52

Tabla 13. Matriz de selección por pares de alternativas - Retroalimentación visual en pantalla


Valores



Baloncesto 1.00 5.00 5.00 5.00




TOTAL 1.60 6.40 11.20 16.00

Tabla 14. Matriz de selección por pares normalizada de alternativas - Retroalimentación visual en pantalla


Normalizados Promedio

Baloncesto Póster

interactivo Elección historias

Animación evolutiva

Baloncesto 0.63 0.78 0.45 0.31 0.54




TOTAL 1 1 1 1 1

Tabla 15. Matriz de selección por pares de alternativas - Almacenamiento de información


Valores



Baloncesto 1.00 5.00 6.00 6.00


Elección historias 0.17 0.17 1.00 5.00


TOTAL 1.53 6.33 13.20 18.00

53

Tabla 16. Matriz de selección por pares normalizada de alternativas - Almacenamiento de información



Baloncesto Póster

interactivo Elección de


Baloncesto 0.65 0.79 0.45 0.33 0.56




TOTAL 1 1 1 1 1

Tabla 17. Matriz de selección por pares de alternativas - Límite de tiempo de uso


Valores

Baloncesto Póster interactivo Elec. historias Anim. evolutiva

Baloncesto 1.00 6.00 5.00 6.00



Animación Evolutiva 0.17 0.20 0.20 1.00

TOTAL 1.53 12.20 6.40 17.00

Tabla 18. Matriz de selección por pares normalizada de alternativas - Límite de tiempo de uso



Baloncesto Póster interactivo Elec. historias Anim. evolutiva

Baloncesto 0.65 0.49 0.78 0.35 0.57




TOTAL 1 1 1 1 1

54

Y finalmente, se llevan a cabo los cálculos correspondientes con base en las matrices de selección anteriores. El valor asignado para cada alternativa se logra realizando la suma total de las multiplicaciones entre el promedio de la alternativa con respecto a un criterio, y el promedio de ese criterio.

A continuación se muestra como resultado los siguientes valores finales para cada alternativa:

Tabla 19. Resultado de calificación de alternativas

Alternativas Total

Baloncesto 0.41

Póster interactivo 0.14

Elección de historias 0.13

Animación evolutiva 0.32

Estos resultados, mostrando el puntaje más alto y el color verde asociado a la elección final, demuestran que la alternativa del juego de baloncesto es la propuesta de solución más apta para cumplir con el objetivo de este proyecto. Por lo cual, se procede a realizar la correspondiente selección de herramientas y elaboración de prototipos.

7.3.1. Selección de herramientas

Para el desarrollo e implementación del prototipo, se establecieron las siguientes herramientas para el hardware:

Arduino: es una placa electrónica con un microcontrolador reprogramable y un conjunto de pines por medio de los cuales se conectan sensores y/o actuadores, según se requiera.

Computador: brinda energía al Arduino y es aquí donde se programa y procesa todo lo necesario para que este funcione.

Sensor de ultrasonido: se encargan de medir la distancia a la que se encuentra un objeto mediante el uso de ondas ultrasónicas. Este emite una onda ultrasónica

55

y recibe la onda reflejada que retorna desde el objeto captado. Los sensores ultrasónicos miden la distancia al objeto contando el tiempo entre la emisión y la recepción.

Cables dupont: son utilizados para conectar el sensor de ultrasonido al Arduino.

Recipiente o contenedor: es el que contendrá todas las herramientas anteriores a excepción del computador, pues es a través del recipiente que existirá interacción con los usuarios (al depositar tapas plásticas en él).

Aro de baloncesto: irá encima del recipiente, para la apropiada interacción de los usuarios.

Y para el software se establecieron las siguientes herramientas:

IDE de Arduino: mediante el software Arduino de código abierto se escribe código y se sube a la placa. Se ejecuta en Windows, Mac OS X y Linux. El entorno está escrito en Java y se basa en Processing y otro software de código abierto.

p5.js: es una biblioteca de JavaScript creada con el mismo objetivo original de Processing, hacer la programación accesible a artistas y diseñadores, reinterpretándola para la web actual. Permite programar sitios web interactivos, gráficas digitales interactivas y también interfaces con el ratón, teclado, cámara, y el resto de la web.

7.3.2. Elaboración de prototipos

Después de definir las herramientas, se estableció el modo de interacción con la experiencia interactiva, que sería así: al ser un juego de baloncesto con tapas plásticas, el usuario ve un recipiente grande que tiene un aro de baloncesto encima y un computador que muestra en la pantalla un mensaje introductorio al juego, invitándolo a jugar con la primera inserción de una tapa plástica por el aro de baloncesto. Cuando el usuario inserta la tapa, deberá aparecer un mensaje diferente en la pantalla que brinde las instrucciones del juego y posterior a esto, empezará a correr un tiempo límite (15 segundos) para que el usuario haga la mayor cantidad de cestas posibles con tapas plásticas que traiga consigo. Deberá existir también una marca en el piso a dos metros del contenedor aproximadamente, desde la cual la persona deberá tirar las tapas. Finalmente, se

56

mostrará el puntaje máximo que se haya hecho en el juego versus su puntaje logrado, y aparecerá un mensaje haciendo alusión a la Fundación Carlos Portela y agradeciendo la donación realizada.

A continuación se enseña el storyboard que muestra cómo sería la interacción entre los usuarios y la experiencia interactiva:

Figura 11. Escenarios 1 – 4

57



58

Figura 14. Escenario 13

El diseño de la navegación de las interfaces, se puede ver a continuación:

Figura 15. Interfaz inicial

59

Figura 16. Interfaz de instrucciones

Figura 17. Interfaz de puntaje con cuenta regresiva

60

Figura 18. Interfaz de puntaje con cuenta regresiva terminada

Figura 19. Interfaz de puntaje vs puntaje máximo

61

Figura 20. Interfaz de agradecimientos

Teniendo en cuenta las interfaces e interacción diseñadas que se mostraron anteriormente, el primer prototipo quedó de esta manera:

Figura 21. Prototipo - Mensaje inicial

62

Figura 22. Prototipo - Instrucciones del juego

Figura 23. Prototipo - Puntaje inferior a 30

63

Figura 24. Prototipo - Puntaje superior a 30

Figura 25. Prototipo - Puntaje superior a 50

64

Figura 26. Prototipo - Puntaje logrado vs Puntaje máximo

Figura 27. Prototipo – Agradecimientos

65

Figura 28. Prototipo – Contenedor

66

Figura 29. Prototipo integrado

7.4. FASE TRES: PRODUCCIÓN E INTEGRACIÓN

La mecánica del juego se basa en un juego de baloncesto con tapas plásticas. Lo que las personas verían inicialmente, sería una caja rectangular con un agujero, un aro de baloncesto encima de ella y una pantalla que invita a jugar, con el siguiente párrafo: “¿Quieres jugar? Deposita una tapa plástica para activar el juego”.

De esta manera, luego de que el usuario consiguiera una tapa y la depositara en la caja, la pantalla le indicaría las instrucciones del juego, con el siguiente párrafo: “Consigue la mayor cantidad de tapas plásticas que puedas y párate a 2 metros de distancia. Tendrás solo 15 segundos para lograr el mayor puntaje. ¡Empieza a tirar en 15!”. Cuando el usuario arrojara la primera tapa, el juego empezaría a sumar de a 10 por cada tapa que encestara, durante 15 segundos. Al acabarse el tiempo, el juego le mostraría al usuario su puntaje logrado versus el puntaje máximo que se hubiera alcanzado en todo el juego. Finalmente, aparecería un mensaje haciendo

67

referencia a la fundación y su labor, agradeciendo al usuario por participar en el juego y colaborar: “¡Muchas gracias por tu apoyo! Con la donación de tapas plásticas, contribuyes con la labor de la Fundación Carlos Portela que ayuda a los niños con cáncer y sus familias”.

Ahora, en términos técnicos, el proceso de desarrollo e implementación fue el siguiente:

Se conectó el sensor de ultrasonido al Arduino mediante los cables dupont, y el Arduino se conectó por USB al computador.

Para comprobar que el sensor funcionara correctamente, en el IDE de Arduino se colocó el respectivo código para que el sensor de ultrasonido obtuviera y mostrara los datos necesarios que demostraran que funcionaba correctamente, lo que usualmente se hace midiendo la distancia a la que encuentre presencia de un objeto cualquiera. Entonces, en la interfaz de Arduino se define inicialmente la placa que se está utilizando (modelo) y el puerto por el cual está conectado y por medio del cual se transmitirán los datos. Después se definen e inicializan dos de los cuatro pines del sensor que están conectados al Arduino (trig y echo) y que se encargan de enviar y recibir la señal que determinará la distancia a la que está un objeto. También se definen e inicializan las variables “duración” y “distancia”, pues la primera variable, se encarga de medir el tiempo en que se demora el sensor recibiendo la señal emitida hacia el objeto, para posteriormente realizar el cálculo de la distancia a la que este se encuenta. Se presenta el código a continuación:

68

Figura 30. Prueba de sensor ultrasónico en Arduino

Luego de comprobar el correcto funcionamiento del sensor, se programó en términos del objetivo del proyecto. Así, se creó e inicializó una nueva variable llamada “número”, la cual se enviaba por puerto serial (para comunicarse con p5) y era la señal para cuando el sensor detectara movimiento (una tapa plástica). Entonces, cuando la variable “número” fuera igual a 1, p5 se encargaba de realizar su correspondiente funcionalidad (cambio de interfaz). Cuando fuera igual a 0, p5 no hacía absolutamente nada. El valor que tenía dicha variable, entonces, se determinaba por el rango de distancia a la que captara presencia de algún objeto. Para este caso, se estableció que si captaba un objeto entre 18 cm y 24 cm distancia, el valor de la variable sería 1. Es decir, si un usuario encestaba una tapa, querría decir que pasaría por dicho rango de distancia y haría que el juego se activara. Toda la lógica anterior, se definió en Arduino dentro de una función llamada “capturarMovimiento”. Y se creó una función aparte para enviar el dato de la variable “número” por el puerto serial a p5, llamada “enviarNumero”. El código se muestra a continuación

:

69

Figura 31. Definición e inicialización de variables

Figura 32. Lógica de captura de movimiento

70

Después de esto, se realizó la integración del IDE de Arduino con p5.js para establecer la comunicación entre ambos, de modo que cuando Arduino leyera y transmitiera lo que el sensor detectara, p5 realizara las acciones esperadas.

Para la parte de p5, se requirió el uso de node.js que permite realizar la conexión con el servidor, pues es por medio de este que se obtendrá la información que capte el Arduino. Después se crean dos tipos de archivos: uno de tipo JS (JavaScript) en el que se desarrolla toda la lógica del sistema; y otro de tipo HTML que se encargará de mostrar toda la interfaz en el navegador. Ambos archivos se codifican utilizando el editor de código Visual Studio Code.

Para el archivo JS, inicialmente se definen e inicializan las variables. Es aquí donde se realiza también la conexión con el puerto, que debe ser el mismo que está utilizando Arduino, dado que es de esta forma como se conectan ambas herramientas y se obtiene la información que este capte. Luego se inicializa la interfaz gráfica de usuario, que es donde aparecerán los contadores de tiempo y de puntaje:

Figura 33. Inicialización de interfaz gráfica de usuario

Se crea una función en la que se leen los datos que el Arduino esté captando. De modo que si el Arduino envía un 1, quiere decir que se depositó una tapa y p5 deberá hacer los cambios respectivos de interfaces y la suma de puntos. Pero si envía un 0, es porque aún no se ha detectado nada. Además se adicionó una funcionalidad extra del sistema y se trata de que en la parte del puntaje, se muestren también dibujos o gráficos que representen un cambio de estado de algo no muy bueno a algo totalmente positivo a medida que las personas encesten más

71

y más tapas. En este caso, aparece un gráfico de niños tristes y aburridos, y a medida que se encestan más tapas, su estado de ánimo mejora y empiezan a aparecer insumos necesarios para los niños con cáncer (medicamentos, comida, hospedaje, etc.).

Figura 34. Lógica de puntaje y conteo de tapas

Luego se define la función en la que se ejecuta toda la lógica referente al cambio de secciones del sistema. Las secciones son: inicio (invitación a jugar), instrucciones, juego (en el que se ve el puntaje), marcador (puntaje vs puntaje máximo) y gracias (en el que se agradece a la persona por donar).

Figura 35. Función para cambio de secciones

72

Figura 36. Función para cambio de secciones (continuación)

Y finalmente, se crean las funciones en las que se ejecuta la lógica de los contadores de tiempo de forma regresiva. Un contador para las secciones de las instrucciones y el puntaje, y otro para las secciones del puntaje máximo y los agradecimientos.

Figura 37. Cuenta regresiva del tiempo de juego

73

Ahora, en el archivo HTML se tiene la estructura de cómo debe aparecer toda la información de las secciones establecidas en el archivo JS, presentando de manera preliminar la sección de “inicio”, en donde estará la invitación a jugar, además de plantearse también el espacio para el contador de tiempo; y se presentará después la sección de “instrucciones” con el respectivo texto:

Figura 38. Estructura del mensaje inicial e instrucciones

A continuación, la sección de “juego” que se encarga de mostrar el puntaje y las imágenes conforme se encesten tapas; la sección del “marcador” que muestra la comparación con el puntaje máximo; y la sección “gracias” que hace alusión a la Fundación Carlos Portela y brinda agradecimientos por donar tapas:

Figura 39. Estructura del juego, marcador y agradecimientos

74

En resumen, a medida que el sensor ultrasónico detecte el paso de tapas plásticas, es decir, que sean encestadas en el contenedor, el IDE de Arduino envía la señal y p5 realiza el cambio de interfaces y el conteo de puntuación correspondiente sumando 10 por cada tapa encestada, dentro del límite de tiempo (15 segundos).

7.5. FASE CUATRO: EVALUACIÓN

7.5.1. Diseño de las pruebas

En primera instancia, se definieron los objetivos de las pruebas de usuario que se ejecutarían, siendo los siguientes:

Conocer si el sistema llama la atención de las personas.

Saber si las personas llevan tapas para jugar.

Saber si las personas se dan cuenta que la campaña hace parte de la Fundación Carlos Portela.

Saber si les gustó el juego y si lo volverían a utilizar.

Saber qué modificaciones le harían al juego.

Saber si el juego los motiva a recolectar tapas.

Conocer problemas de usabilidad generales del sistema.

Posteriormente, se estableció que el método de evaluación sería observación y una entrevista posterior al uso de la experiencia interactiva. Es decir, se situaría el sistema en algún espacio dentro de la Universidad Autónoma de Occidente y desde lejos, se estaría realizando observación para saber si realmente llamaría la atención de las personas por sí solo y cómo interactuarían con él.

7.5.2. Generación de los casos de prueba

Para este proyecto, se realizaron los siguientes casos de prueba:

75

Que al insertar una tapa en la pantalla inicial, la interfaz cambiara a la siguiente (instrucciones).

Que la segunda interfaz (instrucciones) cumpliera con 15 segundos antes de pasar a la siguiente (puntaje).

Que al insertar tapas mientras se muestra la interfaz de las instrucciones, no pasara nada (ni cambio de interfaz ni conteo de puntaje), hasta que se cumpliera el tiempo mencionado en el punto anterior.

Que en la tercera interfaz (puntaje) mostrara el conteo de tiempo que tiene el usuario para jugar de forma regresiva (15 segundos) y el puntaje.

Que el puntaje incrementara de a 10 por cada tapa encestada.

Que al pasar los 15 segundos de juego, cambiara a la cuarta interfaz (puntaje máximo) y mostrara el puntaje logrado versus el puntaje máximo.

Que la interfaz del puntaje máximo durara 6 segundos antes de pasar a la siguiente (agradecimientos).

Que al insertar tapas durante la interfaz del puntaje máximo, no hiciera conteo alguno ni cambio de interfaz.

Que la quinta y última interfaz (agradecimientos) durara 6 segundos antes de volver a la pantalla inicial.

Que al insertar tapas durante la interfaz de agradecimientos, no pasara nada (ni cambio de interfaz ni conteo de puntaje).

Que al insertar una tapa estando en la pantalla inicial y no volver a insertar tapas en el resto del juego, las interfaces hagan los cambios de acuerdo a los tiempos que se les establecieron a cada una y no se realice conteo en el puntaje.

76

7.5.3. Definición de los procedimientos de la prueba

Al establecerse los métodos de observación y entrevista para evaluar la experiencia interactiva, el procedimiento de la prueba sería estar observando desde lejos para saber si realmente llamaría la atención de las personas y si usarían el sistema. Además, el objetivo también sería saber si el sistema se puede defender por sí solo y si los usuarios lograrían utilizarlo apropiadamente; es decir, cómo sería el acercamiento con la experiencia interactiva sin intervención de ninguna otra persona.

Posterior a esto, cuando la persona terminara de usar el sistema, se realizaría el apropiado acercamiento y se le haría una breve entrevista, registrada en formato de audio si autorizaba (ver Anexo B), para saber si el prototipo había cumplido con los objetivos propuestos.

7.5.4. Ejecución de la prueba

En la primera iteración, se situó el sistema en InfoLab (sótanos 1 de la Universidad Autónoma de Occidente) y se observó desde lejos el comportamiento de los usuarios al respecto.

Llamaba la atención de las personas (incluso de los que no eran estudiantes, como personal técnico y administrativo). Se acercaban a ver qué era, leían la pantalla, intentaban mirar dentro de la caja y una sola persona depositó una tapa para activar el juego, pero al ver que requería más tapas para jugar, simplemente se fue.

Otra persona se acercó y preguntó qué era el sistema y al explicarle que se trataba de un juego de baloncesto y que necesitaba tapas plásticas para jugar, mostró interés en recolectarlas para jugar pero igualmente se fue.

La conclusión de esta sesión fue que los usuarios, al ver el sistema por primera vez y no saber con anticipación que se trataba de tener recolectado cierto número de tapas para jugar, simplemente no jugarían porque no tenían cómo conseguirse fácilmente las tapas en ese momento. Por lo que, para probar correctamente si el sistema funcionaba y motivaba a jugar, se decidió realizar una segunda iteración de la prueba incluyendo un recipiente adicional con tapas para que las personas pudieran utilizarlas para jugar, si así lo querían.

77

Figura 40. Pruebas de usuario – Primera iteración

Figura 41. Pruebas de usuario – Primera iteración (2)

78

En la segunda iteración, el sistema se situó en más sitios dentro de sótanos y se incluyó el recipiente adicional con tapas.

Primero, se situó nuevamente en InfoLab. Llamaba bastante la atención de las personas, incluso de aquellas que no eran estudiantes, como personal técnico y administrativo. Esta vez las personas sí utilizaron la experiencia interactiva y jugaron. Hubo usuarios que repitieron el juego hasta 3 veces.

Luego se situó en la parte de las máquinas expendedoras de sótanos, pero la gente no lo notaba mucho, además de que no pasaban muchas personas por ahí. La mayoría seguían derecho sin darse cuenta de que el sistema estaba allí. Por lo cual, decidió moverse de sitio nuevamente, al frente de las Salas 1 de internet, en donde sí logró llamar la atención de las personas, tanto estudiantes, como personal técnico y hasta la de una niña.

Cada vez que los usuarios terminaban de utilizar el sistema, se hacía el debido acercamiento y se les realizaba la entrevista planteada, obteniendo así los resultados que responderían al cumplimiento de los objetivos de la prueba.

Figura 42. Pruebas de usuario – Segunda iteración

79

Figura 43. Pruebas de usuario – Segunda iteración (2)

Figura 44. Pruebas de usuario – Segunda iteración (3)

80

7.5.5. Realización de un informe de la prueba

Como se mencionó en el punto anterior, la primera iteración dio como conclusión que hacía falta “entrenar” a los usuarios, dándoles a conocer primero la experiencia interactiva para que luego tuvieran el tiempo de recolectar y llevar sus tapas para jugar. Por lo que se decidió realizar una segunda iteración adicionando otro recipiente lleno de tapas de manera que la gente pudiera utilizarlas para jugar si así lo querían.

A partir del análisis de las entrevistas realizadas en las pruebas de usuario, se encontraron los siguientes resultados (ver Anexo C):

El 100% de las personas que jugaron, entendieron el sistema y consideraron que toda la información presentada en la pantalla era necesaria para la experiencia. Sin embargo dieron comentarios adicionales al respecto que se mencionarán posteriormente.

El 89,5% de los usuarios se dieron cuenta de que la experiencia multimedia estaba relacionada con la fundación Carlos Portela y su campaña de tapas. Y al 100% de las personas que utilizaron el sistema les gustó y lo encontraron entretenido e innovador.

De esta manera, se obtuvieron los siguientes comentarios de los usuarios que utilizaron el juego de baloncesto con tapas:

Debería dejarse por un poco más de tiempo el último mensaje que aparece, el que informa que el juego se relaciona con la donación de tapas para la fundación. Al menos 3 o 5 segundos más.

Debería durar un poco más el juego. No 15 segundos sino 30, para alcanzar a acomodarse y tirar con más calma las tapas.

Colocar un cartel o algo visible en la caja, que diga no solo que es de la Fundación, sino que es para la donación de tapas, explícitamente.

Ponerle sonido cuando encesten.

81

Poner el logo de la fundación un poco más grande.

Dejar el puntaje de cada persona durante más tiempo.

Que la pantalla esté más cerca de la cesta, porque el usuario se concentraba más en encestar la tapa pero no en ver el puntaje porque el computador estaba a un lado, por lo que era difícil llevar su propio seguimiento.

El color naranja que tenía la experiencia interactiva es bastante llamativo.

Reducir un poco el texto de las instrucciones.

Es llamativo, innovador, divertido y entretenido.

Observaciones adicionales por parte del evaluador:

Las personas pedían indicaciones sin haber depositado la primera tapa.

Algunas personas sentían temor al aproximarse al sistema. Veían el portátil y no sabían si debían acercarse o no, o si lo podían utilizar.

Cuando jugaban, botaban muchas tapas al suelo y al terminar de jugar, se concentraban más en recoger las tapas que en ver su puntaje o el mensaje final.

El primer mensaje que muestra el juego (que invita a activarlo con una tapa) no era claro para algunas personas. Y al llegar a la siguiente pantalla (la de las instrucciones), a veces no leían todo y empezaban a tirar las tapas sin empezar el juego aún.

82

8. CONCLUSIONES

La experiencia interactiva desarrollada en este proyecto, permitió dar a conocer de una manera entretenida, llamativa e innovadora, a la fundación Carlos Portela y su campaña de reciclaje de tapas plásticas, mediante una nueva estrategia de difusión. Además, a pesar de que el público objetivo del proyecto era la población estudiantil de primer a décimo semestre de pregrado de la Universidad Autónoma de Occidente, el sistema no tiene límites de género, edad, estrato socioeconómico, ni de ningún otro tipo para ser usado.

El sistema implementado tuvo buenos comentarios por parte de los usuarios que interactuaron con él y creó una experiencia agradable para ellos, mientras colaboraban a su vez con la causa de la fundación Carlos Portela.

La implementación de esta experiencia interactiva demuestra cómo un sistema multimedia puede colaborar en la solución a problemas en campos diferentes al tecnológico, como lo es el apoyo a una causa social.

Para el desarrollo de este proyecto, se requirió la investigación sobre temas diferentes a los que se brindan durante la carrera de Ingeniería multimedia, como lo es el tema del marketing y la publicidad, dado que se trataba de implementar una nueva estrategia de difusión para la campaña de tapas de la fundación y requería información base de ese tipo.

El hecho de que este proyecto se haya desarrollado como pasantía comunitaria, hace necesario que el análisis e investigación preliminar del contexto deban hacerse con la mayor inmersión posible, dado que es información que solo se conseguirá con la observación y experiencia dentro de dicho contexto. En el caso específico de este proyecto, se pudo tener contacto cercano con niños, familiares y voluntarios de la fundación pero se requirió en mayor medida realizar entrevistas previamente estructuradas con minuciosidad (teniendo en cuenta los objetivos del proyecto) a la directora de la fundación, ya que era ella quien daba la información pertinente sobre la campaña de tapas, para su posterior análisis.

Los métodos utilizados en el proceso de desarrollo técnico para conocer tanto al público objetivo como al cliente (entrevista y mapa de proposición de valor), permitieron definir los requerimientos funcionales y no funcionales de la propuesta de solución. Y el método AHP, que es un modelo multicriterio utilizado para la toma de decisiones, permitió realizar el correcto análisis de las correspondientes alternativas de solución planteadas para finalmente escoger la más óptima.

83

El realizar una pasantía comunitaria en una fundación como lo es Carlos Portela, planteó nuevas perspectivas sobre lo que son las causas sociales y lo que representan, dejando enseñanzas tanto personales como profesionales, siendo el crecimiento personal lo más particular de dicha experiencia. Además, demuestra cómo el conocimiento adquirido se puede poner en marcha en un contexto diferente no solo al académico sino incluso al laboral.

84

9. RECOMENDACIONES

Dado que este proyecto se desarrolló haciendo uso de un sensor de ultrasonido, el cual se encargaba de avisar cuando detectaba el paso de algo (tapas, en este caso) enviando una señal cada 10 milisegundos, a veces cuando pasaba una tapa muy grande en frente de él, la tomaba como si fuera más de una porque se demoraba más que las otras en pasar, por lo que esto se veía reflejado en el puntaje haciendo un doble o triple conteo. Es por esto que en un trabajo futuro se recomienda trabajar con otro tipo de sensor que, mientras el objeto pase de manera ininterrumpida, haga un solo conteo, sin importar el tiempo que demore pasando.

Para este proyecto, se utilizó un portátil para realizar el procesamiento que requería la conexión de Arduino con el sensor; y para mostrar en pantalla la interacción con el sistema, pero se recomienda que la información se vea en una pantalla estilo TV y no en un computador, de forma que se pueda poner arriba de la cesta de baloncesto. Y para el procesamiento, podría hacerse uso de una placa Raspberry Pi que se conecte directamente al Arduino y a la pantalla, teniendo en cuenta que esta necesita toma corriente para su alimentación.

85

BIBLIOGRAFÍA

C. MICHALSKY, L. TOLER y S. SYKORA, “One Step: Interactive Posters to Raise Awareness of Poverty” en CHI 2018 Student Design Competition, Montréal, QC, Canada, 2018, pp. 1-6.

CARDOSO, W., AIRES, T. y SOARES, S. “Multimedia experience in telemedicine: A strategy for recovering live surgery transmissions”.

CORRÊA DA SILVA, Nôga Simões de Arruda y VIEIRA, Valter Afonso. Efeitos das Mídias Digitais nas Novas Vendas B2B: Um ensaio sobre inbound marketing, mídias pagas e ganhadas on-line. En: Effects of Digital Media on B2B Sales: An essay on inbound marketing, paid and online media. Mayo-Agosto, 2019, v. 18, n. 2. p. 196-197.

CRAWFORD, Chris. THE ART OF INTERACTIVE DESIGN: A Euphonious and Illuminating Guide to Building Successful Software. San Francisco: Judy Ziajka, 1950. p. 85.

CUCCHIARA, R., GRANA, C., BORGHESANI, D., AGOSTI, M. y BAGDANOV, A. D. “Multimedia for Cultural Heritage: Key Issues”, pp. 206-216, 2012.

Estudio Nacional del Reciclaje y los Recicladores. Resumen ejecutivo del estudio nacional de reciclaje [en línea]. Disponible en: http://cempre.org.co/wp-content/uploads/2017/05/6575-estudio_nacional_de_reciclaje_resumen_ejecutivo.pdf. [Accedido: 1-feb-2019]

FUNDACIÓN CARLOS PORTELA. Conócenos [en línea]. Disponible en: http://fundacioncarlosportela.blogspot.com/p/nosotros.html. [Accedido: 6-dic-2018]

GARTON, A. F. Social Interaction and the Development of Language and Cognition. U.K.: Lawrence Erlbaum Associates Ltd., 1992.

L. Xiong, A. Alsadoon, A. Maag, P.W.C. Prasad, L. S. Hoe y A. Elchouemi, “Rise of Social Media Marketing: A Perspective on Higher Education” en The 13th International Conference on Computer Science & Education (ICCSE 2018), Colombo, Sri Lanka, 2018, pp. 704-709.

86

LEE KING, David. Designing the Digital Experience: How to Use EXPERIENCE DESIGN Tools & Techniques to Build Websites Customers. Nueva Jersey: CyberAge Books, 2008. p. 111.

MANSOUR, S., BENNETT, L. y RUDE-PARKINS, C. How the Use of Second Life Affects E-Learners’ Perceptions of Social Interaction in Online Courses, SYSTEMICS, CYBERNETICS AND INFORMATICS, vol. 7, no. 2, pp. 1-6, 2009.

MICHALSKY, C., TOLER, L. y SYKORA, S. “One Step: Interactive Posters to Raise Awareness of Poverty” en CHI 2018 Student Design Competition, Montréal, QC, Canada, 2018, pp. 1-6.

NEWBERY, Patrick, FARNHAM, Kevin. Experience Design: A Framework for Integrating Brand, Experience, and Value-Wiley. New Jersey: John Wiley & Sons, Inc., 2013. p. 71–72.

PERKINS, H. W. y CRAIG, D. W., “A Successful Social Norms Campaign to Reduce Alcohol Misuse Among College Student-Athletes”, pp. 880-889, 2006.

SALAS LUZURIAGA, Edgar. EL BTL COMO ACCIONES DE CONSTRUCCIÓN DE MARCA. [En línea] 2018. Disponible en: http://revistaespirales.com/index.php/es/article/view/357/293.

SALMOND, M. y AMBROSE, G. The Fundamentals of Interactive Design. Londres: AVA Publishing, 2013.

Semana Sostenible. (2016, Noviembre 22). ¿Por qué se reciclan tapas plásticas? [en línea]. Disponible en: https://sostenibilidad.semana.com/medio-ambiente/articulo/tapas-plasticas-por-que-se-reciclan/36528. [Accedido: 14-dic-2018]

STEANE, J. The Principles and Processes of Interactive Design, Londres: Bloomsbury Publishing Plc, 2014.

WANG, S. y YUAN, H. “Deeper User Experience - Emotional Design”, Springer International Publishing AG, pp. 188-195, 2019.

87

XIONG, L., ALSADOON, A., MAAG, A., PRASAD, P.W.C., HOE, L. S. y ELCHOUEMI, A. “Rise of Social Media Marketing: A Perspective on Higher Education” en The 13th International Conference on Computer Science & Education (ICCSE 2018), Colombo, Sri Lanka, 2018, pp. 704-709.

88

ANEXOS

Anexo A. Encuesta de contextualización y análisis de usuarios

99

Anexo B. Entrevista de pruebas de usuario

103

Anexo C. Resultado de entrevistas de pruebas de usuario

EXPERIENCIA INTERACTIVA COMO APOYO A LA DIFUSIÓN DE LA ...

Documents

Transcript of EXPERIENCIA INTERACTIVA COMO APOYO A LA DIFUSIÓN DE LA ...