Diseño de Webs Educativos

Andrea Góngora Rojas

 

El presente trabajo está basado en mi experiencia en los cursos de formación que he impartido en los centros Grimm, y a otros enseñantes de diversos niveles. Todo ello en la esperanza de que pueda servir a otros profesores interesados en la creación de materiales educativos, especialmente, y aquí, en el diseño de web educativos.

1.Proceso de diseño de un web educativo

De manera similar a lo que ocurre en el diseño de cualquier material didáctico, independientemente del formato en que éste sea editado, los pasos en la planificación de un web con fines educativos consisten en:

Hasta aquí, el proceso de diseño de un web educativo no difiere del que se requiere para la creación de materiales en otros formatos. La particularización del proceso se da en los pasos siguientes: la organización de los contenidos en bloques de información en función de las características del formato, página web, y la definición de las relaciones entre dichos bloques (las páginas), es decir, los enlaces o hipervínculos.

La organización de la información en bloques de contenido consiste en la traducción de la estructura conceptual inicialmente planteada —a la luz de las estrategias instruccionales elegidas— al soporte de página web. El objetivo es que la estructura conceptual se reproduzca fielmente en la estructura del web, optimizando las posibilidades que ofrece este medio de presentación de la información. Es muy importante evitar que la fragmentación propia del sistema hipertextual altere el significado de lo que se quiere expresar; tal fragmentación debe ser aprovechada como una herramienta para conseguir la adaptación de los materiales a las necesidades de aprendizaje de los alumnos, en un marco de interactividad.

Una vez que se ha establecido qué debe ir en cada página del web, es necesario determinar las relaciones que existen entre las páginas. Estas relaciones definirán la colocación de los enlaces o hipervínculos del web. Es importante tener en cuenta que las conexiones entre las páginas deben contribuir a recrear la estructura conceptual definida en un primer momento: dichas conexiones aportarán información a los alumnos que naveguen por el web y pueden incidir en el sentido que ellos den a los contenidos.

Además, resulta muy recomendable que todo el proceso hasta aquí referido se realice sin más ayuda que un lápiz y un papel, pues la ejecución de un web ha de ser el resultado de la toma de muchas decisiones que difícilmente pueden efectuar-se ``sobre la marcha".

Volviendo al tema de la definición de los hipervínculos del web, hay que considerar que estos elementos mediarán las lecturas que harán los alumnos del web de manera significativa: en algunos casos, la presencia de una conexión entre una página y otra, aunque ésta sea meramente mecánica, connota la existencia de una relación semántica entre las dos páginas. El problema está en si esa connotación contribuye o no a aclarar o enriquecer los contenidos que se presentan, de allí que rada una de las conexiones que existan en el web deben ser claramente intencionales. Ejemplo: si en la página principal de un web aparece una lista de hipervínculos que conectan esta página con todas las demás del web, puede leerse que la página principal se encuentra en el primer nivel del web y todas las demás páginas, a las que se puede acceder desde la lista de hipervínculos, se encuentran en el segundo nivel de la estructura del web.

Las preguntas derivadas del ejemplo expuesto serían: ¿Realmente todas las páginas referidas en la página principal se encuentran en el mismo nivel, el segundo? ¿Es esto lo que se quiere expresar? No se trata sólo de hacer explícitas las relaciones entre las páginas en una lista general de hipervínculos, lo cual puede conseguirse utilizando índices, viñetas o cualquier otro elemento gráfico, sino de intentar reproducir con fidelidad la estructura conceptual, que subyace a la estructura del web, en todos los posibles recorridos que efectúe el usuario utilizando los hipervínculos.

En algunas ocasiones los hipervínculos no tienen implicaciones semánticas ya que queda suficientemente explicito que cumplen sólo la función de exploración, por ejemplo: ``haga clic aquí para ver mejor esta imagen. En resumen, ha de procurarse que los hipervínculos del web se definan en función de los posibles recorridos que hará el alumno. Es muy importante que en tales recorridos no se distorsione el sentido de la estructura conceptual que se pretende enseñar. Otra de las cuestiones vitales en la planeación del web es la referente a los mecanismos de navegación pensados para contrarrestar la desorientación que con frecuencia sufren los usuarios de este tipo de sistemas.

