टच और माउस

bookmark_border संग्रह की मदद से व्यवस्थित रहें अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.

पहली बार फिर से साथ

Chris Wilson

Paul Kinlan

परिचय

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

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

वेब प्लैटफ़ॉर्म में टच की स्थिति

iPhone, वेब ब्राउज़र में टच एपीआई के साथ आने वाला पहला लोकप्रिय प्लैटफ़ॉर्म था. ब्राउज़र के कई अन्य वेंडर ने भी iOS पर काम करने के लिए, एपीआई के मिलते-जुलते इंटरफ़ेस बनाए हैं. इन इंटरफ़ेस के बारे में अब "टच इवेंट वर्शन 1" स्पेसिफ़िकेशन में बताया गया है. टच इवेंट, डेस्कटॉप पर Chrome और Firefox के साथ-साथ iOS पर Safari और Android पर Chrome और Android ब्राउज़र पर काम करते हैं. साथ ही, ये Blackberry ब्राउज़र जैसे अन्य मोबाइल ब्राउज़र पर भी काम करते हैं.

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

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

सबसे ज़रूरी बात: उपयोगकर्ता के पास टच और माउस हो सकता है

कई डेवलपर ने ऐसी साइटें बनाई हैं जो स्टैटिक तौर पर यह पता लगाती हैं कि कोई एनवायरमेंट टच इवेंट के साथ काम करता है या नहीं. इसके बाद, वे यह मान लेते हैं कि उन्हें सिर्फ़ टच (न कि माउस) इवेंट के साथ काम करना है. अब यह गलत अनुमान है - इसके बजाय, सिर्फ़ इसलिए कि टच इवेंट मौजूद हैं, इसका मतलब यह नहीं है कि उपयोगकर्ता मुख्य रूप से उस टच इनपुट डिवाइस का इस्तेमाल कर रहा है. Chromebook Pixel और कुछ Windows 8 लैपटॉप जैसे डिवाइसों पर, अब माउस और टच इनपुट, दोनों तरीके काम करते हैं. आने वाले समय में, और भी डिवाइसों पर यह सुविधा काम करेगी. इन डिवाइसों पर, उपयोगकर्ताओं के लिए ऐप्लिकेशन के साथ इंटरैक्ट करने के लिए, माउस और टच स्क्रीन, दोनों का इस्तेमाल करना सामान्य बात है. इसलिए, "टच की सुविधा" और "माउस की ज़रूरत नहीं है", दोनों अलग-अलग चीज़ें हैं. इस समस्या को "मुझे दो अलग-अलग इंटरैक्शन स्टाइल लिखने हैं और उनके बीच स्विच करना है" के तौर पर नहीं देखा जा सकता. आपको यह सोचना होगा कि दोनों इंटरैक्शन, एक साथ और अलग-अलग कैसे काम करेंगे. मैं अपने Chromebook Pixel पर अक्सर ट्रैकपैड का इस्तेमाल करती हूं. हालांकि, कभी-कभी स्क्रीन को छूकर भी काम करती हूं. किसी ऐप्लिकेशन या पेज पर, मैं उस समय जो भी तरीका सबसे आसान लगता है उसका इस्तेमाल करती हूं. दूसरी ओर, टचस्क्रीन वाले कुछ लैपटॉप के उपयोगकर्ता, शायद कभी भी टचस्क्रीन का इस्तेमाल न करें. इसलिए, टच इनपुट की मौजूदगी से माउस कंट्रोल को बंद नहीं किया जाना चाहिए या उसमें रुकावट नहीं आनी चाहिए.

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

माउस और टच पैनल, दोनों का इस्तेमाल करना

#1 - क्लिक और टैप करना - चीज़ों का "सामान्य" क्रम

