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

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

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

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

नेविगेशन

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

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

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

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

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

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

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

पक्का करें कि नेविगेशन के डिसप्ले को टॉगल करने वाला बटन लेबल किया गया हो. समझने के लिए किसी आइकॉन पर निर्भर न रहें.

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

कैरसेल

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

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

छोटी स्क्रीन के लिए, फ़्लेक्सबॉक्स का इस्तेमाल करके आइटम को एक पंक्ति में दिखाएं. आइटम की पंक्ति, स्क्रीन के किनारे से आगे तक जाएगी. हॉरिज़ॉन्टल स्वाइप करने के लिए, 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;
  }
}

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 जैसी मीडिया सुविधाएं तो बस शुरुआत हैं. इसके बाद, आपको मीडिया की कई दूसरी सुविधाएं मिलेंगी.