De acuerdo con Adell (1994), tal desorientación se caracteriza por los siguientes síntomas:

 

 

Es muy frecuente encontrar en la WWW páginas principales que presentan una lista tan amplia de hipervínculos que resulta muy fácil desorientarse en la exploración del web. Asimismo, hay otras en las que aparece solamente el tipo de enlace ``ir a la página siguiente", lo que constituye una ``linealización" de la lectura del web en el sentido de que las posibilidades de navegación del usuario se limitan a las establecidas por el emisor. Aunque puede resultar contrario a la filosofía del hipertexto, en esencia no lineal, puede servir para facilitar la lectura, si esa es la intención del autor del documento (Adell, 1994). Sin embargo, es importante recordar que en un sistema hipermedia es fundamental que el alumno pueda acceder a los contenidos en función de sus necesidades. Se debe ofrecer al alumno la posibilidad de ``elegir» entre varios caminos y propiciar con ello que él mismo gestione su proceso de aprendizaje. En ocasiones, la ruta propuesta por el autor aparece junto a otras posibilidades, lo que puede entenderse como una fórmula en la que se le ofrece al usuario la opción de navegar a su gusto o siguiendo un mapa claramente preestablecido.

Otras herramientas de navegación que pueden contribuir a contrarrestar la desorientación de los usuarios son aquellas que representan de manera transparente las relaciones entre las diferentes secciones del web, tales como mapas que reflejan la estructura del documento y sus conexiones. Adell resume las posibilidades de contrarrestar el síndrome de la desorientación con las siguientes fórmulas:

 

2. Algunas consideraciones relativas a los aspectos formales del diseño de webs educativos

 

1.os aspectos formales del diseño de materiales web merecen una amplia reflexión, especialmente si se tiene en cuenta que el formato hipertextual se constituye en un nuevo lenguaje —es decir, que posee claves expresivas propias, genera nuevas formas de estructurar la información y nuevas formas de leer— y que tal lenguaje está viviendo un rápido desarrollo en aras de la consolidación de un sistema de signos propios (un código) y en formas expresivas inherentes al medio. Nos referimos, por ejemplo, a los iconos que denotan conceptos como ``volver a la página principal", ``ir hacia atrás", etc.; a la evolución de ciertos conceptos de diseño como los colores de los fondos de las páginas, como los tamaños y tipos de las letras, como la distribución de la información en la pantalla, entre otras cosas.

Está claro que, en gran parte, las claves de expresión de Ia WWW son el resultado de la adaptación de las fórmulas comunicativas propias de la publicidad impresa o televisiva, de libros expositivos e, incluso, de elementos cinematográficos; sin embargo, la corta edad de la WWW explica la inmadurez del código. Si bien todavía queda mucho por ver en la evolución del lenguaje del formato hipertextual, en el caso concreto de los webs con fines educativos hará falta mucho más tiempo para sacar en claro qué características formales ha de reunir un material didáctico hipertextual para ser, comunicacionalmente, más eficaz.

La capacidad explicativa de un material didáctico en soporte web dependerá de la fidelidad con la que los aspectos formales representen los contenidos conceptuales de dicho material. En otras palabras, la función del diseño formal es la de representar de la manera más clara posible los contenidos que serán objeto del proceso de aprendizaje. Para conseguir esta fidelidad es fundamental que la inclusión u omisión de los posibles elementos que componen un web (textos, imágenes, tablas, fondos, etc.) responda a una intencionalidad pedagógica.

