টাচ ও মাউস

প্রথমবারের জন্য আবার একসাথে

Chris Wilson

Paul Kinlan

ভূমিকা

প্রায় ৩০ বছর ধরে, ডেস্কটপ কম্পিউটিংয়ের অভিজ্ঞতা কীবোর্ড এবং মাউস বা ট্র্যাকপ্যাডের মতো প্রধান ইউজার ইনপুট ডিভাইসের উপর নির্ভর করে গড়ে উঠেছে। তবে, গত দশকে স্মার্টফোন ও ট্যাবলেট ইন্টার‍্যাকশনের নতুন দৃষ্টান্ত নিয়ে এসেছে: টাচ। টাচ-চালু Windows 8 মেশিনের প্রবর্তনের সাথে এবং এখন দুর্দান্ত টাচ-চালু Chromebook Pixel-এর রিলিজের সাথে, টাচ এখন প্রত্যাশিত ডেস্কটপ অভিজ্ঞতার অংশ হয়ে উঠছে। সবচেয়ে বড় চ্যালেঞ্জগুলির মধ্যে একটি হল এমন অভিজ্ঞতা তৈরি করা যা শুধু টাচ ডিভাইস ও মাউস ডিভাইসেই কাজ করে না, বরং এমন ডিভাইসেও কাজ করে যেখানে ব্যবহারকারী দুটি ইনপুট পদ্ধতিই ব্যবহার করবেন - কখনও কখনও একই সাথে!

এই নিবন্ধ থেকে আপনি জানতে পারবেন যে ব্রাউজারে টাচ করার সুবিধা কীভাবে তৈরি করা হয়, আপনার আগে থেকে থাকা অ্যাপে এই নতুন ইন্টারফেস মেকানিজম কীভাবে ইন্টিগ্রেট করতে পারবেন এবং মাউস ইনপুটের সাথে টাচ করার সুবিধা কীভাবে ভালোভাবে কাজ করতে পারে।

ওয়েব প্ল্যাটফর্মে টাচের অবস্থা

iPhone হল প্রথম জনপ্রিয় প্ল্যাটফর্ম যার ওয়েব ব্রাউজারে ডেডিকেটেড টাচ API বিল্ট-ইন ছিল। অন্যান্য বেশ কিছু ব্রাউজার ভেন্ডর iOS-এ প্রয়োগের সাথে মানানসই একই ধরনের API ইন্টারফেস তৈরি করেছে, যা এখন "টাচ ইভেন্ট ভার্সন ১" স্পেসিফিকেশন দ্বারা বর্ণনা করা হয়েছে। ডেস্কটপে Chrome ও Firefox, iOS-এ Safari এবং Android-এ Chrome ও Android ব্রাউজার এবং Blackberry ব্রাউজারের মতো অন্যান্য মোবাইল ব্রাউজারে টাচ ইভেন্ট কাজ করে।

আমার সহকর্মী বরিস স্মাস টাচ ইভেন্টের উপর একটি দুর্দান্ত HTML5Rocks টিউটোরিয়াল লিখেছেন, আপনি যদি আগে টাচ ইভেন্ট না দেখে থাকেন, তাহলে শুরু করার জন্য এটি এখনও একটি ভালো উপায়। আসলে, আপনি যদি আগে টাচ ইভেন্ট নিয়ে কাজ না করে থাকেন, তাহলে চালিয়ে যাওয়ার আগে এখন সেই নিবন্ধটি পড়ে নিন। বলুন, আমি অপেক্ষা করছি।

সব হয়ে গেছে? টাচ ইভেন্ট সম্পর্কে আপনার প্রাথমিক ধারণা হয়ে গেছে, এখন টাচ-চালিত ইন্টার‍্যাকশন লেখার ক্ষেত্রে চ্যালেঞ্জ হল, টাচ ইন্টার‍্যাকশন মাউস (এবং মাউস-এমুলেটিং ট্র্যাকপ্যাড ও ট্র্যাকবল) ইভেন্টের থেকে কিছুটা আলাদা হতে পারে - এবং যদিও টাচ ইন্টারফেস সাধারণত মাউস এমুলেট করার চেষ্টা করে, সেই এমুলেশন নিখুঁত বা সম্পূর্ণ নয়; আপনাকে সত্যিই দুটি ইন্টার‍্যাকশন স্টাইল নিয়ে কাজ করতে হবে এবং প্রতিটি ইন্টারফেস স্বাধীনভাবে সাপোর্ট করতে হতে পারে।

সবচেয়ে গুরুত্বপূর্ণ: ব্যবহারকারীর কাছে টাচ ও মাউস থাকতে পারে

