आधुनिक वेब रूप: कुछ और सूक्ष्मताएँ

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











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

हाल ही में, सामान्य रूप से और विशेष रूप से दोनों वेब अनुप्रयोगों के डिजाइन में रुझान, अधिकतम सजावट के लिए प्रयास कर रहे हैं: तथाकथित "कारमेल" डिजाइन, ग्रेडिएंट, छाया, उज्ज्वल और गैर-मानक इंटरफ़ेस तत्व। कभी-कभी "डिज़ाइन" के बीच, वास्तविक सामग्री को ढूंढना मुश्किल हो सकता है।

इस तरह के विचारहीन अलंकरण इस तथ्य की ओर जाता है कि वेब एप्लिकेशन का उपयोग करने के मुख्य उद्देश्य से उपयोगकर्ता का ध्यान भंग होता है, उपयोगकर्ता फॉर्म भरने के लिए नहीं, बल्कि इसके डिजाइन का अध्ययन करने के लिए ठीक करना शुरू करता है। अंततः, फ़ॉर्म कभी पूरा नहीं होता है और हमें अपना कीमती रूपांतरण प्राप्त नहीं होता है।

तो, आइए वेब फॉर्म डिज़ाइन में कुछ फैशन ट्रेंड्स देखें:

• फ़ील्ड हेडर का कस्टम लेआउट;
• आवश्यक फ़ील्ड के लिए "क्रिएटिव" टैग;
• हर जगह और हर जगह स्लाइडर्स;
• स्पष्ट रूप से प्रासंगिक सुराग;

फ़ील्ड हेडर का कस्टम लेआउट

शीर्षक (लेबल) बताता है कि आपको किसी पाठ या अन्य क्षेत्र में किस प्रकार की जानकारी दर्ज करने की आवश्यकता है। इसका मतलब है कि इनपुट क्षेत्र पर जाने से पहले उपयोगकर्ता को शीर्षक पढ़ना चाहिए। उन साइटों के लिए जहां सामग्री को ऊपर से नीचे, बाएं से दाएं पढ़ा जाता है, लेबल को इनपुट फ़ील्ड के ऊपर या सीधे इसके बाईं ओर रखना तर्कसंगत है। व्यवहार में, डिजाइनर अक्सर शीर्षक को कहीं भी रख देते हैं, लेकिन उसके लिए प्राकृतिक स्थान पर नहीं।

एक आकर्षक उदाहरण है लेबल इनपुट क्षेत्र (छवि 1) के नीचे स्थित है:



अंजीर। 1 क्षेत्र के नीचे इनपुट क्षेत्र के लिए शीर्षक



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

यह स्पष्ट है कि उपयोगकर्ता इस तरह के एक गैर-मानक रूप को भरने के लिए बहुत अधिक प्रयास करता है, ध्यान तेजी से बह रहा है और, परिणामस्वरूप, भरने के लिए पुनर्वित्त की संख्या बढ़ जाती है।



हमारे अध्ययन के अनुसार, फ़ोकस समूह (मुख्य और नियंत्रण समूह में 30 लोग) का उपयोग करते समय, गैर-मानक रूप से स्थित फ़ील्ड शीर्षकों (20 टेक्स्ट बॉक्स, 10 चेक बॉक्स, 10 सूची बॉक्स, 4 रेडियो बटन के समूह, प्रत्येक में 3) के साथ एक फॉर्म भरते हुए 16.67 हुआ। नियंत्रण समूह के साथ मानक फ़ॉर्म भरते समय% से अधिक विफलताएं (30% के खिलाफ 46.67%), खेतों में भरने के दौरान 30% अधिक त्रुटियां (23.33% के खिलाफ 53.33%), और 63.33% अधिक बार व्यक्त प्रपत्र के डिजाइन के साथ व्यक्तिपरक असंतोष (73.33% बनाम 10%)।



अंजीर। 2 क्षेत्र के तहत स्थित शीर्षकों के साथ रूपों की प्रयोज्यता के अध्ययन के परिणाम हैं



एक और सामान्य मामला इनपुट फ़ील्ड के अंदर हेडर के साथ रूपों (छवि 3) है:



अंजीर। 3 क्षेत्र के अंदर ही इनपुट क्षेत्र के लिए शीर्षक



यहां कुछ कारण बताए गए हैं कि इतनी बार इस्तेमाल किया जाने वाला समाधान वास्तव में सही विकल्प नहीं है:

