Etiquetas

, , , ,

Extrapolados de la arquitectura de la información para www, cuando se proyecta un curso e-learning nos valemos de dos documentos de desarrollo en los que se plasma la estructura de los contenidos, el funcionamiento del curso y la disposición de los elementos en la interfaz. Ambos son diagramas: blueprint y mockup.

Blueprint: es el diagrama en el que se plasmará la organización de contenidos, su funcionamiento y cómo será la navegación, esto es, representa la arquitectura de contenidos. Describe los destinos a donde conducen los elementos de la interfaz cuando el usuario interactúa con ellos y evidencia la relación de estos elementos entre sí.

Para la realización de diagramas blueprint es necesario el uso de un vocabulario visual y unos elementos gráficos convenidos de antemano. En relación al desarrollo web, Garrett ha propuesto un vocabulario visual para describir arquitectura de información y diseño de interacción que resulta útil, sencillo y razonable. Es excelente para realizar diagramas de websites o, lo que nos interesa, para describir la navegación en cursos e-learning.

Mockup: también llamado wireframe o maqueta, es un diagrama que revela la disposición de los contenidos y elementos en la interfaz del curso. No es tanto la definición de la línea gráfica (temas, colores, fuentes, diseño de elementos interactivos, marcos, etc.) como la situación de éstos, aunque mockup y línea gráfica puedan conjugarse (opción muy adecuada, por ejemplo, si se trata de un documento que mostraremos al cliente que ha encargado el curso). El mockup puede ser un .html, cargado con lorem ipsum, que responda a las peticiones de navegación de un usuario, mostrando, por lo tanto, gran parte de la funcionalidad del curso. Estaríamos hablando entonces de un mockup dinámico. Los mockups dinámicos son considerados diagramas de alta fidelidad, mientras que a los fijos (aunque sean secuenciados, como un storyboard) se les considera de baja fidelidad.

En otros post hablaré de aplicaciones específicas para mockapear o para hacer diagramas blueprint, flujogramas, etc.

Anuncios