অনেক ডেভেলপার এমন সাইট তৈরি করেছেন যা কোনও এনভায়রনমেন্ট টাচ ইভেন্ট সাপোর্ট করে কিনা তা স্ট্যাটিক্যালি শনাক্ত করে এবং তারপরে অনুমান করে যে তাদের শুধুমাত্র টাচ (এবং মাউস নয়) ইভেন্ট সাপোর্ট করতে হবে। এটি এখন একটি ভুল অনুমান - পরিবর্তে, শুধুমাত্র টাচ ইভেন্ট উপস্থিত থাকার অর্থ এই নয় যে ব্যবহারকারী প্রাথমিকভাবে সেই টাচ ইনপুট ডিভাইসটি ব্যবহার করছেন। Chromebook Pixel এবং কিছু Windows 8 ল্যাপটপের মতো ডিভাইসে এখন মাউস এবং টাচ করে ইনপুট দেওয়ার পদ্ধতি, দুটিই কাজ করে এবং অদূর ভবিষ্যতে আরও ডিভাইসে কাজ করবে। এইসব ডিভাইসে, ব্যবহারকারীদের পক্ষে অ্যাপ্লিকেশনের সাথে ইন্টার‍্যাক্ট করার জন্য মাউস ও টাচ স্ক্রিন, দুটিই ব্যবহার করা খুবই স্বাভাবিক, তাই "টাচ কাজ করে" ও "মাউস কাজ করার প্রয়োজন নেই" এক জিনিস নয়। আপনি সমস্যাটিকে এভাবে ভাবতে পারবেন না যে, "আমাকে দুটি ভিন্ন ইন্টার‍্যাকশন স্টাইল লিখতে হবে এবং তাদের মধ্যে পরিবর্তন করতে হবে," আপনাকে ভাবতে হবে যে দুটি ইন্টার‍্যাকশন কীভাবে একসাথে এবং স্বাধীনভাবে কাজ করবে। আমার Chromebook Pixel-এ, আমি প্রায়ই ট্র্যাকপ্যাড ব্যবহার করি, তবে আমি হাত বাড়িয়ে স্ক্রিনও টাচ করি - একই অ্যাপ্লিকেশন বা পৃষ্ঠায়, সেই মুহূর্তে আমার কাছে যেটি সবচেয়ে স্বাভাবিক মনে হয়, আমি সেটিই করি। অন্যদিকে, কিছু টাচস্ক্রিন ল্যাপটপ ব্যবহারকারী খুব কমই টাচস্ক্রিন ব্যবহার করবেন - তাই টাচ ইনপুটের উপস্থিতি মাউস কন্ট্রোলকে বন্ধ বা বাধা দেবে না।

কোনও ব্যবহারকারীর ব্রাউজার এনভায়রনমেন্ট টাচ ইনপুট সাপোর্ট করে কিনা তা জানা কঠিন; আদর্শগতভাবে, ডেস্কটপ মেশিনের ব্রাউজার সবসময় টাচ ইভেন্টের জন্য সাপোর্ট দেখাবে যাতে যেকোনও সময় টাচস্ক্রিন ডিসপ্লে অ্যাটাচ করা যায় (যেমন, KVM-এর মাধ্যমে অ্যাটাচ করা টাচস্ক্রিন উপলভ্য হলে)। এইসব কারণে, আপনার অ্যাপ্লিকেশনকে টাচ ও মাউসের মধ্যে পাল্টানোর চেষ্টা করা উচিত নয় - শুধু দুটিকেই সাপোর্ট করতে হবে!