पहली समस्या यह है कि टच इंटरफ़ेस आम तौर पर माउस क्लिक की नकल करने की कोशिश करते हैं. ऐसा इसलिए होता है, क्योंकि टच इंटरफ़ेस को उन ऐप्लिकेशन पर काम करना होता है जो पहले सिर्फ़ माउस इवेंट के साथ इंटरैक्ट करते थे! इसका इस्तेमाल शॉर्टकट के तौर पर किया जा सकता है. ऐसा इसलिए, क्योंकि "क्लिक" इवेंट ट्रिगर होते रहेंगे, भले ही उपयोगकर्ता ने माउस से क्लिक किया हो या स्क्रीन पर अपने उंगली से टैप किया हो. हालांकि, इस शॉर्टकट में कुछ समस्याएं हैं.

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

1. touchstart
2. touchmove
3. touchend
4. माउसओवर
5. mousemove
6. mousedown
7. mouseup
8. क्लिक

इसका मतलब है कि अगर touchstart जैसे टच इवेंट को प्रोसेस किया जा रहा है, तो आपको यह पक्का करना होगा कि आप उससे जुड़े mousedown और/या क्लिक इवेंट को भी प्रोसेस न करें. अगर टच इवेंट रद्द किए जा सकते हैं (इवेंट हैंडलर में preventDefault() को कॉल करें), तो टच के लिए कोई भी माउस इवेंट जनरेट नहीं होगा. टच हैंडलर का सबसे अहम नियम यह है:

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

दूसरा, जब कोई उपयोगकर्ता मोबाइल डिवाइस पर किसी वेब पेज के एलिमेंट पर टैप करता है, तो मोबाइल इंटरैक्शन के लिए डिज़ाइन नहीं किए गए पेजों में, टचस्टार्ट इवेंट और माउस इवेंट (mousedown) की प्रोसेसिंग के बीच कम से कम 300 मिलीसेकंड की देरी होती है. Chrome का इस्तेमाल करके, टच इंटरफ़ेस की जांच की जा सकती है. इसके लिए, Chrome के डेवलपर टूल में "टच इवेंट को एमुलेट करें" को चालू करें. इससे, टच इंटरफ़ेस की जांच, टच सिस्टम के बिना की जा सकती है!

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

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

<meta name="viewport" content="width=device-width,user-scalable=no">

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

#2: माउस मूव इवेंट, टच से ट्रिगर नहीं होते

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

आम तौर पर, ब्राउज़र एचटीएमएल कंट्रोल पर टच इंटरैक्शन के लिए, सही इंटरैक्शन अपने-आप लागू कर देते हैं. उदाहरण के लिए, HTML5 रेंज कंट्रोल सिर्फ़ तब काम करेंगे, जब टच इंटरैक्शन का इस्तेमाल किया जाएगा. हालांकि, अगर आपने अपने कंट्रोल लागू किए हैं, तो हो सकता है कि वे क्लिक करके खींचने और छोड़ने वाले इंटरैक्शन पर काम न करें. असल में, आम तौर पर इस्तेमाल की जाने वाली कुछ लाइब्रेरी (जैसे, jQueryUI) अब तक इस तरह से टच इंटरैक्शन के साथ काम नहीं करती हैं. हालांकि, jQueryUI के लिए, इस समस्या को ठीक करने के कई तरीके हैं. टच के साथ काम करने के लिए, Web Audio Playground ऐप्लिकेशन को अपग्रेड करते समय मुझे सबसे पहले यह समस्या मिली थी - स्लाइडर jQueryUI पर आधारित थे, इसलिए वे क्लिक करके खींचने और छोड़ने के इंटरैक्शन के साथ काम नहीं करते थे. मैंने HTML5 की रेंज कंट्रोल सुविधा का इस्तेमाल किया और यह काम कर गई. इसके अलावा, स्लाइडर को अपडेट करने के लिए, मैंने आसानी से टचमूव हैंडलर जोड़े जा सकते थे. हालांकि, इसमें एक समस्या है…

#3: Touchmove और MouseMove एक ही चीज़ नहीं हैं

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

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

