Ce que fait ce modèle
Les demandes d'apprentissage commencent souvent par un livrable : un cours, un module, une vidéo, un outil d'aide à l'emploi ou une mise à jour rapide. Mais le véritable problème de performance réside généralement dans un système plus large.
Cette carte interactive aide les concepteurs d'apprentissage à ralentir et à inspecter le système avant de décider quoi construire. Elle rend visibles les parties invisibles de la performance : les besoins des apprenants, les moments de flux de travail, les points de décision, les frictions des outils, les ressources de soutien, le renforcement par les managers, le risque et les signaux de succès.
L'objectif n'est pas de rendre la carte compliquée. L'objectif est d'aider les équipes à poser de meilleures questions avant de construire la mauvaise chose de manière magnifique.
Meilleur usage pour
Utilisez ceci lorsque la demande d'apprentissage est plus grande que le livrable.
Analyse des besoins d'apprentissage
Utilisez la carte pour clarifier ce qui façonne réellement l'écart de performance avant de nommer une solution.
Conversations avec les parties prenantes
Donnez aux parties prenantes un moyen structuré de discuter du système autour du problème, pas seulement de l'actif demandé.
Conseil en performance
Identifiez si le problème est lié à la connaissance, à la confiance, à la friction des flux de travail, aux outils, au renforcement ou à autre chose.
Architecture d'apprentissage
Cartographiez comment les cours, les outils d'aide à l'emploi, les outils pour les managers, les moments de pratique et le soutien aux flux de travail s'imbriquent.
Pourquoi cela fonctionne
Beaucoup d'apprentissage en milieu de travail échoue parce qu'il traite la performance comme un problème de contenu. Quelqu'un demande un cours, le cours est construit, et tout le monde espère que le travail change.
Mais la véritable performance est façonnée par plus que le contenu. Les gens ont besoin d'attentes claires, d'outils utiles, de soutien opportun, de prise de décision confiante, de renforcement par les managers et d'un flux de travail qui ne les combat pas à chaque étape.
Ce modèle aide les concepteurs d'apprentissage à passer de « Que devrions-nous enseigner ? » à « Quel système concevons-nous ? » Ce changement est important car la meilleure solution d'apprentissage peut être un scénario, une liste de contrôle, un chemin de décision, un outil de coaching pour les managers, un sélecteur de ressources, un aide au flux de travail, ou parfois oui, un cours.
Aperçu en direct
Explorez le système autour d'un problème d'apprentissage.
Sélectionnez chaque partie de la carte pour voir quoi rechercher, quoi demander et quel type de mouvement de conception pourrait soutenir la performance.
Commencez ici
Qu'est-ce qui façonne réellement la performance ?
La plupart des demandes d'apprentissage commencent par un livrable. Cette carte vous aide à inspecter le système plus large avant de décider quoi construire.
Code de démarrage
Copiez la structure et adaptez les nœuds.
Cette version de démarrage montre la structure minimale : boutons de nœud, un panneau en direct et un petit script qui met à jour le contenu lorsque l'apprenant sélectionne une partie du système.
<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>Comment le personnaliser
Renommez les étiquettes des nœuds, mettez à jour l'objet de données et stylisez la carte pour correspondre à votre marque ou à votre flux de travail. Le schéma de base est simple : les apprenants choisissent un élément du système, et le panneau explique ce qu'il faut inspecter ensuite.
Notes de déploiement S3
Comment héberger cela en tant qu'infographie interactive légère.
Enregistrez le fichier sous index.html
Gardez le HTML, le CSS et le JavaScript dans un seul fichier si vous voulez le déploiement le plus simple possible.
Téléchargez-le dans votre bucket S3
Utilisez votre chemin d'hébergement approuvé et suivez le processus de sécurité, d'accès et de révision de votre organisation.
Définissez le type de contenu
Assurez-vous que le fichier est servi comme text/html. Si le type de contenu est incorrect, le navigateur peut télécharger le fichier au lieu de le rendre.
Servez via votre URL approuvée
Utilisez votre chemin de livraison public ou interne approuvé. Dans de nombreuses organisations, cela peut impliquer CloudFront, un CDN interne ou une autre couche d'hébergement régulée.
Testez la page sur desktop et mobile
Ouvrez l'URL hébergée directement et testez chaque interaction avant de l'intégrer ou de la lier à une expérience d'apprentissage.
Comment utiliser cela avec Rise, Storyline ou des pages internes
Articulate Rise
Utilisez l'URL hébergée comme lien de bouton, contenu web intégré ou ressource externe lorsque la carte nécessite plus d'espace qu'un bloc Rise standard.
Articulate Storyline
Utilisez la page hébergée comme objet web, ou reconstruisez la logique à l'intérieur de Storyline avec des couches, des états, des variables et du JavaScript.
Pages wiki internes
Liez la page hébergée à partir des SOP, des pages de lancement, des hubs d'équipe ou des ressources d'habilitation.
Portails d'apprentissage
Utilisez la carte comme ressource autonome pour les concepteurs d'apprentissage, les gestionnaires, les équipes de programme ou les partenaires d'habilitation.
Notes de personnalisation
La manière la plus simple de personnaliser ce modèle est de mettre à jour les huit nœuds de la carte et le contenu lié à chaque nœud.
Renommez les nœuds pour correspondre à votre processus, votre public, le langage de votre équipe ou votre modèle de conception d'apprentissage.
Mettez à jour chaque panneau avec vos propres invites, questions de conception, mouvements de soutien ou exemples.
Changez les dégradés, les bordures, le rayon des cartes, la typographie et l'espacement pour correspondre à votre marque.
Reformulez la carte autour d'un flux de travail spécifique, d'un lancement de produit, d'un modèle de support ou d'un problème opérationnel.
Remarques sur l'accessibilité
Ce modèle de démarrage utilise de vrais boutons pour chaque nœud interactif, ce qui est mieux que de rendre des formes non sémantiques cliquables. Le panneau de contenu utilise une région aria-live afin que les mises à jour puissent être annoncées par la technologie d'assistance.
Avant d'utiliser cela en production, testez la navigation au clavier, la visibilité du focus, le contraste des couleurs, le comportement des lecteurs d'écran et l'utilisabilité mobile. Si vous ajoutez de l'animation, respectez les préférences de réduction des mouvements.
Design Lab
Utilisez ceci comme un outil de réflexion, pas seulement comme un visuel.
Le but de la Learning Systems Map n'est pas de rendre la stratégie d'apprentissage élégante. Il s'agit d'aider les équipes à faire une pause suffisamment longue pour poser de meilleures questions sur ce dont les gens ont réellement besoin, où le travail se casse, et quel type de soutien rendrait la performance plus claire, cohérente et utile.