टच और माउस

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

Chris Wilson
Chris Wilson
X
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. क्लिक

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

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

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

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

Android के लिए Chrome Android ब्राउज़र Android के लिए Opera Mobile) Android के लिए Firefox Safari iOS
स्केल न किया जा सकने वाला व्यूपोर्ट कोई देर नहीं 300मि.से. 300मि.से. कोई देर नहीं 300मि.से.
कोई व्यूपोर्ट नहीं है 300मि.से. 300मि.से. 300मि.से. 300मि.से. 300मि.से.

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

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

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

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

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

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

#3: Touchmove और MouseMove एक जैसे नहीं हैं

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

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

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

#4: टच और :hover

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

दिलचस्प बात यह है कि कुछ मामलों में, टच इंटरफ़ेस से सीएसएस :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 की ज़रूरत नहीं होती. जब मैंने अपने वेब ऑडियो प्लेग्राउंड को टच इंटरफ़ेस के साथ काम करने लायक बनाने के लिए काम शुरू किया, तो मुझे यह देखकर बहुत खुशी हुई कि मेरे पॉप-आउट मेन्यू, टच इंटरफ़ेस पर पहले से ही अच्छी तरह से काम कर रहे थे. ऐसा इसलिए हुआ, क्योंकि मैंने इस तरह के स्ट्रक्चर का इस्तेमाल किया था!

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

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

#5: टच और माउस की सटीक जानकारी

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

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

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

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

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

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

#7: मल्टी-टच

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

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

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

बेहतर बनाया जा रहा है

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

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