• जब उपयोगकर्ता फ़ील्ड में डेटा दर्ज करना शुरू करता है, तो शीर्षक गायब हो जाता है। और अगर उपयोगकर्ता किसी चीज़ से विचलित होता है, तो फॉर्म में वापस आ रहा है, वह तुरंत यह नहीं समझ पाएगा कि वह किस तरह का क्षेत्र भर रहा है;
• विशेष रूप से कठिन मामलों में, जब डेवलपर्स फ़ील्ड में क्लिक करते समय शीर्षक को स्वचालित रूप से गायब करने के लिए js का उपयोग करने के लिए बहुत आलसी थे, तो उपयोगकर्ता को इस शीर्षक को हटाने के लिए कई अतिरिक्त मानसिक और शारीरिक क्रियाएं करनी होंगी। वही मौजूदा के लिए सच है, लेकिन टूटी हुई जावास्क्रिप्ट;
• हेडर के साथ फ़ील्ड भरे हुए दिखते हैं, इसलिए यह संभावना है कि उपयोगकर्ता किसी भी फ़ील्ड को छोड़ देगा;
• इस घटना में कि फॉर्म पूरी तरह से भरा हुआ है, उपयोगकर्ता के पास फ़ील्ड भरने की शुद्धता को सत्यापित करने का अवसर नहीं है, उन्हें हेडर के साथ सहसंबंधित करना;
• फॉर्म को सीधे प्रिंट करने की क्षमता खो जाती है, क्योंकि जब हेडर गायब होते हैं, तो यह स्पष्ट नहीं हो जाता है कि खेत क्या हैं;
• ऐसे मामलों में रूपों के ऐसे डिज़ाइन का उपयोग करना असंभव है जहां फ़ील्ड हेडिंग में 2-3 से अधिक शब्द होते हैं;
• जेएस ने इस डिजाइन को लागू करने के लिए अनुचित रूप से फ्रंट-एंड कोड को जटिल किया;

तो क्यों, इस तरह की स्पष्ट खामियों के बावजूद, डिजाइनर फ्रंट-एंड के विकास में इस तकनीक का उपयोग करना जारी रखते हैं? कुछ विशेषज्ञों का तर्क है कि वेब फ़ॉर्म अधिक सटीक रूप लेता है। इस कथन से कोई बहस कर सकता है। हां, फॉर्म कम जगह लेता है, लेकिन इसकी कार्यक्षमता को काफी कम कर देता है। यह रेफ्रिजरेटर से बाहर भोजन फेंकने के समान है, ताकि उसमें अलमारियां दिख सकें। डिजाइनरों को अपने जुनून को दबा देना चाहिए यदि यह प्रयोज्य को नुकसान पहुंचाता है।



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

आवश्यक फ़ील्ड के लिए क्रिएटिव लेबल

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

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



चित्र 4 आवश्यक फ़ील्ड के लिए कस्टम लेबल डिज़ाइन के उदाहरण



और, अंत में, आवश्यक क्षेत्रों को चिह्नित करने का सबसे अच्छा तरीका शीर्षक (छवि 5) को रेखांकित करना है। हां, हां, यहां तक ​​कि ऐसी चीजें कभी-कभी कुछ डिजाइनरों के दिमाग में आती हैं, जो रचनात्मकता से प्रभावित होती हैं।



अंजीर। 5 रेखांकित शीर्षकों - "रचनात्मक" अधर्म का शिखर



यह आमतौर पर स्वीकार किया जाता है कि वेब दस्तावेजों में अंडरस्कोर का मतलब एक लिंक है। अब आइए उस संज्ञानात्मक असंगति की कल्पना करें जो एक उपयोगकर्ता में उत्पन्न होती है जो एक रूप में रेखांकित शीर्षकों को देखता है। व्यक्तिगत रूप से, मैं ये पता लगाने के लिए उन पर क्लिक करना शुरू कर दूंगा कि ये लिंक क्या हैं और फॉर्म भरने की प्रक्रिया से विचलित होने के लिए। और मेरे लिए, कई उपयोगकर्ताओं के लिए, यह बिल्कुल स्पष्ट नहीं है कि रेखांकित शीर्षकों वाले क्षेत्रों की आवश्यकता है।

