Lo que hace este patrón
Las solicitudes de aprendizaje a menudo comienzan con un entregable: un curso, un módulo, un video, una ayuda laboral o una actualización rápida. Pero el verdadero problema de rendimiento generalmente reside en un sistema más amplio.
Este mapa interactivo ayuda a los diseñadores de aprendizaje a desacelerar e inspeccionar el sistema antes de decidir qué construir. Hace visibles las partes invisibles del rendimiento: necesidades del aprendiz, momentos de flujo de trabajo, puntos de decisión, fricción de herramientas, recursos de apoyo, refuerzo del gerente, riesgo y señales de éxito.
El objetivo no es complicar el mapa. El objetivo es ayudar a los equipos a hacer mejores preguntas antes de construir algo incorrecto de manera hermosa.
Mejor utilizado para
Utiliza esto cuando la solicitud de aprendizaje es más grande que el entregable.
Análisis de necesidades de aprendizaje
Usa el mapa para aclarar qué está realmente moldeando la brecha de rendimiento antes de nombrar una solución.
Conversaciones con interesados
Ofrece a los interesados una forma estructurada de discutir el sistema en torno al problema, no solo el activo solicitado.
Consultoría de rendimiento
Identifica si el problema es conocimiento, confianza, fricción en el flujo de trabajo, herramientas, refuerzo o algo más.
Arquitectura de aprendizaje
Mapea cómo se integran los cursos, ayudas laborales, herramientas para gerentes, momentos de práctica y apoyo en el flujo de trabajo.
Por qué esto funciona
Gran parte del aprendizaje en el lugar de trabajo falla porque trata el rendimiento como un problema de contenido. Alguien pide un curso, se construye el curso y todos esperan que el trabajo cambie.
Pero el verdadero rendimiento está moldeado por más que el contenido. Las personas necesitan expectativas claras, herramientas útiles, apoyo oportuno, toma de decisiones confiada, refuerzo del gerente y un flujo de trabajo que no les obstaculice en cada paso.
Este patrón ayuda a los diseñadores de aprendizaje a pasar de “¿Qué deberíamos enseñar?” a “¿Qué sistema estamos diseñando?”. Ese cambio importa porque la mejor solución de aprendizaje puede ser un escenario, una lista de verificación, un camino de decisión, una herramienta de coaching para gerentes, un selector de recursos, una ayuda para el flujo de trabajo o, a veces, sí, un curso.
Vista previa en vivo
Explora el sistema en torno a un problema de aprendizaje.
Selecciona cada parte del mapa para ver qué buscar, qué preguntar y qué tipo de movimiento de diseño podría apoyar el rendimiento.
Comienza aquí
¿Qué está realmente moldeando el rendimiento?
La mayoría de las solicitudes de aprendizaje comienzan con un entregable. Este mapa te ayuda a inspeccionar el sistema más amplio antes de decidir qué construir.
Código inicial
Copia la estructura y adapta los nodos.
Esta versión inicial muestra la estructura mínima: botones de nodo, un panel en vivo y un pequeño script que actualiza el contenido cuando un aprendiz selecciona una parte del sistema.
<section class="learning-systems-map">
<div class="map">
<button data-node="learner">Learner Need</button>
<button data-node="workflow">Workflow Moment</button>
<button data-node="decision">Decision Point</button>
<button data-node="support">Support Resource</button>
</div>
<aside class="panel" aria-live="polite">
<p id="mapKicker">01 / Learner Need</p>
<h3 id="mapTitle">What does the learner need to do?</h3>
<p id="mapDescription">
Start with the learner’s real task, not the requested content.
</p>
</aside>
</section>
<script>
const systemsData = {
learner: {
kicker: "01 / Learner Need",
title: "What does the learner need to do?",
description: "Start with the learner’s real task, not the requested content."
},
workflow: {
kicker: "02 / Workflow Moment",
title: "Where does this show up in the work?",
description: "Find the moment where confusion, risk, or hesitation appears."
},
decision: {
kicker: "03 / Decision Point",
title: "What choice does the learner need to make?",
description: "Make judgment visible by showing tradeoffs and consequences."
},
support: {
kicker: "04 / Support Resource",
title: "What support exists after training?",
description: "Design for the moment when memory fades and real work gets messy."
}
};
document.querySelectorAll("[data-node]").forEach((button) => {
button.addEventListener("click", () => {
const item = systemsData[button.dataset.node];
document.querySelector("#mapKicker").textContent = item.kicker;
document.querySelector("#mapTitle").textContent = item.title;
document.querySelector("#mapDescription").textContent = item.description;
});
});
</script>Cómo personalizarlo
Cambia las etiquetas de los nodos, actualiza el objeto de datos y estiliza el mapa para que coincida con tu marca o flujo de trabajo. El patrón central es simple: los aprendices eligen un elemento del sistema y el panel explica qué inspeccionar a continuación.
Notas de implementación en S3
Cómo alojar esto como una infografía interactiva ligera.
Guarda el archivo como index.html
Mantén el HTML, CSS y JavaScript en un solo archivo si deseas la implementación más simple posible.
Súbelo a tu bucket de S3
Usa tu ruta de alojamiento aprobada y sigue el proceso de seguridad, acceso y revisión de tu organización.
Establece el tipo de contenido
Asegúrate de que el archivo se sirva como text/html. Si el tipo de contenido es incorrecto, el navegador puede descargar el archivo en lugar de renderizarlo.
Sirve a través de tu URL aprobada
Usa tu ruta de entrega pública o interna aprobada. En muchas organizaciones, eso puede involucrar CloudFront, un CDN interno u otra capa de alojamiento regulada.
Prueba la página en escritorio y móvil
Abre la URL alojada directamente y prueba cada interacción antes de incrustarla o enlazarla dentro de una experiencia de aprendizaje.
Cómo usar esto con Rise, Storyline o páginas internas
Articulate Rise
Usa la URL alojada como un enlace de botón, contenido web incrustado o recurso externo cuando el mapa necesite más espacio que un bloque estándar de Rise.
Articulate Storyline
Usa la página alojada como un objeto web, o reconstruye la lógica dentro de Storyline con capas, estados, variables y JavaScript.
Páginas wiki internas
Enlaza a la página alojada desde SOPs, páginas de lanzamiento, hubs de equipo o recursos de habilitación.
Portales de aprendizaje
Usa el mapa como un recurso independiente para diseñadores de aprendizaje, gerentes, equipos de programas o socios de habilitación.
Notas de personalización
La forma más fácil de personalizar este patrón es actualizar los ocho nodos del mapa y el contenido vinculado a cada nodo.
Cambia el nombre de los nodos para que coincidan con tu proceso, audiencia, lenguaje del equipo o modelo de diseño de aprendizaje.
Actualiza cada panel con tus propios mensajes, preguntas de diseño, movimientos de apoyo o ejemplos.
Cambia los gradientes, bordes, radio de las tarjetas, tipografía y espaciado para que se ajusten a tu marca.
Reenmarca el mapa en torno a un flujo de trabajo específico, lanzamiento de producto, modelo de soporte o problema operativo.
Notas de accesibilidad
Este patrón inicial utiliza botones reales para cada nodo interactivo, lo cual es mejor que hacer que formas no semánticas sean clicables. El panel de contenido utiliza una región aria-live para que las actualizaciones puedan ser anunciadas por tecnología asistiva.
Antes de usar esto en producción, prueba la navegación por teclado, la visibilidad del enfoque, el contraste de color, el comportamiento del lector de pantalla y la usabilidad móvil. Si agregas animación, respeta las preferencias de movimiento reducido.
Laboratorio de diseño
Usa esto como una herramienta de pensamiento, no solo como un visual.
El objetivo del Mapa de Sistemas de Aprendizaje no es hacer que la estrategia de aprendizaje se vea elegante. Es ayudar a los equipos a pausar lo suficiente para hacer mejores preguntas sobre lo que las personas realmente necesitan, dónde se rompe el trabajo y qué tipo de apoyo haría que el rendimiento fuera más claro, consistente y útil.