সাইন-ইন ফর্ম সংক্রান্ত পেশাদার পদ্ধতি

ক্রস-প্ল্যাটফর্ম ব্রাউজার ফিচার ব্যবহার করে সাইন-ইন ফর্ম তৈরি করুন যা সুরক্ষিত, অ্যাক্সেসযোগ্য এবং ব্যবহার করা সহজ।

Sam Dutton

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

এখানে একটি সাধারণ সাইন-ইন ফর্মের উদাহরণ দেওয়া হল যা সব পেশাদার পদ্ধতি প্রদর্শন করে:

চেকলিস্ট

• অর্থপূর্ণ HTML এলিমেন্ট ব্যবহার করুন: <form>, <input>, <label> এবং <button>।
• প্রতিটি ইনপুটকে <label> দিয়ে লেবেল করুন।
• বিল্ট-ইন ব্রাউজার ফিচার অ্যাক্সেস করতে এলিমেন্ট অ্যাট্রিবিউট ব্যবহার করুন: type, name, autocomplete, required.
• ইনপুট name এবং id অ্যাট্রিবিউটকে এমন স্থিতিশীল মান দিন যা পৃষ্ঠা লোড বা ওয়েবসাইট ডিপ্লয়মেন্টের মধ্যে পরিবর্তন হয় না।
• সাইন-ইন নিজস্ব <form> এলিমেন্টে রাখুন।
• ফর্ম জমা দেওয়া হয়েছে কিনা তা নিশ্চিত করুন।
• সাইন-আপ ফর্মে পাসওয়ার্ড ইনপুট করার জন্য এবং পাসওয়ার্ড রিসেট করার ফর্মে নতুন পাসওয়ার্ডের জন্য autocomplete="new-password" এবং id="new-password" ব্যবহার করুন।
• সাইন-ইন পাসওয়ার্ড ইনপুট করার জন্য autocomplete="current-password" এবং id="current-password" ব্যবহার করুন।
• পাসওয়ার্ড দেখুন কার্যকারিতা প্রদান করুন।
• পাসওয়ার্ড ইনপুটের জন্য aria-label ও aria-describedby ব্যবহার করুন।
• ইনপুট ডবল করবেন না।
• ফর্ম এমনভাবে ডিজাইন করুন যাতে মোবাইল কীবোর্ড ইনপুট বা বোতামকে আড়াল না করে।
• মোবাইলে ফর্ম ব্যবহার করা যায় কিনা তা নিশ্চিত করুন: সহজে পড়া যায় এমন টেক্সট ব্যবহার করুন, এবং ইনপুট ও বোতামগুলি টাচ টার্গেট হিসেবে কাজ করার জন্য যথেষ্ট বড় কিনা তা নিশ্চিত করুন।
• আপনার সাইন-আপ ও সাইন-ইন পৃষ্ঠায় ব্র্যান্ডিং ও স্টাইল বজায় রাখুন।
• ফিল্ডের পাশাপাশি ল্যাবেও পরীক্ষা করুন: আপনার সাইন-আপ ও সাইন-ইন ফ্লোতে পৃষ্ঠা অ্যানালিটিক্স, ইন্টার‍্যাকশন অ্যানালিটিক্স এবং ব্যবহারকারী-কেন্দ্রিক পারফর্ম্যান্স পরিমাপ তৈরি করুন।
• বিভিন্ন ব্রাউজার ও ডিভাইসে পরীক্ষা করা: বিভিন্ন প্ল্যাটফর্মে ফর্মের আচরণ উল্লেখযোগ্যভাবে পরিবর্তিত হয়।

অর্থপূর্ণ HTML ব্যবহার করুন

কাজের জন্য তৈরি করা এলিমেন্ট ব্যবহার করুন: <form>, <label> এবং <button>। এগুলি বিল্ট-ইন ব্রাউজার কার্যকারিতা চালু করে, অ্যাক্সেসিবিলিটি উন্নত করে এবং আপনার মার্কআপে অর্থ যোগ করে।

<form> ব্যবহার করুন