ब्याज की खातिर, हमने अनिवार्य फ़ील्ड लेबल के विषय पर 30 लोगों के एक फोकस समूह में एक छोटा सा संकीर्ण अध्ययन किया, जो निम्न परिणाम प्राप्त हुए: सर्वेक्षण में शामिल 90% लोग लाल सितारा को आवश्यक फ़ील्ड के प्रतीक के रूप में पहचानते हैं, 73.33% समझते हैं कि लाल बॉक्स उसी को इंगित करता है। कि तारांकन (उसी समय 33.3% लोग इस तरह के पदनाम से असुविधा महसूस करते हैं), और केवल 6.67% उत्तरदाताओं ने तुरंत एक संकेत को रेखांकित किया कि क्षेत्र की आवश्यकता है (बाकी "लिंक" पर क्लिक करने की कोशिश की)



अंजीर। 6 मानक और आवश्यक फ़ील्ड लेबल के साथ रूपों की प्रयोज्य अध्ययन के परिणाम नहीं हैं

स्लाइडर्स और स्क्रॉल रूपों में

लेख के इस भाग में, हम स्लाइडर्स और स्क्रॉल के बारे में बात करेंगे, जो इंटरफ़ेस का सहायक हिस्सा नहीं है, लेकिन प्रपत्र में जानकारी दर्ज करने का एक सीधा तरीका है।

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

सबसे अधिक बार, "घुंडी-नियामक" की मुख्य विशेषता - चिकनी ट्यूनिंग - बस वेब पर आवश्यक नहीं है, इसलिए स्पष्ट रूप से निश्चित मूल्यों के साथ उत्परिवर्ती स्लाइडर्स दिखाई देते हैं (छवि 7)।



अंजीर। 7 रूपों में स्लाइडर्स का दुरुपयोग



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

• लिस्टबॉक्स प्रकार नियंत्रण स्वयं कहता है कि उपयोगकर्ता पूर्वनिर्धारित सूची से केवल एक मान का चयन कर सकता है, जबकि स्लाइडर का अर्थ है मानों की एक सीमा से चयन;
• ड्रॉप-डाउन सूची में एक मूल्य का चयन करने के लिए, उपयोगकर्ता अपने विवेक पर कीबोर्ड या माउस का उपयोग कर सकता है, जबकि स्लाइडर के साथ यह सीमित है, ज्यादातर मामलों में, केवल माउस के लिए;
• उपयोगकर्ता, सामान्य तौर पर, स्लाइडर्स की तुलना में ड्रॉप-डाउन सूचियों के अधिक आदी होते हैं;
• विकलांग लोगों के उपयोग के लिए सूची बॉक्स अधिक लचीला और सुलभ है;

आप स्लाइडर्स पर ड्रॉप-डाउन सूचियों के फायदों के बारे में लंबे समय तक बहस कर सकते हैं, लेकिन सूखे नंबर खुद के लिए बोलते हैं: असामान्य नियंत्रणों का उपयोग करते समय रूपांतरण में स्पष्ट कमी आती है।

इस प्रकार, सबसे बड़े ऑस्ट्रेलियाई नौकरी पोर्टल के लिए किए गए एक अध्ययन में एक स्लाइडर को प्रतिस्थापित करते समय रूपांतरण में आठ प्रतिशत की वृद्धि देखी गई जो आपको दो सूची बॉक्स (छवि 8) द्वारा वेतन सीमा चुनने की अनुमति देती है।



अंजीर। 8 सामान्य ड्रॉप-डाउन सूचियों के साथ "समझ से बाहर" स्लाइडर की जगह के परिणाम



इस अध्ययन में रूपांतरण एक रिक्ति के चयन के लिए एक मानदंड के रूप में मजदूरी की एक सीमा के उपयोगकर्ता द्वारा उपयोग किया गया था।

पोर्टल के प्रबंधन ने "ठीक-ट्यूनिंग" खोज मापदंडों के पृष्ठ पर "पेरोल स्लाइडर" का उपयोग करने का निर्णय लिया, अर्थात जहां प्राप्त परिणामों को परिष्कृत करना आवश्यक है (चित्र 9)।



अंजीर। 9 स्लाइडर को परियोजना के गैर-महत्वपूर्ण भागों में सफलतापूर्वक उपयोग किया जा सकता है।



कई साइटों पर, स्लाइडर का उपयोग उपयोगकर्ताओं को मूल्यों की एक विस्तृत श्रृंखला से सटीक रूप से चयन करने की क्षमता प्रदान करने के लिए किया जाता है, जबकि उपयोगकर्ता कुछ पूर्वनिर्धारित समाधानों से अधिक संतुष्ट होंगे।

