कर्मचारियों को नए सिस्टम में काम करने के लिए खुद को कैसे बनाना है

एक बैंक ने ऑपरेटर नौकरियों के लिए एक नई प्रणाली शुरू की। यह हमारे लिए कोई भी नया इंटरफ़ेस है - सरल। और कुछ लोगों के लिए, यहां तक ​​कि एक बटन शिफ्ट भी आतंक का कारण बनता है। सब कुछ तुरंत नया था। नतीजतन, काम उठ गया। जैसा कि अक्सर होता है, लोग खुद से मैनुअल अध्ययन नहीं करना चाहते थे। अधिक बार वे तकनीकी सहायता कहते हैं और सहयोगियों को यह दिखाने के लिए कहते हैं कि कौन से बटन दबाएं। और निर्देशों के निर्माण में बहुत समय लगा।

एक बार, एक सेवा के रचनाकारों के बारे में जो हम आज बात करेंगे, उसी समस्या का सामना करना पड़ा। उन्होंने निर्देश को सीधे सिस्टम में संवादात्मक संकेतों के रूप में स्थानांतरित करने का निर्णय लिया। आप जानते हैं कि पहली बार जब आप किसी एप्लिकेशन या गेम को लॉन्च करते हैं, तो वे आपको दिखाते हैं: यह शूटिंग बटन है, यह कैसे चलाना है, क्राउच करने के लिए "क्राउच" दबाएं, और इसी तरह।

केवल सार्वभौमिक रूप से, ताकि आप किसी भी इंटरफ़ेस पर कॉन्फ़िगर कर सकें और कोई भी व्यक्ति इसे कर सके, यहां तक ​​कि प्रोग्रामिंग से भी दूर।



ऐसा उन्होंने किया।

सेवा को HintEd कहा जाता था। यह किसी भी वेब एप्लिकेशन के इंटरफेस पर एक अलग परत के रूप में काम करता है: यह एक वेबसाइट, एक कॉर्पोरेट पोर्टल, कुछ प्रकार की व्यवसाय प्रणाली हो सकती है। योजनाओं में विन-एप्लिकेशन और आईओएस / एंड्रॉइड डिवाइसों के लिए मूल अनुप्रयोगों के घटक शामिल हैं।

संपादक ब्राउज़र एक्सटेंशन में है। उपयोगकर्ता इसे एक बार इंस्टॉलेशन में लॉग इन करता है, फिर वांछित पेज पर बटन दबाता है और मार्कअप प्रॉम्प्ट मोड पर स्विच करता है। क्रोम, फ़ायरफ़ॉक्स, ओपेरा, एज, Yandex.Browser और Vivaldi समर्थित हैं।

संपादक का उपयोग करके, व्यवस्थापक प्रॉम्प्ट का एक क्रम बनाता है, उन्हें इंटरफ़ेस तत्वों से जोड़ता है और वर्णन करता है कि उपयोगकर्ता को क्या करना चाहिए: क्लिक करें, कुछ पाठ दर्ज करें, कुछ महत्वपूर्ण पढ़ें।

संकेत हमारे क्लाउड सर्वर पर संग्रहीत होते हैं, और किसी भी समय उन्हें जल्दी से संपादित किया जा सकता है या अनुक्रम को बदल सकता है।

उपयोगकर्ता के लिए इसे सुविधाजनक बनाने के लिए, डेवलपर पृष्ठ पर नियंत्रण का पता लगाता है और उन्हें बांधता है। यही है, डिस्प्ले बदलते समय (तत्वों के समान तर्क के साथ), संकेतों को फिर से नहीं करना होगा।

जब कोई उपयोगकर्ता किसी पृष्ठ पर जाता है, तो वह तत्व द्वारा हमारे परत तत्व से टूलटिप्स देखता है।

एक तत्व का पता लगाना थोड़ा जटिल है। गणना के लिए, परियोजना ने तीन पुस्तकालयों के रूप में कई का उपयोग किया। वेब पेज अब स्थिर नहीं हैं और डेटा लोड करने के लिए AJAX का सक्रिय रूप से उपयोग कर रहे हैं: उदाहरण के लिए, एक ही तालिका में सैकड़ों समान तत्व मिल सकते हैं जो एक दूसरे को प्रतिस्थापित करते हैं। आप मार्कअप अनुप्रयोगों को शायद ही कभी पा सकते हैं जो अद्वितीय पहचानकर्ता या यहां तक ​​कि विशिष्ट सीएसएस कक्षाओं का उपयोग करते हैं, जब कोई लाइब्रेरी होती है जो वर्चुअल डोम ट्री के साथ काम करती है, और कुछ फ्रेमवर्क उनके द्वारा उपयोग किए जाने वाले डेटा मॉडल के आधार पर पहचानकर्ता और विशेषताएँ उत्पन्न करते हैं।