আপনি হয়ত <div>-এ ইনপুট র‍্যাপ করতে এবং ইনপুট ডেটা জমা দেওয়ার বিষয়টি সম্পূর্ণরূপে জাভাস্ক্রিপ্টের মাধ্যমে ম্যানেজ করতে চাইবেন। সাধারণত, একটি সাধারণ পুরনো <form> এলিমেন্ট ব্যবহার করা ভালো। এটি আপনার সাইটকে স্ক্রিনরিডার এবং অন্যান্য সহায়ক ডিভাইসের জন্য অ্যাক্সেসযোগ্য করে তোলে, বিল্ট-ইন ব্রাউজার ফিচারের একটি রেঞ্জ চালু করে, পুরনো ব্রাউজারের জন্য মৌলিক কার্যকরী সাইন-ইন তৈরি করা সহজ করে তোলে এবং জাভাস্ক্রিপ্ট কাজ না করলেও কাজ করতে পারে।

<label> ব্যবহার করুন

ইনপুট লেবেল করতে, <label> ব্যবহার করুন!

<label for="email">Email</label>
<input id="email" …>

দুটি কারণ:

• কোনও লেবেলে ট্যাপ বা ক্লিক করলে, ফোকাস তার ইনপুটে চলে যায়। ইনপুটের name বা id-এর সাথে লেবেলের for অ্যাট্রিবিউট ব্যবহার করে ইনপুটের সাথে লেবেল যুক্ত করুন।
• লেবেল বা লেবেলের ইনপুট ফোকাস পেলে স্ক্রিনরিডার লেবেল টেক্সট ঘোষণা করে।

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

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

মোবাইল ডিভাইসে label-position ডেমো খুলে নিজেই দেখে নিন।

<button> ব্যবহার করুন

বোতামের জন্য <button> ব্যবহার করুন! বোতাম এলিমেন্ট অ্যাক্সেসযোগ্য আচরণ এবং বিল্ট-ইন ফর্ম জমা দেওয়ার কার্যকারিতা প্রদান করে এবং সেগুলি সহজেই স্টাইল করা যায়। <div> বা অন্য কোনও এলিমেন্টকে বোতাম হিসেবে ব্যবহার করার কোনও মানে হয় না।

নিশ্চিত করুন যে জমা দেওয়ার বোতামটি যা করে তা বলে। উদাহরণ হিসেবে অ্যাকাউন্ট তৈরি করুন বা সাইন-ইন করুন, জমা দিন বা শুরু করুন নয়।

ফর্ম জমা দেওয়া নিশ্চিত করুন

কোনও ফর্ম জমা দেওয়া হয়েছে কিনা তা বুঝতে পাসওয়ার্ড ম্যানেজারকে সাহায্য করুন। এটি করার দুটি উপায় আছে:

• নেভিগেট করে আলাদা পৃষ্ঠায় যান।
• History.pushState() বা History.replaceState()-এর মাধ্যমে নেভিগেশন এমুলেট করুন, এবং পাসওয়ার্ড ফর্ম সরিয়ে দিন।

XMLHttpRequest বা fetch অনুরোধের মাধ্যমে, সাইন-ইন সফল হওয়ার বিষয়টি প্রতিক্রিয়ায় জানানো হয়েছে কিনা এবং DOM থেকে ফর্মটি সরিয়ে নেওয়ার পাশাপাশি ব্যবহারকারীকে সফল হওয়ার বিষয়টি জানানোর মাধ্যমে তা ম্যানেজ করা হয়েছে কিনা তা নিশ্চিত করুন।

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

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

ইনপুট ডবল করবেন না

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

এলিমেন্ট অ্যাট্রিবিউটের সর্বাধিক সুবিধা নিন

এখানেই আসল ম্যাজিক হয়! ব্রাউজারে একাধিক সহায়ক বিল্ট-ইন ফিচার আছে যা ইনপুট এলিমেন্ট অ্যাট্রিবিউট ব্যবহার করে।

পাসওয়ার্ড ব্যক্তিগত রাখুন—তবে ব্যবহারকারীরা চাইলে তাদের দেখতে দিন