उदाहरण के लिए, अंजीर में स्लाइडर। 10 $ 10 की सटीकता के साथ उपयोगकर्ता को प्रति रात एक लड़की की अधिकतम लागत निर्धारित करने की अनुमति देता है। लेकिन क्या वास्तव में उपयोगकर्ता के लिए यह सोचना आवश्यक है कि क्या वह अपनी खोज को 740 डॉलर तक सीमित कर सकता है या फिर भी 750 पर टूट सकता है? पूर्वनिर्धारित मूल्य श्रेणियों (जैसे, 0 से 50 डॉलर, 50 से 100 तक, 100 से 200, आदि) के साथ चेकबॉक्स का उपयोग करके चयन को सुविधाजनक बनाना बहुत बेहतर है।



अंजीर। 10 चेकबॉक्स के एक समूह के खिलाफ स्लाइडर: लोगों को फिर से सोचने के लिए मत करो



वास्तव में, स्लाइडर्स इतने बुरे नहीं हैं, आपको बस उन्हें (किसी भी अन्य नियंत्रणों की तरह) उपयोग करने की आवश्यकता है, न कि वैसे भी, लेकिन केवल वास्तव में बहुत कम मामलों में।

स्लाइडर के सही उपयोग का एक उदाहरण अंजीर है। 11, और यहाँ क्यों है:

• इस मामले में, उस श्रेणी के अंतिम मूल्यों को दिखाना महत्वपूर्ण है जिसमें से उपयोगकर्ता चुन सकता है। डेटा के ऐसे दृश्य प्रतिनिधित्व के साथ, स्लाइडर एक उत्कृष्ट काम करता है;
• सटीक मूल्य का चयन करना संभव है;
• उपयोगकर्ता तुरंत बीमा प्रीमियम की लागत में परिवर्तन पर अपनी पसंद का प्रभाव देखता है;
• यदि उपयोगकर्ता को अपनी कार की सही लागत पता है, तो वह तुरंत एक स्लाइडर के साथ संयुक्त टेक्स्टबॉक्स में दर्ज कर सकता है;
• स्लाइडर, एक असामान्य इंटरफ़ेस तत्व के रूप में, एक उबाऊ रूप को भरने के लिए विविधता लाता है;

अंजीर। 11 स्लाइडर अपने उपयोगकर्ता को अपनी कार के मूल्य का चयन करने की अनुमति देता है।

असंदिग्ध प्रासंगिक संकेत देता है

प्रासंगिक संकेत रूपों को भरने की प्रक्रिया में उपयोगकर्ता को समय पर सहायता प्रदान करते हैं। एक उदाहरण पास-बॉक्स फ़ील्ड के नीचे एक मान्य पासवर्ड प्रारूप का वर्णन है।

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

वास्तव में, उपयोगकर्ता को प्रासंगिक सहायता प्रदान करना रूपों को भरने से बहुत सरल कर सकता है, और इसलिए रूपांतरण और वफादारी बढ़ाता है। उपयोगकर्ता को अपनी ज़रूरत की जानकारी प्राप्त करने के लिए आइकन पर क्लिक के रूप में अतिरिक्त प्रयास करने के लिए बाध्य करने की आवश्यकता नहीं है।

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



चित्र 12 संदर्भात्मक संकेतों के एक सक्षम डिजाइन के साथ एक रूप का उदाहरण



निश्चित रूप से प्रासंगिक मदद को छिपाते हुए परिचित आइकन का उपयोग, फॉर्म के आकार को कम करता है और अधिक "स्वच्छ" लुक (छवि 13) की ओर जाता है, लेकिन यह उपयोगकर्ता को एक अतिरिक्त कार्रवाई करने के लिए मजबूर करता है कि वह हमेशा एक त्रुटि करने से पहले नहीं जाएगा (हम नहीं करते) निर्देश पढ़ने के लिए प्यार)।



आकृति 13 आकार को कम करने के लिए आइकन का उपयोग करना



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



एक फोकस समूह (60 लोगों) की भागीदारी के साथ हमारे अध्ययन के अनुसार, 23.33% उपयोगकर्ता प्रासंगिक मदद की पूर्ण कमी के कारण एक जटिल रूप को पूरा नहीं करते हैं और एक संकेत प्राप्त करने के लिए संबंधित आइकन पर क्लिक करने की आवश्यकता होने पर 13.33% एक फॉर्म से बाहर हो जाते हैं। इसी समय, 63.33% उत्तरदाता प्रासंगिक मदद की कमी के साथ व्यक्तिपरक असंतोष व्यक्त करते हैं, और 30% सहायता आइकन (चित्र 14) पर अतिरिक्त क्लिक की आवश्यकता व्यक्त करते हैं।



