इंटरैक्शन

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

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

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

पॉइंटर

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;
  }
}

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

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

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

इनपुट टाइप

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

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

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

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

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