পাসওয়ার্ড ইনপুটে type="password" থাকতে হবে যাতে পাসওয়ার্ড টেক্সট লুকানো যায় এবং ব্রাউজার বুঝতে পারে যে ইনপুটটি পাসওয়ার্ডের জন্য। (মনে রাখবেন যে ইনপুট রোল বুঝতে এবং পাসওয়ার্ড সেভ করার অফার দেওয়া হবে কিনা তা সিদ্ধান্ত নিতে ব্রাউজার বিভিন্ন ধরনের টেকনিক ব্যবহার করে।)

ব্যবহারকারীরা যাতে তাদের লেখা টেক্সট চেক করতে পারেন, তার জন্য আপনাকে পাসওয়ার্ড দেখুন টগল যোগ করতে হবে—এবং পাসওয়ার্ড ভুলে গেছেন লিঙ্ক যোগ করতে ভুলবেন না। পাসওয়ার্ড ডিসপ্লে চালু করুন বিকল্পটি দেখুন।

মোবাইল ব্যবহারকারীদের সঠিক কীবোর্ড দিন

মোবাইল ব্যবহারকারীদের উপযুক্ত কীবোর্ড দিতে <input type="email"> ব্যবহার করুন এবং ব্রাউজারের মাধ্যমে প্রাথমিক বিল্ট-ইন ইমেল আইডি যাচাইকরণ চালু করুন… কোনও জাভাস্ক্রিপ্ট প্রয়োজন নেই!

ইমেল আইডির পরিবর্তে টেলিফোন নম্বর ব্যবহার করতে হলে, <input type="tel"> মোবাইলে টেলিফোন কীপ্যাড চালু করে। প্রয়োজন হলে আপনি inputmode অ্যাট্রিবিউটও ব্যবহার করতে পারেন: পিন নম্বরের জন্য inputmode="numeric" আদর্শ। Everything You Ever Wanted to Know About inputmode লিঙ্কে আরও তথ্য আছে।

মোবাইল কীবোর্ড যাতে সাইন-ইন করুন বোতামকে আড়াল না করে তা আটকান

আপনি সতর্ক না থাকলে, মোবাইল কীবোর্ড আপনার ফর্ম ঢেকে দিতে পারে অথবা আরও খারাপভাবে, সাইন-ইন করুন বোতামটি আংশিকভাবে আড়াল করতে পারে। কী ঘটেছে তা বোঝার আগেই ব্যবহারকারীরা হাল ছেড়ে দিতে পারেন।

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

বিভিন্ন ডিভাইসে পরীক্ষা করুন

আপনার টার্গেট অডিয়েন্সের জন্য বিভিন্ন ডিভাইসে পরীক্ষা করতে হবে এবং সেই অনুযায়ী অ্যাডজাস্ট করতে হবে। BrowserStack বিভিন্ন ধরনের আসল ডিভাইস ও ব্রাউজারে ওপেন সোর্স প্রোজেক্টের জন্য ফ্রি টেস্টিং-এর সুবিধা দেয়।

দুটি পৃষ্ঠা ব্যবহার করার কথা বিবেচনা করুন

কিছু সাইট (Amazon এবং eBay সহ) দুটি পৃষ্ঠায় ইমেল (বা ফোন) এবং পাসওয়ার্ড জিজ্ঞাসা করে সমস্যা এড়ায়। এই পদ্ধতি অভিজ্ঞতাকেও সহজ করে তোলে: ব্যবহারকারীকে একবারে একটিই কাজ করতে হয়।

সাধারণত, এটি একটি <form> ব্যবহার করে করা উচিত। প্রথমে শুধু ইমেল ইনপুট দেখানোর জন্য জাভাস্ক্রিপ্ট ব্যবহার করুন, তারপর এটি লুকান এবং পাসওয়ার্ড ইনপুট দেখান। ব্যবহারকারীকে ইমেল ও পাসওয়ার্ড লেখার মাঝে নতুন পৃষ্ঠায় নেভিগেট করতে বাধ্য করলে, দ্বিতীয় পৃষ্ঠার ফর্মে ইমেল ভ্যালু সহ একটি লুকানো ইনপুট এলিমেন্ট থাকতে হবে, যাতে পাসওয়ার্ড ম্যানেজার সঠিক ভ্যালু স্টোর করতে পারে। পাসওয়ার্ড ফর্ম স্টাইল যা Chromium বুঝতে পারে একটি কোডের উদাহরণ প্রদান করে।

