ফ্লোটিং লেবেলস কী, ফর্ম ডিজাইনে সেগুলো কীভাবে ব্যবহৃত হয়, এবং কেন সেগুলো UI/UX ডিজাইনে সর্বাধিক জনপ্রিয় একটি অ্যাসেট হয়ে উঠছে তা শিখুন।
ফ্লোটিং লেবেল কী?
এটি একটি ফ্লোটিং লেবেল:
সिर्फ উপরের ইলাস্ট্রেশনটি দেখে আপনার মধ্যে কেউ কেউ অবিলম্বে বুঝতে পারেন কেন ফ্লোটিং লেবেলস একটি গৌরবশালী UI অ্যাসেট, কিন্তু যারা "ফ্লোটিং লেবেলস" কনসেপ্টে নতুন, তাদের জন্য এখানে কেন সেগুলো এতটাই পাওয়ারফুল:
- সেগুলো কম স্পেস নেয়ে প্রচুর প্র্যাকটিক্যাল ইনফরমেশন কনভে করে।
- স্লিক ট্রানজিশন ("অ্যানিমেশন") ইফেক্ট ফর্মকে আরও এনগেজিং করে।
- সেগুলো আপনার ব্র্যান্ডকে ট্রাডিশনাল, স্ট্যাটিক ফর্মের চেয়ে আরও মডার্ন দেখায়, যার মেইন ইফেক্ট হচ্ছে একদম ভয়ঙ্কর ব্লু ইনপুট ফিল্ড আউटलাইন।
উপরের ইলাস্ট্রেশনটিকে আবার একবার নজর দিন। এটা শুধু একটি ইনপুট ফিল্ড নয় যার প্লেসহোল্ডার টেক্সট এন্টার করলে লেবেল হয়ে যায়। এখানে কী ঘটছে:
- প্রথমে, ইউজার একটি প্লেসহোল্ডার টেক্সট দেখে যা ফিল্ডের উদ্দেশ্য বর্ণনা করে।
- যчей ইউজার ইনপুট ফিল্ডের ভিতরে ক্লিক করে, প্লেসহোল্ডার টেক্সট টপে মুভ করে এবং একটি টিপিক্যাল ইনপুট লেবেলের ভূমিকা নেয় — এবং দৃশ্যমান থাকে।
- একই সময়, একটি নতুন প্লেসহোল্ডার টেক্সট পুরনো প্লেসহোল্ডারর জায়গায় আসে, কিন্তু এখন এটি একটি হিন্ট (যা প্লেসহোল্ডার টেক্সটের সবচেয়ে গুরুত্বপূর্ণ ভূমিকা) যাতে ইউজারকে টাইপ করার আগে আরও গাইড করা যায়।
- যেহেতু তারা টাইপ করা শুরু করে, প্লেসহোল্ডার হিন্ট টেক্সট চলে যায়, যেন হওয়া উচিত, কিন্তু অন্য অনেক ইনপুট ফিল্ডের বিপরীতে, মূল প্লেসহোল্ডার টেক্সট, যা এখন একটি ইনপুট লেবেল, ইউজারকে এখনও দৃশ্যমান, যদি সেগুলো ডিস্ট্র্যাক্ট হয়ে ফিল্ডের উদ্দেশ্য ভুলে যান (এটি আপনার চেয়ে বেশি ঘটে)।
আপনি যদি মিনিমালিস্ট ডিজাইনের ফ্যান হন, ফ্লোটিং লেবেলস পারফেক্ট ফিট।
সার্বজনীন উক্তিটি যেন:
Perfection is not when there is nothing left to add, but when there is nothing left to take away.
এটাই মোটামুটি ফ্লোটিং লেবেলস একদম সংক্ষেপে।
রিসোর্সেস
- CodePen-এ ফ্লোটিং লেবেলস কোড উদাহরণ।
- আপনি যদি Material UI ফ্রেমওয়ার্ক ব্যবহার করেন, আপনার ওয়েবসাইটে ফ্লোটিং লেবেলস ইমপ্লিমেন্ট করা হাতের মুঠোফোন।
সতর্ক থাকুন যে ফ্লোটিং লেবেলস কীভাবে টেকনিক্যালি ইমপ্লিমেন্ট করছেন (HTML, CSS, JavaScript), তার ওপর ডিপেন্ড করে আপনি কিছু ব্রাউজার ইনকম্প্যাটিবিলিটি ইশুতে পড়তে পারেন। caniuse চেক করুন।