মনে রাখবেন: Windows 8-এ IE10-এর জন্য Microsoft একটি নতুন মডেল নিয়ে এসেছে যার নাম Pointer Events। পয়েন্টার ইভেন্ট হল মাউস ইভেন্ট ও টাচ করে ইনপুট দেওয়ার পদ্ধতি এবং পেন ইনপুটের মতো অন্যান্য ইনপুট পদ্ধতির একীকরণ। W3C-তে পয়েন্টার ইভেন্ট মডেলকে স্ট্যান্ডার্ডাইজ করার কাজ চলছে এবং অল্প সময়ের জন্য PointerEvents ও Hand.js-এর মতো লাইব্রেরি আছে যা আপনি প্রোটোটাইপ করতে ব্যবহার করতে পারেন। এর ফলে, আপনার কোডে পয়েন্টার ইভেন্ট কীভাবে কাজ করতে পারে তা আপনি বুঝতে পারবেন এবং মাউস ও টাচকে আলাদাভাবে সাপোর্ট করার প্রয়োজনীয়তা কিছুটা কমবে। টাচ ও মাউস ইন্টার‍্যাকশন সংক্রান্ত দারুণ অভিজ্ঞতা পেতে, আপনাকে মাউস ও টাচের জন্য আলাদাভাবে ব্যবহারকারীর অভিজ্ঞতা কাস্টমাইজ করতে হতে পারে, তবে ইউনিফায়েড ইভেন্ট হ্যান্ডলিং অনেক পরিস্থিতিতে এটিকে আরও সহজ করে তুলতে পারে। তবে, এই মডেলের ক্ষেত্রে কিছু উল্লেখযোগ্য চ্যালেঞ্জ রয়েছে - যেমন, এর জন্য অতিরিক্ত ইনপুট মডেলের প্রয়োজন হয় এবং এটি এখনও ব্যাপকভাবে কাজ করে না - এবং একটি সলিড, ক্রস-ব্রাউজার স্ট্যান্ডার্ডে সেটেল হতে কিছুটা সময় লাগবে। ইতিমধ্যে, মাউস ও টাচ ইন্টার‍্যাকশন মডেল, দুটিতেই কাজ করে এমন সাইট তৈরি করা সবচেয়ে ভালো। টাচ ও মাউস ইভেন্ট একসাথে সাপোর্ট করার ক্ষেত্রে অনেক চ্যালেঞ্জ আছে, তাই এই নিবন্ধে সেইসব চ্যালেঞ্জ ও সেগুলি অতিক্রম করার স্ট্র্যাটেজি ব্যাখ্যা করা হয়েছে। এছাড়াও, এই পরামর্শের মধ্যে কিছু হল সাধারণ "টাচ প্রয়োগ করা" সংক্রান্ত পরামর্শ, তাই আপনি যদি আগে থেকেই মোবাইল প্রসঙ্গে টাচ প্রয়োগ করতে অভ্যস্ত হন, তাহলে এটি অপ্রয়োজনীয় হতে পারে।

মাউস ও টাচ একসাথে কাজ করে

#১ - ক্লিক ও ট্যাপ করা - জিনিসের "স্বাভাবিক" ক্রম

প্রথম সমস্যা হল, টাচ ইন্টারফেস সাধারণত মাউস ক্লিক অনুকরণ করার চেষ্টা করে - অবশ্যই, কারণ টাচ ইন্টারফেসকে এমন অ্যাপ্লিকেশনে কাজ করতে হবে যা আগে শুধুমাত্র মাউস ইভেন্টের সাথে ইন্টারঅ্যাক্ট করেছে! আপনি এটি শর্টকাট হিসেবে ব্যবহার করতে পারেন - কারণ ব্যবহারকারী মাউস দিয়ে ক্লিক করুন বা স্ক্রিনে আঙুল দিয়ে ট্যাপ করুন, "ক্লিক" ইভেন্ট ট্রিগার হতে থাকবে। তবে, এই শর্টকাটের ক্ষেত্রে কিছু সমস্যা আছে।

প্রথমত, আরও উন্নত টাচ ইন্টার‍্যাকশন ডিজাইন করার সময় আপনাকে সতর্ক থাকতে হবে: ব্যবহারকারী মাউস ব্যবহার করলে এটি ক্লিক ইভেন্টের মাধ্যমে রেসপন্স করবে, কিন্তু ব্যবহারকারী স্ক্রিন টাচ করলে টাচ ও ক্লিক, দুটি ইভেন্টই ঘটবে। একবার ক্লিক করার জন্য ইভেন্টের ক্রম হল:

1. touchstart
2. touchmove
3. touchend
4. মাউসওভার
5. mousemove
6. মাউসডাউন
7. mouseup
8. ক্লিক

অবশ্যই, এর অর্থ হল, আপনি যদি টাচস্টার্টের মতো টাচ ইভেন্ট প্রসেস করেন, তাহলে আপনাকে নিশ্চিত করতে হবে যে আপনি সংশ্লিষ্ট মাউসডাউন এবং/অথবা ক্লিক ইভেন্টও প্রসেস করছেন না। আপনি টাচ ইভেন্ট বাতিল করতে পারলে (ইভেন্ট হ্যান্ডলারের মধ্যে preventDefault() কল করুন), তাহলে টাচের জন্য কোনও মাউস ইভেন্ট তৈরি হবে না। টাচ হ্যান্ডলারের সবচেয়ে গুরুত্বপূর্ণ নিয়মগুলির মধ্যে একটি হল:

গুরুত্বপূর্ণ পয়েন্ট: টাচ ইভেন্ট হ্যান্ডলারের মধ্যে preventDefault() ব্যবহার করুন, যাতে ডিফল্ট মাউস-ইমুলেশন হ্যান্ডলিং না ঘটে।