गणना की प्रक्रिया एक उपयोगकर्ता क्लिक के साथ शुरू होती है, यह विसर्जन चरण के दस्तावेज़ पर इंटरसेप्ट होती है ।addventventListener ('क्लिक', (e) => {...}, true); तब इसका लक्ष्य (e.target) प्रसंस्करण के लिए पहली लाइब्रेरी में जाता है, यह क्रोमियम डीबगिंग इंस्पेक्टर के मॉड्यूल में से एक है।

आउटपुट एक CSS चयनकर्ता और / या xPath है, जो 97 प्रतिशत संभावना के साथ एक समय में विशिष्ट रूप से एक तत्व की पहचान करेगा। क्यों नहीं 100 और इस समय क्यों? यह उपयोगिता किसी तालिका या मेनू आइटम में एक अद्वितीय पंक्ति को खोजने के लिए खुद को उस पर ध्यान केंद्रित करने के लिए निर्धारित नहीं करती है, इसका कार्य सरल है: एक तत्व के लिए सबसे सटीक चयनकर्ता की गणना करें ताकि इसे वर्तमान में प्राप्त किया जा सके। सब कुछ जो विशिष्टता की बात करता है, सीएसएस चयनकर्ता (प्रकार, आईडी, वर्ग के साथ इनपुट) में जोड़ा जाएगा: यह व्यवहार सबसे स्थिर तत्वों के लिए काम करेगा, लेकिन संकेत स्क्रिप्ट ज्यादातर गतिशील तत्वों के साथ काम करते हैं, इसलिए प्रक्रिया को दूसरी लाइब्रेरी में स्थानांतरित कर दिया जाता है।

दूसरा एक पुस्तकालय है जो एक तत्व का सीएसएस चयनकर्ता उत्पन्न करता है, लेकिन साथ ही इसमें बड़ी संख्या में इनपुट पैरामीटर हैं जो आउटपुट परिणाम पर लचीला नियंत्रण की अनुमति देते हैं। इस लाइब्रेरी का उपयोग करते हुए, हम एक साथ कई चयनकर्ताओं को उत्पन्न करते हैं: DOM ट्री में तत्व का पूर्ण पथ और सबसे सार पथ जो सभी बारीकियों को अनदेखा करता है, जिसमें विशेषताओं 'id', 'class', 'href', 'src', 'data- *' शामिल हैं। , साथ ही फ्रेमवर्क द्वारा उपयोग किए जाने वाले प्रशिक्षित विशेषताओं और टैगों की एक सूची। यह आपको DOMPresentationUtils के विपरीत, एक CSS चयनकर्ता जो एज स्टेट्स पर है, प्राप्त करने की अनुमति देता है और जो विशेषताओं को बदलने या DOM ट्री में किसी तत्व को ले जाने पर बहुत अधिक स्थिर व्यवहार करता है।

और तीसरा पुस्तकालय, जिसमें विशेष प्रकार के चयनकर्ता शामिल हैं:

1. पिछले चरण, मूल तत्वों और स्क्रीन के किनारों के सापेक्ष तत्व की सापेक्ष स्थिति;
2. तत्व की सामग्री: इसका पाठ, वंशजों की संख्या और उनकी अनूठी विशेषताएं;
3. बाहरी विशेषताएं: DOM ट्री में गहराई, मूल तत्व, जिसमें दो से अधिक वंशज हैं, आदि।

इससे गणना चरण समाप्त हो जाता है, डेटा स्क्रिप्ट में सहेजा जाता है, और नियंत्रण ब्राउज़र पर वापस स्थानांतरित कर दिया जाता है और सत्यापन पूरा करने के लिए घटना के तुरंत बाद रोक दिया जाता है।

सत्यापन एक आवश्यक कदम है जो दो पुनरावृत्तियों में किया जाता है, पहली घटना के निष्पादित होने के तुरंत बाद होता है, उस समय जावास्क्रिप्ट हैंडलर लक्ष्य तत्व के तत्वों या कक्षाओं को जोड़ या हटा सकते हैं। चयनकर्ता वैकल्पिक रूप से DOM ट्री से एक तत्व का चयन करते हैं और परिणाम को कोड में पहले से सहेजे गए लिंक के साथ तुलना करते हैं। चयनकर्ताओं को पहले निष्पादन की गति से हल किया जाता है, और फिर गलत परिणाम देने वाले लोग सूची के बहुत नीचे तक गिर जाते हैं, और चयनकर्ता उनके लिए पुनर्जीवित हो जाते हैं। दूसरा पुनरावृत्ति पिछले एक के कार्यों को दोहराता है और अगले चरण की शुरुआत से पहले शुरू होता है। यह पुनरावृत्ति यह सुनिश्चित करने के लिए आवश्यक है कि चयनकर्ता तब काम करता है जब बाहरी संशोधक उस पर कार्य नहीं करते हैं (कोई हॉवर, क्लिक, फ़ोकस इवेंट नहीं हैं) और यह सापेक्ष शांति में है - ठीक उसी तरह जैसे कि तत्व का चयन करने से पहले।

