वेब रूपों की उपयोगिता में सुधार के लिए 10 सुझाव

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

1. स्पष्ट रूप से आवश्यक फ़ील्ड चुनें

जब कोई उपयोगकर्ता पूरा किया गया फॉर्म जमा करता है और तब उसे पता चलता है कि उसे आवश्यक फ़ील्ड याद आ गई हैं - यह कष्टप्रद है।

यह उनके नाम के आगे एक तारांकन चिह्न (*) के साथ आवश्यक क्षेत्रों को उजागर करने के लिए प्रथागत है। स्पष्ट रूप से यह दर्शाता है कि किसी क्षेत्र को भरने की आवश्यकता है या नहीं यह सही निर्णय है।

आवश्यक फ़ील्ड Zappos.com पंजीकरण फॉर्म पर एक तारांकन चिह्न (*) के साथ चिह्नित हैं। वैकल्पिक फ़ील्ड भी स्पष्ट रूप से इंगित किए जाते हैं।

2. सुविधाजनक और विस्तृत त्रुटि संदेशों का उपयोग करें

मुझे यकीन है कि जब आप फ़ॉर्म गलत तरीके से भरे जाते हैं, तो यह कहते हुए कि आप स्थितियों से नफरत करते हैं, यह कहते हुए: "आपको सभी आवश्यक फ़ील्ड भरने होंगे," उदाहरण के लिए अधिक विस्तृत जानकारी प्रदान करने के बजाय: "आप ईमेल पते को भरना भूल गए।"

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

याहू! पंजीकरण फॉर्म वास्तविक समय त्रुटि जानकारी प्रदान करता है।

टूलटिप्स का उपयोग करने और वेब प्रपत्रों में त्रुटि जाँच के सर्वोत्तम अभ्यासों के बारे में पढ़ें।

3. क्लाइंट-साइड डेटा प्रारूप सत्यापन (जावास्क्रिप्ट) का उपयोग करें

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

SurveyGizmo पंजीकरण फॉर्म आपको यह पता करने देता है कि आपके द्वारा दर्ज ईमेल पते का प्रारूप गलत है या नहीं।

4. भरने योग्य फ़ील्ड को हाइलाइट करें ताकि उपयोगकर्ता खो न जाए

सुनिश्चित करें कि आप नेत्रहीन यह निर्धारित कर सकते हैं कि उपयोगकर्ता वर्तमान में कौन सा फ़ील्ड भर रहा है। इसे फ़ोकस का उपयोग करके लागू किया जा सकता है: CSS में छद्म श्रेणी चयनकर्ता।

एक Wufoo वेब फॉर्म नेत्रहीन पृष्ठभूमि रंग के साथ सक्रिय तत्वों को उजागर करता है।

कम से कम, खेतों के लिए एक चयन करने योग्य सीमा को लागू करें - डिफ़ॉल्ट रूप से, ब्राउज़र आपके लिए ऐसा करेंगे, लेकिन सुनिश्चित करें कि रंग साइट के डिजाइन (पृष्ठभूमि) से अलग है।

Google Chrome एक पीले बॉर्डर के साथ सक्रिय आइटम को हाइलाइट करता है। फ़ायरफ़ॉक्स हल्का नीला है।

5. प्रगति के परिणाम दिखाएं

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

आपको बस "5 का चरण 4" या ऐसा कुछ लिखना है। यदि उपयोगकर्ता "जारी रखें" बटन पर क्लिक करना जारी रखते हैं, तो स्पष्ट रूप से समझ में नहीं आता है कि अंतिम चरण कब होगा, तो वे फॉर्म को भरना बंद कर देंगे जितना आप कल्पना कर सकते हैं।

अमेज़न पर चेकआउट में 4 पेज हैं। प्रपत्र बताता है कि आप अभी कहाँ हैं और कितना पूरा होना बाकी है।

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

6. समय-समय पर (कैश) फॉर्म डेटा को सेव करें

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

7. मानक पाठ "सबमिट" (भेजें) का उपयोग न करें

प्रपत्र "सबमिट" पर अपने बटन को कॉल करने के बजाय, अपने कार्यों के उपयोगकर्ता को याद दिलाने के लिए इस पाठ का उपयोग करें। उदाहरण के लिए, "रजिस्टर", या बेहतर अभी तक, उपयोगकर्ता को फ़ॉर्म भरने के बाद लाभों के बारे में बताएं।

बेसकैंप पंजीकरण फॉर्म पर, पाठ "सबमिट" को एक अधिक उपयोगी के साथ बदल दिया गया था।

8. "रद्द करें" बटन इसे दोलन बनाता है

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

वेब फ़ॉर्म के साथ भी यही बात होती है: "रद्द करें" बटन का उपयोग करने से आपके उपयोगकर्ता दो बार सोच सकते हैं कि वे क्या भर रहे हैं।

9. उपयोगकर्ताओं को सही प्रारूप में फ़ील्ड दिखाएं

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

जिओ पंजीकरण फॉर्म उस प्रारूप पर स्पष्ट निर्देश प्रदान करता है जिसमें इनपुट अपेक्षित है।

10. एकल-स्तंभ रूप - सबसे अच्छा समाधान

Cxpartners नेत्र आंदोलन अनुसंधान के अनुसार, एक उपयोगकर्ता सगाई एजेंसी डिजाइन, प्रपत्र को स्कैन करना बाएं से दाएं की तुलना में बेहतर है। यह नेत्र आंदोलन की मात्रा को कम करता है जिसे फ़ॉर्म को भरने के लिए किया जाना चाहिए।

एकल स्तंभ रूप

बैकपैक पंजीकरण फॉर्म में एकल-स्तंभ रूप है।

मल्टी कॉलम फॉर्म

तुलना के लिए, ईबे पंजीकरण फॉर्म पर, उपयोगकर्ता को नीचे से ऊपर और बाएं से दाएं दोनों फ़ॉर्म को भरना होगा।

महान वेब उदाहरण हैं

यहाँ कुछ खूबसूरती से डिज़ाइन किए गए प्रेरणादायक आकार हैं।

अलेक्जेंड्रू कोहनीच

Grip'd कस्टम फेसबुक टैब निर्माता

Groupon

KISSmetrics

MobileMe साइन इन करें