मोडल बनाम बॉटम शीट: मोबाइल ऐप में कब कौन सा इस्तेमाल करें
मोडल रोकता है, बॉटम शीट ब्राउज़ करने देती है। वह एक सवाल जो दोनों में फ़ैसला करता है, दोनों पैटर्न दोबारा बनाए हुए, दस आम मामलों की निर्णय तालिका और उसके पीछे के प्लेटफ़ॉर्म नियम।
मोडल और बॉटम शीट दोनों स्क्रीन के ऊपर सरककर आते हैं, इसलिए टीमें इन्हें एक ही चीज़ मान लेती हैं, बस आकार अलग। ऐसा नहीं है। एक लोगों को तब तक रोकता है जब तक वे जवाब न दें, दूसरा उन्हें कुछ चुनकर आगे बढ़ने देता है। यहाँ वह एक सवाल है जो फ़ैसला करता है, दोनों पैटर्न दोबारा बनाए हुए, और हर ऐप में आने वाले मामलों की एक निर्णय तालिका।
एक सवाल: क्या इसका जवाब अभी देना ज़रूरी है?
अगर व्यक्ति चुने बिना आगे नहीं बढ़ सकता, तो वह मोडल है। अगर वह इसे नज़रअंदाज़ कर दे और स्क्रीन फिर भी समझ में आती रहे, तो वह शीट है।
यही एक सवाल ज़्यादातर मामले तब ही सुलझा देता है जब कोई लुक पर बहस शुरू भी नहीं करता। यही दोनों के बाक़ी सारे फ़र्क़ भी समझाता है: मोडल बीच में बैठता है और सब कुछ धुंधला कर देता है क्योंकि जवाब मिलने तक कुछ और मायने नहीं रखता, और शीट नीचे से उठती है और स्क्रीन को दिखता छोड़ देती है क्योंकि स्क्रीन ही असली मुद्दा है।
मोडल: आगे बढ़ने से पहले फ़ैसला करें
मोडल, जिसे Android में डायलॉग और iOS में अलर्ट कहते हैं, जानबूझकर बीच में टोकता है। यह तब सही है जब:
- लोगों को आगे बढ़ने से पहले फ़ैसला करना ही हो। ऐप जवाब का अंदाज़ा नहीं लगा सकता।
- कार्रवाई वापस न हो सके। ऐसा प्रोजेक्ट डिलीट करना जिससे सभी के लिए 24 फ़ाइलें हट जाएँ, एक ठहराव का हक़दार है।
- ज़्यादा से ज़्यादा दो विकल्प हों। रद्द करें और कार्रवाई, जिसका नाम क्रिया में हो: डिलीट करें, न कि ठीक है।
कहाँ फ़ेल होता है: हर वैकल्पिक चीज़ में। जो मोडल रेटिंग माँगता है, नया फ़ीचर बताता है या मेन्यू देता है, वह लोगों को उनके असली काम से रोकता है, और वे बिना पढ़े जो भी उसे बंद करे उसे टैप करना सीख जाते हैं।
बॉटम शीट: ब्राउज़ करें, फिर चुनें
बॉटम शीट उन विकल्पों को रखती है जो पहले से स्क्रीन पर मौजूद चीज़ से जुड़े हैं। यह तब सही है जब:
- विकल्प इसी स्क्रीन के हों। इस प्रोजेक्ट को शेयर, डुप्लिकेट, मूव या आर्काइव करें।
- लोग स्वाइप करके बाहर निकल सकें। जवाब ज़रूरी नहीं है।
- दो से ज़्यादा विकल्प हों। शीट में सूची के लिए जगह होती है, और सूची अँगूठे की पहुँच में रहती है।
कहाँ फ़ेल होती है: जिसे छोड़ा नहीं जाना चाहिए। शीट गलती से हुए स्वाइप से बंद हो सकती है, इसलिए जो विनाशकारी पुष्टि सिर्फ़ शीट में रहती है, वह आसानी से खो सकती है या गलती से ट्रिगर हो सकती है।
बहुत सारे बटन असल में भेस बदली हुई शीट हैं
गलत: एक मोडल
सही: एक शीट
बाईं स्क्रीन सबसे आम गड़बड़ है। बीच वाले डिब्बे में छह बटन एक के ऊपर एक रखकर लोगों से एक रुकावट के भीतर मेन्यू पढ़ने को कहा जा रहा है। किसी भी विकल्प में जल्दी नहीं है, इसलिए स्क्रीन को रोकने की ज़रूरत नहीं। वही विकल्प शीट में सूची की तरह पढ़े जाते हैं, अँगूठे की पहुँच में रहते हैं और स्वाइप से बंद हो जाते हैं।
Material Design का नियम छोटा है: डायलॉग में ज़्यादा से ज़्यादा दो कार्रवाइयाँ होनी चाहिए। जब तीसरी चाहिए, तो आपके पास मेन्यू है, और मेन्यू शीट में रहता है।
दोनों साथ में: शीट से डिलीट करें, मोडल से पुष्टि करें
पहले, शीट
फिर, मोडल
ये पैटर्न प्रतिद्वंद्वी नहीं हैं। विनाशकारी विकल्प बाक़ी कार्रवाइयों के साथ शीट में रह सकता है, लाल रंग में और सबसे आख़िर में। उसे टैप करने पर मोडल खुलता है, क्योंकि अब जाकर एक ऐसा फ़ैसला है जो वापस नहीं हो सकता। शीट में ब्राउज़ करें, जिस पल मायने रखे उसी पल रोकें।
मोडल या शीट: एक निर्णय तालिका
| स्थिति | चुनें | क्यों |
|---|---|---|
| सभी के लिए प्रोजेक्ट डिलीट करना | मोडल | वापस नहीं हो सकता, दो विकल्प |
| बिना सहेजे बदलाव छोड़ना | मोडल | जाने से पहले लोगों को फ़ैसला करना होगा |
| साझा डिवाइस पर साइन आउट | मोडल | हाँ या ना जो स्थिति बदलता है |
| शेयर, डुप्लिकेट, मूव, आर्काइव | शीट | स्क्रीन पर मौजूद आइटम के विकल्प |
| सूची को सॉर्ट या फ़िल्टर करना | शीट | लोग पीछे सूची को बदलते देखना चाहते हैं |
| चेकआउट पर सहेजा हुआ कार्ड चुनना | शीट | दो से ज़्यादा विकल्प, स्क्रीन का हिस्सा |
| कैमरा या लाइब्रेरी से फ़ोटो जोड़ना | शीट | स्रोत का चुनाव, आसानी से पीछे हटा जा सकता है |
| मैप पर जगह का ब्योरा | शीट | मैप ही असली मुद्दा रहता है |
| आगे बढ़ने से पहले नई शर्तें स्वीकार करना | मोडल | ऐप बिना जवाब के आगे नहीं बढ़ सकता |
| नए फ़ीचर की घोषणा | दोनों नहीं | किसी को फ़ैसला नहीं करना है। इनलाइन बैनर इस्तेमाल करें |
कौन इसे अच्छे से करता है
आप इन्हें आज ही अपने फ़ोन पर देख सकते हैं:
- Apple Maps और Google Maps खोज परिणाम और जगह का ब्योरा मैप के ऊपर शीट में रखते हैं, इसलिए आप अपनी जगह कभी नहीं खोते।
- iOS शेयर शीट उस चीज़ के लिए हर ऐप और कार्रवाई सूचीबद्ध करती है जिसे आप देख रहे हैं, और स्वाइप से बंद हो जाती है।
- Instagram में पोस्ट का "और" मेन्यू उस पोस्ट के विकल्पों की बॉटम शीट के रूप में खुलता है।
Apple के दिशानिर्देश यही रेखा दूसरी तरफ़ से खींचते हैं: अलर्ट उस अहम जानकारी के लिए हैं जो लोगों को तुरंत चाहिए, जिसमें यह चेतावनी भी शामिल है कि कोई कार्रवाई डेटा नष्ट कर सकती है, जबकि शीट और एक्शन शीट उन विकल्पों को रखती हैं जो लोग जो कर रहे हैं उससे जुड़े हैं।
FAQ
मुझे मोडल की जगह बॉटम शीट कब इस्तेमाल करनी चाहिए?
जब विकल्प मौजूदा स्क्रीन के हों, वे दो से ज़्यादा हों और आगे बढ़ने के लिए किसी को चुनना ज़रूरी न हो। शेयर करना, सॉर्ट करना, फ़िल्टर करना और सूची में से चुनना शीट के काम हैं।
मुझे मोडल डायलॉग कब इस्तेमाल करना चाहिए?
जब लोगों को आगे बढ़ने से पहले फ़ैसला करना ही हो, आमतौर पर इसलिए कि कार्रवाई वापस नहीं हो सकती। इसे दो कार्रवाइयों तक रखें, एक रद्द करना और एक कार्रवाई जिसका नाम क्रिया में हो।
मोडल में कितने बटन होने चाहिए?
ज़्यादा से ज़्यादा दो। Material Design कहता है कि डायलॉग में अधिकतम दो कार्रवाइयाँ होनी चाहिए। अगर और चाहिए, तो वे विकल्प मेन्यू हैं और शीट में रहते हैं।
क्या बॉटम शीट एक मोडल है?
मोडल बॉटम शीट स्क्रीन को धुंधला करती है और लोगों के स्क्रीन दोबारा इस्तेमाल करने से पहले उसे बंद करना पड़ता है, लेकिन उसे स्वाइप से हटाया जा सकता है और वह कुछ पूछती नहीं। डायलॉग सवाल पूछता है और जवाब का इंतज़ार करता है।
iOS में अलर्ट और एक्शन शीट में क्या फ़र्क़ है?
अलर्ट अहम जानकारी और कुछ ही बटनों के साथ टोकता है। एक्शन शीट नीचे से उठती है और उस कार्रवाई से जुड़े विकल्प देती है जो लोगों ने अभी शुरू की है, जैसे किसी फ़ोटो के विकल्प।
स्रोत
- Dialogs और Bottom sheets, Material Design 3।
- Alerts, Sheets और Action sheets, Apple Human Interface Guidelines।
- पहली बार UX Brainy पर कैरोसेल के रूप में प्रकाशित।
Want your app's dialogs, sheets and every other pattern chosen and designed as one system? Our team designs app UI from the first flow to the finished components.
Get Started