हालांकि, टच चालू होने पर उन एलिमेंट को हटाने से इस समस्या से बचा जा सकता है जिनमें टच हैंडलर हैं या जिनके पैरंट एलिमेंट में टच हैंडलर हैं. इसके अलावा, हमारा सुझाव है कि स्टैटिक touchend/touchmove हैंडलर रजिस्टर करने के बजाय, touchstart इवेंट मिलने तक इंतज़ार करें. इसके बाद, touchstart इवेंट के target में touchmove/touchend/touchcancel हैंडलर जोड़ें. साथ ही, इवेंट खत्म होने/रद्द होने पर उन्हें हटाएं. इस तरह, टारगेट एलिमेंट को दूसरी जगह ले जाने या हटाने के बाद भी, आपको टच के लिए इवेंट मिलते रहेंगे. यहां इसकी थोड़ी सी जांच की जा सकती है - लाल बॉक्स को छुएं और उसे डीओएम से हटाने के लिए, एस्केप बटन को दबाकर रखें.

#4: टच और :होवर

माउस पॉइंटर के मेटाफ़ोर ने कर्सर की पोज़िशन को, चुनने की प्रोसेस से अलग कर दिया. इससे डेवलपर, कर्सर को घुमाने पर दिखने वाली स्थितियों का इस्तेमाल करके, उपयोगकर्ताओं के लिए काम की जानकारी छिपाने और दिखाने में सक्षम हुए. हालांकि, फ़िलहाल ज़्यादातर टच इंटरफ़ेस, किसी टारगेट पर उंगली "होवर" करने का पता नहीं लगाते.इसलिए, होवर करने के आधार पर, खास जानकारी (जैसे, "यह कंट्रोल क्या है?" पॉप-अप) देना सही नहीं है. ऐसा तब तक नहीं किया जाना चाहिए, जब तक इस जानकारी को ऐक्सेस करने का टच-फ़्रेंडली तरीका भी न दिया जाए. आपको उपयोगकर्ताओं को जानकारी देने के लिए, कर्सर घुमाने की सुविधा का इस्तेमाल सावधानी से करना होगा.

हालांकि, दिलचस्प बात यह है कि कुछ मामलों में टच इंटरफ़ेस से सीएसएस :hover स्यूडोक्लास को ट्रिगर किया जा सकता है - किसी एलिमेंट पर टैप करने से, उंगली के नीचे होने पर उसे :active बना दिया जाता है. साथ ही, उसे :hover स्टेटस भी मिल जाता है. (Internet Explorer में, :hover सिर्फ़ तब लागू होता है, जब उपयोगकर्ता की उंगली स्क्रीन पर होती है. अन्य ब्राउज़र में, :hover तब तक लागू रहता है, जब तक अगला टैप या माउस मूव नहीं किया जाता.) टच इंटरफ़ेस पर पॉप-आउट मेन्यू को काम करने के लिए, यह एक अच्छा तरीका है. किसी एलिमेंट को चालू करने का एक साइड इफ़ेक्ट यह भी है कि :hover स्टेटस भी लागू हो जाता है. उदाहरण के लिए:

<style>
img ~ .content {
  display:none;
}

img:hover ~ .content {
  display:block;
}
</style>

<img src="/awesome.png">
<div class="content">This is an awesome picture of me</div>

किसी दूसरे एलिमेंट पर टैप करने के बाद, वह एलिमेंट चालू नहीं रहता और कर्सर घुमाने की स्थिति हट जाती है. ऐसा तब होता है, जब उपयोगकर्ता माउस पॉइंटर का इस्तेमाल करके, उसे एलिमेंट से हटा देता है. कॉन्टेंट को <a> एलिमेंट में रैप करके, उसे टैबस्टॉप भी बनाया जा सकता है. इससे उपयोगकर्ता, माउस घुमाकर या क्लिक करके, टच टैप या कीबोर्ड दबाकर अतिरिक्त जानकारी को टॉगल कर सकता है. इसके लिए, JavaScript की ज़रूरत नहीं होती. मुझे यह जानकर खुशी हुई कि Web Audio Playground को टच इंटरफ़ेस के साथ बेहतर तरीके से काम करने के लिए, मैंने जिस तरह का स्ट्रक्चर इस्तेमाल किया था उससे मेरे पॉप-आउट मेन्यू पहले से ही टच पर अच्छी तरह से काम कर रहे थे!