अंजीर। 14 प्रासंगिक मदद के निरक्षर उपयोग के कारण, 23% तक उपयोगकर्ता खो जाते हैं, और वफादारी 60% से अधिक के लिए कम हो जाती है



उसी स्थिति में, यदि परिस्थितियाँ हमें स्पष्ट प्रासंगिक मदद के बजाय आइकन का उपयोग करने के लिए मजबूर करती हैं, तो हमें ध्यान रखना चाहिए कि यह आइकन सामान्य मानकों को पूरा करता है।

यह आमतौर पर स्वीकार किया जाता है कि मदद एक नीली पृष्ठभूमि पर एक प्रश्न चिह्न द्वारा इंगित की जाती है। इस तरह के इन्फोग्राफिक्स का उपयोग न केवल वेब डिजाइन में किया जाता है, बल्कि रोजमर्रा की जिंदगी में भी किया जाता है, इसलिए, अधिकांश उपयोगकर्ताओं ने लंबे समय तक "ज्ञान" विकसित किया है: यदि किसी प्रश्न चिह्न के साथ नीले आइकन द्वारा संकेत दिया जाता है, तो आप वहां सहायता प्राप्त कर सकते हैं।

जब एक डिजाइनर मानक आइकन को कुछ और रचनात्मक के साथ बदलने का फैसला करता है, उदाहरण के लिए, एक लाइफबॉय (छवि 15), तो यह उपयोगकर्ता के लिए अतिरिक्त कठिनाइयों का कारण बनता है, जो अंततः रूपांतरण को कम करता है।



अंजीर। 15 संकेत का संकेत करने के लिए गैर-मानक इन्फोग्राफिक्स का उपयोग करने से इस रूप को समझने में कठिनाइयों का सामना



करना पड़ता है । ऐसा लगता है कि फ़ील्ड के बगल में मदद पाठ के साथ एक पॉप-अप विंडो एक समझौता के रूप में काम कर सकती है, हालांकि, समस्याएं यहां दुबक सकती हैं:

• उपयोगकर्ता, यह जानते हुए भी कि प्रासंगिक मदद नहीं है, यहां तक ​​कि फॉर्म भरने से पहले उठने वाले प्रश्नों को भी हल करना शुरू कर सकते हैं। लेकिन हम चाहते हैं कि उपयोगकर्ताओं को तनाव न हो, है ना?
• , , , , ;
• ;
• , ;

केवल एक मामले में यह आइकन के तहत प्रासंगिक मदद को छिपाने या इसे डिज़ाइन करने के लिए बिल्कुल भी समझ में नहीं आता है - जब उपयोगकर्ताओं के अपेक्षित प्रतिशत को इस विशेष वेब फॉर्म में ऐसी मदद की आवश्यकता हो सकती है, तो इस तरह के फ़ंक्शन को इंटरफ़ेस में पेश करना लाभहीन हो जाता है।

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

इसी समय, उपयोगकर्ता को धराशायी अंडरलाइनिंग के साथ नियंत्रण हेडर की व्यवस्था करके प्रासंगिक मदद की उपलब्धता के बारे में सूचित करना संभव है, जो इस तरह के लिंक के लिए सामान्य मानक है।

हालांकि, किसी को यह नहीं भूलना चाहिए कि जो उपयोगकर्ता स्मार्टफोन या टैबलेट से साइट पर जाते हैं, उन्हें ऐसे सुझावों को देखने के अवसर से वंचित किया जाएगा यदि वे लिंक पर होवर करते समय दिखाई देते हैं।



अंजीर। 16 टूलटिप्स का उपयोग करने के लिए एक समझौता है

निष्कर्ष

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

प्रपत्र के प्रत्येक कार्यान्वित तत्व, प्रत्येक स्थान नियंत्रण से बाहर का उपयोग उपयोगकर्ता के लिए असुविधा, कम रूपांतरण और अंततः, कंपनी द्वारा लाभ की हानि की ओर जाता है। आखिरकार, शैतान विवरण में है, इसे याद रखें।



Disclaimer: , «» -. — , . .