Además, la economía de recursos, en favor de la simplicidad y la transparencia de la expresión, contribuye a hacer más fluida la comunicación. El primer paso en el diseño de los aspectos formales de un web es la toma de decisiones sobre los elementos que se van a incluir en las páginas para presentarlos contenidos, es decir, las imágenes estáticas, las imágenes en movimiento, las imágenes mapeadas, las tablas, la apariencia y ubicación de los enlaces, los marcos, la distribución de la información en las páginas, la parcelación de las páginas en secciones, etc. Esta toma de decisiones debe estar guiada siempre por preguntas como ``des realmente necesario incluir esto?", ``¿cuál es la forma más clara y sencilla de expresar esta idea?". Es fundamental no claudicar ante impulsos meramente esteticistas.

A continuación analizaremos algunos de los elementos que componen una página web, sus características, aspectos que influyen en su capacidad expresiva y, en algunos casos, las ventajas y desventajas que trae consigo su inclusión en un web educativo.

Es muy importante procurar la concisión de los textos que se incluyen en una página web: la brevedad y la economía de medios para expresar una idea con exactitud contribuyen a que el lector reconstruya el sentido del mensaje.

Es aconsejable estructurar los textos en párrafos cortos e incluir sólo una idea por párrafo. Los tipos de letra (fuentes) que se utilicen deben garantizar la legibilidad de los textos: existen fuentes de gran valor artístico, pero su función, en ocasiones, es meramente estética, en detrimento de su misión primordial, la de ser legibles. En la decisión de cuál ha de ser el tamaño de las letras ha de considerarse que los materiales podrán ser impresos, así que hay que buscar el equilibrio entre lo que se ve en pantalla y lo que resulta en el papel; sin olvidar que algunos visualizadores presentan la opción de aumentar o reducir el tamaño de las letras en la pantalla a gusto del usuario. Es importante considerar que, en caso de distribuir espacialmente los textos en la pantalla, la visualización de los mismos varía de acuerdo con la resolución de los monitores y los programas de navegación.

El color del texto es otro de los aspectos que determinan su legibilidad. Ha de procurarse un alto contraste entre el fondo de la página y el color de texto. Es aconsejable evitar contrastes demasiado inquietantes, para no abusar de la capacidad de atención de los lectores. Con lo anterior no quiere decirse que existan combinaciones idóneas ni limitar las posibilidades creativas del diseñador del web, sino hacer hincapié en la necesidad de dar prioridad a la funcionalidad por encima de la estética.

Existen posibilidades ilimitadas para dar fondo a una página web: color sólido, matizado o degradado; texturas variadas; fotografías escaneadas, imágenes elaboradas en el ordenador, etc. La decisión de cuál debe ser el fondo de las páginas del web, igual que los demás elementos que lo componen, debe guiarse por los objetivos pedagógicos del mismo: es frecuente encontrar páginas con fondos de gran valor artístico que, sin embargo, constituyen un estorbo para la legibilidad del texto y un obstáculo para la rápida visualización de los materiales.

Los fondos pueden y deben cumplir una función expresiva dentro del web; pueden, por ejemplo, convertirse en elementos de identificación de partes de la estructura del material, caracterizando cada sección. Esto contribuye a facilitarla orientación de los usuarios en el web.

De acuerdo con la función que cumplen en la página del web, las imágenes pueden clasificarse en los siguientes tipos:

e.Decorativas, cuando su inclusión en las páginas del web es meramente estética y no obedece a argumentos pedagógicos o comunicacionales. Es evidente que las imágenes deben incluirse sólo cuando resultan pertinentes de acuerdo con los objetivos pedagógicos que subyacen al material. Davis (1996) propone algunas categorías generales para el análisis de las imágenes que bien pueden aplicarse al caso de las imágenes de una página web sencilla, estas categorías son las siguientes: «apariencia: los atributos reconocibles de las imágenes (color, forma, límites, contraste, opacidad, textura, etc.); medidas: la escala de las imágenes (cómo de grande o cómo de pequeña es una cosa con respecto a otra); dimensiones: construcciones temporales incorporadas en las imágenes (ideas relacionadas con la duración)»; y «perspectiva: los aspectos de la perspectiva de una imagen según la posición relativa del espectador (posición privilegiada, perspectivas de 1, 2 y 3 puntos, perspectivas múltiples)» (Davis, 1996). Las categorías de Davis pueden servir para una fase inicial del diseño formal del web, es decir, para la toma de algunas de las decisiones básicas como los colores que se utilizarán en las páginas, las características generales de las imágenes que se quiere incluir, etc.

