सही UI पैटर्न का चुनाव

यह लेख 6 नवंबर 2026 को लिखा गया था।

AI टूल्स तेज़ी से बदलते हैं। लेकिन यह तय करने का फ़ैसला नहीं बदलता कि उपयोगकर्ता को पूरी तरह रोकना है, उसके काम के बगल में एक पैनल खिसकाना है, या नीचे से एक शीट उठानी है। डायलॉग (dialog), ड्रॉअर (drawer), बॉटम शीट (bottom sheet), ड्रॉपडाउन (dropdown), टैब (tabs), अकॉर्डियन (accordion) — ये सब सवाल पूछने या जानकारी दिखाने के तरीके हैं। ऐप्स के मेनू बदलते रहेंगे, इसलिए इसे रटने के बजाय उपयोगकर्ता के ध्यान में दखल (interruption) के फ़ैसले के रूप में पढ़ें।

शृंखला का आवरण: वाइब कोडिंग के बुनियादी शब्द, 3/5, सवाल पूछने का तरीका।

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

रोकें, साथ में दिखाएँ, या बदलें

डायलॉग (dialog) — जिसे मोडल (modal) भी कहा जाता है — स्क्रीन के ठीक बीचोंबीच आता है और पीछे के पूरे पेज को धुंधला कर देता है। इसका इस्तेमाल तभी करें जब आगे बढ़ने से पहले उपयोगकर्ता का जवाब पाना बेहद ज़रूरी हो: जैसे किसी रिकॉर्ड को हटाना, बुकिंग की पुष्टि करना, या ख़ाली छूटे ज़रूरी फ़ील्ड को भरना। लंबा निबंध, मेनू या कोई अचानक दी जाने वाली सूचना दिखाने के लिए यह बिल्कुल सही जगह नहीं है। जब डायलॉग खुला हो, तो कीबोर्ड का फोकस (focus) इसी के अंदर रहना चाहिए। Escape दबाने पर या साफ़ तौर पर ‘Cancel’ पर क्लिक करने पर यह बंद हो जाए और फोकस वापस उसी बटन पर पहुँच जाए जिसने इसे खोला था। अगर आप prompt में यह नहीं लिखेंगे, तो AI मॉडल अक्सर ऐसा डिब्बा बना देगा जिससे कीबोर्ड के ज़रिए बाहर निकलने का रास्ता ही नहीं होगा, और बिना माउस वाला व्यक्ति फँस जाएगा। यह कोई बाद की बात नहीं है, यही मुख्य शर्त है।

फोन के बीच में एक डायलॉग, जिसके नीचे Escape, Cancel और वापस लौटने वाला फोकस दिखाया गया है।

ड्रॉअर (drawer) स्टार्ट एज (start edge) से खिसककर आता है और मुख्य पेज को आँखों के सामने बनाए रखता है। इसका इस्तेमाल उन कामों के लिए करें जो मुख्य पेज से जुड़े हों: जैसे सूची पर फ़िल्टर लगाना, किसी चीज़ का विवरण देखना, या सामान्य सेटिंग्स। इसे Escape दबाकर या बाहर टैप करके बंद किया जाना चाहिए। अरबी या दाएँ-से-बाएँ पढ़ी जाने वाली भाषाओं में स्टार्ट एज दाईं तरफ़ होती है। हमेशा “start edge” कहें, न कि “हमेशा दाएँ से”, वरना ड्रॉअर लिखने की दिशा के उल्टे खिसकेगा।

बॉटम शीट (bottom sheet) फोन के निचले हिस्से से ऊपर उठती है। यह एक हाथ से फोन पकड़े व्यक्ति के लिए ड्रॉअर जैसी ही सुविधा है। इसका इस्तेमाल तुरंत चुनी गई चीज़ पर 2-3 छोटे काम करने के लिए करें — जैसे कॉल करना, सेव करना या शेयर करना। बीस फ़ील्ड वाले लंबे फ़ॉर्म के लिए इसका इस्तेमाल न करें। शीट को एक हल्की सी झलक या आधी स्क्रीन पर रुकना चाहिए, और नीचे की तरफ़ खींचकर या Escape दबाकर बंद होना चाहिए। अगर आपकी भाषा में इसका कोई पक्का नाम नहीं है, तो नया शब्द न गढ़ें — “नीचे से उठने वाला पैनल” और साथ में bottom sheet लिखना ही काफ़ी है।

तीन साधारण ढाँचे: बीच में डायलॉग, बगल से ड्रॉअर, और नीचे से उठती बॉटम शीट।

एक ही जगह, अलग-अलग नज़रिया

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

टैब (tabs) एक ही जगह पर कई अलग-अलग दृश्य रखते हैं, जहाँ व्यक्ति बग़ल में क्लिक करके बदल सकता है। ये सभी हिस्से एक ही स्तर के होते हैं — जैसे इस हफ़्ते का शेड्यूल और अगले हफ़्ते का शेड्यूल, या विवरण और सामग्री। सभी टैब के नाम (labels) हमेशा दिखने चाहिए। उन्हें ड्रॉपडाउन में छिपाने का मतलब है कि वे कभी टैब थे ही नहीं।

अकॉर्डियन (accordion) एक के नीचे एक सवालों की पट्टी रखता है जो नीचे की तरफ़ खुलती हैं — एक बार में एक पट्टी खुलेगी या कई, यह साफ़ बताएँ। इसका इस्तेमाल उन जवाबों के लिए करें जिन्हें ज़्यादातर लोग छोड़ देते हैं — जैसे शिपिंग के नियम या लंबी FAQ सूची। कीमत की अकेली प्रति को कभी बंद अकॉर्डियन में न छिपाएँ; बंद रखने का मतलब है कि उपयोगकर्ता को इसकी ज़रूरत नहीं है, जबकि कीमत ऐसी चीज़ नहीं है।

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

बाईं तरफ़ ऊपर टैब, और दाईं तरफ़ एक के ऊपर एक रखी अकॉर्डियन पट्टियाँ।

एक ही काम के लिए दो गलत चुनाव

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

सुधार के लिए शब्द को दो हिस्सों में बाँटा गया। दाखिला रद्द करने पर अब एक डायलॉग (dialog) खुलता है, पीछे का पेज धुंधला हो जाता है, और वाक्य में साफ़ लिखा होता है कि किसका दाखिला रद्द हो रहा है। Escape दबाने या ‘Cancel’ बटन से यह बंद हो जाता है और फोकस (focus) वापस उसी बटन पर आ जाता है। वहीं दूसरी तरफ़, शाम का फ़िल्टर स्टार्ट एज से एक ड्रॉअर (drawer) खोलता है, सूची बगल में दिखती रहती है, और बाहर टैप करते ही बंद हो जाता है। फोन पर वही फ़िल्टर बॉटम शीट (bottom sheet) बन सकता है क्योंकि उँगली पहले से नीचे होती है। टीचर को तीन अलग ऐप नहीं सीखने पड़े, बस यह समझना पड़ा कि कौन सा काम उन्हें रोक सकता है।

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

एक सटीक prompt

On the list page, put filters in a drawer from the start edge, not in a dialog. Close the drawer with Escape or a tap outside. Keep focus inside the drawer while it is open, and return focus to the filter button when it closes.

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

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

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top