पुस्तकालय भी iframes के साथ अच्छी तरह से काम करते हैं, उनके लिए प्रक्रिया iframe के लिए एक चयनकर्ता की पीढ़ी (और अन्य iframes के अंदर भी iframes) को छोड़कर समान है, जिसमें अन्य iframes के अंदर पुनरावृत्ति उत्पन्न करने और बाहर से विलय करने के होते हैं।

इसे कैसे दिखाया जाता है?

सिस्टम के उपयोगकर्ताओं को संकेत दिखाने के लिए, आप उसी ब्राउज़र प्लग-इन का उपयोग कर सकते हैं या पृष्ठ में विजेट एम्बेड कर सकते हैं।

दूसरा अधिक बार चुना जाता है और अतिरिक्त कुछ भी स्थापित करने के लिए उपयोगकर्ता से किसी भी कार्रवाई की आवश्यकता नहीं होती है।

HintEd में कई विजेट और खिलाड़ी हैं जो सिस्टम में एम्बेड करने के लिए हैं। यह एक हल्का खिलाड़ी हो सकता है जो केवल कुछ ट्रिगर्स के लिए संकेत खेलता है, या एक बटन के साथ एक विजेट, जिस पर क्लिक करके उपयोगकर्ता उपलब्ध संकेतों की एक सूची लाएगा और ज़रूरत पड़ने पर उन्हें खेलने में सक्षम होगा। इन सभी मॉड्यूलों का उपयोग प्रतिक्रिया / कोणीय, वेब एप्लिकेशन या किसी पृष्ठ पर वैश्विक ऑब्जेक्ट के रूप में किया जा सकता है।

इस प्रकार, आप किसी भी सिस्टम के लिए सुझाव दे सकते हैं: तीसरे पक्ष के डेवलपर्स या कंपनी के स्वयं के विकास के लिए बंद। और डेवलपर्स जटिल तर्क के साथ स्क्रिप्ट और टूलटिप्स चलाने के लिए एपीआई का उपयोग कर सकते हैं, उदाहरण के लिए, एक विशिष्ट तत्व पर मँडरा करके।

शीघ्र इनपुट इंटरफ़ेस रूसी और अंग्रेजी है, क्योंकि डेवलपर पश्चिमी बाजार के लिए भी उन्मुख है (भाषा अवरोध के कारण लोगों को अपने सिस्टम के लिए सिखाना सबसे मुश्किल है और अपनी उंगली से सब कुछ दूर करने की आवश्यकता है)।





HintEd ग्राहकों के बीच रिटेल बैंकिंग, HoReCa, तेल और गैस निर्माण से कई कंपनियां हैं, जहां अंतिम उपयोगकर्ता हमेशा एक प्रोग्रामर को एक सिस्टम प्रशासक और एक प्रोसेसर से एक सिस्टम यूनिट से अलग नहीं करते हैं। इसलिए, यह दोनों एकीकरण पर और एक प्रणाली के रूप में काम आएगा जो ग्राहक को सेवा के रूप में दिया जा सकता है।

बैंक के लिए पायलट के लिए, हमने 10 बल्कि बड़े परिदृश्य बनाए, जिन्होंने लगभग पूरे इंटरफ़ेस को कवर किया और उपयोगकर्ताओं को समझाया कि सिस्टम में कैसे काम किया जाए। सामान्य प्रक्रिया में, इस तरह की संवादात्मक मदद विकसित करने में कई महीने लगेंगे, और निर्देश लिखने के लिए भी उतनी ही राशि लगेगी। और यहां आप सीधे इंटरफेस के शीर्ष पर आकर्षित कर सकते हैं।



विजेट को तीन सप्ताह के लिए लागू किया गया था (और समय का एक महत्वपूर्ण हिस्सा बैंक के साथ सहमत था, जिसमें सुरक्षाकर्मी भी शामिल थे)। उपयोगकर्ताओं ने इंजेक्शन दिया, रोया, लेकिन सिस्टम का अध्ययन किया। एक नियंत्रण समूह था जिसने पुराने ढंग से अध्ययन किया था: चार आकाओं में व्यक्ति या स्काइप पर। उन्हें प्रशिक्षण में 20 प्रतिशत की तेजी की उम्मीद थी, लेकिन ग्राहक की रेटिंग 43.9% है। प्रक्रियाओं में त्रुटि दर भी घट गई। प्रशिक्षण की लागत में लगभग 20% की कमी हुई।

इतनी शांति, दोस्ती, च्यूइंग गम! उत्पाद ने हाल ही में हमारे त्वरक को पारित किया, कार्यक्रम के तीन महीनों के लिए हमने इसमें गहराई से डुबकी लगाई और अब इसे अपने ग्राहकों को वितरित कर रहे हैं। यदि आपके पास एक भयावह सॉफ्टवेयर है और आपको इसे सीखने की आवश्यकता है - तो यहां मेरा मेल है: SZinkevich@croc.ru।