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

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

কিন্তু বাস্তবতা আরো সূক্ষ্ম। কিছু ল্যাপটপের টাচ স্ক্রিন ক্ষমতা আছে। ব্যবহারকারীরা একটি টাচস্ক্রিন বা একটি ট্র্যাকপ্যাড বা উভয়ের সাথে যোগাযোগ করতে পারে। একইভাবে ট্যাবলেটের মতো টাচস্ক্রিন ডিভাইসের সাথে একটি বহিরাগত কীবোর্ড বা মাউস ব্যবহার করা সম্ভব।

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

পয়েন্টার

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

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

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

যদি একটি ব্রাউজার fine একটি pointer মান রিপোর্ট করে তার মানে প্রাথমিক ইনপুট প্রক্রিয়া সূক্ষ্ম নিয়ন্ত্রণ করতে সক্ষম। একটি মাউস বা লেখনী একটি সূক্ষ্ম পয়েন্টার.

আপনি 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 মিডিয়া বৈশিষ্ট্য থেকে আলাদা যে এটি রিপোর্ট করে যে কোন পয়েন্টিং ডিভাইস পরীক্ষায় উত্তীর্ণ হয়।

none এর any-pointer মান মানে কোন পয়েন্টিং ডিভাইস উপলব্ধ নেই।

coarse any-pointer মান মানে অন্তত একটি পয়েন্টার ডিভাইস খুব সঠিক নয়। কিন্তু এটি প্রাথমিক ইনপুট প্রক্রিয়া নাও হতে পারে।

fine any-pointer মান মানে অন্তত একটি পয়েন্টার ডিভাইস সূক্ষ্ম-দানা নিয়ন্ত্রণ করতে সক্ষম। কিন্তু আবার, এটি প্রাথমিক ইনপুট প্রক্রিয়া নাও হতে পারে।

যেহেতু 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 সত্য হবে যদি উপলব্ধ ইনপুট মেকানিজমের যেকোনও উপাদানের উপর ঘোরাফেরা করতে সক্ষম হয়।

আপনি যদি পূর্ববর্তী উদাহরণে যুক্তি বিপরীত করার সিদ্ধান্ত নেন, আপনি হোভার শৈলীগুলিকে ডিফল্ট করতে পারেন এবং তারপরে 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 — আপনার ফর্ম ক্ষেত্রের ছোট সংযোজন, কিন্তু তারা ব্যবহারকারীর অভিজ্ঞতায় একটি বড় পার্থক্য আনতে পারে৷ আপনার ব্যবহারকারীর ডিভাইসের ক্ষমতার প্রত্যাশা এবং প্রতিক্রিয়া দ্বারা, আপনি আপনার ব্যবহারকারীদের ক্ষমতায়ন করছেন। আরও গভীরতর তথ্যের জন্য, আপনাকে ফর্ম শিখতে সাহায্য করার জন্য নিবেদিত একটি কোর্স রয়েছে৷

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

আপনার উপলব্ধি পরীক্ষা করুন

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