ব্যবহারকারীদের ডেটা আবার লেখার হাত থেকে বাঁচান

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

এর দুটি অংশ আছে:

1. autocomplete, name, id ও type অ্যাট্রিবিউট ব্রাউজারকে ইনপুটের ভূমিকা বুঝতে সাহায্য করে, যাতে ডেটা স্টোর করা যায় এবং পরে অটোফিলের জন্য ব্যবহার করা যায়। অটোফিলের জন্য ডেটা স্টোর করার অনুমতি দিতে, আধুনিক ব্রাউজারে ইনপুটের জন্য একটি স্থির name বা id ভ্যালু থাকতে হবে (প্রতিটি পৃষ্ঠা লোড বা সাইট ডিপ্লয়মেন্টে র‍্যান্ডমভাবে জেনারেট করা নয়) এবং submit বোতাম সহ <form>-এ থাকতে হবে।

2. autocomplete অ্যাট্রিবিউট, সেভ করা ডেটা ব্যবহার করে ইনপুট অটোফিল করতে ব্রাউজারকে সাহায্য করে।

ইমেল ইনপুটের জন্য autocomplete="username" ব্যবহার করুন, কারণ আধুনিক ব্রাউজারে পাসওয়ার্ড ম্যানেজার username শনাক্ত করে—যদিও আপনার type="email" ব্যবহার করা উচিত এবং আপনি হয়ত id="email" ও name="email" ব্যবহার করতে চাইবেন।

পাসওয়ার্ড ইনপুটের জন্য, উপযুক্ত autocomplete এবং id ভ্যালু ব্যবহার করুন যাতে ব্রাউজার নতুন ও বর্তমান পাসওয়ার্ডের মধ্যে পার্থক্য করতে পারে।

নতুন পাসওয়ার্ডের জন্য autocomplete="new-password" ও id="new-password" ব্যবহার করুন

• সাইন-আপ ফর্মে পাসওয়ার্ড ইনপুট করার জন্য অথবা পাসওয়ার্ড পরিবর্তন করার ফর্মে নতুন পাসওয়ার্ডের জন্য autocomplete="new-password" এবং id="new-password" ব্যবহার করুন।

আগে থেকে থাকা পাসওয়ার্ডের জন্য autocomplete="current-password" ও id="current-password" ব্যবহার করুন

• সাইন-ইন ফর্মে পাসওয়ার্ড ইনপুট করার জন্য অথবা পাসওয়ার্ড পরিবর্তন করার ফর্মে ব্যবহারকারীর পুরনো পাসওয়ার্ড ইনপুট করার জন্য autocomplete="current-password" এবং id="current-password" ব্যবহার করুন। এটি ব্রাউজারকে জানায় যে আপনি সাইটের জন্য স্টোর করা বর্তমান পাসওয়ার্ড ব্যবহার করতে চান।

সাইন-আপ ফর্মের জন্য:

<input type="password" autocomplete="new-password" id="new-password" …>

সাইন-ইন করার জন্য:

<input type="password" autocomplete="current-password" id="current-password" …>

পাসওয়ার্ড ম্যানেজারকে সাহায্য করা

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

ডেস্কটপে Chrome ইমেল সাজেশন দেখায়, পাসওয়ার্ড ম্যানেজার দেখায় এবং পাসওয়ার্ড অটোফিল করে।

ব্রাউজার পাসওয়ার্ড ও অটোফিল সিস্টেম সহজ নয়। মান অনুমান, স্টোর ও দেখানোর অ্যালগরিদম স্ট্যান্ডার্ড নয় এবং প্ল্যাটফর্ম অনুযায়ী আলাদা হয়। যেমন, Hidde de Vries-এর উল্লেখ করা: "Firefox-এর পাসওয়ার্ড ম্যানেজার রেসিপি সিস্টেম-এর মাধ্যমে হিউরিস্টিকসকে পরিপূরণ করে।"

