Was dieses Muster tut
Lernanfragen beginnen oft mit einem Ergebnis: einem Kurs, einem Modul, einem Video, einem Arbeitsmittel oder einem schnellen Update. Aber das eigentliche Leistungsproblem liegt meist in einem größeren System.
Diese interaktive Karte hilft Lern-Designern, langsamer zu werden und das System zu inspizieren, bevor sie entscheiden, was sie bauen wollen. Sie macht die unsichtbaren Teile der Leistung sichtbar: Lernbedürfnisse, Arbeitsfluss-Momente, Entscheidungspunkte, Werkzeug-Reibung, Unterstützungsressourcen, Manager-Verstärkung, Risiko und Erfolgssignale.
Das Ziel ist nicht, die Karte kompliziert zu machen. Das Ziel ist, Teams zu helfen, bessere Fragen zu stellen, bevor sie das falsche Ding schön bauen.
Am besten verwendet für
Verwenden Sie dies, wenn die Lernanfrage größer ist als das Ergebnis.
Analyse der Lernbedürfnisse
Nutzen Sie die Karte, um zu klären, was tatsächlich die Leistungsdifferenz prägt, bevor Sie eine Lösung benennen.
Gespräche mit Stakeholdern
Geben Sie den Stakeholdern eine strukturierte Möglichkeit, über das System rund um das Problem zu diskutieren, nicht nur über das angeforderte Asset.
Leistungsberatung
Identifizieren Sie, ob das Problem Wissen, Vertrauen, Reibung im Arbeitsablauf, Werkzeuge, Verstärkung oder etwas anderes ist.
Lernarchitektur
Kartieren Sie, wie Kurse, Arbeitsmittel, Manager-Tools, Übungs-Momente und Arbeitsfluss-Unterstützung zusammenpassen.
Warum das funktioniert
Vieles im Bereich der beruflichen Weiterbildung scheitert, weil es Leistung als ein Inhaltsproblem behandelt. Jemand bittet um einen Kurs, der Kurs wird erstellt, und alle hoffen, dass sich die Arbeit ändert.
Aber echte Leistung wird von mehr als nur Inhalten geprägt. Menschen brauchen klare Erwartungen, nützliche Werkzeuge, zeitnahe Unterstützung, selbstbewusste Entscheidungsfindung, Manager-Verstärkung und einen Arbeitsablauf, der sie nicht bei jedem Schritt behindert.
Dieses Muster hilft Lern-Designern, von „Was sollten wir lehren?“ zu „Für welches System entwerfen wir?“ zu wechseln. Dieser Wechsel ist wichtig, denn die beste Lernlösung kann ein Szenario, eine Checkliste, ein Entscheidungsweg, ein Coaching-Tool für Manager, ein Ressourcenwähler, eine Arbeitsfluss-Hilfe oder manchmal ja, ein Kurs sein.
Live-Vorschau
Erkunden Sie das System rund um ein Lernproblem.
Wählen Sie jeden Teil der Karte aus, um zu sehen, wonach Sie suchen sollten, was Sie fragen sollten und welche Art von Designbewegung die Leistung unterstützen könnte.
Starte hier
Was prägt tatsächlich die Leistung?
Die meisten Lernanfragen beginnen mit einem Ergebnis. Diese Karte hilft Ihnen, das größere System zu inspizieren, bevor Sie entscheiden, was Sie bauen wollen.
Starter-Code
Kopiere die Struktur und passe die Knoten an.
Diese Starter-Version zeigt die minimale Struktur: Knoten-Buttons, ein Live-Panel und ein kleines Skript, das den Inhalt aktualisiert, wenn ein Lernender einen Teil des Systems auswählt.
<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>So passt du es an
Benenne die Knotensymbole um, aktualisiere das Datenobjekt und style die Karte, um deiner Marke oder deinem Workflow zu entsprechen. Das Grundmuster ist einfach: Lernende wählen ein Systemelement, und das Panel erklärt, was als Nächstes zu inspizieren ist.
S3-Bereitnotizen
So hostest du dies als leichtgewichtige interaktive Infografik.
Speichere die Datei als index.html
Halte HTML, CSS und JavaScript in einer Datei, wenn du die einfachste mögliche Bereitstellung möchtest.
Lade es in deinen S3-Bucket hoch
Verwende deinen genehmigten Hosting-Pfad und folge den Sicherheits-, Zugriffs- und Überprüfungsprozessen deiner Organisation.
Setze den Inhaltstyp
Stelle sicher, dass die Datei als text/html. Wenn der Inhaltstyp falsch ist, könnte der Browser die Datei herunterladen, anstatt sie darzustellen.
Bereitstellen über deine genehmigte URL
Verwende deinen genehmigten öffentlichen oder internen Lieferpfad. In vielen Organisationen kann dies CloudFront, ein internes CDN oder eine andere regulierte Hosting-Schicht umfassen.
Teste die Seite auf Desktop und Mobilgeräten
Öffne die gehostete URL direkt und teste jede Interaktion, bevor du sie in eine Lernerfahrung einbettest oder verlinkst.
So verwendest du dies mit Rise, Storyline oder internen Seiten
Articulate Rise
Verwende die gehostete URL als Button-Link, eingebetteten Webinhalt oder externe Ressource, wenn die Karte mehr Platz benötigt als ein Standard-Rise-Block.
Articulate Storyline
Verwende die gehostete Seite als Webobjekt oder baue die Logik innerhalb von Storyline mit Ebenen, Zuständen, Variablen und JavaScript neu auf.
Interne Wiki-Seiten
Verlinke zur gehosteten Seite von SOPs, Startseiten, Team-Hubs oder Enablement-Ressourcen.
Lernportale
Verwende die Karte als eigenständige Ressource für Lernende, Manager, Programmteams oder Enablement-Partner.
Anpassungsnotizen
Der einfachste Weg, dieses Muster anzupassen, besteht darin, die acht Kartenknoten und den Inhalt, der mit jedem Knoten verbunden ist, zu aktualisieren.
Benenne die Knoten um, um deinem Prozess, Publikum, Team-Sprache oder Lern-Design-Modell zu entsprechen.
Aktualisiere jedes Panel mit deinen eigenen Aufforderungen, Designfragen, Unterstützungsmaßnahmen oder Beispielen.
Ändere die Farbverläufe, Ränder, Kartenradien, Typografie und Abstände, um deiner Marke zu entsprechen.
Rahmen Sie die Karte um einen spezifischen Workflow, Produkteinführung, Unterstützungsmodell oder ein operatives Problem.
Hinweise zur Barrierefreiheit
Dieses Startermuster verwendet echte Schaltflächen für jeden interaktiven Knoten, was besser ist, als nicht-semantische Formen klickbar zu machen. Das Inhaltsfeld nutzt einen aria-live-Bereich, damit Aktualisierungen von unterstützender Technologie angekündigt werden können.
Testen Sie vor der Verwendung in der Produktion die Tastaturnavigation, Sichtbarkeit des Fokus, Farbkontrast, Verhalten von Screenreadern und mobile Benutzerfreundlichkeit. Wenn Sie Animationen hinzufügen, respektieren Sie die reduzierten Bewegungspräferenzen.
Design Lab
Verwenden Sie dies als Denkwerkzeug, nicht nur als visuelle Darstellung.
Der Zweck der Learning Systems Map ist nicht, die Lernstrategie schick aussehen zu lassen. Es geht darum, Teams genug Zeit zum Nachdenken zu geben, um bessere Fragen darüber zu stellen, was die Menschen tatsächlich brauchen, wo die Arbeit ins Stocken gerät und welche Art von Unterstützung die Leistung klarer, konsistenter und nützlicher machen würde.