टच और माउस

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

क्रिस विल्सन

पॉल किनलन

शुरुआती जानकारी

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

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

वेब प्लैटफ़ॉर्म पर जुड़ाव की स्थिति

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

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

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

सबसे अहम बात: उपयोगकर्ता के पास छूना और चूहा हो सकता है

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

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

ध्यान दें: Windows 8 पर, IE10 में Microsoft ने पॉइंटर इवेंट नाम का एक नया मॉडल लॉन्च किया है. पॉइंटर इवेंट, माउस इवेंट और टच इनपुट के साथ-साथ पेन इनपुट जैसे इनपुट के अन्य तरीकों को मिलाकर बनाए जाते हैं. W3C पर पॉइंटर इवेंट मॉडल के लिए काम करना ज़रूरी है. साथ ही, कुछ समय के लिए कुछ लाइब्रेरी उपलब्ध हैं, जैसे कि PointerEvents और Hand.js. इनका इस्तेमाल करके, यह प्रोटोटाइप किया जा सकता है कि पॉइंटर इवेंट आपके कोड में कैसे काम कर सकते हैं. इससे माउस और टच को स्वतंत्र रूप से काम करने की कुछ ज़रूरत को खत्म किया जा सकता है. वास्तव में बेहतरीन टच और माउस इंटरैक्शन के लिए, हो सकता है कि आपको माउस और टच के लिए अपने उपयोगकर्ता अनुभव को अलग-अलग कस्टमाइज़ करना पड़े, लेकिन संयुक्त इवेंट हैंडलिंग कई स्थितियों में इसे आसान बना सकता है. हालांकि, इस मॉडल में काफ़ी बड़ी चुनौतियां हैं. जैसे, इसे ग़ैर-ज़रूरी इनपुट मॉडल के साथ काम करना ज़रूरी है और फ़िलहाल यह बड़े पैमाने पर काम नहीं करता. साथ ही, इसे एक ठोस, क्रॉस-ब्राउज़र मानक बनाने में कुछ समय लगेगा. इस बीच, सबसे अच्छी सलाह यह है कि माउस और टच इंटरैक्शन मॉडल, दोनों को सपोर्ट करें. टच और माउस इवेंट को एक साथ करने में कई चुनौतियां हैं. इसलिए, इस लेख में उन चुनौतियों और उनसे निपटने की रणनीतियों के बारे में बताया गया है. इसके अलावा, इसमें से कुछ सलाह आम तौर पर "टच लागू करने" की सलाह है. इसलिए, अगर आप पहले से ही मोबाइल पर टच लागू करने की कोशिश कर रहे हैं, तो यह गैर-ज़रूरी हो सकता है.

माउस और टच टुगेदर के साथ काम करना

#1 - क्लिक और टैप करना - चीज़ों का "नैचुरल" ऑर्डर

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

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

1. टचस्टार्ट
2. टचमूव
3. टचएंड
4. mouseover
5. mousemove
6. mousedown
7. माउसअप
8. click

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

अहम जानकारी: टच इवेंट हैंडलर में preventDefault() का इस्तेमाल करता है, ताकि डिफ़ॉल्ट रूप से माउस-एमुलेशन को हैंडल न किया जा सके.

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

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

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

	Android के लिए Chrome	Android ब्राउज़र	Android के लिए Opera मोबाइल)	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 इवेंट, टच से ट्रिगर नहीं होते

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

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

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

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

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

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

#4: टच और :होवर करें

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

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

<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">

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

#5: टच बनाम माउस सटीक

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

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

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

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

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

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

#7: मल्टी-टच

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

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

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

बेहतर बनाना

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

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