5.2.3. Mostrando el contenido de la página

Adapted: Plowman (2001)

… has decidido utilizar Mostrar información interactiva, es conveniente considerar cómo mostrar el contenido de la página.

Figura 5.2.3.a. Imagen de una pantalla de un curso donde se listan diferentes habilidades relacionadas con la capacidad de estudio.

Cuando sea necesario mostrar cierta cantidad de texto al usuario es preferible hacerlo agrupado en diversos puntos o con diferentes nivel de identación antes que en bloques todo junto. Emplee sub-cabeceras y asegúrese de que los puntos principales quedan enfatizados (Smee, 2001).

Los espacios en blanco pueden ser utilizados para conseguir señalar al usuario información de interés. Los cambios en la fuente y el color del texto también son otras formas de dirigir la atención a puntos importantes.

Para conseguir que la página sea vista y leída en la pantalla, en lugar de impresa y leída sobre papel, emplee líneas de texto cortas en lugar de largas (FGCU, 2001).

Por tanto:

Allá donde sea necesario emplear texto asegúrese de hacer un correcto uso de los espacios en blanco, las listas, indentaciones y de diferentes estilos de fuente, de forma que el usuario pueda localizar la información importante de forma rápida.

Referencias

• FGCU (2001). Principles of Online Design [en línea]. Florida Gulf Coast University. Disponible en: http://www.fgcu.edu/onlinedesign/intro.html
• Smee, P. y Smee, L. (2001). Technology in Teaching, Training, Learning and Coaching  [en línea]. Disponible en: http://www.Circle-of-Excellence.com

Allá donde el contenido pueda ser mostrado de otra forma distinta de texto puede ser conveniente tener en cuenta las consideraciones de los patrones: Usando gráficos, Usando coloroUsando tablas para mostrar información.

El contenido que desees incluir en la página también debe tener en cuenta las consideraciones de Agrupando, reescribiendo contenido y Repetir aspecto.

5.2.4. Patrón Usando Color

 Adaptado: Tidwell (1999)

....el producto está formado de un gran número de Espacios de Navegación, el cual está organizado en un pequeño número de subsecciones. La Plantilla de la Página y el Contenido de la Página ha sido decidido, ahora te gustaría considerar cómo Usar el Color.

Figura 5.2.4.a. Imagen de un menú [www.samlearning.com]

¿Cómo un producto puede dar a los usuarios un sentido de lugar y a la vez decirle dónde está, dentro de una red de espacios?

• El usuario tiene una necesidad de saber dónde está en todo momento.
• Algunas veces, no es práctico usar un Contexto Visual para mostrar dónde está un usuario, debido a las restricciones de espacio, asuntos de apariencia, o carencia de la tecnología apropiada.
• Una etiqueta de texto diciendo en qué sección está el usuario puede no ser estética o no notarse, y el usuario le llevará tiempo leerla y analizarla.
• Etiquetas con imágenes pueden tener el mismo problema que las de texto, e incluso pueden  ser más incomprensibles que el texto.
• Tu interfaz visual puede parecer mejor con un poco de animación.

Coge un color para la sección principal, y úsalo en cada espacio donde se trabaje con esa sección.  Puede ser un color de fondo, un trozo de color, o incluso un color de texto, pero asegúrate que es usado del mismo modo a través del todo el producto. En concreto, úsalo dentro un marco visual consistente que unifique el producto; el usuario debería recordar la apariencia del producto, no la de una subsección.

Si estás usando el color de la sección como fondo, o usándolo en gran parte de la superficie, entonces usa colores delicados, claros o menos saturados – colores vivos en grandes áreas dan una fuerte impresión.  Si el color se usa en elementos visuales pequeños, que sea más descarado, para que el color se note más.  Los colores seleccionados de un único tono, pero con variedad de luminosidad o saturación, pueden ser interpretados como más o menos lo mismo – implican un orden, que puede no ser el que tú quieres.  Por otro lado, los colores procedentes de diferentes tonos (rojo, azul, verde, amarillo, etc. siendo primarios) no implican ningún orden relativo, así que puede ser mejor para las secciones que son de acceso aleatorio, o que son de igual estatus o importancia.