তবে, এটি অন্যান্য ডিফল্ট ব্রাউজার আচরণকেও বাধা দেয় (যেমন স্ক্রোলিং) - যদিও সাধারণত আপনি আপনার হ্যান্ডলারে সম্পূর্ণরূপে টাচ ইভেন্ট পরিচালনা করছেন এবং আপনি ডিফল্ট অ্যাকশনগুলি বন্ধ করতে চাইবেন। সাধারণত, আপনি সব টাচ ইভেন্ট ম্যানেজ ও বাতিল করতে চাইবেন অথবা সেই ইভেন্টের জন্য কোনও হ্যান্ডলার এড়িয়ে যাবেন।

দ্বিতীয়ত, মোবাইল ডিভাইসে কোনও ওয়েব পেজের এলিমেন্টে ব্যবহারকারী ট্যাপ করলে, মোবাইল ইন্টার‍্যাকশনের জন্য ডিজাইন করা হয়নি এমন পেজে টাচস্টার্ট ইভেন্ট ও মাউস ইভেন্ট (মাউসডাউন) প্রসেস করার মধ্যে অন্তত ৩০০ মিলিসেকেন্ডের দেরি হয়। Chrome ব্যবহার করে এটি করা যেতে পারে, টাচ ইন্টারফেস নেই এমন সিস্টেমে টাচ ইন্টারফেস পরীক্ষা করার জন্য আপনি Chrome ডেভেলপার টুলে "টাচ ইভেন্ট এমুলেট করুন" বিকল্প চালু করতে পারেন!

ব্যবহারকারী অন্য কোনও জেসচার পারফর্ম করছেন কিনা তা নির্ধারণ করার জন্য ব্রাউজারকে সময় দিতে এই বিলম্ব করা হয় - বিশেষ করে, ডবল-ট্যাপ করে জুম করা। অবশ্যই, আপনি যদি চান যে আঙুল দিয়ে স্পর্শ করার সাথে সাথে প্রতিক্রিয়া হোক, তাহলে এটি সমস্যাজনক হতে পারে। এই ধরনের বিলম্ব অটোমেটিক হওয়ার পরিস্থিতি সীমিত করার জন্য কাজ চলছে।

	Android-এর জন্য Chrome	Android Browser	Android-এর জন্য Opera Mobile)	Android-এর জন্য Firefox	Safari iOS
স্কেল করা যায় না এমন ভিউপোর্ট	কোনো বিলম্ব হয়নি	৩০০মিঃসে	৩০০মিঃসে	কোনো বিলম্ব হয়নি	৩০০মিঃসে
কোনও ভিউপোর্ট নেই	৩০০মিঃসে	৩০০মিঃসে	৩০০মিঃসে	৩০০মিঃসে	৩০০মিঃসে

এই বিলম্ব এড়ানোর প্রথম এবং সবচেয়ে সহজ উপায় হল মোবাইল ব্রাউজারকে "বলা" যে আপনার পৃষ্ঠার জুম করার প্রয়োজন নেই - যা একটি নির্দিষ্ট ভিউপোর্ট ব্যবহার করে করা যেতে পারে, যেমন আপনার পৃষ্ঠায় এটি যোগ করে:

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

অবশ্যই, এটি সবসময় উপযুক্ত নয় - এটি পিঞ্চ-জুমিং বন্ধ করে দেয়, যা অ্যাক্সেসিবিলিটির কারণে প্রয়োজন হতে পারে, তাই এটি খুব কম ব্যবহার করুন (আপনি যদি ব্যবহারকারীর স্কেলিং বন্ধ করে দেন, তাহলে আপনার অ্যাপ্লিকেশনে টেক্সট পড়ার সুবিধা বাড়ানোর জন্য অন্য কোনও উপায় প্রদান করতে পারেন)। এছাড়াও, ডেস্কটপ ক্লাস ডিভাইসে Chrome-এর জন্য যা টাচ সাপোর্ট করে এবং মোবাইল প্ল্যাটফর্মে অন্যান্য ব্রাউজার যখন পৃষ্ঠায় ভিউপোর্ট থাকে যা স্কেলেবল নয়, এই বিলম্ব প্রযোজ্য নয়।

#২: টাচ করার মাধ্যমে Mousemove ইভেন্ট ফায়ার করা হয় না

এই পর্যায়ে এটি মনে রাখা গুরুত্বপূর্ণ যে টাচ ইন্টারফেসে মাউস ইভেন্টের এমুলেশন সাধারণত mousemove ইভেন্টের এমুলেশন পর্যন্ত বিস্তৃত হয় না - তাই আপনি যদি mousemove ইভেন্ট ব্যবহার করে এমন একটি সুন্দর মাউস-চালিত কন্ট্রোল তৈরি করেন, তাহলে আপনি বিশেষভাবে touchmove হ্যান্ডলার যোগ না করা পর্যন্ত এটি সম্ভবত টাচ ডিভাইসের সাথে কাজ করবে না।

