यह पैटर्न क्या करता है
लर्निंग अनुरोध अक्सर एक डिलीवर करने योग्य के साथ शुरू होते हैं: एक कोर्स, एक मॉड्यूल, एक वीडियो, एक नौकरी सहायता, या एक त्वरित अपडेट। लेकिन असली प्रदर्शन समस्या आमतौर पर एक बड़े सिस्टम में होती है।
यह इंटरएक्टिव मैप लर्निंग डिज़ाइनरों को धीमा करने और यह निरीक्षण करने में मदद करता है कि क्या बनाना है। यह प्रदर्शन के अदृश्य हिस्सों को दृश्य बनाता है: शिक्षार्थी की आवश्यकताएँ, कार्यप्रवाह क्षण, निर्णय बिंदु, उपकरण घर्षण, समर्थन संसाधन, प्रबंधक का समर्थन, जोखिम, और सफलता के संकेत।
लक्ष्य मैप को जटिल बनाना नहीं है। लक्ष्य यह है कि टीमें गलत चीज़ को खूबसूरती से बनाने से पहले बेहतर प्रश्न पूछें।
सबसे अच्छा उपयोग के लिए
इसका उपयोग करें जब लर्निंग अनुरोध डिलीवर करने योग्य से बड़ा हो।
लर्निंग आवश्यकताओं का विश्लेषण
समाधान का नाम देने से पहले यह स्पष्ट करने के लिए मैप का उपयोग करें कि वास्तव में प्रदर्शन अंतर को क्या आकार दे रहा है।
हितधारक वार्तालाप
हितधारकों को समस्या के चारों ओर सिस्टम पर चर्चा करने का एक संरचित तरीका दें, न कि केवल अनुरोधित संपत्ति पर।
प्रदर्शन परामर्श
पहचानें कि क्या समस्या ज्ञान, आत्मविश्वास, कार्यप्रवाह घर्षण, उपकरण, समर्थन, या कुछ और है।
लर्निंग आर्किटेक्चर
मैप करें कि कैसे कोर्स, नौकरी सहायता, प्रबंधक उपकरण, अभ्यास क्षण, और कार्यप्रवाह समर्थन एक साथ फिट होते हैं।
यह क्यों काम करता है
बहुत सारी कार्यस्थल लर्निंग विफल होती है क्योंकि यह प्रदर्शन को एक सामग्री समस्या के रूप में मानती है। कोई एक कोर्स के लिए पूछता है, कोर्स बनाया जाता है, और सभी उम्मीद करते हैं कि काम में बदलाव आएगा।
लेकिन असली प्रदर्शन सामग्री से अधिक से आकार लेता है। लोगों को स्पष्ट अपेक्षाएँ, उपयोगी उपकरण, समय पर समर्थन, आत्मविश्वास से निर्णय लेना, प्रबंधक का समर्थन, और एक ऐसा कार्यप्रवाह चाहिए जो हर कदम पर उनके खिलाफ न हो।
यह पैटर्न लर्निंग डिज़ाइनरों को "हमें क्या सिखाना चाहिए?" से "हम किस सिस्टम के लिए डिज़ाइन कर रहे हैं?" में स्थानांतरित करने में मदद करता है। यह बदलाव महत्वपूर्ण है क्योंकि सबसे अच्छा लर्निंग समाधान एक परिदृश्य, एक चेकलिस्ट, एक निर्णय पथ, एक प्रबंधक कोचिंग उपकरण, एक संसाधन चयनकर्ता, एक कार्यप्रवाह सहायता, या कभी-कभी हाँ, एक कोर्स हो सकता है।
लाइव प्रीव्यू
एक लर्निंग समस्या के चारों ओर सिस्टम का अन्वेषण करें।
मैप के प्रत्येक भाग का चयन करें ताकि यह देखा जा सके कि क्या देखना है, क्या पूछना है, और किस प्रकार का डिज़ाइन कदम प्रदर्शन का समर्थन कर सकता है।
यहाँ से शुरू करें
वास्तव में प्रदर्शन को क्या आकार दे रहा है?
अधिकांश लर्निंग अनुरोध एक डिलीवर करने योग्य के साथ शुरू होते हैं। यह मैप आपको यह निरीक्षण करने में मदद करता है कि क्या बनाना है, इससे पहले कि आप निर्णय लें।
प्रारंभिक कोड
संरचना की नकल करें और नोड्स को अनुकूलित करें।
यह प्रारंभिक संस्करण न्यूनतम संरचना दिखाता है: नोड बटन, एक लाइव पैनल, और एक छोटा स्क्रिप्ट जो सामग्री को अपडेट करता है जब एक सीखने वाला प्रणाली के किसी भाग का चयन करता है।
<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>
इसे अनुकूलित करने का तरीका
नोड लेबल का नाम बदलें, डेटा ऑब्जेक्ट को अपडेट करें, और मानचित्र को आपके ब्रांड या कार्यप्रवाह के अनुसार स्टाइल करें। मूल पैटर्न सरल है: सीखने वाले एक प्रणाली तत्व का चयन करते हैं, और पैनल बताता है कि अगला क्या निरीक्षण करना है।
S3 तैनाती नोट्स
इसे एक हल्के इंटरैक्टिव इन्फोग्राफिक के रूप में होस्ट करने का तरीका।
फ़ाइल को index.html के रूप में सहेजें
यदि आप सबसे सरल संभव तैनाती चाहते हैं तो HTML, CSS, और JavaScript को एक फ़ाइल में रखें।
इसे अपने S3 बकेट में अपलोड करें
अपने स्वीकृत होस्टिंग पथ का उपयोग करें और अपनी संगठन की सुरक्षा, पहुंच, और समीक्षा प्रक्रिया का पालन करें।
सामग्री प्रकार सेट करें
सुनिश्चित करें कि फ़ाइल को इस रूप में प्रस्तुत किया गया है text/html. यदि सामग्री प्रकार गलत है, तो ब्राउज़र फ़ाइल को डाउनलोड कर सकता है बजाय इसके कि इसे प्रदर्शित करे।
अपने स्वीकृत URL के माध्यम से सेवा करें
अपने स्वीकृत सार्वजनिक या आंतरिक वितरण पथ का उपयोग करें। कई संगठनों में, इसमें CloudFront, एक आंतरिक CDN, या अन्य नियंत्रित होस्टिंग परत शामिल हो सकती है।
पृष्ठ का परीक्षण करें डेस्कटॉप और मोबाइल पर
सीधे होस्ट किए गए URL को खोलें और हर इंटरैक्शन का परीक्षण करें इससे पहले कि इसे एक सीखने के अनुभव के अंदर एम्बेड या लिंक किया जाए।
इसे Rise, Storyline, या आंतरिक पृष्ठों के साथ कैसे उपयोग करें
Articulate Rise
जब मानचित्र को एक मानक Rise ब्लॉक से अधिक स्थान की आवश्यकता हो, तो होस्ट किए गए URL का उपयोग बटन लिंक, एम्बेडेड वेब सामग्री, या बाहरी संसाधन के रूप में करें।
Articulate Storyline
होस्ट किए गए पृष्ठ का उपयोग एक वेब ऑब्जेक्ट के रूप में करें, या Storyline के अंदर परतों, राज्यों, चर, और JavaScript के साथ लॉजिक को फिर से बनाएं।
आंतरिक विकी पृष्ठ
SOPs, लॉन्च पृष्ठों, टीम हब, या सक्षम संसाधनों से होस्ट किए गए पृष्ठ के लिए लिंक करें।
लर्निंग पोर्टल
मानचित्र का उपयोग सीखने के डिज़ाइनरों, प्रबंधकों, कार्यक्रम टीमों, या सक्षम भागीदारों के लिए एक स्वतंत्र संसाधन के रूप में करें।
अनुकूलन नोट्स
इस पैटर्न को अनुकूलित करने का सबसे आसान तरीका आठ मानचित्र नोड्स और प्रत्येक नोड से जुड़े सामग्री को अपडेट करना है।
नोड्स का नाम बदलें ताकि यह आपके प्रक्रिया, दर्शक, टीम की भाषा, या सीखने के डिज़ाइन मॉडल से मेल खाता हो।
प्रत्येक पैनल को अपने स्वयं के प्रॉम्प्ट, डिज़ाइन प्रश्न, समर्थन कदम, या उदाहरणों के साथ अपडेट करें।
अपने ब्रांड के अनुसार ग्रेडिएंट्स, बॉर्डर्स, कार्ड रेडियस, टाइपोग्राफी, और स्पेसिंग को बदलें।
एक विशिष्ट कार्यप्रवाह, उत्पाद लॉन्च, समर्थन मॉडल, या संचालन समस्या के चारों ओर मानचित्र को फिर से फ्रेम करें।
पहुंच संबंधी नोट्स
यह प्रारंभिक पैटर्न प्रत्येक इंटरैक्टिव नोड के लिए वास्तविक बटन का उपयोग करता है, जो गैर-सेमांटिक आकारों को क्लिक करने योग्य बनाने से बेहतर है। सामग्री पैनल एक aria-live क्षेत्र का उपयोग करता है ताकि अपडेट सहायक प्रौद्योगिकी द्वारा घोषित किए जा सकें।
इसका उत्पादन में उपयोग करने से पहले, कीबोर्ड नेविगेशन, फोकस दृश्यता, रंग विपरीत, स्क्रीन रीडर व्यवहार, और मोबाइल उपयोगिता का परीक्षण करें। यदि आप एनिमेशन जोड़ते हैं, तो कम गति प्राथमिकताओं का सम्मान करें।
डिज़ाइन लैब
इसका उपयोग एक सोचने के उपकरण के रूप में करें, केवल एक दृश्य के रूप में नहीं।
लर्निंग सिस्टम्स मैप का उद्देश्य लर्निंग रणनीति को आकर्षक बनाना नहीं है। इसका उद्देश्य टीमों को इतना रुकने में मदद करना है कि वे बेहतर प्रश्न पूछ सकें कि लोगों को वास्तव में क्या चाहिए, काम कहाँ टूटता है, और किस प्रकार का समर्थन प्रदर्शन को अधिक स्पष्ट, सुसंगत, और उपयोगी बनाएगा।