Implementación de un ciclo de mejora en Tecnologías de los nuevos medios audiovisuales: Diseño web

215 Implementación de un ciclo de mejora en Tecnologías de los nuevos medios audiovisuales: Diseño web María Nieves Corral Rey Esta obra se distribuye con la licencia Creative Commons Reconocimiento-NoComercial-SinObraDerivada 4.0 Internacional (CC BY-NC-ND 4.0.) Implementación de un ciclo de mejora en Tecnologías de los nuevos medios audiovisuales: Diseño web Implementation of an Improvement Cycle in New Audiovisual Media Technologies: Web Design María Nieves Corral Rey ORCID: https://orcid.org/0000-0002-3365-097X Universidad de Sevilla Departamento de Comunicación Audiovisual y Publicidad [email protected] DOI: http://dx.doi.org/10.12795/9788447227631.015 Pp.: 215-227 216 217 Implementación de un ciclo de mejora en Tecnologías de los nuevos medios audiovisuales: Diseño web María Nieves Corral Rey Esta obra se distribuye con la licencia Creative Commons Reconocimiento-NoComercial-SinObraDerivada 4.0 Internacional (CC BY-NC-ND 4.0.) Resumen La implementación de este Ciclo de Mejora en el aula (CIMA) se ha llevado a cabo en la asignatura Tecnologías de los nuevos medios audiovisuales y tuvo como objetivo trabajar la importancia de la Experiencia de Usuario (UX) y la Interfaz de Usuario (UI) en el diseño web. Se trata de una asignatura de 3º del Grado en Comunicación que se cursa en el segundo cuatrimestre y busca una mejora del aprendizaje de los conceptos que intervienen en el diseño web fruto de la aplicación del lenguaje de marcado HTML5 y CSS3. En la presente aportación se detalla el diseño de la experiencia docente y los resultados obtenidos en el aprendizaje de los estudiantes, que reflejan una consistente mejora en los cuestionarios posteriores al CIMA desarrollado. Palabras clave: Enseñanza universitaria, Tecnologías de los nuevos medios audiovisuales, Comunicación Audiovisual, Diseño web, Desarrollo profesional docente. Abstract The implementation of this Improvement Cycle in the Classroom (CIMA) has been carried out in the subject Technologies of New Audiovisual Media and aimed to work on the importance of User Experience (UX) and User Interface (UI) in web design. It’s a subject of 3º of the Degree in Communication that and seeks to improve the learning of the concepts involved in web design as a result of the application of the HTML5 and CSS3 markup language. This contribution details the design of the teaching experience and the results obtained in student learning, which show an improvement developed in the questionnaires after the CIMA. Keywords: University teaching, New Audiovisual Media Technologies, Audiovisual Communication, Web Design, Teacher Professional Development. 217 Implementación de un ciclo de mejora en Tecnologías de los nuevos medios audiovisuales: Diseño web María Nieves Corral Rey Esta obra se distribuye con la licencia Creative Commons Reconocimiento-NoComercial-SinObraDerivada 4.0 Internacional (CC BY-NC-ND 4.0.) Descripción del contexto La asignatura Tecnologías de los nuevos medios audiovisuales forma parte del plan de estudios de 3º del Grado en Comunicación Audiovisual. Se trata de una asignatura de carácter obligatorio que se puede cursar en dos turnos horarios (mañana o tarde). La aplicación del CIMA se ha desarrollo concretamente en el grupo 1 en el cual la profesora imparte docencia, que cada año suele tener aproximadamente entre 85-90 estudiantes matriculados y ha tenido una duración de ocho horas distribuidas en cuatro sesiones de dos. La docencia de las titulaciones de este centro se establece conforme a tramos de dos horas y la asignatura se imparte dos días a la semana. Las sesiones de los martes se imparten en un aula magistral convencional, pero teniendo en consideración el carácter práctico de la asignatura, al inicio del curso académico se hace reserva previa del aula de informática Mac 2 para los jueves durante todo el segundo cuatrimestre en el que es cursada. Esta aula cuenta con el software necesario para el desarrollo de las actividades previstas, facilitando los recursos materiales a los estudiantes y contribuyendo favorablemente a su aprendizaje. Es importante tener en consideración que Bain (2005) pone de manifiesto que es positivo que el profesor pregunte constantemente a los estudiantes si van entendiendo las explicaciones. Y esto es esencial tanto para el aprendizaje de un software, como para la comprensión de los conceptos que se desprenden de los principios de la Experiencia de Usuario y la Interfaz de Usuario en el diseño web, principios en los cuales se articula este planteamiento. Diseño previo del CIMA En este apartado se describe el diseño de este Ciclo de Mejora en el Aula. Se plantea aquí el mapa de contenidos, el modelo metodológico seguido, la secuencia detallada de actividades y los resultados del cuestionario de evaluación que han respondido los estudiantes. Se pretende que este planteamiento sea significativo para ellos tanto dentro del aula como en su futuro laboral como comunicadores en el contexto de la creación de contenido audiovisual en general –y el diseño web en particular– que facilite la interacción con el usuario, para lo cual la creatividad, unos principios básicos de diseño web y el trabajo en pequeños subgrupos son pilares fundamentales para asimilar los contenidos que se plantean. 218 219 Implementación de un ciclo de mejora en Tecnologías de los nuevos medios audiovisuales: Diseño web María Nieves Corral Rey Esta obra se distribuye con la licencia Creative Commons Reconocimiento-NoComercial-SinObraDerivada 4.0 Internacional (CC BY-NC-ND 4.0.) Para esta interacción es imprescindible tener en cuenta que no todos los estudiantes funcionan y se activan de la misma forma, pues las instrucciones se pueden ignorar o malinterpretar, tampoco todos los subgrupos de trabajo funcionarán de la misma manera y podrán surgir diversos obstáculos entre los estudiantes (Finkel, 2008). Mapa de contenidos y problemas claves El mapa de contenidos se ha ideado a partir de la concepción de un proyecto que permita la participación de toda la clase y, en particular, el trabajo por subgrupos. En consonancia con ello, se ha optado por configurar el CIMA en torno a los principios que intervienen en el diseño web. Pero, se parte de la base de que los estudiantes ya están familiarizados con los elementos que intervienen, pues ya han interiorizado la mecánica de inserción de códigos correspondiente a distintos elementos básicos en un CIMA previo (4 horas). No obstante, en este planteamiento se pretende que lo contextualicen en una estructura GUI (Interfaz Gráfica de usuario) y analicen si los trabajos prácticos desarrollados por los compañeros aplican unos principios de la Experiencia de Usuario (UX) e Interfaz de Usuario (UI) que puedan ser satisfactorios para un hipotético usuario. Antes de llegar a este punto deben entender su importancia y para ello se toman como referencia esta pregunta que abre el mapa de contenidos (véase figura 1): ¿Cuál es la importancia de los componentes de la GUI para dar una estructura y mejorar la Experiencia de Usuario e Interfaz de Usuario en el diseño web tomando como referencia los elementos aprendidos anteriormente? Esta pregunta se trabajará en dos bloques: 1) Importancia de la UX-UI y componentes que favorecen la construcción de una interfaz de usuario interactiva: análisis de ejemplos de páginas web reales; y 2)¿Cómo lo han materializado los compañeros en su trabajo práctico1? Análisis y testeo de los trabajos de los compañeros a través de un instrumento de validación. Ahora bien, esto nos lleva a plantear una cuestión más profunda: ¿Qué quiero que aprendan los estudiantes? Esto se va a hacer partiendo de estos dos bloques: 1. Aproximación a los componentes que favorecen la construcción de una GUI. 2. Aprendiendo de la importancia de la UX y la UI en la web para el desarrollo de un sitio web usable, eficiente, atractivo y creativo, que proporcione una experiencia satisfactoria al usuario. 219 Implementación de un ciclo de mejora en Tecnologías de los nuevos medios audiovisuales: Diseño web María Nieves Corral Rey Esta obra se distribuye con la licencia Creative Commons Reconocimiento-NoComercial-SinObraDerivada 4.0 Internacional (CC BY-NC-ND 4.0.) ¿Cuál es la importancia de la UX y la UI en la web? Componentes que favorecen la construcción de una interfaz gráfica de usuario Análisis de ejemplos reales: diseño, UX, UI y usabilidad ¿Cómo lo materializan los compañeros en sus trabajos? Testeo de las propuestas web del resto de compañeros Cabecera Cuerpo Barra de navegación Footer Leyendas Contenidos estructurantes Contenidos procedimentales intelectuales Contenidos conceptuales Contenidos actitudinales Habilidades psicomotrices: resultados del manejo del software Figura 1. Mapa de contenidos y problemas Modelo metodológico seguido y secuencias de actividades Esta asignatura tiene un componente práctico muy importante y esto se tiene muy presente en cada sesión. Por eso, el modelo metodológico posible para el desarrollo de los bloques que se presentan en esta propuesta apuesta por un aprendizaje basado en la participación, en la práctica y en la realización de actividades de contraste. Para potenciar esto, se opta por emplear un modelo metodológico (véase figura 2) orientado al análisis y desarrollo de la capacidad crítica de los estudiantes, partiendo de ejemplos reales y sometiendo a prueba los trabajos realizados por el resto de grupos. 220 221 Implementación de un ciclo de mejora en Tecnologías de los nuevos medios audiovisuales: Diseño web María Nieves Corral Rey Esta obra se distribuye con la licencia Creative Commons Reconocimiento-NoComercial-SinObraDerivada 4.0 Internacional (CC BY-NC-ND 4.0.) SI IA AC T Leyendas I: Introducción IA: Ideas a los alumnos AC: Actividades de contraste T: Teoría S: Síntesis Figura 2. Modelo metodológico posible A través de la secuencia de actividades, se persigue que entiendan la usabilidad de un sitio web, la importancia de una buena estructura y arquitectura de la información, qué es una mala experiencia de usuario, etc. Esto se hará también a través de una fase de testeo donde adquirirán rol de usuario y analizarán aspectos del diseño web de los trabajos de sus compañeros a través de una ficha, para la cual se le darán unas instrucciones. En este proceso, el desarrollo de habilidades psicomotrices es clave, pues los trabajos realizados comprenden el aprendizaje y manejo del software Sublime Text, que funciona con un lenguaje de marcado (HTML5 y CSS3). Las actividades programadas para cada una de las sesiones que conforman el ciclo de mejora en el aula se detallan en la siguiente tabla (véasetabla 1): 221 Implementación de un ciclo de mejora en Tecnologías de los nuevos medios audiovisuales: Diseño web María Nieves Corral Rey Esta obra se distribuye con la licencia Creative Commons Reconocimiento-NoComercial-SinObraDerivada 4.0 Internacional (CC BY-NC-ND 4.0.) Tabla 1. Secuencia de actividades. Actividad y tiempo previsto Descripción Recursos Sesión 1º I.1. 10’ Introducción a la dinámica de la clase prevista. Se explica con detalle el procedimiento y se resuelven las dudas. I.A.2. 15’ Entrega del cuestionario inicial del CIMA. Cuestionario inicial. IA.3. 10’ Planteamiento de la pregunta ¿Cuál es la importancia de la UX y la UI en el diseño web? AC.4. 30’ Se hace un reparto de casos reales para que desarrollen el análisis conforme a unas pautas. Páginas web seleccionadas conforme a una temática. IA.5. 15’ Se ponen en común las observaciones derivadas del análisis propuesto. T.6. 20’ Explicación teórica: componentes que favorecen la construcción de una interfaz gráfica de usuario. Presentación Power Point. S.7. 10’ Síntesis de la sesión. Sesión 2º I.1. 5’ Introducción a la dinámica de la clase prevista. IA.2. 10’ Se les plantea la pregunta ¿Entendemos la importancia de la UX y la UI en la web? AC.3. (I parte) 15’ Ejemplos de webs mal diseñadas. Lectura texto disponible a través de la plataforma. AC.4. (II Parte) 15’ Identificación y análisis de la GUI en casos reales considerando los aspectos de la lectura previa. Páginas webs a seleccionar a criterio propio de los alumnos. IA.5. 20’ Ideas de los alumnos: comentario del análisis desarrollado de los casos reales. T.6. 15’ Recomendaciones y buenas prácticas en diseño web ¿Qué es la mala experiencia de usuario? Enlace web disponible a través de la plataforma de enseñanza. S.7. 10’ Síntesis de la sesión. Sesión 3º I.1. 10’ Introducción a la dinámica de la sesión. IA.2. 70’ Exposiciones de los trabajos de diseño web de los estudiantes y recogida de datos por parte del resto de compañeros de forma simultánea. Trabajos de los alumnos. AC.3. 15’ Cumplimentación de la ficha de testeo. Ficha de testeo. S.4. 12’ Síntesis de la experiencia de la sesión. 222 223 Implementación de un ciclo de mejora en Tecnologías de los nuevos medios audiovisuales: Diseño web María Nieves Corral Rey Esta obra se distribuye con la licencia Creative Commons Reconocimiento-NoComercial-SinObraDerivada 4.0 Internacional (CC BY-NC-ND 4.0.) Actividad y tiempo previsto Descripción Recursos Sesión 4º I.1. 5’ Recordatorio de la dinámica de la sesión. IA.2. 70’ Exposiciones de los trabajos de diseño web de los estudiantes en subgrupos de trabajos y recogida de datos del resto de compañeros. Trabajos de los alumnos. AC.3. 15’ La recolección de datos anterior sirve de base para el testeo y la validación de las propuestas del resto de compañeros. Ficha de testeo. S.4. 20’ Síntesis de la experiencia desarrollada en la sesión de hoy. Entrega del cuestionario final de la experiencia desarrollada en el CIMA. Cuestionario final. Cuestionario inicial-final Para conocer los modelos mentales de los estudiantes, Rivero y Porlán (2017) indican que una de las herramientas más aptas son las encuestas, ya que permiten realizar análisis sistemáticos de las respuestas de los estudiantes. Así pues, en estrecha conexión con el mapa de contenidos planteado, se diseñó un cuestionario a responder por los alumnos, que será repetido tras finalizar el ciclo, con el objetivo de evaluar la progresión de su aprendizaje. Las preguntas, acompañadas necesariamente de imágenes, servirán para comprobar la comprensión de los conceptos y la aplicación práctica de los principios del diseño web. No obstante, por cuestiones de espacio, en el presente capítulo no se van a incluir las imágenes utilizadas. Descripción del contexto: a través de este cuestionario se pretende que te acerques al diseño web desde una perspectiva convencional (usuario habitual) y desde una perspectiva profesional (hipotético diseñador web). Por tanto, se van a plantear una serie de cuestiones que te servirán para que apliques tus conocimientos previos, así como las posibles intervenciones que llevarías a cabo como experto en la materia en un futuro profesional. 1. Imagina que estás buscando empleo y tienes interés en consultar el sitio web de una productora audiovisual. Señala los componentes básicos de una interfaz gráfica de usuario e identifica aquel componente donde suele localizarse la dirección de contacto para enviar tu CV o seguirla en redes sociales. 2. Imagina que entras a trabajar como técnico en comunicación en una cadena de cafeterías y te piden que diseñes una página web 223 Implementación de un ciclo de mejora en Tecnologías de los nuevos medios audiovisuales: Diseño web María Nieves Corral Rey Esta obra se distribuye con la licencia Creative Commons Reconocimiento-NoComercial-SinObraDerivada 4.0 Internacional (CC BY-NC-ND 4.0.) usable que localice su carta de productos, estructurando sus contenidos con todos los detalles posibles. ¿Cuál de estas propuestas seleccionarías? Señálala una X debajo de la opción que consideres y justifica tu respuesta. 3. Imagina que quieres viajar a otro país y alquilar un vehículo para moverte por la ciudad libremente haciendo turismo. Tras hacer un rastreo online, llegas a este sitio web, ¿cómo valorarías la experiencia de usuario que nos ofrece la consulta de esta información? 4. Imagina que estás buscando una empresa que se dedica al aluminio para personalizar y dar protección a la entrada de tu casa. Navegas online y encuentras este sitio. Valora objetivamente el diseño de interfaz de usuario que nos ofrece esta propuesta de diseño web. 5. Imagina que quieres realizar un evento y necesitas un fotógrafo. Encuentras varios sitios webs interesantes, pero tienes que decidirte solo por un profesional. De los sitios que se presentan a continuación, ¿cuál consideras que presenta una experiencia de usuario más satisfactoria y una interfaz de usuario óptima, usable y atractiva? Señala la opción que consideres y justifica tu respuesta. Aplicación del CIMA Relato resumido de las sesiones Se ha aprendido la importancia de la puntualidad para empezar las sesiones, la importancia de probar las presentaciones o los equipos personales en el aula para prevenir posibles errores técnicos desde la mesa del profesor, porque estos errores nos llevaron a perder tiempo. También ha sido importante aprender que más de 8 exposiciones por sesión de 2horas resulta inviable, porque nos llevó a no controlar los tiempos y no terminar con un cierre de sesión satisfactorio para todos. Como alternativa, hubiera sido buena opción plantear otro día más de exposiciones teniendo en cuenta el global de subgrupos que quieran exponer. Desde el punto de vista de mi práctica, he aprendido a ser más ágil en la resolución de problemas y tomar decisiones improvisadas si, por cuestiones ajenas a todos, como problemas técnicos, se nos escapa el tiempo. Durante el desarrollo de estas sesiones mi mente se trasladó a aquel marzo de 2022, cuando empecé en esta asignatura sin conocimiento ninguno de diseño web, ni lenguaje de marcado HTML5, sin saber cómo desarrollar las clases con mi poca experiencia en grupos tan numerosos y durante este experimento he notado un manejo y soltura durante las explicaciones caminando alrededor de la clase que nunca había imaginado.