পার্ট ১: Dashboard Visual Architecture: ড্যাশবোর্ড ভিজ্যুয়াল আর্কিটেকচার ও ইনফরমেশন লেআউট

অনেক নতুন ডিজাইনার মনে করে, একটা ড্যাশবোর্ড মানেই হলো বাম পাশে একটা নেভিগেশন বার, ওপরে একটা সার্চ ইনপুট আর মাঝখানে ৪-৫টা রঙিন কার্ড ও চার্ট (charts) বসিয়ে দেওয়া। ড্রিবলে (Dribbble) এই ধরণের শত শত শাইনি ড্যাশবোর্ড দেখা যায়।

বাস্তবতা হলো, রিয়েল ওয়ার্ল্ডে যখন কোনো কোম্পানি তাদের SaaS (Software as a Service) প্রোডাক্ট লঞ্চ করে, তখন ড্যাশবোর্ড ডিজাইন মোটেও আর্ট প্রজেক্ট নয়। এটি হলো ইউজারের প্রতিদিনের কাজের কন্ট্রোল সেন্টার। ড্যাশবোর্ড যদি ইউজারের কাজের প্রায়োরিটি ক্লিয়ার না করে, তবে ইউজার আপনার সফটওয়্যার ব্যবহার করা ছেড়ে দেবে।

আজকে আমরা আলোচনা করব ড্যাশবোর্ডের ভিজ্যুয়াল আর্কিটেকচার নিয়ে এবং দেখব কীভাবে রিয়েল ইউজারের জন্য স্ক্যানযোগ্য লেআউট ডিজাইন করবেন।

১. লুপ হোল: ইনফরমেশন ওভারলোড ও কগনিটিভ লোড

আমি যখন ২০১৬ সালের দিকে আমার প্রথম SaaS প্রজেক্টে কাজ করি, ক্লায়েন্ট আমাকে বলল তাদের ড্যাশবোর্ডে সব ডেটা এক জায়গায় দেখাতে হবে। আমি বোকার মতো তাদের রিকোয়েস্ট অনুযায়ী ১৫টির বেশি কার্ড, পাই-চার্ট, এবং অ্যাক্টিভিটি ফিড এক স্ক্রিনে গাদাগাদি করে বসালাম।

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

একে বলে কগনিটিভ ওভারলোড (Cognitive Overload)। মানুষ একবারে ৭টির বেশি ইনফরমেশন প্রসেস করতে পারে না (Miller's Law)। ড্যাশবোর্ড ডিজাইন করার সময় ইউজারের মনোযোগ অপটিমাইজ করা ডিজাইনারের প্রথম দায়িত্ব।

২. ভিজ্যুয়াল প্রায়োরিটি ও লেআউট স্ট্রাকচার (Grid & Layouts)

একটি প্রোডাকশন-গ্রেড ড্যাশবোর্ডের ইনফরমেশন আর্কিটেকচার ৩টি প্রধান জোনে বিভক্ত হওয়া উচিত:

1. দি হিরো মেট্রিক্স (Core Metrics): ইউজারের সবচেয়ে গুরুত্বপূর্ণ ৩-৪টি ডেটা পয়েন্ট (যেমন: Total Revenue, Active Users, Conversion Rate) একেবারে ওপরে হাইলাইট কার্ড আকারে থাকবে।
2. দি অ্যাকশনেবল চার্ট (Primary Visuals): ইউজারের ডেটা ট্র্যাকিংয়ের জন্য লাইন চার্ট বা বার চার্ট, যা দেখে সে এক পলকেই ট্রেন্ড বুঝতে পারে।
3. রিসেন্ট অ্যাক্টিভিটি ও টাস্ক লিস্ট (Secondary Details): সেকেন্ডারি ইনফরমেশনগুলো ড্যাশবোর্ডের নিচের দিকে বা সাইড প্যানেলে থাকবে।

সবচেয়ে ভালো প্র্যাকটিস হলো এফ-শেপড রিডিং প্যাটার্ন (F-shaped Reading Pattern) ফলো করে বাম থেকে ডানে এবং ওপর থেকে নিচে ইনফরমেশন লেআউট করা।

৩. গ্রিড কনসিস্টেন্সি ও স্পেসিং (Spacing System)

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

• ৮-পিক্সেল গ্রিড (8px Grid System): মার্জিন, প্যাডিং এবং কার্ডের সাইজ সবসময় ৮-এর মাল্টিপল (8, 16, 24, 32, 48) রাখুন। এটি ডেভেলপারদের জন্য কোড করা সহজ করে এবং লেআউটে একটি ভিজ্যুয়াল ব্যালেন্স এনে দেয়।
• হোয়াইট স্পেস (White Space): ভিজ্যুয়াল ব্রিদিং স্পেসের জন্য কার্ডগুলোর মাঝে অন্তত ২৪ পিক্সেল স্পেসিং দিন। স্ক্রিন ফাঁকা রাখলে কাজ হালকা মনে হয় এবং কগনিটিভ লোড কমে।

৪. কার্ড ডিজাইন ও চার্ট অপটিমাইজেশন (Dashboard Cards)

ড্যাশবোর্ডের কার্ডগুলো কেবল বক্স নয়, এগুলো এক একটি মিনি-উইজেট।

• ভুল অ্যাপ্রোচ: একটি কার্ডে টাইটেল, বড় ভ্যালু, পার্সেন্টেজ চেঞ্জ, স্পার্কলাইন গ্রাফ এবং অ্যাকশন বাটন সব একসাথে গাদাগাদি করে দেওয়া।
• রাইট অ্যাপ্রোচ: ফোকাস ওয়ান মেট্রিক। টাইটেল থাকবে হালকা রঙে, ভ্যালু থাকবে বোল্ড ও বড় ফন্টে, এবং ট্রেন্ড ইন্টিকেটর (+5% vs last month) থাকবে গ্রিন বা রেড সাবলীল নোটিফিকেশনে।

চার্ট ডিজাইন করার সময় অপ্রয়োজনীয় থ্রিডি ইফেক্ট বা গ্রেডিয়েন্ট বর্জন করুন। মিনিমালিস্টিক লাইন বা বার চার্ট ডেটা রিড করার জন্য সবচেয়ে বেস্ট।

পরবর্তী পর্বে আমরা দেখব কীভাবে ইউজারের ফ্রিকশন কমাতে একটি প্রিমিয়াম অনবোর্ডিং ফ্লো (Onboarding Flow) ডিজাইন করবেন।

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