Las tablas son la forma más usual de organizar la información en una página web. Son muy útiles para presentar sintéticamente las ideas y permiten representar de manera esquemática los conceptos, lo que facilita la identificación de las relaciones entre los mismos. Tienen la desventaja de que su visualización depende de las capacidades del navegador que utilice el alumno (El-Tigi y Maribe, 1997). Los elementos de parcelación de la pantalla, en secciones de información, en zonas de mayor o menor captación de la atención, etc. son otros de los factores que intervienen en la ubicación de la información de las páginas web. Uno de las herramientas más utilizadas para segmentar la pantalla y con ello establecer diferentes secciones informativas, son los marcos o frames. Estos permiten crear algunas dinámicas de navegación y presentar de manera organizada la información.

De acuerdo con El-Tigi y Maribe, las implicaciones cognitivas que tiene la utilización de marcos en un web educativo son las posibilidades de comparación y contrastación de la información y las facilidades que se le ofrecen al alumno para reestructurar los contenidos de acuerdo con sus necesidades. Según los mismos autores, una de las desventajas de utilizar marcos es la imposibilidad de visualizarlos en algunos navegadores El-Tigi y Maribe, 1997). Además, los marcos incrementan el tiempo de recuperación de la información; pueden contribuir a la desorientación de los usuarios (algunos mecanismos de navegación quedan invalidados cuando se navega usando marcos) y a la excesiva fragmentación de la información.

Algunos editores de páginas web permiten establecer una segmentación clara de las páginas que facilitan la inclusión de información; del mismo modo que los marcos, actúan como páginas autónomas, aunque no incluyen «barras de desplazamiento».

La utilización de argumentos de diseño gráfico para optimizar la presentación de la información merece especial atención, pues con estos puede conseguirse capturar la atención del usuario, el alumno, hacia zonas específicas de la pantalla y, así, transmitirle una esquematización de la información.

Por otra parte, es muy importante conseguir que el usuario deba hacer un mínimo esfuerzo en la exploración del web, especialmente en la página principal: si se aprovecha al máximo el espacio de la pantalla, se evita que el lector deba recurrir a las barras de desplazamiento para explorar la información y, así, la comunicación resulta más clara y transparente.

Detrás de la inclusión de música en las páginas web debe existir un claro objetivo comunicativo y una intencionalidad evidente. Además de que el tiempo de recuperación de una página web sonora se incrementa sensiblemente, este elemento puede provocar pérdida de atención y cansancio si su inclusión no cumple una función pedagógica explícita.

Está claro que nos referimos a los sonidos incorporados de manera gratuita y no a aquellos sonidos que contribuyen eficazmente a cumplir con las metas educativas del material.

En el diseño de webs con fines educativos interviene un variado abanico de elementos que pueden analizarse siguiendo criterios de índole diversa: aspectos pedagógicos, como el modelo instruccional que subyace al material; factores concernientes a las estrategias comunicativas utilizadas para transmitir el mensaje didáctico, como el uso de imágenes, las características de los textos, la inclusión o no de sonido, etc.; elementos relacionados con el campo de la sicología cognitiva, para entender la reconstrucción que hace el alumno del sentido de los contenidos estructurados hipermedialmente, por ejemplo; cuestiones técnicas, como las herramientas utilizadas para crear el material; entre otros. La larga lista de posibilidades de aproximación al análisis del diseño de un web educativo hace evidente la imposibilidad de abarcar el problema desde una perspectiva no multidisciplinar y la necesidad de construir una representación global de la cuestión basada en las aportaciones de diversas disciplinas y campos del saber.