অটোফিল: ওয়েব ডেভেলপারদের যা জানা উচিত, কিন্তু তারা জানে না এতে name ও autocomplete ব্যবহার করার ব্যাপারে আরও অনেক তথ্য আছে। HTML spec-এ সব ৫৯টি সম্ভাব্য মানের তালিকা দেওয়া আছে।

ব্রাউজারকে শক্তিশালী পাসওয়ার্ড সাজেস্ট করার অনুমতি দিন

আধুনিক ব্রাউজার হিউরিস্টিক ব্যবহার করে সিদ্ধান্ত নেয় যে কখন পাসওয়ার্ড ম্যানেজার UI দেখাতে হবে এবং শক্তিশালী পাসওয়ার্ড সাজেস্ট করতে হবে।

ডেস্কটপে Safari কীভাবে এটি করে তা এখানে দেওয়া হল।

(Safari-তে 12.0 ভার্সন থেকে শক্তিশালী অনন্য পাসওয়ার্ডের সাজেশন উপলভ্য আছে।)

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

ব্যবহারকারীদের ভুলবশত ইনপুট মিস করা থেকে বাঁচাতে সাহায্য করুন

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

আঙুল ও বুড়ো আঙুলের জন্য ডিজাইন

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

ইনপুট ও বোতাম যথেষ্ট বড় কিনা তা দেখে নিন

ইনপুট এবং বোতামের জন্য ডিফল্ট আকার এবং প্যাডিং ডেস্কটপে খুব ছোট এবং মোবাইলে আরও খারাপ।

Android অ্যাক্সেসিবিলিটি নির্দেশিকা অনুযায়ী টাচস্ক্রিন অবজেক্টের সাজেস্ট করা টার্গেট সাইজ হল ৭–১০ মিমি। Apple ইন্টারফেস নির্দেশিকা ৪৮x৪৮ পিক্সেল এবং W3C কমপক্ষে ৪৪x৪৪ CSS পিক্সেল সাজেস্ট করে। সেই ভিত্তিতে, মোবাইলের জন্য ইনপুট এলিমেন্ট ও বোতামে (কমপক্ষে) প্রায় ১৫ পিক্সেল এবং ডেস্কটপে প্রায় ১০ পিক্সেল প্যাডিং যোগ করুন। আসল মোবাইল ডিভাইস এবং আসল আঙুল বা বুড়ো আঙুল দিয়ে এটি করে দেখুন। আপনি যাতে প্রতিটি ইনপুট ও বোতামে সহজেই ট্যাপ করতে পারেন, তা নিশ্চিত করুন।

ট্যাপ টার্গেটের সাইজ যথাযথ নয় Lighthouse অডিট আপনাকে খুব ছোট ইনপুট এলিমেন্ট শনাক্ত করার প্রসেস অটোমেট করতে সাহায্য করতে পারে।

থাম্বস-আপের জন্য ডিজাইন

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

টেক্সট যথেষ্ট বড় করুন

সাইজ এবং প্যাডিংয়ের মতো, ইনপুট এলিমেন্ট এবং বোতামের জন্য ডিফল্ট ব্রাউজার ফন্ট সাইজ খুব ছোট, বিশেষ করে মোবাইলে।

বিভিন্ন প্ল্যাটফর্মের ব্রাউজার ফন্টের সাইজ আলাদাভাবে দেখায়, তাই এমন কোনও নির্দিষ্ট ফন্ট সাইজ উল্লেখ করা কঠিন যা সব জায়গায় ভালভাবে কাজ করে। জনপ্রিয় ওয়েবসাইটগুলির একটি দ্রুত সমীক্ষা থেকে দেখা যায় যে ডেস্কটপে ১৩–১৬ পিক্সেল সাইজ: সেই ফিজিক্যাল সাইজের সাথে ম্যাচ করা মোবাইলে টেক্সটের জন্য একটি ভাল ন্যূনতম সাইজ।

