Patrones de diseño
Nombre del Patrón
Presentación de Cursos
Nivel del trabajo
En desarrollo, sin ejemplos de código fuente.
Categoría:
Manejadores de Contenidos para la Enseñanza (Learning Content Management Systems) accesibles y de fácil uso
Problema
Como mostrar el contenido de Cursos en una plataforma LCMS de modo legible y de fácil acceso. Como facilitar la ubicación de los cursos y la información de referencia.
Análisis
Las plataformas LCMS de código abierto más usadas [1] actualmente presentan el listado de los cursos que componen la oferta Educativa que esta contiene, de un modo dispar. Es por esto que se hace imprescindible organizar la información sobre los Cursos y contenidos que en ella se dictan de un modo ordenado y fácilmente accesible, y sin la necesidad de que se confundan con otros componentes de la interfaz.
Solución
Para el siguiente problema aplicaremos dos principios de la Teoría de la percepción de la Gestalt [2]. Un principio será el de Similitud o semejanza [3] y el otro el de figura/fondo [4]. Ambos principios serán aplicables mediante la utilización de etiquetas "<div>"[5] para su estructura y de Hojas de Estilo [6] para su correcta presentación y posicionamiento.
Presentar la información
Para la correcta presentación de los Cursos que integran la Plataforma se hace necesario facilitar la ubicación de los mismo en un corto lapso de tiempo y de un modo claro y sencillo.
Cada Curso debe contener una serie de información necesaria para el usuario, de forma que este no necesite de un análisis exhaustivo de la interfaz para conseguir la información.
Es por esto que cada curso a presentarse deberá contener la siguiente información como mínimos contenidos:
- Nombre del Curso (se aconseja la utilización de los atributos “acceskey” o “tabindex” para el título)
- Sección o área a la que pertenece (de ser necesario)
- Instructor, docente o persona a cargo del Curso
- Nivel de acceso: Si es público o si es privado
- Descripción: Una descripción corta, con una extensión de una oración o un aproximado de 10 palabras
- Acceso a la inscripción o mecanismo necesario para que el usuario obtenga mayor información sobre el mismo. En la mayoría de los casos es ideal el acceso a una descripción mas extensa de los contenidos o finalidad del curso como así también la posibilidad del que el usuario pueda solicitar la inscripción o acceso directo al curso.
Presentación de la información contenida
Para esta etapa aplicaremos los Principios de Área pequeña [7], Similitud o semejanza y Figura/fondo.
Basados en que el soporte para visualizar los contenidos es un monitor de algún tipo (PC de escritorio, terminal de trabajo, NoteBook, PDA, teléfono móvil) en el caso de Navegadores Web que soporten la representación de formas e imágenes, la forma contenedora de la información es un rectángulo. Para este caso es aplicable el principio de Area pequeña, en donde el área pequeña sobresale por sobre el Área mayor, tal el caso de los monitores y los contenidos que representan.
- Para esto se aconseja entonces la utilización de cajas estructuradas con "<div>" dentro de las cuales se contendrá la información referida en el punto anterior.
- Para la presentación se utilizarán Hojas de Estilo.
- Las cajas deben estar separadas unas de otras y ubicadas en el sector del medio hacia la derecha del monitor o diseño en caso de utilizar secciones.
- Cada caja debe disponer de un borde y de un relleno.
- Para el caso del borde se aconseja el uso de color negro y una linea continua de tal modo que sea fácil interpretar la forma de caja. En cuanto al relleno se aconseja el uso de un color diferente al utilizado como fondo de página [figura 1]
- Es adecuado para esto utilizar colores e intensidades no muy brillantes ya que ciertos grupos de usuarios pueden sentirse incómodos [8].
- Del mismo modo es el uso del color verde, azul o rojo. [8]
- Para el caso de otro tipo de navegadores (lectores de pantalla, navegadores de modo solo texto) la estructuración con <div>y la utilización de Hojas de Estilo facilitará la navegación así como el correcto marcado semántico.
Figura 1: .Ejemplo de utilización de figura / fondo y de presentación de caja-
Presentar secciones o áreas temáticas
Ya que las plataformas permiten la generación de muchos cursos de diversas temáticas y áreas de formación, es necesario presentar al usuario un listado de secciones o áreas temáticas.
- Los cursos serán agrupados en estas, y a su vez, se brindará la posibilidad de acceder al listado completo de cursos.
- Para la presentación de las secciones se aconseja denominarlas del modo más claro y conciso posible.
- Las secciones se pueden presentar en una instancia anterior a los cursos con el modelo de caja detallado anteriormente o
- Pueden presentarse a la izquierda superior del monitor o diseño dejando el sector medio derecho para los cursos que las componen.
- En todos los casos anteriores es indispensable que la navegación de las secciones esté siempre presente y en el mismo lugar para que el usuario no se sienta desorientado con un cambio de lugar o disposición de la navegación entre una sección y la otra [figura 2]
- Las secciones pueden estar contenidas en cajas siguiendo el lineamiento que se ha detallado.
- Los cursos pertenecientes a cada sección y, en el caso de existir múltiples secciones, deberán ser identificadas por un color particular. Tal sería el caso de un usuario que solicitara ver la totalidad de los cursos que se ofrecen en la plataforma, de un modo que este, puede identificar claramente la diferencia entre una sección y otra [figura 3]. Por esto cada curso deberá tener como color de relleno el perteneciente a la sección que compone.
Figura 2: Ejemplo de presentación de Secciones y Cursos
Figura 3: Presentación de todos los cursos. Diferenciación de Secciones
Consideraciones en el uso de imágenes
Para el caso de presentar cursos que necesiten de un gráfico o imagen alusiva, se aconseja que esta sea de fácil interpretación, nítida y debidamente marcada semánticamente.
Muchas veces las imagenes expresan un concepto o idea de modo más claro y preciso, no obstante, dependiendo del dispositivo de acceso a la plataforma, software utilizado para acceder, nivel cognitivo del usuario o capacidad física, se aconseja la adecuada utilización del atributo “alt”.
Fecha del Revisión:
11 de Diciembre de 2006
Autor:
Alejandro Karpich Zardalevich
Referencias
[1] Manejadores de Contenidos para la Enseñanza de Código Abierto
[2][3][4][7] http://www.mundogestalt.com/karel/index.html
[5] http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_textmodule
[6] http://www.w3.org/Style/CSS/
[8] Accesibilidad en Internet – Claudio Segovia - 2005 - Capítulo 3 - Página 39
Publicaciones de Refrencia:
- Aplicación de la Gestalt y los Patrones de Diseño de Interacción al Diseño de Interfaces Centradas en el Usuario – Alejandro Karpich Zardalevich – 2005
- Principios para el diseño y organización de programas de enseñanza virtual: Sistematización a la luz de las teoría cognoscitivas y conductuales – José Antonio Ortega Carrillo – Universidad de Granada – 2002
- Accesibilidad en Internet – Claudio Segovia - 2005
Licencia
Esta obra está licenciada bajo una Licencia Creative Commons Atribución-No Comercial-Sin Obras Derivadas 2.5 Argentina.