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

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

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

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

नेविगेशन

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

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

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

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

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

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

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

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

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

कैरसेल

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

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

छोटी स्क्रीन के लिए, फ़्लेक्सबॉक्स का इस्तेमाल करके आइटम एक पंक्ति में दिखाएं. आइटम की पंक्ति, स्क्रीन के किनारे से आगे बढ़ जाएगी. हॉरिज़ॉन्टल स्वाइपिंग की अनुमति देने के लिए, 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 एलिमेंट, टेबल फ़ॉर्मैट वाला डेटा बनाने के लिए एकदम सही है; पंक्तियों और कॉलम में, संबंधित जानकारी की वैल्यू डालें. हालांकि, अगर टेबल का साइज़ बहुत बड़ा हो जाता है, तो आपके छोटे स्क्रीन वाले लेआउट में गड़बड़ी हो सकती है.

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

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