No olvides proporcionar un modo para ir a otras secciones principales o al espacio principal del producto (Volver a un Sitio Seguro).  Considera que también puedes tener usuarios daltónicos, así que si esto es una característica importante de navegación, puedes ofrecer una alternativa no basada en el color además de éste, como etiquetas de texto.

Por qué funciona:

• El color es altamente identificable para sistema visual humano, probablemente más que las etiquetas de texto o los iconos; un usuario sólo lo ve, y no tiene que pensar en ello.
• Se usa aquí tanto como un unificador (de un grupo de espacios dentro de una sección del producto) y como un diferenciador (entre las secciones).  Por lo tanto, presta una estructura a un conjunto de espacios, a partir de la cual un usuario puede fácilmente formal un modelo mental correcto.
• También ayuda a crear un sentido de sitio para el usuario cuando se combina con una plantilla visual consistente – llega a ser repetitivo, familiar y  tranquilizador, a la vez que hace una plantilla más colorista e interesante –.

Por lo tanto:
Usa color para identificar las secciones principales del producto.  

Referencias
Tidwell, J. (1999). Common Ground: A Pattern Language for Human-Computer Interface Design [en línea]. Massachusetts Institute of technology. Disponible en: http://www.mit.edu/~jtidwell/common_ground.html

Figura 5.2.4.b. Solución del patrón Usando color.

5.2.5. Patrón Gestión de cuestionarios on-line

Nivel de madurez
3 / 3

Categoría
Patrones de aprendizaje

Problema
¿Cómo se deben crear, entregar y calificar cuestionarios de evaluación on-line?

Análisis

Una de las principales actividades de un proceso de enseñanza-aprendizaje es la evaluación  del conocimiento de los estudiantes. Dicha evaluación suele ser a menudo implementada a través de ciertas preguntas o test asignados a unidades de aprendizaje, de tal forma que el estudiante pueda comprobar si verdaderamente ha asimilado los conceptos presentados en dicha unidad. Este proceso de evaluación puede ser automatizado de forma que ahorremos al instructor tiempo y esfuerzo a la hora de entregar y calificar los test. La automatización también supone una ventaja para el estudiante al permitir llevar a cabo la evaluación de su conocimiento en cualquier momento o lugar. De todas formas, la administración (creación, entrega y calificación) on-line del test para la evaluación del conocimiento del estudiante es una tarea complicada.

Solución

Facilitar herramientas para la evaluación on-line del estudiante a través de cuestionarios.

El sistema debe permitir al instructor:

• Crear de manera on-line cuestionarios que incluyan tanto preguntas abiertas, que deberán calificadas por el instructor,  como preguntas cerradas con respuestas predefinidas cuya evaluación puede ser automatizada.
• Crear / editar de manera on-line preguntas cerradas de diferentes tipos: elección múltiple, rellenar espacios, etc. (indicando de manera sencilla qué respuestas son correctas y cuáles no). También se deben poder definir ayudas para cada pregunta o mensajes de refuerzo dependiendo de la respuesta.
• Administrar la entrega del test on-line. El instructor debe ser capaz de definir el número máximo de veces que  el estudiante puede responder el test, el tiempo máximo permitido para completarlo o informar a los estudiantes de la planificación de las evaluaciones así como de la puntuación asignada a cada test.
• Ser capaz de asignar una puntuación para cada pregunta del test y/o para el test en conjunto y actualizar los registros del estudiante con dicha información.
• Realizar búsquedas entre las preguntas de test ya existentes y formar nuevos test a partir de las mismas. En ocasiones es necesario ser capaz de importar cuestionarios creados en otros LMS. En estos casos la conformidad del formato del test a algún estándar internacional es necesaria.

