পার্ট ৩: Complex Data Table & Filter Design: জটিল ডেটা টেবিল ও অ্যাডভান্সড ফিল্টার ডিজাইন

SaaS প্রোডাক্টের হার্ট বা হৃৎপিণ্ড হলো এর ডেটা সেট। প্রজেক্ট ম্যানেজমেন্ট টুল, সিআরএম, কিংবা ফাইন্যান্সিয়াল সফটওয়্যার—সবখানেই মূল কাজ সম্পন্ন হয় বিশাল বিশাল ডেটা টেবিল বা গ্রিডের ভেতর।

অনেক ডিজাইনার মনে করে ফিগমাতে একটা সাধারণ রেক্ট্যাঙ্গেল নিয়ে তার ভেতর কিছু টেক্সট সাজিয়ে দিলেই টেবিল হয়ে গেল। কিন্তু বাস্তব প্রোডাকশনে যখন হাজার হাজার ডেটা রো (Row) চলে আসে, তখন সেই টেবিল ম্যানেজ করা ইউজারের জন্য এক দুঃস্বপ্ন হয়ে দাঁড়ায়।

আজকে আমরা শিখব কীভাবে জটিল ডেটা টেবিল, কলাম আর্কিটেকচার এবং অ্যাডভান্সড ফিল্টারিং অপশন ডিজাইন করবেন যাতে ইউজার খুব সহজেই হাজারো ডেটার মাঝে তার কাঙ্ক্ষিত ইনফরমেশন খুঁজে পায়।

১. লুপ হোল: রেসপন্সিভনেস না ভেবে ডিজাইন করার খামখেয়ালি

আমি যখন প্রথম প্রথম টেবিল ডিজাইন করতাম, আমি ডেক্সটপ স্ক্রিনে ৭-৮টি কলাম নিয়ে টেবিল সাজিয়ে দিতাম। কিন্তু ডেভেলপার যখন সেটি বিল্ড করত, তখন মোবাইল বা ছোট ল্যাপটপ স্ক্রিনে টেবিলটি ভেঙে হিজিবিজি হয়ে যেত।

মনে রাখবেন, রেসপন্সিভনেস না ভেবে টেবিল ডিজাইন করা অপরাধের সামিল। ছোট স্ক্রিনে সব কলাম একসাথে দেখানো অসম্ভব। এর সলিউশন হলো হরাইজন্টাল স্ক্রল (Horizontal Scrolling) অথবা কলাম কাস্টমাইজেশন (Column Customization)—যেখানে ইউজার নিজেই সিলেক্ট করতে পারবে সে কোন কোন কলাম স্ক্রিনে রাখতে চায়।

২. ডেটা ডেনসিটি ও ভিজ্যুয়াল স্ক্যানেবিলিটি (Data Density)

টেবিলের স্ক্যানেবিলিটি ইম্প্রুভ করার জন্য কিছু জরুরি গাইডলাইন:

• রো হাইট ও প্যাডিং (Row Padding): প্রতিটি রো-এর উপর ও নিচে পর্যাপ্ত প্যাডিং দিন। ৮-পিক্সেল গ্রিড মেনে অন্তত ১২px থেকে ১৬px প্যাডিং দিন।
• অল্টারনেটিং রো কালার (Zebra Striping): ডেটা বেশি হলে প্রতি অল্টারনেট রো-তে খুব হালকা একটি গ্রে ব্যাকগ্রাউন্ড কালার ব্যবহার করুন। এতে ইউজারের এক লাইনের ডেটা অন্য লাইনে গুলিয়ে যাবে না।
• অ্যালাইনমেন্ট রুলস (Alignment Rules):
• টেক্সট কলাম সবসময় লেফট-অ্যালাইনড (Left-aligned) হবে।
• নিউমেরিক বা টাকার অংক সবসময় রাইট-অ্যালাইনড (Right-aligned) হবে।
• স্ট্যাটাস ব্যাজ বা অ্যাকশন বাটন সেন্টার-অ্যালাইনড হতে পারে।

৩. অ্যাডভান্সড ফিল্টারিং ও সার্চ মেকানিজম (Advanced Filters)

ইউজারের কাছে হাজারো ডেটা থাকলে সে সবসময় ফিল্টার ব্যবহার করে।

• গ্লোবাল সার্চ বনাম কলাম সার্চ: টেবিলের উপরে একটি গ্লোবাল সার্চ ইনপুট রাখুন। কিন্তু জটিল কাজের জন্য প্রতিটি কলামের নিচে বা সাইড ড্রোয়ারে স্পেসিফিক ফিল্টারিং সিস্টেম সেট করুন।
• ব্যাচ ফিল্টারিং: ইউজার একটি একটি ফিল্টার অ্যাপ্লাই করার পর যেন প্রতিবার টেবিল লোড না হয়। ইউজার ৩-৪টি ফিল্টার সিলেক্ট করবে, তারপর "Apply Filters" বাটনে ক্লিক করলে একসাথে ফিল্টার হবে। এতে সার্ভার লোড এবং ইউজারের সময় দুটোই বাঁচে।

৪. টেবিল অ্যাকশনস ও হোভার স্টেটস (Table Actions)

ইউজার টেবিলের ভেতর কোনো রো এডিট বা ডিলিট করতে চাইলে কীভাবে করবে?

• হোভার অ্যাকশনস (Hover Actions): রো-এর ডান পাশে সব অ্যাকশন বাটন সবসময় অন-স্ক্রিন রেখে টেবিলকে হিজিবিজি করবেন না। মাউস যখন কোনো রো-এর উপর যাবে, কেবল তখনই অ্যাকশন বাটনগুলো ভিজিবল হবে।
• বাল্ক অ্যাকশনস (Bulk Actions): প্রতিটি রো-এর শুরুতে চেকবক্স (Checkbox) রাখুন। ইউজার যখন একাধিক রো সিলেক্ট করবে, টেবিলের উপরে একটি অ্যাকশন বার আসবে—যেখান থেকে সে একসাথে ৩-৪টি আইটেম ডিলিট বা এক্সপোর্ট করতে পারবে।

পরবর্তী ও শেষ পর্বে আমরা দেখব কীভাবে ক্যানসেল ফ্লো এবং ফিচার নোটিফিকেশনের মাধ্যমে ইউজারের ড্রপ-অফ বা চূর্ণ (Churn) কমাবেন।

ধন্যবাদ সবাইকে।