इंटरैक्शन

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

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

स्क्रीन के साइज़ से इनपुट मैकेनिज़्म का अनुमान लगाने के बजाय, सीएसएस की मीडिया सुविधाओं का इस्तेमाल करें.

सूचक

pointer मीडिया सुविधा की मदद से, तीन संभावित वैल्यू की जांच की जा सकती है: none, coarse, और fine.

अगर कोई ब्राउज़र, pointer की वैल्यू none रिपोर्ट करता है, तो हो सकता है कि उपयोगकर्ता आपकी वेबसाइट से इंटरैक्ट करने के लिए कीबोर्ड का इस्तेमाल कर रहा हो.

अगर कोई ब्राउज़र, pointer की वैल्यू coarse रिपोर्ट करता है, तो इसका मतलब है कि इनपुट का मुख्य तरीका बहुत सटीक नहीं है. टचस्क्रीन पर उंगली का इस्तेमाल करने पर, कोई मोटा पॉइंटर होता है.

अगर कोई ब्राउज़र, pointer की वैल्यू fine रिपोर्ट करता है, तो इसका मतलब है कि इनपुट का मुख्य तरीका पूरी तरह कंट्रोल किया जा सकता है. माउस या स्टाइलस, एक सटीक पॉइंटर होता है.

इंटरफ़ेस एलिमेंट के साइज़ में, pointer की वैल्यू के हिसाब से बदलाव किया जा सकता है. अलग-अलग तरह के डिवाइसों से इस वेबसाइट पर जाएं और देखें कि इंटरफ़ेस का इस्तेमाल कैसे किया जाता है.

इस उदाहरण में, मोटे पॉइंटर के लिए बटन को बड़ा किया गया है:

button {
  padding: 0.5em 1em;
}
@media (pointer: coarse) {
  button {
    padding: 1em 2em;
  }
}

अच्छे पॉइंटर के लिए एलिमेंट को छोटा भी किया जा सकता है, लेकिन ऐसा करते समय सावधानी बरतें:

@media (pointer: fine) {
  button {
    padding: 0.25em 0.5em;
  }
}

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

कोई भी पॉइंटर

pointer मीडिया सुविधा, प्राइमरी इनपुट तकनीक की बारीकियों के बारे में बताती है. हालांकि, कई डिवाइसों में एक से ज़्यादा इनपुट के तरीके होते हैं. ऐसा हो सकता है कि एक ही समय पर कोई व्यक्ति टचस्क्रीन और माउस, दोनों का इस्तेमाल करके आपकी वेबसाइट से इंटरैक्ट कर रहा हो.

any-pointer, pointer की मीडिया सुविधा से अलग है. इसमें पॉइंटिंग डिवाइस के टेस्ट में पास हो जाने पर, यह बताया जाता है.

none को any-pointer वैल्यू देने का मतलब है कि कोई भी पॉइंटिंग डिवाइस उपलब्ध नहीं है.

coarse को any-pointer वैल्यू देने का मतलब है कि कम से कम एक पॉइंटिंग डिवाइस ज़्यादा सटीक नहीं है. हालांकि, यह शायद इनपुट का मुख्य तरीका न हो.

fine की any-pointer वैल्यू का मतलब है कि कम से कम एक पॉइंटिंग डिवाइस पर कंट्रोल लगाया जा सकता है. हालांकि, यह भी हो सकता है कि इनपुट का यह मुख्य तरीका न हो.

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

इस उदाहरण में, अगर डिवाइस में बेहतर और अनुमानित, दोनों तरह के इनपुट सिस्टम मौजूद हैं, तो अनुमानित स्टाइल लागू होते हैं.

@media (any-pointer: fine) {
  button {
    padding: 0.5em 1em;
  }
}
@media (any-pointer: coarse) {
  button {
    padding: 1em 2em;
  }
}

कर्सर घुमाएं

hover मीडिया सुविधा यह बताती है कि प्राइमरी इनपुट सिस्टम, एलिमेंट पर कर्सर घुमा सकता है या नहीं. आम तौर पर, इसका मतलब है कि स्क्रीन पर किसी तरह के कर्सर को माउस या ट्रैकपैड से कंट्रोल किया जाता है.

pointer मीडिया सुविधा, अच्छे और मोटे पॉइंटर के बीच अंतर करती है. यह hover मीडिया सुविधा बाइनरी है. अगर मुख्य इनपुट डिवाइस, एलिमेंट पर कर्सर घुमा सकता है, तो यह hover की वैल्यू दिखाएगा. अगर ऐसा नहीं है, तो वैल्यू none होगी.

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