এর অর্থ হল, আপনাকে মোবাইলে আরও বড় পিক্সেল সাইজ ব্যবহার করতে হবে: ডেস্কটপের জন্য Chrome-এ 16px বেশ ভালভাবেই পড়া যায়, কিন্তু দৃষ্টিশক্তি ভাল হলেও Android-এর জন্য Chrome-এ 16px টেক্সট পড়া কঠিন। আপনি মিডিয়া কোয়েরি ব্যবহার করে বিভিন্ন ভিউপোর্ট সাইজের জন্য বিভিন্ন ফন্ট পিক্সেল সাইজ সেট করতে পারেন। 20px মোবাইলের জন্য ঠিক আছে—তবে স্বল্প দৃষ্টিশক্তি সম্পন্ন বন্ধু বা সহকর্মীদের সাথে এটি পরীক্ষা করে দেখুন।

ডকুমেন্টে সহজে পড়া যায় এমন ফন্ট সাইজ ব্যবহার করা হয়নি খুব ছোট টেক্সট শনাক্ত করার প্রসেস অটোমেট করতে Lighthouse অডিট আপনাকে সাহায্য করতে পারে।

ইনপুটের মধ্যে পর্যাপ্ত জায়গা দিন

ইনপুট যাতে টাচ টার্গেট হিসেবে ভালভাবে কাজ করে তার জন্য পর্যাপ্ত মার্জিন যোগ করুন। অন্যভাবে বলতে গেলে, আঙুলের প্রস্থের সমান মার্জিন রাখার চেষ্টা করুন।

আপনার ইনপুট যাতে স্পষ্টভাবে দেখা যায় তা নিশ্চিত করুন

ইনপুটের জন্য ডিফল্ট বর্ডার স্টাইলিংয়ের কারণে সেগুলি দেখতে অসুবিধা হয়। Android-এর জন্য Chrome-এর মতো কিছু প্ল্যাটফর্মে এগুলি প্রায় অদৃশ্য।

প্যাডিংয়ের পাশাপাশি বর্ডার যোগ করুন: সাদা ব্যাকগ্রাউন্ডের ক্ষেত্রে, #ccc বা তার চেয়ে গাঢ় রঙ ব্যবহার করা একটি ভালো সাধারণ নিয়ম।

ভুল ইনপুট ভ্যালু সম্পর্কে সতর্ক করতে বিল্ট-ইন ব্রাউজার ফিচার ব্যবহার করুন

type অ্যাট্রিবিউট সহ ইনপুটের জন্য প্রাথমিক ফর্ম যাচাইকরণ করতে ব্রাউজারে বিল্ট-ইন ফিচার আছে। আপনি ভুল ভ্যালু সহ ফর্ম জমা দিলে ব্রাউজার সতর্ক করে, এবং সমস্যাযুক্ত ইনপুটে ফোকাস সেট করে।

ভুল ডেটা হাইলাইট করতে আপনি :invalid CSS বাছাইকারী ব্যবহার করতে পারেন। কোনও কন্টেন্ট নেই এমন ইনপুট বেছে নেওয়া এড়াতে :not(:placeholder-shown) ব্যবহার করুন।

input[type=email]:not(:placeholder-shown):invalid {
  color: red;
  outline-color: red;
}

ভুল ভ্যালু সহ ইনপুট হাইলাইট করার বিভিন্ন উপায় ব্যবহার করে দেখুন।

প্রয়োজনীয় জায়গায় জাভাস্ক্রিপ্ট ব্যবহার করুন

পাসওয়ার্ড ডিসপ্লে টগল করুন

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

নিম্নলিখিত কোডটি পাসওয়ার্ড দেখুন কার্যকারিতা যোগ করতে একটি টেক্সট বোতাম ব্যবহার করে।

HTML:

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button" aria-label="Show password as plain text. Warning: this will display your password on the screen.">Show password</button>
  <input id="password" name="password" type="password" autocomplete="current-password" required>
</section>

বোতামটিকে প্লেন টেক্সটের মতো দেখাতে এখানে CSS দেওয়া হল:

