फ़ॉर्म में टॉगल, स्विच और हां/ना फ़ील्ड

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

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

हर चीज़ को टॉगल कहने की समस्या

टॉगल शब्द का एक खास मतलब है। टॉगल दो उलटी स्थितियों के बीच का स्विच है। आप या तो स्थिति A में हैं या स्थिति B में। बीच में कुछ नहीं। कुछ और नहीं। पर कई फ़ॉर्म अपने हां/ना सवालों को टॉगल कहते हैं जबकि वे टॉगल नहीं हैं। "क्या आप प्रमोशनल ईमेल पाना चाहते हैं?" जैसा सवाल टॉगल नहीं है। यह हां या ना वाला सवाल है जो फ़ॉर्म का हिस्सा है। असली टॉगल है "डार्क मोड चालू करें।" स्विच आपका अनुभव अभी बदल देता है। उस बदलाव के लागू होने के लिए फ़ॉर्म को सबमिट बटन नहीं चाहिए।

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

फ़ॉर्म में टॉगल स्विच कब सच में सही है

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

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

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

फ़ॉर्म फ़ील्ड में टॉगल बनाम चेकबॉक्स

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

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

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

टॉगल की जगह रेडियो बटन कब इस्तेमाल करें

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

उदाहरण: एक फ़ॉर्म पूछता है "आपको कौन-सा प्लान चाहिए?" विकल्प "Basic" या "Premium"। आप दोनों के बीच बदलने के लिए टॉगल इस्तेमाल कर सकते हैं। पर यूज़र दोनों प्लान साथ-साथ नहीं देख सकता। दूसरा विकल्प देखने के लिए उसे टॉगल पलटना पड़ता है। रेडियो बटन की जोड़ी दोनों विकल्प एक साथ दिखाती है। यूज़र बाईं ओर Basic और दाईं ओर Premium देखता है। वह बिना कुछ पलटे तुलना करके चुन सकता है।

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

टॉगल को ऐसे लेबल करें कि लोग समझें वह क्या करता है

टॉगल स्विच की सबसे बड़ी समस्या लेबलिंग है। कई डिज़ाइनर सिर्फ़ "On" और "Off" इस्तेमाल करते हैं। पर किसके लिए चालू और बंद? यूज़र को अंदाज़ा लगाना पड़ता है। इससे हिचकिचाहट बनती है।

हर टॉगल को साफ़ लेबल चाहिए जो बताए कि टॉगल क्या कंट्रोल करता है। "On/Off" नहीं। कुछ ऐसा जैसे "डार्क मोड चालू करें" या "नोटिफ़िकेशन पाएं" या "एडवांस्ड विकल्प दिखाएं।" लेबल यूज़र को बताता है कि स्विच पलटने पर क्या होगा।

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

कुछ टॉगल स्विच पर ही चालू और बंद, दोनों लेबल दिखाते हैं। एक तरफ़ "Yes" और दूसरी तरफ़ "No"। यह तब काम कर सकता है जब लेबल बड़े और साफ़ हों। पर टेस्टिंग दिखाती है कि लोग हां/ना वाले टॉगल से कम परिचित हैं, चालू/बंद वाले टॉगल से ज़्यादा। अगर आप हां/ना लेबल इस्तेमाल करें, तो पहले अपने यूज़र के साथ टेस्ट करें। पर आम तौर पर, टॉगल स्विच के लिए चालू/बंद हां/ना से ज़्यादा साफ़ है।

टॉगल स्विच की एक्सेसिबिलिटी की समस्या

टॉगल स्क्रीन रीडर इस्तेमाल करने वालों के लिए असली समस्याएं पैदा करते हैं। विज़ुअल टॉगल देख सकने वाले को समझ आता है। वह स्विच को दाईं ओर खिसकते देखता है और समझता है कि अब वह चालू है। पर स्क्रीन रीडर इस्तेमाल करने वाले को कुछ सुनाई नहीं देता। टॉगल में कोई एक्सेसिबल लेबल नहीं है। यूज़र बता नहीं सकता कि टॉगल किस स्थिति में है। वह बता नहीं सकता कि टॉगल क्या कंट्रोल करता है।

