মিথস্ক্রিয়া

মোবাইল ফোনের মতো ছোট পর্দার ডিভাইসগুলোতে প্রায়শই টাচস্ক্রিন থাকে। ল্যাপটপ এবং ডেস্কটপ কম্পিউটারের মতো বড় পর্দার ডিভাইসগুলোতে প্রায়শই মাউস বা ট্র্যাকপ্যাডের মতো হার্ডওয়্যার থাকে। ছোট পর্দাকে টাচের সাথে এবং বড় পর্দাকে পয়েন্টারের সাথে এক করে দেখার প্রবণতা রয়েছে।

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

স্ক্রিনের আকার থেকে ইনপুট পদ্ধতি অনুমান করার চেষ্টা না করে, CSS-এ মিডিয়া ফিচার ব্যবহার করুন।

পয়েন্টার

pointer মিডিয়া ফিচারের মাধ্যমে আপনি তিনটি সম্ভাব্য মান পরীক্ষা করতে পারেন: none , coarse , এবং fine ।

যদি কোনো ব্রাউজার pointer মান ' none দেখায়, তাহলে ব্যবহারকারী আপনার ওয়েবসাইটের সাথে ইন্টারঅ্যাক্ট করার জন্য কিবোর্ড ব্যবহার করছেন।

যদি কোনো ব্রাউজার ' coarse pointer ভ্যালু রিপোর্ট করে, তার মানে হলো প্রাথমিক ইনপুট ব্যবস্থাটি খুব একটা নির্ভুল নয়। টাচস্ক্রিনের উপর একটি আঙুল হলো একটি 'coarse pointer'।

যদি কোনো ব্রাউজার 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 তখনই true হবে যখন উপলব্ধ ইনপুট মেকানিজমগুলোর মধ্যে যেকোনো একটি এলিমেন্টের উপর হোভার করতে সক্ষম হবে।

আপনি যদি আগের উদাহরণের যুক্তিটি উল্টে দেওয়ার সিদ্ধান্ত নেন, তাহলে আপনি হোভার স্টাইলগুলোকে ডিফল্ট করতে পারেন এবং তারপরে যদি 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 অ্যাট্রিবিউটটি আপনাকে ভার্চুয়াল কিবোর্ডের উপর সূক্ষ্ম নিয়ন্ত্রণ দেয়। উদাহরণস্বরূপ, যেখানে number ভ্যালু সহ একটি input type আছে, সেখানে আপনি 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">

এই HTML অ্যাট্রিবিউটগুলো— type , inputmode , এবং autocomplete —আপনার ফর্ম ফিল্ডে ছোট ছোট সংযোজন হলেও, এগুলো ব্যবহারকারীর অভিজ্ঞতায় বড় পরিবর্তন আনতে পারে। আপনার ব্যবহারকারীর ডিভাইসের সক্ষমতা আগে থেকে অনুমান করে এবং সেই অনুযায়ী ব্যবস্থা নেওয়ার মাধ্যমে, আপনি আপনার ব্যবহারকারীদের ক্ষমতায়ন করছেন। আরও বিস্তারিত তথ্যের জন্য, ফর্ম সম্পর্কে শেখার জন্য একটি বিশেষ কোর্স রয়েছে।

এই কোর্সের পরবর্তী পর্বে, আমরা কিছু সাধারণ ইন্টারফেস প্যাটার্ন পর্যালোচনা করব।

আপনার বোধগম্যতা যাচাই করুন

পারস্পরিক ক্রিয়া সম্পর্কে আপনার জ্ঞান পরীক্ষা করুন