button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  /* Media query isn't shown here. */
  font-size: var(--mobile-font-size);
  font-weight: 300;
  padding: 0;
  /* Display at the top right of the container */
  position: absolute;
  top: 0;
  right: 0;
}

এবং পাসওয়ার্ড দেখানোর জন্য জাভাস্ক্রিপ্ট:

const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');

togglePasswordButton.addEventListener('click', togglePassword);

function togglePassword() {
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    togglePasswordButton.textContent = 'Hide password';
    togglePasswordButton.setAttribute('aria-label',
      'Hide password.');
  } else {
    passwordInput.type = 'password';
    togglePasswordButton.textContent = 'Show password';
    togglePasswordButton.setAttribute('aria-label',
      'Show password as plain text. ' +
      'Warning: this will display your password on the screen.');
  }
}

এখানে চূড়ান্ত ফলাফল দেওয়া হল:

পাসওয়ার্ড ইনপুট অ্যাক্সেসযোগ্য করুন

পাসওয়ার্ডের নিয়ম আউটলাইন করতে aria-describedby ব্যবহার করুন। এর জন্য, যে এলিমেন্ট সীমাবদ্ধতা বর্ণনা করে সেটির আইডি দিন। স্ক্রিনরিডার লেবেল টেক্সট, ইনপুটের ধরন (পাসওয়ার্ড) এবং তারপর বিবরণ প্রদান করে।

<input type="password" aria-describedby="password-constraints" …>
<div id="password-constraints">Eight or more characters with a mix of letters, numbers and symbols.</div>

আপনি পাসওয়ার্ড দেখান ফাংশন যোগ করার সময়, পাসওয়ার্ড যে দেখা যাবে সেই বিষয়ে সতর্ক করতে একটি aria-label যোগ করতে ভুলবেন না। অন্যথায়, ব্যবহারকারীরা অসাবধানতাবশত পাসওয়ার্ড প্রকাশ করে ফেলতে পারেন।

<button id="toggle-password"
        aria-label="Show password as plain text.
                    Warning: this will display your password on the screen.">
  Show password
</button>

নিচে দেওয়া ডেমোতে আপনি দুটি ARIA ফিচার অ্যাকশনে দেখতে পাবেন:

ফর্ম অ্যাক্সেসযোগ্য করে তুলতে সাহায্য করার জন্য অ্যাক্সেসযোগ্য ফর্ম তৈরি করা-তে আরও পরামর্শ রয়েছে।

রিয়েল-টাইমে এবং জমা দেওয়ার আগে যাচাই করুন

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

সাইন-ইন ফর্মের ধাপ ৫ কোডল্যাব কনস্ট্রেন্ট ভ্যালিডেশন API (যা ব্যাপকভাবে সমর্থিত) ব্যবহার করে ফোকাস সেট করতে এবং প্রম্পট প্রদর্শন করতে বিল্ট-ইন ব্রাউজার UI ব্যবহার করে কাস্টম ভ্যালিডেশন যোগ করে।

আরও জানুন: আরও জটিল রিয়েল-টাইম যাচাইকরণের জন্য জাভাস্ক্রিপ্ট ব্যবহার করুন।

Analytics ও RUM

"যা পরিমাপ করা যায় না, তা উন্নত করা যায় না" কথাটি সাইন-আপ ও সাইন-ইন ফর্মের ক্ষেত্রে বিশেষভাবে প্রযোজ্য। আপনাকে লক্ষ্য সেট করতে হবে, সাফল্য পরিমাপ করতে হবে, সাইট উন্নত করতে হবে—এবং এই প্রসেসটি বারবার করতে হবে।

পরিবর্তনগুলি পরীক্ষা করার জন্য ডিসকাউন্ট ব্যবহারযোগ্যতা পরীক্ষা সহায়ক হতে পারে, তবে আপনার ব্যবহারকারীরা কীভাবে আপনার সাইন-আপ এবং সাইন-ইন ফর্মগুলি অনুভব করেন তা সত্যিই বুঝতে আপনার বাস্তব-জগতের ডেটার প্রয়োজন হবে:

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

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