Opcionalmente el sistema puede incluir la posibilidad de crear test adaptativos donde la serie de preguntas presentadas a lo largo del desarrollo de un test, e incluso el material de estudio presentado, pueda variar dependiendo de las respuestas del alumno. Será necesario definir un conjunto de reglas de secuenciación que rijan el comportamiento del test.

Se recomienda la conformidad de los test con algún estándar de e-Learning internacional. En este caso el estándar de mayor aceptación es el IMS Question and Test Interoperability. Esto aumentará considerablemente tanto la portabilidad del perfil del alumno como la interoperabilidad del software que haga uso de dichos perfiles.

Usos conocidos
Todos los LMS analizados incluyen algún mecanismo para evaluación on-line.

Contexto
Este patrón es aplicable a equipos de desarrollo de software que desarrollen LMS. Una vez implementado sus usuarios finales serán los estudiantes y los instructores.

Referencias
Avgeriou, A., Papasalouros, S., y Retalis, M. S. (2003). Towards a Pattern Language for Learning Management Systems. IEEE Educational Technology & Society, 6, Issue 2, 11-24.

Avgeriou, A., Papasalouros, S. y Retalis, M. S. (2003). Patterns For Designing Learning Management Systems, En Actas del European Pattern Languages of Programming (EuroPLOP) 25–29 Junio, Irsee, Alemania.

Patrones relacionados

Seguimiento del estudiante
Gestión de asignaciones al estudiante

Más información sobre relaciones

Autores
P. Avgeriou, S. Retalis, A. Papasalouros

5.3. EJEMPLO DE COMBINACIÓN DE PATRONES

El master  en Gestión y Producción en e-learning ofrecido por la Universidad Carlos III de Madrid en colaboración con el Centro Educared de Formación Avanzada (CEFA) en el que participan la Fundación Telefónica y la Fundación Encuentro está implementado sobre la plataforma Educared desarrollada sobre Moodle. Este curso on-line será utilizado como ejemplo de cómo la combinación de una serie de patrones, que han sido recogidos en este informe, pueden dar como resultado el diseño de este tipo de sistemas.

Partiendo del patrón A8 Educational Forums, presentado en la sección 4.3.2. “Patrones para Web”, este tipo de aplicaciones tienen como principal reto aunar a estudiantes, padres y profesores con el objeto de que la formación de los estudiantes sea lo más fructífera posible, aunque teniendo en cuenta las necesidades de cada uno de estos colectivos.