ऊपर दिया गया तरीका, माउस पॉइंटर पर आधारित इंटरफ़ेस के साथ-साथ टच इंटरफ़ेस के लिए भी अच्छा काम करता है. यह होवर करने पर "टाइटल" एट्रिब्यूट का इस्तेमाल करने के उलट है, जो एलिमेंट चालू होने पर नहीं दिखेगा:

<img src="/awesome.png" title="this doesn't show up in touch">

#5: टच और माउस, दोनों में से किसका सटीक कंट्रोल बेहतर है

माउस की सटीक जानकारी नहीं होती, लेकिन यह पता चला है कि वे काफ़ी सटीक होते हैं. ऐसा इसलिए होता है, क्योंकि ऑपरेटिंग सिस्टम आम तौर पर कर्सर के लिए पिक्सल की सटीक जानकारी ट्रैक करता है. दूसरी ओर, मोबाइल डेवलपर को पता चला है कि टच स्क्रीन पर उंगली से किए जाने वाले टच उतने सटीक नहीं होते. ऐसा इसलिए होता है, क्योंकि स्क्रीन से संपर्क करते समय उंगली के सतह के हिस्से का साइज़ बड़ा होता है. साथ ही, आपकी उंगलियां स्क्रीन को रोकती हैं.

कई लोगों और कंपनियों ने उपयोगकर्ताओं पर रिसर्च करके, उंगलियों से इंटरैक्ट करने की सुविधा वाले ऐप्लिकेशन और साइटों को डिज़ाइन करने के तरीके के बारे में बताया है. इस विषय पर कई किताबें भी लिखी गई हैं. हमारा सुझाव है कि पैडिंग बढ़ाकर, टच टारगेट का साइज़ बढ़ाएं. साथ ही, एलिमेंट के बीच मार्जिन बढ़ाकर, गलत टैप की संभावना कम करें. (टच और क्लिक इवेंट के हिट डिटेक्शन हैंडल में मार्जिन शामिल नहीं किए जाते, जबकि पैडिंग शामिल होती है.) वेब ऑडियो प्लेलैंड में, मुझे कनेक्शन पॉइंट के साइज़ को बढ़ाना पड़ा, ताकि उन्हें आसानी से और सटीक तरीके से छुआ जा सके.

टच-आधारित इंटरफ़ेस को मैनेज करने वाले कई ब्राउज़र वेंडर ने ब्राउज़र में लॉजिक भी जोड़ा है. इससे, उपयोगकर्ता के स्क्रीन को छूने पर सही एलिमेंट को टारगेट करने और गलत क्लिक की संभावना को कम करने में मदद मिलती है. हालांकि, आम तौर पर यह सिर्फ़ क्लिक इवेंट को ठीक करता है, न कि मूव इवेंट को. हालांकि, ऐसा लगता है कि Internet Explorer, mousedown/mousemove/mouseup इवेंट में भी बदलाव करता है.

#6: टच हैंडल को सीमित रखें, नहीं तो वे आपके स्क्रोल को खराब कर देंगे

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

इस समस्या से बचने के लिए, यह पक्का करें कि अगर आपके यूज़र इंटरफ़ेस (यूआई) के छोटे से हिस्से में ही टच इवेंट हैंडल किए जा रहे हैं, तो सिर्फ़ वहां टच हैंडलर अटैच करें.उदाहरण के लिए, पेज के <body> पर नहीं. इसका मतलब है कि अपने टच हैंडलर के दायरे को ज़्यादा से ज़्यादा सीमित करें.

#7: मल्टी-टच

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

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

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

वीडियो को बेहतर बनाना

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

इन दिशा-निर्देशों का पालन करके, टच इनपुट, माउस इनपुट, और दोनों तरह के इंटरैक्शन के साथ अच्छी तरह काम करने वाले दिलचस्प इंटरैक्टिव अनुभव बनाए जा सकते हैं.