एक्सेसिबल टॉगल बनाने के लिए aria-pressed नाम का ARIA एट्रिब्यूट चाहिए। यह स्क्रीन रीडर को बताता है कि एलिमेंट एक बटन है और वह दबा हुआ है या नहीं। स्क्रीन रीडर यूज़र को सुनाई देता है "Dark mode toggle button, currently on।" aria-pressed के बिना यूज़र को कुछ मतलब का नहीं सुनाई देता।

सही ARIA सेटअप के साथ भी टॉगल स्वाभाविक फ़ॉर्म कंट्रोल नहीं हैं। चेकबॉक्स फ़ॉर्म कंट्रोल है। सब जानते हैं कि चेकबॉक्स क्या है। टॉगल कस्टम कंट्रोल है जिसे अतिरिक्त JavaScript चाहिए। इसीलिए कई एक्सेसिबल फ़ॉर्म डिज़ाइन टॉगल पूरी तरह छोड़कर चेकबॉक्स इस्तेमाल करते हैं। चेकबॉक्स हर ब्राउज़र में पहले से होते हैं। वे स्क्रीन रीडर के साथ काम करते हैं। उन्हें कस्टम JavaScript नहीं चाहिए। वे बस काम करते हैं।

टॉगल की स्थितियों के लिए कलर कंट्रास्ट और विज़ुअल संकेत मायने रखते हैं

जो टॉगल स्विच अपनी स्थिति दिखाने के लिए सिर्फ़ रंग पर निर्भर करता है, वह कम दिखाई देने वाले या रंग न पहचान पाने वाले लोगों के लिए काम नहीं करेगा। अगर टॉगल चालू होने पर हरा और बंद होने पर लाल है, तो रंग न पहचान पाने वाला यूज़र बता नहीं सकता कि वह किस स्थिति में है।

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

टेक्स्ट लेबल एक और परत जोड़ते हैं। अगर टॉगल पर ही चालू/बंद का लेबल दिखता है, तो वह लेबल उसे पक्का करता है जो रंग और जगह पहले ही दिखा रहे हैं। यह विज़ुअल अतिरिक्तता है। यह फ़ालतू नहीं है। यह एक्सेसिबिलिटी है।

टच टारगेट के लिए साइज़ मायने रखता है

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

किसी भी इंटरैक्टिव एलिमेंट के लिए न्यूनतम टच टारगेट साइज़ 44x44 पिक्सल है। टॉगल कम से कम इतना बड़ा होना चाहिए। बड़ा और बेहतर है, खासकर मोबाइल पर। 60 पिक्सल चौड़ा टॉगल 30 पिक्सल वाले टॉगल से सही टैप करना कहीं ज़्यादा आसान है।

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

टॉगल को फ़ॉर्म के सबमिट बटन के साथ न मिलाएं

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

अगर आपके फ़ॉर्म में सबमिट बटन है, तो टॉगल इस्तेमाल न करें। हां/ना सवालों के लिए चेकबॉक्स इस्तेमाल करें। यूज़र के सबमिट क्लिक करने पर फ़ॉर्म के सारे बदलाव साथ में लागू होंगे। फ़ॉर्म समझ आता है। यूज़र मॉडल समझते हैं।

टॉगल स्विच डैशबोर्ड, सेटिंग पैनल और ऐसी दूसरी जगहों के हैं जहां हर इंटरैक्शन तुरंत होता है। वे उन फ़ॉर्म के नहीं हैं जिन्हें सबमिशन चाहिए।

अपने फ़ॉर्म में टॉगल

अगर आप टॉगल इस्तेमाल करने का फ़ैसला करें, तो उसे साफ़ लेबल दें, उसे टच के लिए काफ़ी बड़ा रखें, और एक्सेसिबिलिटी के लिए सही ARIA एट्रिब्यूट जोड़ें। अगर टॉगल ऐसे फ़ॉर्म में है जिसमें दूसरे इनपुट टाइप और सबमिट बटन हैं, तो यह असली यूज़ेबिलिटी समस्या है। उस स्थिति में चेकबॉक्स या रेडियो बटन पर जाएं। आपके यूज़र आपका शुक्रिया करेंगे।

अक्सर पूछे जाने वाले सवाल