button .extra {
  visibility: visible;
}
@media (hover: hover) {
  button .extra {
    visibility: hidden;
  }
  button:hover .extra {
    visibility: visible;
  }
}

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

button .extra {
  visibility: visible;
}
@media (hover: hover) {
  button .extra {
    visibility: hidden;
  }
  button:is(:hover, :focus) .extra {
    visibility: visible;
  }
}

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

कोई भी होवर

hover मीडिया क्वेरी सिर्फ़ प्राइमरी इनपुट तकनीक पर रिपोर्ट करती है. कुछ डिवाइसों में इनपुट के कई तरीके होते हैं: टचस्क्रीन, माउस, कीबोर्ड, ट्रैकपैड.

जिस तरह any-pointer किसी भी इनपुट मैकेनिज़्म पर रिपोर्ट करता है, उसी तरह any-hover फ़ंक्शन तब भी सही साबित होगा, जब इनपुट के किसी भी उपलब्ध सिस्टम को एलिमेंट पर कर्सर घुमाया जा सके.

अगर आपने पिछले उदाहरण में लॉजिक को रिवर्स करने का फ़ैसला लिया है, तो होवर स्टाइल को डिफ़ॉल्ट बनाया जा सकता है. इसके बाद, अगर any-hover की वैल्यू none है, तो उन्हें हटाया जा सकता है.

button .extra {
  visibility: hidden;
}
button:hover .extra,
button:focus .extra {
  visibility: visible;
}
@media (any-hover: none) {
  button .extra {
    visibility: visible;
  }
}

जिस डिवाइस में होवर करने के लिए कोई इनपुट प्रणाली नहीं है, उस पर अतिरिक्त आइकन हमेशा दिखाई देता है.

वर्चुअल कीबोर्ड

लोग इंटरफ़ेस को एक्सप्लोर करने के लिए, कर्सर और उंगलियों का इस्तेमाल करते हैं. हालांकि, जानकारी डालने के लिए, उन्हें कीबोर्ड की ज़रूरत होती है. अगर उनके डिवाइस में फ़िज़िकल कीबोर्ड लगा हो, तो कोई दिक्कत नहीं होती, लेकिन अगर वे टचस्क्रीन डिवाइस का इस्तेमाल कर रहे हैं, तो उनके डिवाइस को समझना ज़्यादा मुश्किल हो जाता है. इन डिवाइसों में, ऑन-स्क्रीन वर्चुअल कीबोर्ड की सुविधा उपलब्ध है.

इनपुट के टाइप

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

HTML5 इनपुट टाइप, अपने input एलिमेंट के बारे में बताने का एक बेहतरीन तरीका है. type एट्रिब्यूट में email, number, tel, url वगैरह जैसे वैल्यू इस्तेमाल की जा सकती हैं.

  <label for="email">Email</label>
  <input type="email" id="email">

  <label for="number">Number</label>
  <input type="number" id="number">

  <label for="tel">Tel</label>
  <input type="tel" id="tel">

  <label for="url">URL</label>
  <input type="url" id="url">

इनपुट मोड

inputmode एट्रिब्यूट की मदद से, आपको वर्चुअल कीबोर्ड पर बेहतर कंट्रोल मिलता है. उदाहरण के लिए, जबकि number वैल्यू वाला एक input type है, लेकिन पूरी संख्या और दशमलव वाली संख्या के बीच अंतर करने के लिए, inputmode एट्रिब्यूट का इस्तेमाल किया जा सकता है.

अगर आपको पूरा नंबर चाहिए, जैसे कि किसी की उम्र, तो inputmode="numeric" का इस्तेमाल करें.

<label for="age">Age</label>
<input type="number" id="age" inputmode="numeric">

अगर आपको ऐसी संख्या के बारे में पूछना है जिसमें दशमलव के बाद के अंक शामिल हों, जैसे कि कीमत, तो inputmode="decimal" का इस्तेमाल करें.

<label for="price">Price</label>
<input type="number" id="price" inputmode="decimal">

ऑटोकंप्लीट

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

<label for="name">Name</label>
<input type="text" id="name" autocomplete="name">

<label for="country">Country</label>
<input type="text" id="country" autocomplete="country">

<label for="email">Email</label>
<input type="email" id="email" autocomplete="email">

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

इस कोर्स में अब आगे, कुछ सामान्य इंटरफ़ेस पैटर्न की जांच करनी है.

देखें कि आपको कितना समझ आया है

इंटरैक्शन के बारे में अपनी जानकारी को परखें