Para ello la plataforma Educared cuenta con diferentes secciones con noticias, información y foros para padres, alumnos y profesores.  En la figura 5.3.a aparece la captura de la página principal (http://intercampus.educared.net/) donde se ha recogido el acceso para cada una de esas secciones. Además, debido a que nos encontramos ante una plataforma Web se pueden identificar otros patrones Web como C1 Homepage Portal (todos los visitantes de esta web tienen que pasar por la página que aparece en la figura 5.3.a), B1 Multiples Ways to Navegate (se recogen herramientas de navegación como migas de pan, menús y enlaces relacionados) o D1 Page Templates (plantillas para presentar las barras de navegación, los contenidos y la información relacionada que se mantiene en todas las páginas del sitio web). Para mayor información sobre estos patrones ver van Duyne et al., (2002).

Como patrones de usabilidad encontramos el patrón Sentido de localización representado por las migas de pan (camino de navegación seguido desde la página de inicio) y Logotipo del sitio arriba a la izquierda representado por el logotipo de Educared. Para finalizar con los patrones relacionados con otras áreas, encontramos el patrón de seguridad Role-Based Access Control representado por la sección “Entrar” y los campos “Nombre de usuario” y “Contraseña”. Una vez que el usuario entra a la parte privada del sistema, según su rol (administrador, alumno o profesor) se pueden realizar diferentes tareas, como confeccionar un curso, acceder a los recursos de un determinado curso o añadir actividades y recursos. Cuando no se introduce un nombre o contraseña de manera correcta se informa al usuario que la entrada de datos es incorrecta, es decir el patrón de interacción Input Error Message.

Figura 5.3.a Página principal de intercampus de Educared.

Con respecto a los patrones de e-learning propiamente dichos, nos introduciremos dentro de los módulos del master. Comenzando con los patrones recogidos en la sección “Ejemplos de patrones para plataforma educativas”, el patrón Curso nos describe las tres fases en las que se debería organizar todo sistema de aprendizaje: fase preliminar, principal y evaluación. La elaboración del master y cada uno de sus módulos han seguido estas fases. Para conocer en mayor profundidad las características de cada una de estas fases es necesario consultar cada uno de los patrones que las describen. El patrón Fases preliminares provee un plan de actividades genérico para la inicialización de cursos. La planificación y los recursos del módulo fueron publicados con anterioridad. Para la fase principal se optó por un estilo de aprendizaje recogido en el patrón Estudiante Activo, que pretende involucrar al estudiante en el aprendizaje mediante la elaboración de una serie de actividades. Dentro de los módulos del master se añadieron actividades donde debían aplicarse los conocimientos adquiridos a partir de las unidades didácticas que conformaban cada módulo. Además, existe un proyecto global individual que permite al estudiante desarrollar sus capacidades analíticas, de razonamiento y de resolución de problemas.

Otros patrones que se han tenido en cuenta con respecto a la plataforma educativa es la aplicación de Aprendizaje colaborativo asíncrono mediante la creación de foros para cada una de las actividades y promover así un aprendizaje más activo.

Mediante un vídeo del coordinador los objetivos de cada módulo fueron explicados. Finalmente, en un foro específico se respondieron todas las dudas relacionadas con las tareas a realizar, el modo de evaluación y los objetivos a conseguir. Con respecto a la evaluación, se decidió seguir el patrón Evaluación del instructor donde los tutores son los encargados de evaluar los logros de los participantes en las actividades de aprendizaje.

Las decisiones tomadas sobre el estilo de aprendizaje tuvieron como consecuencia la inclusión de unos determinados ODEs. Los patrones para objetos digitales educativos permiten diseñar la presentación de los contenidos educativos en una plataforma web. Debido a que se requería un aprendizaje activo se incluyeron los siguientes elementos para fomentar a los alumnos, algunos de ellos ya comentados. El patrón Chat para comunicación simultánea entre tutores y alumnos; el patrón Foros de feedback, donde los tutores abrieron diferentes hilos para cada una de las tareas a desarrollar y así los estudiantes pudiesen expresar sus dudas o comentarios sobre las mismas; el patrón Auto-Examen dio la posibilidad a los alumnos de evaluarse a si mismos y conocer si estaban preparados para realizar las tareas asociadas a una unidad didáctica. En la figura 5.3.b aparece la captura de pantalla de uno de los módulos del master. En la parte derecha se encuentran los accesos a todos aquellos ODEs para fomentar el aprendizaje activo (foros y chats). Para el Diseño de Página se ha optado por representar los contenidos teóricos dentro de una hoja de papel tradicional. Sin embargo hay que señalar que no se ha tenido en cuenta todos los consejos del patrón, incluyendo así un scroll para aquellos contenidos que no se pueden visualizar de una sola vez en la pantalla, en vez de vivirlos, lo que conlleva a confusión entre los scrolles de la pantalla y del contenido, a la vez que es demasiada información para leer en una sola pantalla. Mostrando el Contenido de la Página también sigue la misma plantilla para todos los contenidos. El texto se agrupa en cabecera, teoría y ejemplos (se muestra en un recuadro sombreado), incluyéndose cambios de color para resaltar la información  importante.

Figura 5.3.b. Un objeto digital de un módulo del master