ব্রাউজার সাধারণত HTML কন্ট্রোলে টাচ ইন্টার‍্যাকশনের জন্য উপযুক্ত ইন্টার‍্যাকশন অটোমেটিক প্রয়োগ করে - তাই, উদাহরণস্বরূপ, আপনি টাচ ইন্টার‍্যাকশন ব্যবহার করলে HTML5 রেঞ্জ কন্ট্রোল কাজ করবে। তবে, আপনি নিজের কন্ট্রোল প্রয়োগ করলে, ক্লিক-ও-টেনে আনা ধরনের ইন্টার‍্যাকশনে সেগুলি কাজ নাও করতে পারে; আসলে, সাধারণভাবে ব্যবহৃত কিছু লাইব্রেরি (যেমন jQueryUI) এখনও পর্যন্ত এইভাবে টাচ ইন্টার‍্যাকশনকে নেটিভভাবে সাপোর্ট করে না (যদিও jQueryUI-এর ক্ষেত্রে এই সমস্যার জন্য বেশ কিছু মাঙ্কি-প্যাচ সমাধান আছে)। আমার Web Audio Playground অ্যাপ্লিকেশনকে টাচ-এর সাথে কাজ করার জন্য আপগ্রেড করার সময় আমি প্রথম যে সমস্যাগুলির মধ্যে পড়েছিলাম তার মধ্যে এটি একটি ছিল - স্লাইডারগুলি jQueryUI-ভিত্তিক ছিল, তাই তারা ক্লিক-এন্ড-ড্র্যাগ ইন্টারঅ্যাকশনের সাথে কাজ করেনি। আমি HTML5 রেঞ্জ কন্ট্রোলে পরিবর্তন করেছি এবং সেগুলি কাজ করেছে। বিকল্প হিসেবে, অবশ্যই, আমি স্লাইডার আপডেট করার জন্য টাচমুভ হ্যান্ডলার যোগ করতে পারতাম, কিন্তু তাতে একটি সমস্যা আছে…

#৩: Touchmove এবং MouseMove একই জিনিস নয়

আমি দেখেছি যে কিছু ডেভেলপার touchmove এবং mousemove হ্যান্ডলারকে একই কোডপাথে কল করার ভুল করেন। এইসব ইভেন্টের আচরণ খুব কাছাকাছি, কিন্তু সূক্ষ্মভাবে আলাদা - বিশেষ করে, টাচ ইভেন্ট সবসময় সেই এলিমেন্টকে টার্গেট করে যেখানে টাচ শুরু হয়েছে, অন্যদিকে মাউস ইভেন্ট বর্তমানে মাউস কার্সরের নিচে থাকা এলিমেন্টকে টার্গেট করে। এই কারণেই আমাদের কাছে মাউসওভার এবং মাউসআউট ইভেন্ট আছে, কিন্তু কোনও সংশ্লিষ্ট টাচওভার এবং টাচআউট ইভেন্ট নেই - শুধুমাত্র টাচএন্ড আছে।

ব্যবহারকারী যে এলিমেন্ট স্পর্শ করা শুরু করেছেন সেটি আপনি সরিয়ে দিলে (বা অন্য জায়গায় নিয়ে গেলে) এই সমস্যা সবচেয়ে বেশি হয়। যেমন, কাস্টম স্ক্রলিং আচরণকে সাপোর্ট করার জন্য সম্পূর্ণ ক্যারোজেলে টাচ হ্যান্ডলার সহ একটি ইমেজ ক্যারোজেল কল্পনা করুন। উপলভ্য ছবি পরিবর্তন হওয়ার সাথে সাথে, আপনি কিছু <img> এলিমেন্ট সরিয়ে দেন এবং অন্যগুলি যোগ করেন। ব্যবহারকারী যদি সেইসব ছবির মধ্যে কোনও একটিতে টাচ করতে শুরু করেন এবং তারপরে আপনি সেটি সরিয়ে দেন, তাহলে আপনার হ্যান্ডলার (যা img এলিমেন্টের অ্যানসেস্টরে থাকে) টাচ ইভেন্ট পাওয়া বন্ধ করে দেবে (কারণ সেগুলি এমন একটি টার্গেটে পাঠানো হচ্ছে যা ট্রিতে আর নেই) - এটি দেখে মনে হবে যে ব্যবহারকারী তার আঙুল একটি জায়গায় ধরে রেখেছেন, যদিও তিনি সেটি সরিয়ে নিয়েছেন এবং শেষ পর্যন্ত সরিয়ে দিয়েছেন।

