इंटरैक्शन

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

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

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

सूचक

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

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

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

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

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

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

आपने जो सीखा है उसकी जांच करें

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