Organizando el contenido: el índice de la clase

Luigi Bonafé es profesor de Historia y creó su propia plataforma educativa para enseñar a aspirantes a diplomáticos que se preparan para el Concurso de Admisión a la Carrera Diplomática (CACD), el examen público para ingresar a la carrera diplomática en Brasil.

Problema:

Con muchas demandas sobre la mesa, una de las primeras cosas que resolvimos fue cómo se organizaban las clases. A diferencia de muchos de mis clientes, cuyas clases son más cortas y fáciles de dividir, las clases de Historia para los aspirantes a diplomáticos eran largas, con muchos recursos incrustados, videos y referencias. Nuestra tarea era organizar mejor el contenido para los estudiantes, de modo que no se perdieran nada.

Solución:

Pasamos por varias iteraciones de diseño y la elegida fue una tabla de contenidos flotante que organiza el contenido automáticamente, junto con mejoras en el diseño de la clase.

Tecnología utilizada:

• Todo se desarrolló con código personalizado

Primer paso: propuestas de solución.

Propuesta 1: acordeones que expanden y contraen el contenido. Propuesta 2: contenido separado en pestañas. Propuesta 3 (elegida): índice flotante. Abordamos el desafío con una serie de propuestas, cada una con ventajas y desventajas que presentamos al cliente. Todas resolvían el problema, y el cliente también aportó su visión de la marca y su conocimiento de cómo reaccionaría su audiencia. La solución que elegimos fue una tabla de contenidos flotante.

Las ventajas de la solución elegida.

Una ventaja de esta propuesta es que no exige ningún esfuerzo adicional en el contenido. Escribimos un JavaScript que detecta los subtítulos de la clase (h2, h3, h4...) y los agrega automáticamente a una ventana ubicada a la izquierda de las clases. La opción del acordeón tenía un inconveniente: un estudiante podía contraer una sección sin darse cuenta y perderla de vista. Podíamos evitarlo dejando claro que era un botón, pero como los acordeones son un patrón poco habitual en educación, decidimos descartarla. La opción de las pestañas, aunque elegante, obligaría al administrador a categorizar a mano cada sección de contenido de cada curso. Esta es la versión móvil de la solución.

Cómo construimos la solución.

Escribimos un JavaScript que detecta los encabezados y los agrega a una ventana, organizados jerárquicamente por nivel (los encabezados h3 anidados bajo los h2). Por defecto, la ventana flota a la izquierda del contenido y acompaña el desplazamiento. En el móvil, el índice queda fijo en la parte superior para ahorrar espacio. También cambiamos algunos detalles de diseño: el panel lateral de la clase aparece contraído por defecto para dar más espacio al contenido; agregamos un fondo gris para que la lectura sea menos cansadora, ya que hay mucho texto; separamos con más claridad las secciones de la clase para que los estudiantes noten cuándo termina un contenido y empieza el siguiente; y quitamos elementos de navegación innecesarios para que puedan concentrarse. Aquí está el antes y el después. Antes Después