यूज़र इंटरफ़ेस पैटर्न

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

इसका मतलब है कि कुछ इंटरफ़ेस एलिमेंट, अलग-अलग कॉन्टेक्स्ट में अलग-अलग दिख सकते हैं. अलग-अलग स्क्रीन साइज़ का ज़्यादा से ज़्यादा फ़ायदा उठाने के लिए, आपको एक ही एचटीएमएल कोडबेस पर अलग-अलग सीएसएस लागू करनी पड़ सकती है. यह डिज़ाइन से जुड़ा एक मुश्किल चैलेंज हो सकता है!

यहां कुछ सामान्य चैलेंज दिए गए हैं जिनका सामना आपको करना पड़ सकता है.

नेविगेशन

बड़ी स्क्रीन पर, नेविगेशन लिंक की सूची दिखाना काफ़ी आसान है. इन लिंक को दिखाने के लिए, काफ़ी जगह होती है.

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

कोई ऐसी रणनीति अपनाएं जिससे नेविगेशन को छिपाने की ज़रूरत न पड़े. अगर आपके पास आइटम की संख्या कम है, तो नेविगेशन को इस तरह स्टाइल किया जा सकता है कि वह छोटी स्क्रीन पर भी अच्छा दिखे.

अगर आपके नेविगेशन में कई लिंक हैं, तो यह पैटर्न काम नहीं करेगा. अगर छोटी स्क्रीन पर लिंक दो या तीन लाइनों में रैप होते हैं, तो नेविगेशन में काफ़ी भीड़ दिखेगी.

एक तरीका यह है कि लिंक को एक लाइन में रखा जाए, लेकिन स्क्रीन के किनारे पर सूची को काट दिया जाए. उपयोगकर्ता, तुरंत न दिखने वाले लिंक को देखने के लिए, उन्हें बाएं या दाएं स्वाइप कर सकते हैं. इसे ओवरफ़्लो पैटर्न कहा जाता है.

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

आखिरी विकल्प के तौर पर, नेविगेशन को डिफ़ॉल्ट रूप से छिपाया जा सकता है. साथ ही, उपयोगकर्ताओं को कॉन्टेंट दिखाने और छिपाने के लिए, टॉगल करने का तरीका दिया जा सकता है. इसे प्रोग्रेसिव डिसक्लोज़र कहा जाता है.

पक्का करें कि नेविगेशन के डिसप्ले को टॉगल करने वाले बटन पर लेबल लगा हो. सिर्फ़ आइकॉन पर भरोसा न करें.

बिना लेबल वाला आइकॉन, "मिस्ट्री मीट" नेविगेशन होता है. यानी, उपयोगकर्ताओं को यह नहीं पता होगा कि उसमें क्या है, जब तक वे उस पर क्लिक नहीं करते. उपयोगकर्ताओं को यह बताने के लिए टेक्स्ट लेबल दें कि बटन पर क्लिक करने से क्या दिखेगा.

कैरसेल

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

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

कम चौड़ाई वाली स्क्रीन के लिए, फ़्लेक्सबॉक्स का इस्तेमाल करके आइटम को एक लाइन में दिखाएं. आइटम की लाइन, स्क्रीन के किनारे से आगे तक जाएगी. बाएं या दाएं स्वाइप करने की अनुमति देने के लिए, overflow-x: auto का इस्तेमाल करें.

@media (max-width: 50em) {
  .cards {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: inline mandatory;
    scroll-behavior: smooth;
  }
  .cards .card {
    flex-shrink: 0;
    flex-basis: 15em;
    scroll-snap-align: start;
  }
}

The scroll-snap प्रॉपर्टी से यह पक्का होता है कि आइटम को आसानी से स्वाइप किया जा सके. scroll-snap-type: inline mandatory की मदद से, आइटम अपनी जगह पर स्नैप हो जाते हैं.

जब स्क्रीन का साइज़ बड़ा हो—इस मामले में 50em से ज़्यादा चौड़ाई वाली स्क्रीन—तो ग्रिड पर स्विच करें और आइटम को लाइनों और कॉलम में दिखाएं. साथ ही, किसी भी आइटम को न छिपाएं.

@media (min-width: 50em) {
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
  }
}

सबसे अहम बात यह है कि कैरसेल व्यू में कोई आइटम, पूरी चौड़ाई नहीं लेता. अगर ऐसा होता है, तो व्यू पोर्ट के किनारे से आगे और कॉन्टेंट उपलब्ध होने का कोई संकेत नहीं मिलेगा.

