El diseño de la interfaz gráfica como ayuda para el aprendizaje.
Anuncio
El diseño de la interfaz gráfica como ayuda para el aprendizaje Michele Casasanta [email protected] Maritza Torres de Izquierdo [email protected] Erwin Aguirre [email protected] José Cabana [email protected] Universidad Dr. Rafael Belloso Chacín Venezuela Resumen La interfaz que se diseñe para un curso Web jugará un papel importante en las posibilidades de aprender. Si ésta es pobre, confusa o ilógica, repercute inmediatamente en la motivación y el aprendizaje del estudiante. En esta ponencia ofrecemos una serie de recomendaciones que contribuyen en el proceso de diseño de una interfaz, basándonos en las experiencias que hemos desarrollado con el diseño de cursos Web para la Universidad Dr. Rafael Belloso Chacín (URBE). Esta nos dice que lo más importante es darle suficiente ayuda al alumno, evitando pérdida de tiempo y frustraciones. La interfaz gráfica ha de ser estimulante, explícita, consistente y funcional, para que el alumno la comprenda y explore fácilmente. Palabras clave: diseño gráfico, interfaz, aprendizaje Abstract The design of the interface for a Web course will play an important role in the possibilities of learning. If this is poor, confused or illogical, it immediately repels in the motivation and the learning of the student. In this communication we offer a series of recommendations that contribute in the process of design of an interface, based on the experiences that we have developed with the design of Web courses for Universidad Dr. Rafael Belloso Chacín (URBE). This says that the most important is to give sufficient aid to the student, avoiding loss of time and frustrations. Graphical interface has to be stimulating, explicit, consistent and functional, so that the student understands it and explores it easily. KeyWords: Graphic design, interface, learning El diseño de la interfaz gráfica como ayuda para el aprendizaje La importancia de un buen diseño de interfaz del curso Web Por interfaz se entiende todo aquello que le permite al estudiante interactuar o usar algo, en este caso concreto, interactuar con su curso, incluyendo en esta interacción la propia computadora, el contenido, los compañeros de curso, el profesor, la institución, los materiales instruccionales, entre otros. No es necesariamente gráfica, también forman parte de ella los menús, el lenguaje, los comandos, la presentación de la pantalla, entre otros (ASTD, s.f.). Ya son incontables los artículos y libros que hacen recomendaciones sobre el diseño de la interfaz de un curso Web, porque de ésta también depende la calidad de lo que se comunica. Se puede decir que hay consistencia en muchas de las recomendaciones, aún y cuando no todas han sido elaboradas específicamente para cursos Web ( Torres de I, 2003 ). Gráfico N° 1 Menú de inicio del curso Para la Sociedad Americana de Entrenamiento y Desarrollo (ASTD) uno de los temas más subestimado y dejado a la suerte en el diseño de los cursos de la red, es el diseño de la interfaz del usuario, también llamado la interacción alumno-computador (Kruse, 2000). Especial cuidado hay que tener cuando se trata de alumnos que no están familiarizados con la computadora e Internet, porque pueden quedarse completamente desorientados. Desde hace varias décadas ha cobrado fuerza la identidad gráfica, el papel del diseño y el diseñador gráfico; quizá debido al bombardeo de información visual, y también al deseo de que cada estudiante obtenga en su memoria una imagen permanente del curso con soportes gráficos que le ayuden a comprender información con imágenes, iconos, colores y animaciones; que sea tanto funcional como estimulante, es decir, que la imagen sirva como pauta recordativa y además que posea un valor psicológico que lo incentive. La experiencia URBE El proceso de diseño de una interfaz para cursos Web es lo que vamos a ilustrar en este artículo, disgregando de manera representativa la forma de hacerla, más no imponiendo una clave sobre cómo construir imágenes, pero sí aportar un esquema de trabajo para optimizar el proceso de diseño gráfico de una interfaz didáctica para los cursos virtuales. La Urbe desde hace dos años ha venido desarrollando cursos Web de extensión de pre y postgrado utilizando la plataforma Web CT, esta experiencia en el diseño gráfico de estos cursos nos dice que la clave está en no pretender hacer las cosas de la manera tradicional como siempre se ha hecho en los cursos convencionales, lo que no quiere decir que no existan reglas y guías muy bien definidas que pueden orientar el diseño. Intentamos crearles a los estudiantes una imagen mental del curso que les facilite moverse en él, la cual puede consistir en un mapa o en una serie de iconos. Hay que permitirles configurarla y cambiarla para que satisfaga sus necesidades individuales (Barrer y King, citados por Geissinger, 1997). Lo más importante para nosotros es darle suficientes ayudas al alumno para evitar pérdida de tiempo y frustraciones. Recomendamos ofrecerles claves visuales en forma de botones que le indiquen lo que debe hacer, como por ejemplo, ir a la última página anteriormente visitada, al inicio de la página, a la tabla de contenido y a la ayuda. También es útil darles información sobre el tiempo que duran los procesos, como por ejemplo, el tiempo de descarga de un programa. Se trata, en este caso, de contribuir con su proceso de procesamiento de información estimulando sus sentidos (“Information Processing Model”). Los cursos virtuales URBE pasan por varios procesos de producción y control de calidad, que involucra especialistas en contenidos, diseñadores intruccionales, diseñadores gráficos, y programadores. El diseñador gráfico debe trabajar con el equipo y haber estudiado lo que se quiere mostrar del curso, tener dominio de los softwares utilizados para la producción de aplicaciones Web, y al mismo tiempo conocimiento del manejo del mundo del Internet. La Interfaz y la Plataforma: WebCT Al momento de comenzar a construir un curso virtual debemos saber que la plataforma que se utilice para los cursos virtuales o cursos Web, jugará un papel importante en las posibilidades de crear interfaces propias o modificar las que ésta ofrece. La interfaz va a marcar una pauta visual para capturar al usuario a primera vista, dejando una sensación de impacto o de desánimo en el primer contacto, porque de la calidad de la interfaz también depende lo que se comunica. La plataforma utilizada en estudios a distancia URBE es WebCT, ésta administra los cursos y usuarios en línea y es muy utilizada en el ámbito educativo por su sencillez de uso, especialmente porque provee una interfaz gráfica prediseñada, siendo ésta también su debilidad al pretender realizar una interfaz gráfica con libertad o con personalidad propia, porque sólo obedece a una estructura específica, no permite cambiar algunos atributos, como los colores de calendario y la forma de organización; por estas razones diseñamos una estructura de diseño gráfico en forma de L invertida, con base en “frames” más atractivos visualmente que los que ofrece la plataforma WebCT. Recomendaciones para el Diseño de la Interfaz: Dimensiones - Debido a que una interfaz para cursos Web implica visualizar contenidos, gráficos, índices de temas y mapas de aprendizajes, es obvio, que mientras más espacio se tenga para colocar la información, más clara será ésta; es recomendable por lo tanto utilizar la dimensión de pantalla de 800x600 pixeles, ya que ésta es una proporción media que la mayoría de los monitores actuales soportan. - Utilizar scrolls verticales de manera mesurada dentro de las páginas de contenidos. Composición - Mantener un esquema organizado y coherente de la información en todas las páginas, es decir, que los botones de navegación, títulos y contenidos, entre otros, tengan siempre una misma ubicación en el espacio. Esto permite crear una imagen unificada del sitio, además de una rápida comprensión de la interfaz gráfica del curso por parte del usuario. - Diseñar bocetos de la estructura gráfica partiendo de lo general a lo específico. - Utilizar la tecnología de “frames” o marcos, colocando del lado izquierdo el menú de opciones (contenidos, objetivos, actividades, evaluaciones, vínculos, entre otros) y en el margen superior, el número de las unidades para que el estudiante se maneje en diferentes espacios. Gráfico N° 2 Botones de un curso Color - Seleccionar los colores de la paleta Web, de donde surgirá parte de la personalidad del curso. Mantener la consistencia del color de la página en todos los sistemas operativos. Gráfico N° 3 Paleta de colores Web - Hacer un uso lógico del color, es decir, que los colores escogidos para identificar un curso Web tengan una razón referencial, creando así una afinidad entre el color escogido y el contenido que representa. Iconografía - Utilizar imágenes en dúo-tonos y con poca profundidad de color permite crear conceptos claros y sencillos con altos niveles de síntesis, que además de ayudar al diseño, disminuye aun más el tamaño de los archivos para lograr el mejor desempeño posible en la descarga de las páginas. - Mantener el mismo concepto gráfico para toda la iconografía, de manera que el estudiante se familiarice, desde el principio hasta el final del curso, con los botones y con las imágenes. Gráfico N° 4 Área del contenido del curso - Estandarizar los nombres de las imágenes a diseñar, siguiendo las normas American Psychological Association (APA). Gráfica N° 5 Estandarización de imágenes - Optimizar los gráficos mediante Firework, buscando que la parte gráfica de las páginas se carguen en poco tiempo. - Seleccionar Flash como herramienta para el diseño de animaciones y pequeñas aplicaciones dinámicas para la Web. Flash permite tener cierto grado de interactividad entre el objeto y el usuario. - Utilizar la precarga (preload) en cada archivo de animación con la finalidad de evitarle tiempos muertos al estudiante e informarle el tiempo que durará la descarga del archivo y el peso del mismo. Tipografía - Utilizar la tecnología de Hojas de Estilo en Cascada (Cascade Style Sheets), las cuales son documentos maestros que contienen los parámetros de estilos y formatos de textos para estandarizar el uso de: tamaño, color, tipo y estilo de todos los encabezados, párrafos, etc. Esto permite la manipulación global de estas características con el objeto de facilitar la actualización de las páginas de contenido. - Las tipografías utilizadas deben ser fuentes estándares (Ej: Verdana, Arial, Times) en la mayoría de las plataformas de los computadores, y éstas deben poseer un muy buen nivel de lectura y visualización en las páginas Web. - Ser cuidadoso con el uso de colores de textos y fondos, porque las páginas de los cursos contienen gran cantidad de información, y la certera escogencia de estos asegurará el buen nivel de legibilidad. - En general, se debe realizar un uso coherente y mesurado de los estilos tipográficos porque sólo así se creará una imagen unificada y sobria, idónea para un contenido educativo. Conclusiones El diseño de la interfaz gráfica de un curso Web no concluye con la entrega de los archivos al programador; existe una interacción final entre el diseñador gráfico y éste que consiste en realizar ajustes en la diagramación del contenido y en la disposición de los elementos como las gráficas, las animaciones, etc. La interfaz gráfica es el punto de comunicación entre lo que se quiere enseñar y el estudiante; el apoyo del contenido del curso, por lo tanto, debe diseñarse teniendo un conocimiento profundo de las características del estudiante, no sólo para guiarlo, sino para estimularlo a que lo estudie, lo revise y lo explore, y avance en la construcción de su conocimiento. Bibliografía ASTD. (s.f.). Interface. [Documento en línea]. Disponible: http://www.ahciet.net/si/educacion/glosario/glosario.asp [consulta 02/26/2001]. Berger, C. y Kam, R. (1996). Introduction to the Instructional Design Process. Universidad de Michigan. Documento en línea]. Disponible: http://www.umich.edu/~ed626/define.html [consulta 03/06/2002]. Geissinger, H. (1997). Educational Software: Criteria for Evaluation. Trabajo presentado en la Conferencia ASCILITE. [Documento en línea]. Disponible: http://www.curtin.edu.au/conference/ASCILITE97/papers/Geissinger/Geissinger.htm l. [consulta 07/06/2002]. Kruse, K. (2000). Web Rules. ASTD [Documento en línea]. Disponible: http://www.learningcircuits.org/feb2000/feb2000_webrules.thml1. 11/06/2002]. [consulta Schneider, D. (1994b). Instructional Design Theory: Sequencing & Chunking of Educational Material. [Documento en línea]. Disponible: http://tecfa.unige.ch/educomp/edu-ws94/contrib/schneider/instruct.fm.html. [consulta 05/11/2001]. Torres de I, M. (2003). Teorías del aprendizaje y de instrucción aplicadas al diseño de cursos Web. Tesis Doctoral. URBE. Maracaibo, Edo. Zulia.