Apa yang dilakukan corak ini
Permintaan pembelajaran sering bermula dengan hasil: kursus, modul, video, bantuan kerja, atau kemas kini cepat. Tetapi masalah prestasi yang sebenar biasanya terletak di seluruh sistem yang lebih besar.
Peta interaktif ini membantu pereka pembelajaran memperlahankan dan memeriksa sistem sebelum memutuskan apa yang perlu dibina. Ia menjadikan bahagian prestasi yang tidak kelihatan menjadi jelas: keperluan pelajar, momen aliran kerja, titik keputusan, geseran alat, sumber sokongan, pengukuhan pengurus, risiko, dan isyarat kejayaan.
Tujuannya bukan untuk menjadikan peta itu rumit. Tujuannya adalah untuk membantu pasukan mengajukan soalan yang lebih baik sebelum mereka membina sesuatu yang salah dengan cantik.
Paling baik digunakan untuk
Gunakan ini apabila permintaan pembelajaran lebih besar daripada hasilnya.
Analisis keperluan pembelajaran
Gunakan peta untuk menjelaskan apa yang sebenarnya membentuk jurang prestasi sebelum menamakan penyelesaian.
Perbincangan pemegang kepentingan
Berikan pemegang kepentingan cara terstruktur untuk membincangkan sistem di sekitar masalah, bukan hanya aset yang diminta.
Perundingan prestasi
Kenal pasti sama ada isu itu adalah pengetahuan, keyakinan, geseran aliran kerja, alat, pengukuhan, atau sesuatu yang lain.
Seni bina pembelajaran
Peta bagaimana kursus, bantuan kerja, alat pengurus, momen latihan, dan sokongan aliran kerja saling berkait.
Kenapa ini berfungsi
Banyak pembelajaran di tempat kerja gagal kerana ia menganggap prestasi sebagai masalah kandungan. Seseorang meminta kursus, kursus dibina, dan semua orang berharap kerja itu berubah.
Tetapi prestasi sebenar dibentuk oleh lebih daripada kandungan. Orang memerlukan jangkaan yang jelas, alat yang berguna, sokongan yang tepat pada masanya, pembuatan keputusan yang yakin, pengukuhan pengurus, dan aliran kerja yang tidak melawan mereka di setiap langkah.
Corak ini membantu pereka pembelajaran beralih dari “Apa yang harus kita ajar?” kepada “Sistem apa yang kita reka?” Peralihan itu penting kerana penyelesaian pembelajaran terbaik mungkin merupakan senario, senarai semak, laluan keputusan, alat bimbingan pengurus, pemilih sumber, bantuan aliran kerja, atau kadangkala ya, kursus.
Pratonton langsung
Terokai sistem di sekitar masalah pembelajaran.
Pilih setiap bahagian peta untuk melihat apa yang perlu dicari, apa yang perlu ditanya, dan jenis langkah reka bentuk apa yang mungkin menyokong prestasi.
Mulakan di sini
Apa yang sebenarnya membentuk prestasi?
Kebanyakan permintaan pembelajaran bermula dengan hasil. Peta ini membantu anda memeriksa sistem yang lebih besar sebelum memutuskan apa yang perlu dibina.
Kod permulaan
Salin struktur dan sesuaikan nod.
Versi permulaan ini menunjukkan struktur minimum: butang nod, panel langsung, dan skrip kecil yang mengemas kini kandungan apabila pelajar memilih bahagian sistem.
<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>Cara untuk menyesuaikannya
Namakan semula label nod, kemas kini objek data, dan gaya peta untuk sepadan dengan jenama atau aliran kerja anda. Corak teras adalah mudah: pelajar memilih elemen sistem, dan panel menerangkan apa yang perlu diperiksa seterusnya.
Nota penyebaran S3
Cara untuk menganjurkan ini sebagai infografik interaktif ringan.
Simpan fail sebagai index.html
Simpan HTML, CSS, dan JavaScript dalam satu fail jika anda mahu penyebaran yang paling mudah.
Muat naik ke bucket S3 anda
Gunakan laluan hosting yang diluluskan dan ikut proses keselamatan, akses, dan semakan organisasi anda.
Tetapkan jenis kandungan
Pastikan fail disajikan sebagai text/html. Jika jenis kandungan salah, pelayar mungkin memuat turun fail tersebut daripada memaparkannya.
Sajikan melalui URL yang diluluskan
Gunakan laluan penghantaran awam atau dalaman yang diluluskan. Dalam banyak organisasi, ini mungkin melibatkan CloudFront, CDN dalaman, atau lapisan hosting yang lain.
Uji halaman di desktop dan mudah alih
Buka URL yang dihoskan secara langsung dan uji setiap interaksi sebelum menyemat atau menghubungkannya dalam pengalaman pembelajaran.
Cara menggunakan ini dengan Rise, Storyline, atau halaman dalaman
Articulate Rise
Gunakan URL yang dihoskan sebagai pautan butang, kandungan web terbenam, atau sumber luaran apabila peta memerlukan lebih banyak ruang daripada blok Rise standard.
Articulate Storyline
Gunakan halaman yang dihoskan sebagai objek web, atau bina semula logik dalam Storyline dengan lapisan, keadaan, pembolehubah, dan JavaScript.
Halaman wiki dalaman
Pautkan ke halaman yang dihoskan dari SOP, halaman pelancaran, pusat pasukan, atau sumber pemerkasaan.
Portal pembelajaran
Gunakan peta sebagai sumber berdiri sendiri untuk pereka pembelajaran, pengurus, pasukan program, atau rakan pemerkasaan.
Nota penyesuaian
Cara paling mudah untuk menyesuaikan corak ini adalah dengan mengemas kini lapan nod peta dan kandungan yang berkaitan dengan setiap nod.
Namakan semula nod untuk sepadan dengan proses, audiens, bahasa pasukan, atau model reka bentuk pembelajaran anda.
Kemas kini setiap panel dengan dorongan, soalan reka bentuk, langkah sokongan, atau contoh anda sendiri.
Ubah gradien, sempadan, radius kad, tipografi, dan jarak untuk sesuai dengan jenama anda.
Rangka semula peta berdasarkan aliran kerja tertentu, pelancaran produk, model sokongan, atau masalah operasi.
Nota aksesibiliti
Corak permulaan ini menggunakan butang sebenar untuk setiap nod interaktif, yang lebih baik daripada menjadikan bentuk bukan-semantik boleh diklik. Panel kandungan menggunakan kawasan aria-live supaya kemas kini boleh diumumkan oleh teknologi bantuan.
Sebelum menggunakan ini dalam pengeluaran, uji navigasi papan kekunci, keterlihatan fokus, kontras warna, tingkah laku pembaca skrin, dan kebolehan mudah alih. Jika anda menambah animasi, hormati pilihan gerakan yang dikurangkan.
Makmal Reka Bentuk
Gunakan ini sebagai alat pemikiran, bukan sekadar visual.
Tujuan Peta Sistem Pembelajaran bukan untuk menjadikan strategi pembelajaran kelihatan menarik. Ia adalah untuk membantu pasukan berhenti seketika untuk bertanya soalan yang lebih baik tentang apa yang sebenarnya diperlukan oleh orang, di mana kerja terputus, dan jenis sokongan yang akan menjadikan prestasi lebih jelas, konsisten, dan berguna.