টাচ অ্যাক্টিভ থাকাকালীন টাচ হ্যান্ডলার আছে (বা পূর্বপুরুষদের আছে) এমন এলিমেন্ট সরানো এড়িয়ে আপনি অবশ্যই এই সমস্যাটি এড়াতে পারেন। অন্যভাবে বলতে গেলে, স্ট্যাটিক touchend/touchmove হ্যান্ডলার রেজিস্টার করার পরিবর্তে, touchstart ইভেন্ট না পাওয়া পর্যন্ত অপেক্ষা করুন এবং তারপরে touchstart ইভেন্টের টার্গেটে touchmove/touchend/touchcancel হ্যান্ডলার যোগ করুন (এবং শেষ/বাতিল করার সময় সেগুলি সরিয়ে দিন)। এইভাবে, টার্গেট এলিমেন্ট সরানো/মুছে দেওয়া হলেও আপনি টাচের জন্য ইভেন্ট পাওয়া চালিয়ে যাবেন। আপনি এখানে এটি নিয়ে একটু পরীক্ষা করে দেখতে পারেন - লাল বক্সটি টাচ করুন এবং সেটি হোল্ড করে রেখে escape টিপুন যাতে সেটি DOM থেকে সরিয়ে দেওয়া যায়।

#৪: টাচ ও :hover

মাউস পয়েন্টার মেটাফর কার্সরের পজিশনকে অ্যাক্টিভ সিলেকশন থেকে আলাদা করে এবং এর ফলে ডেভেলপাররা হোভার স্টেট ব্যবহার করে ব্যবহারকারীর জন্য প্রাসঙ্গিক তথ্য লুকাতে ও দেখাতে পারেন। তবে, বেশিরভাগ টাচ ইন্টারফেস বর্তমানে কোনও টার্গেটের উপর আঙুল "হোভার" করা শনাক্ত করে না - তাই হোভার করার উপর ভিত্তি করে শব্দার্থগতভাবে গুরুত্বপূর্ণ তথ্য (যেমন, "এই কন্ট্রোলটি কী?" পপ-আপ প্রদান করা) প্রদান করা যাবে না, যদি না আপনি এই তথ্য অ্যাক্সেস করার জন্য একটি টাচ-ফ্রেন্ডলি উপায়ও প্রদান করেন। ব্যবহারকারীদের তথ্য দেখানোর জন্য হোভারিং কীভাবে ব্যবহার করবেন সেই ব্যাপারে আপনাকে সতর্ক থাকতে হবে।

তবে, মজার ব্যাপার হল, কিছু ক্ষেত্রে টাচ ইন্টারফেসের মাধ্যমে CSS :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> এলিমেন্টে র‍্যাপ করতে চাইতে পারেন যাতে এটি ট্যাবস্টপ হিসেবেও কাজ করে - এইভাবে ব্যবহারকারী মাউস হোভার বা ক্লিক, টাচ ট্যাপ বা কীপ্রেসের মাধ্যমে অতিরিক্ত তথ্য টগল করতে পারবেন, কোনও জাভাস্ক্রিপ্টের প্রয়োজন নেই। আমি যখন আমার Web Audio Playground-কে টাচ ইন্টারফেসের সাথে ভালোভাবে কাজ করার জন্য কাজ শুরু করি, তখন আমি আনন্দিতভাবে অবাক হয়েছিলাম যে আমার পপ-আউট মেনুগুলি ইতিমধ্যেই টাচে ভাল কাজ করেছে, কারণ আমি এই ধরনের স্ট্রাকচার ব্যবহার করেছি!

উপরের পদ্ধতিটি মাউস পয়েন্টার ভিত্তিক ইন্টারফেসের পাশাপাশি টাচ ইন্টারফেসের জন্যও ভাল কাজ করে। এটি হোভার করার সময় "টাইটেল" অ্যাট্রিবিউট ব্যবহার করার থেকে আলাদা, যা এলিমেন্ট অ্যাক্টিভেট করা হলে দেখানো হবে না:

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

মনে রাখবেন: হোভারের মতো অতিরিক্ত সিম্যান্টিক আপনি বিবেচনা করতে পারেন: - "সেকেন্ডারি ক্লিক" হিসেবে "টাচ করে ধরে রাখুন" ফিচার প্রয়োগ করুন। মোবাইল ও ডেস্কটপের মতো অনেক ডিভাইসে, সংশ্লিষ্ট মেনু প্রয়োগ করার জন্য টাচ-অ্যান্ড-হোল্ড ফিচার আগে থেকেই ব্যবহার করা হয়, তাই আপনার নিজস্ব টাইমার ব্যবহার করা উচিত নয় - oncontextmenu ইভেন্ট শুনুন এবং ডিফল্ট অ্যাকশন বাতিল করতে ভুলবেন না। - UI-তে ক্লিক সম্পূর্ণ করতে দুটি সিঙ্গেল টাচ ইভেন্ট ব্যবহার করুন - প্রথম ক্লিকে হোভার তথ্য দেখানো হবে, দ্বিতীয় ক্লিকে অ্যাকশন সম্পূর্ণ হবে। - আপনি যদি সাহায্য সংক্রান্ত তথ্য প্রদান করার জন্য হোভার এফেক্ট প্রয়োগ করেন - "এই কন্ট্রোল কী করে" এই ধরনের তথ্য - তাহলে আপনি হয়ত শুধু "সহায়তা মোড" প্রদান করতে চাইবেন যা এই আচরণ টগল করে।

