ডিজাইন বেসিক

প্রথম বিভাগে, আপনি শিখেছেন কিভাবে একটি মৌলিক ফর্ম তৈরি করতে হয়। এই বিভাগটি সর্বোত্তম অনুশীলন সম্পর্কে। এই মডিউলে, ব্যবহারকারীর অভিজ্ঞতা (UX) সম্পর্কে জানুন, এবং কেন একটি ভালভাবে প্রয়োগ করা ইউজার ইন্টারফেস (UI) একটি বড় পার্থক্য করতে পারে।

ব্যবহারকারী-বান্ধব ইন্টারফেস তৈরি করা

ফর্ম পূরণ করা সময়সাপেক্ষ এবং হতাশাজনক হতে পারে। এটা হতে হবে না. একটি দুর্দান্ত UX গ্যারান্টি দিতে, নিশ্চিত করুন যে UI স্বজ্ঞাত। নিশ্চিত করুন যে আপনি সর্বোত্তম ফর্ম কাঠামো এবং গ্রাফিক ডিজাইন (লেআউট, ব্যবধান, ফন্টের আকার এবং রঙ), এবং যৌক্তিক UI (যেমন লেবেল শব্দ এবং উপযুক্ত ইনপুট প্রকার) প্রদান করেছেন। আপনি কিভাবে আপনার ফর্ম উন্নত করতে পারেন এবং এটি ব্যবহার করা সহজ করতে পারেন তা দেখুন।

লেবেল

আপনি কি মনে রাখবেন <label> উপাদান কি জন্য? একটি লেবেল একটি ফর্ম নিয়ন্ত্রণ বর্ণনা করে। একটি দৃশ্যমান এবং ভাল-লিখিত লেবেল ব্যবহারকারীকে ফর্ম নিয়ন্ত্রণের উদ্দেশ্য বুঝতে সাহায্য করে৷

প্রতিটি ফর্ম নিয়ন্ত্রণের জন্য একটি লেবেল ব্যবহার করুন

আপনি কি আপনার ফর্মে একটি নতুন ফর্ম নিয়ন্ত্রণ যোগ করতে চান? নতুন ক্ষেত্রের জন্য লেবেল যোগ করে শুরু করুন। এই ভাবে, আপনি এটি যোগ করতে ভুলবেন না.

প্রথমে লেবেল যোগ করা আপনাকে ফর্মের লক্ষ্যগুলিতে ফোকাস করতে সাহায্য করে- এখানে আমার কোন ডেটা দরকার? একবার এটি পরিষ্কার হয়ে গেলে, আপনি ব্যবহারকারীকে ডেটা প্রবেশ করতে এবং ফর্মটি পূরণ করতে সহায়তা করার দিকে মনোনিবেশ করতে পারেন।

লেবেল শব্দ

বলুন যে আপনি একটি ইমেল ক্ষেত্র বর্ণনা করতে চান। আপনি নিম্নলিখিত হিসাবে এটি করতে পারেন:

<label for="email">Enter your email address</label>

অথবা আপনি এই মত এটি বর্ণনা করতে পারেন:

<label for="email">Email address</label>

আপনি কোন বর্ণনা চয়ন করবেন?

আমাদের উদাহরণের জন্য, 'ইমেল ঠিকানা' শব্দটি পছন্দ করা হয়, যেহেতু সংক্ষিপ্ত লেবেলগুলি স্ক্যান করা সহজ, ভিজ্যুয়াল বিশৃঙ্খলতা কমাতে এবং ব্যবহারকারীদের দ্রুত কোন ডেটার প্রয়োজন তা বুঝতে সাহায্য করে৷

লেবেল অবস্থান

CSS এর মাধ্যমে, আপনি ফর্ম কন্ট্রোলের উপরে, নীচে, বাম এবং ডানদিকে একটি লেবেল স্থাপন করতে পারেন। আপনি এটা কোথায় রাখবেন?

গবেষণা দেখায় যে সর্বোত্তম অনুশীলন হল ফর্ম নিয়ন্ত্রণের উপরে লেবেলটি স্থাপন করা , যাতে ব্যবহারকারী দ্রুত একটি ফর্ম স্ক্যান করতে পারে এবং দেখতে পারে কোন লেবেলটি কোন ফর্ম নিয়ন্ত্রণের অন্তর্গত৷

ডিজাইনিং ফর্ম

ভাল ফর্ম নকশা উল্লেখযোগ্যভাবে ফর্ম পরিত্যাগ হার কমাতে পারে. উপযুক্ত উপাদান এবং ইনপুট টাইপ ব্যবহার করে ব্যবহারকারীদের ডেটা প্রবেশ করতে সহায়তা করুন বিভিন্ন ফর্ম উপাদান এবং ইনপুট প্রকার রয়েছে যা থেকে আপনি চয়ন করতে পারেন৷ সেরা UX অফার করতে, আপনার ব্যবহারের ক্ষেত্রে সবচেয়ে উপযুক্ত উপাদান এবং ইনপুট প্রকার ব্যবহার করুন। ব্যবহারকারীর যদি একাধিক লাইনের পাঠ্য পূরণ করা উচিত, তাহলে <textarea> উপাদানটি ব্যবহার করুন। যেখানে তাদের আপনার সাইটের শর্তাবলী মেনে নিতে হবে, <input type="checkbox"> ব্যবহার করুন।