সাধারণ নির্দেশিকা

UI ও UX ভালভাবে ডিজাইন করা হলে সাইন-ইন ফর্ম পূরণ না করে বেরিয়ে যাওয়ার প্রবণতা কমে:

• ব্যবহারকারীদের সাইন-ইন করার জন্য খুঁজতে দেবেন না! পৃষ্ঠার সবচেয়ে উপরে সাইন-ইন ফর্মের লিঙ্ক দিন, সাইন-ইন করুন, অ্যাকাউন্ট তৈরি করুন বা রেজিস্টার করুন-এর মতো সহজে বোঝা যায় এমন শব্দ ব্যবহার করুন।
• এতে ফোকাস রাখুন! সাইন-আপ ফর্মের উদ্দেশ্য অফার ও সাইটের অন্যান্য ফিচার দেখিয়ে লোকজনের মনোযোগ অন্যদিকে ঘুরিয়ে দেওয়া নয়।
• সাইন-আপ করার জটিলতা কমান। ব্যবহারকারী যখন সেই ডেটা প্রদান করার মাধ্যমে স্পষ্ট সুবিধা দেখতে পান, তখনই শুধুমাত্র অন্যান্য ব্যবহারকারীর ডেটা (যেমন ঠিকানা বা ক্রেডিট কার্ডের বিবরণ) সংগ্রহ করুন।
• ব্যবহারকারীরা আপনার সাইন-আপ ফর্ম পূরণ করা শুরু করার আগে, সাশ্রয়ী মূল্যে সেরা প্রস্তাবনা কী তা স্পষ্ট করুন। সাইন-ইন করলে তারা কীভাবে উপকৃত হবেন? সাইন-আপ সম্পূর্ণ করার জন্য ব্যবহারকারীদের নির্দিষ্ট ইনসেনটিভ দিন।
• সম্ভব হলে, ব্যবহারকারীদের ইমেল আইডির পরিবর্তে মোবাইল ফোন নম্বর দিয়ে নিজেদের পরিচয় যাচাই করার অনুমতি দিন, কারণ কিছু ব্যবহারকারী ইমেল ব্যবহার নাও করতে পারেন।
• ব্যবহারকারীদের জন্য তাদের পাসওয়ার্ড রিসেট করা সহজ করুন এবং আপনার পাসওয়ার্ড ভুলে গেছেন? লিঙ্কটি স্পষ্ট করুন।
• আপনার পরিষেবার শর্তাবলী এবং গোপনীয়তা নীতি সংক্রান্ত ডকুমেন্টের লিঙ্ক: আপনি কীভাবে ব্যবহারকারীর ডেটা সুরক্ষিত রাখেন তা শুরু থেকেই তাদের কাছে স্পষ্ট করে দিন।
• আপনার সাইন-আপ এবং সাইন-ইন পৃষ্ঠায় আপনার কোম্পানি বা সংস্থার লোগো এবং নাম অন্তর্ভুক্ত করুন এবং ভাষা, ফন্ট এবং স্টাইল আপনার সাইটের বাকি অংশের সাথে মিলছে কিনা তা নিশ্চিত করুন। কিছু ফর্ম দেখে মনে হয় না যে সেগুলি অন্যান্য কন্টেন্টের মতো একই সাইটের অন্তর্গত, বিশেষ করে যদি সেগুলির URL উল্লেখযোগ্যভাবে আলাদা হয়।

শিখতে থাকুন

• দুর্দান্ত ফর্ম তৈরি করুন
• মোবাইল ফর্ম ডিজাইনের জন্য পেশাদার পদ্ধতি
• আরও বেশি কার্যকর ফর্ম কন্ট্রোল
• অ্যাক্সেসিবল ফর্ম তৈরি করা
• ক্রেডেনশিয়াল ম্যানেজমেন্ট API ব্যবহার করে সাইন-ইন ফ্লো স্ট্রিমলাইন করা
• WebOTP API-এর মাধ্যমে ওয়েবে ফোন নম্বর যাচাই করা