#৫: টাচ বনাম মাউস প্রিসিশন

মাউসের ক্ষেত্রে বাস্তব থেকে ধারণাগত বিচ্ছিন্নতা থাকলেও, এটি অত্যন্ত নির্ভুলভাবে কাজ করে, কারণ অন্তর্নিহিত অপারেটিং সিস্টেম সাধারণত কার্সারের জন্য সঠিক পিক্সেল নির্ভুলতা ট্র্যাক করে। অন্যদিকে, মোবাইল ডেভেলপাররা জানেন যে টাচস্ক্রিনে আঙুল দিয়ে টাচ করা ততটা নিখুঁত নয়, কারণ স্ক্রিনের সাথে আঙুলের যে অংশটি টাচ করে তার সাইজ (এবং আংশিকভাবে কারণ আপনার আঙুল স্ক্রিনকে আড়াল করে)।

অনেক ব্যক্তি ও কোম্পানি, আঙুলের মাধ্যমে ইন্টার‍্যাকশন করা যায় এমন অ্যাপ্লিকেশন ও সাইট কীভাবে ডিজাইন করা যায় সেই বিষয়ে ব্যবহারকারী সম্পর্কে রিসার্চ করেছেন এবং এই বিষয়ে অনেক বইও লেখা হয়েছে। প্যাডিং বাড়িয়ে টাচ টার্গেটের সাইজ বাড়ানো এবং এলিমেন্টের মধ্যে মার্জিন বাড়িয়ে ভুল ট্যাপ করার সম্ভাবনা কমানো হল প্রাথমিক পরামর্শ। (টাচ ও ক্লিক ইভেন্টের হিট ডিটেকশন হ্যান্ডলিংয়ে মার্জিন অন্তর্ভুক্ত করা হয় না, তবে প্যাডিং করা হয়।) Web Audio Playground-এ আমাকে যে প্রাথমিক সমাধান করতে হয়েছিল তার মধ্যে একটি হল কানেকশন পয়েন্টের সাইজ বাড়ানো যাতে সেগুলি আরও সহজে ও সঠিকভাবে স্পর্শ করা যায়।

টাচ-ভিত্তিক ইন্টারফেস ম্যানেজ করে এমন অনেক ব্রাউজার ভেন্ডর, ব্রাউজারে লজিকও চালু করেছে যাতে ব্যবহারকারী স্ক্রিন টাচ করলে সঠিক এলিমেন্ট টার্গেট করতে এবং ভুল ক্লিকের সম্ভাবনা কমাতে সাহায্য করে - যদিও এটি সাধারণত শুধুমাত্র ক্লিক ইভেন্ট সংশোধন করে, মুভ নয় (যদিও Internet Explorer, mousedown/mousemove/mouseup ইভেন্টও পরিবর্তন করে বলে মনে হয়)।

#৬: টাচ হ্যান্ডলারকে কন্টেন করে রাখুন, না হলে আপনার স্ক্রল জ্যাঙ্ক করবে

এছাড়াও, টাচ হ্যান্ডলারকে শুধুমাত্র সেইসব এলিমেন্টের মধ্যে সীমাবদ্ধ রাখা গুরুত্বপূর্ণ যেখানে আপনার সেগুলি প্রয়োজন; টাচ এলিমেন্ট খুব বেশি ব্যান্ডউইথের হতে পারে, তাই স্ক্রলিং এলিমেন্টে টাচ হ্যান্ডলার এড়ানো গুরুত্বপূর্ণ (কারণ আপনার প্রসেসিং দ্রুত জ্যাঙ্ক-ফ্রি টাচ স্ক্রলিংয়ের জন্য ব্রাউজার অপ্টিমাইজেশনে হস্তক্ষেপ করতে পারে - আধুনিক ব্রাউজারগুলি একটি GPU থ্রেডে স্ক্রল করার চেষ্টা করে, তবে প্রতিটি টাচ ইভেন্ট অ্যাপের মাধ্যমে হ্যান্ডেল করা হবে কিনা তা দেখার জন্য প্রথমে জাভাস্ক্রিপ্টের মাধ্যমে চেক করতে হলে এটি অসম্ভব)। আপনি এই আচরণের একটি উদাহরণ চেক করে দেখতে পারেন।

