इंटरैक्शन

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

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

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

सूचक

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 मीडिया सुविधा से अलग है. यह रिपोर्ट करता है कि कोई भी पॉइंटर डिवाइस टेस्ट पास करता है या नहीं.

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

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

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

अगर कोई इनपुट मेकेनिज्म टेस्ट पास करता है, तो 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;
  }
}

जिस डिवाइस में कर्सर घुमाने की सुविधा नहीं है उस पर अतिरिक्त आइकॉन हमेशा दिखता है.

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

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

इनपुट टाइप

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

एचटीएमएल5 इनपुट टाइप, आपके 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">

इनपुट मोड

Browser Support

  • Chrome: 66.
  • Edge: 79.
  • Firefox: 95.
  • Safari: 12.1.

Source

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

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

देखें कि आपको क्या समझ आया

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

स्क्रीन साइज़ से उपयोगकर्ता के इनपुट टाइप का अनुमान लगाने के बजाय, आपको किस सुविधा का इस्तेमाल करना चाहिए?

सीएसएस मीडिया फ़ीचर
सीएसएस मीडिया टाइप handheld
JavaScript के prompt() का इस्तेमाल करके, उपयोगकर्ता से पूछें

@media (pointer) और @media (any-pointer) में क्या अंतर है?

किसी भी पॉइंटर में, आपकी उंगली जैसी चीज़ें शामिल होती हैं.
जब स्टाइलस जैसे अन्य इनपुट, टेस्ट पास कर लेंगे, तो कोई भी पॉइंटर 'सही' रिपोर्ट करेगा.
पॉइंटर में माउस जैसी चीज़ें शामिल नहीं होती हैं.

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

type="url"
type="email"
type="tel"
type="number"