कैरसेल, ओवरफ़्लो पैटर्न का एक और उदाहरण है. अगर आपके पास कई आइटम हैं जिन्हें लोग ब्राउज़ कर सकते हैं, तो बड़ी स्क्रीन (जैसे, टीवी) पर भी ओवरफ़्लो पैटर्न का इस्तेमाल किया जा सकता है. यह मीडिया स्क्रोलर, कई विकल्पों को मैनेज करने के लिए, कई कैरसेल का इस्तेमाल करता है.

यहां भी, scroll-snap प्रॉपर्टी से यह पक्का होता है कि इंटरैक्शन आसानी से हो. इसके अलावा, ध्यान दें कि कैरसेल में मौजूद इमेज पर loading="lazy" लागू किया गया है. इस मामले में, इमेज वेबसाइट में फ़ोल्ड के नीचे नहीं हैं, बल्कि किनारे से आगे हैं. हालांकि, यहां भी वही सिद्धांत लागू होता है: अगर उपयोगकर्ता उस आइटम तक स्वाइप नहीं करता है, तो इमेज डाउनलोड नहीं होगी. इससे बैंडविथ की बचत होगी.

JavaScript जोड़ने पर, कैरसेल में इंटरैक्टिव कंट्रोल जोड़े जा सकते हैं. यहां तक कि आइटम को अपने-आप साइकल करने के लिए भी सेट किया जा सकता है. हालांकि, ऐसा करने से पहले सोच-समझकर फ़ैसला लें. अगर कैरसेल, पेज पर मौजूद इकलौता कॉन्टेंट है, तो ऑटोप्ले काम कर सकता है. हालांकि, अगर कोई व्यक्ति अन्य कॉन्टेंट (जैसे, टेक्स्ट पढ़ना) के साथ इंटरैक्ट करने की कोशिश कर रहा है, तो ऑटोप्ले होने वाला कैरसेल बहुत परेशान करने वाला हो सकता है. कैरसेल के सबसे सही तरीकों के बारे में ज़्यादा पढ़ें.

डेटा टेबल

table एलिमेंट, टेबल के फ़ॉर्म में मौजूद डेटा को स्ट्रक्चर करने के लिए सबसे सही है. जैसे, एक-दूसरे से जुड़ी जानकारी की लाइनें और कॉलम. हालांकि, अगर टेबल बहुत बड़ी हो जाती है, तो यह छोटी स्क्रीन के लेआउट को तोड़ सकती है.

टेबल पर ओवरफ़्लो पैटर्न लागू किया जा सकता है. इस उदाहरण में, टेबल को table-container क्लास वाले div में रैप किया गया है.

.table-container {
  max-inline-size: 100%;
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
  scroll-behavior: smooth;
}
.table-container th,
.table-container td {
  scroll-snap-align: start;
  padding: var(--metric-box-spacing);
}

दिशा-निर्देश

ओवरफ़्लो पैटर्न, छोटी स्क्रीन के लिए एक अच्छा विकल्प है. हालांकि, यह पक्का करें कि स्क्रीन से बाहर मौजूद कॉन्टेंट को ऐक्सेस किया जा सकता है. कॉन्टेंट के कटे हुए किनारे पर शैडो या ग्रेडिएंट लगाने के बारे में सोचें.

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

सबसे पहले, छोटी स्क्रीन के लिए डिज़ाइन करें. छोटी स्क्रीन के डिज़ाइन को बड़ी स्क्रीन के हिसाब से अडजस्ट करना, बड़ी स्क्रीन के डिज़ाइन को छोटी स्क्रीन के हिसाब से अडजस्ट करने से ज़्यादा आसान है. अगर सबसे पहले बड़ी स्क्रीन के लिए डिज़ाइन किया जाता है, तो इस बात का खतरा होता है कि छोटी स्क्रीन के लिए किया गया डिज़ाइन, बाद में किया गया काम लगेगा.

लेआउट और यूज़र इंटरफ़ेस एलिमेंट के अन्य पैटर्न के लिए, web.dev के पैटर्न सेक्शन देखें.

इंटरफ़ेस एलिमेंट को अलग-अलग स्क्रीन साइज़ के हिसाब से अडजस्ट करते समय, डिवाइस के डाइमेंशन का पता लगाने के लिए मीडिया क्वेरी बहुत काम की होती हैं. हालांकि, min-width और min-height जैसी मीडिया सुविधाएं सिर्फ़ शुरुआत हैं. इसके बाद, आपको मीडिया की अन्य सुविधाओं के बारे में पता चलेगा.