এই সমস্যা এড়ানোর জন্য একটি নির্দেশিকা হল, আপনি যদি UI-এর একটি ছোট অংশে শুধুমাত্র টাচ ইভেন্ট ম্যানেজ করেন, তাহলে শুধুমাত্র সেখানেই টাচ হ্যান্ডলার অ্যাটাচ করুন (যেমন, পৃষ্ঠার <body>-এ নয়); সংক্ষেপে, আপনার টাচ হ্যান্ডলারের স্কোপ যতটা সম্ভব সীমিত করুন।

#৭: মাল্টি-টাচ

শেষ চ্যালেঞ্জটি হল, আমরা এটিকে "টাচ" ইউজার ইন্টারফেস হিসেবে উল্লেখ করলেও, প্রায় সব ক্ষেত্রেই এটি আসলে মাল্টি-টাচ সাপোর্ট করে - অর্থাৎ, API একবারে একাধিক টাচ ইনপুট প্রদান করে। আপনার অ্যাপ্লিকেশনে টাচ করার সুবিধা চালু করার সময়, একাধিক টাচ আপনার অ্যাপ্লিকেশনকে কীভাবে প্রভাবিত করতে পারে তা বিবেচনা করা উচিত।

আপনি যদি মূলত মাউস দিয়ে ব্যবহার করা যায় এমন অ্যাপ তৈরি করেন, তাহলে আপনি সর্বাধিক একটি কার্সর পয়েন্ট দিয়ে তৈরি করতে অভ্যস্ত - সিস্টেম সাধারণত একাধিক মাউস কার্সর সাপোর্ট করে না। অনেক অ্যাপ্লিকেশনের ক্ষেত্রে, আপনি শুধু একটি কার্সর ইন্টারফেসে টাচ ইভেন্ট ম্যাপ করবেন, তবে ডেস্কটপ টাচ ইনপুটের জন্য আমরা যে বেশিরভাগ হার্ডওয়্যার দেখেছি তা একই সাথে অন্তত ২টি ইনপুট ম্যানেজ করতে পারে এবং বেশিরভাগ নতুন হার্ডওয়্যার একই সাথে অন্তত ৫টি ইনপুট ম্যানেজ করতে পারে বলে মনে হয়। অনস্ক্রিন পিয়ানো কীবোর্ড ডেভেলপ করার জন্য, অবশ্যই, আপনি একসাথে একাধিক টাচ ইনপুট সাপোর্ট করতে চাইবেন।

বর্তমানে প্রয়োগ করা W3C টাচ API-তে এমন কোনও API নেই যা হার্ডওয়্যার কতগুলি টাচ পয়েন্ট সাপোর্ট করে তা নির্ধারণ করতে পারে, তাই আপনার ব্যবহারকারীরা কতগুলি টাচ পয়েন্ট চাইবেন তা আপনাকে অনুমান করতে হবে - অথবা, অবশ্যই, আপনি বাস্তবে কতগুলি টাচ পয়েন্ট দেখছেন এবং মানিয়ে নিচ্ছেন সেদিকে মনোযোগ দিন। যেমন, কোনও পিয়ানো অ্যাপ্লিকেশনে, আপনি যদি কখনও দুটির বেশি টাচ পয়েন্ট না দেখেন, তাহলে আপনি কিছু "কর্ড" UI যোগ করতে চাইতে পারেন। PointerEvents API-এর কাছে ডিভাইসের ক্ষমতা নির্ধারণ করার জন্য API আছে।

টাচ-আপ করা হচ্ছে

আশা করি, এই নিবন্ধ থেকে আপনি মাউস ইন্টার‍্যাকশনের পাশাপাশি টাচ ইন্টার‍্যাকশন প্রয়োগ করার সময় সাধারণ চ্যালেঞ্জগুলি সম্পর্কে কিছু নির্দেশিকা পেয়েছেন। অন্যান্য পরামর্শের চেয়েও বেশি গুরুত্বপূর্ণ হল, আপনাকে মোবাইল, ট্যাবলেট এবং মাউস ও টাচ ডেস্কটপ এনভায়রনমেন্টে আপনার অ্যাপ পরীক্ষা করতে হবে। আপনার কাছে টাচ+মাউস হার্ডওয়্যার না থাকলে, বিভিন্ন পরিস্থিতি পরীক্ষা করার জন্য Chrome-এর "টাচ ইভেন্ট এমুলেট করুন" বিকল্প ব্যবহার করুন।

এইসব নির্দেশিকা অনুসরণ করে টাচ ইনপুট, মাউস ইনপুট এবং এমনকি একই সাথে দুই ধরনের ইন্টার‍্যাকশন স্টাইলের সাথে ভালভাবে কাজ করে এমন আকর্ষক ইন্টার‍্যাক্টিভ অভিজ্ঞতা তৈরি করা শুধু সম্ভবই নয়, তুলনামূলকভাবে সহজও।