আপনাকে বিভিন্ন ধরণের ফর্ম নিয়ন্ত্রণগুলির মধ্যে দৃশ্যত পার্থক্য করা উচিত। একটি বোতাম একটি বোতাম মত দেখতে হবে. একটি ইনপুট মত একটি ইনপুট. একটি ফর্ম নিয়ন্ত্রণের উদ্দেশ্য চিনতে ব্যবহারকারীদের জন্য এটি সহজ করুন। উদাহরণস্বরূপ, যদি কিছু একটি লিঙ্কের মত দেখায়, এটিতে ক্লিক করলে একটি নতুন পৃষ্ঠা খুলতে হবে, এবং একটি ফর্ম জমা দিতে হবে না।

ব্যবহারকারীদের ফর্ম নেভিগেট করতে সাহায্য করুন

একটি অসামান্য বিন্যাস মজাদার হতে পারে, কিন্তু একটি ফর্ম পূরণের পথে যেতে পারে।

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

ব্যবহারকারীদের ফর্মের সাথে ইন্টারঅ্যাক্ট করতে সাহায্য করুন

দুর্ঘটনাজনিত ট্যাপ এবং ক্লিকগুলি এড়াতে এবং ব্যবহারকারীদের আপনার ফর্মের সাথে ইন্টারঅ্যাক্ট করতে সাহায্য করতে, আপনার বোতামগুলি যথেষ্ট বড় করুন৷ একটি বোতামের প্রস্তাবিত ট্যাপ টার্গেট সাইজ কমপক্ষে 48px। দুর্ঘটনাজনিত মিথস্ক্রিয়া এড়াতে সাহায্য করার জন্য margin CSS প্রপার্টি ব্যবহার করে ফর্ম কন্ট্রোলের মধ্যে যথেষ্ট ব্যবধান যোগ করা উচিত।

ফর্ম নিয়ন্ত্রণের ডিফল্ট আকার সত্যিই ব্যবহারযোগ্য হতে খুব ছোট। আপনার padding ব্যবহার করে এবং ডিফল্ট font-size পরিবর্তন করে আকার বৃদ্ধি করা উচিত।

pointer CSS মিডিয়া বৈশিষ্ট্য ব্যবহার করে আপনি বিভিন্ন পয়েন্টিং ডিভাইসের জন্য বিভিন্ন আকার নির্ধারণ করতে পারেন, উদাহরণস্বরূপ, একটি মাউস।

// pointer device, for example, a mouse
@media (pointer: fine) {
  input[type="checkbox"] {
    width: 15px;
    height: 15px;
  }
}

// pointer device of limited accuracy, for example, a touch-based device
@media (pointer: coarse) {
  input[type="checkbox"] {
    width: 30px;
    height: 30px;
  }
}

pointer CSS মিডিয়া বৈশিষ্ট্য সম্পর্কে আরও জানুন।

ত্রুটি দেখান যেখানে তারা ঘটবে

কোন ফর্ম কন্ট্রোল তাদের মনোযোগের প্রয়োজন তা ব্যবহারকারীদের জন্য সহজবোধ্য করার জন্য, তারা যে ফর্ম কন্ট্রোল উল্লেখ করে তার পাশে ত্রুটি বার্তাগুলি প্রদর্শন করুন৷ ফর্ম জমা দেওয়ার সময় ত্রুটিগুলি প্রদর্শন করার সময়, প্রথম অবৈধ ফর্ম নিয়ন্ত্রণে নেভিগেট করতে ভুলবেন না৷

ব্যবহারকারীদের কাছে কী ডেটা প্রবেশ করতে হবে তা পরিষ্কার করে দিন

নিশ্চিত করুন যে ব্যবহারকারীরা কীভাবে বৈধ ডেটা প্রবেশ করতে হয় তা বোঝেন। তাদের কি পাসওয়ার্ডের জন্য অন্তত আটটি অক্ষর লিখতে হবে? তাদের বলুন।

<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password" name="password" aria-describedby="password-minlength">
<span id="password-minlength">Enter at least eight characters</span>

কোন ক্ষেত্রগুলি প্রয়োজন তা ব্যবহারকারীদের কাছে পরিষ্কার করুন৷

<label for="name">Name (required)</label>
<input name="name" id="name" required>

যদি একটি ক্ষেত্র বাধ্যতামূলক হয়, এটি সুস্পষ্ট করুন! অ্যাক্সেসযোগ্য ফর্মগুলির অ্যানাটমি প্রয়োজনীয় ক্ষেত্রগুলি নির্দেশ করার বিকল্পগুলি ব্যাখ্যা করে। যদি একটি ফর্মের বেশিরভাগ ক্ষেত্রের প্রয়োজন হয়, তাহলে ঐচ্ছিক ক্ষেত্রগুলি নির্দেশ করা ভাল হতে পারে।

আপনি কীভাবে ত্রুটি বার্তাগুলিকে স্ক্রিন পাঠকদের জন্য অ্যাক্সেসযোগ্য করার জন্য নিয়ন্ত্রণগুলি তৈরি করতে সংযুক্ত করতে পারেন? আপনি পরবর্তী মডিউলে এটি সম্পর্কে জানতে পারবেন।

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

ডিজাইনিং ফর্ম সম্পর্কে আপনার জ্ঞান পরীক্ষা করুন

সম্পদ

• আশ্চর্যজনক ফর্ম তৈরি করুন
• মোবাইল ফর্ম ডিজাইনের জন্য সেরা অনুশীলন
• বেমার্ড ইনস্টিটিউট: ই-কমার্স ইউএক্স রিসার্চ
• ডোন্ট মেক মি থিঙ্ক