ড্যাশবোর্ড ডিজাইনের উদাহরণ: ১৪টি লেআউট ও সেগুলো কীভাবে কাজ করে

ভালো ড্যাশবোর্ড ডিজাইন শুরু হয় একটি প্রশ্ন দিয়ে, চার্ট দিয়ে নয়: কে দেখছে, তাকে কী সিদ্ধান্ত নিতে হবে, এবং কত ঘন ঘন? সেরা ড্যাশবোর্ডগুলো উপরে কিছু প্রধান সংখ্যা প্রসঙ্গসহ রাখে, নিচের চার্টে পরিবর্তনের ব্যাখ্যা দেয়, ফিল্টার স্পষ্ট রাখে, এবং মানুষকে যা দেখছে তার উপর কাজ করতে দেয়। বেশির ভাগ বাস্তব ড্যাশবোর্ড লগ-ইনের পেছনে থাকে, তাই নিচে আমরা অক্টোবর ২০২৬-এ যাচাই করা তিনটি পাবলিক উদাহরণ এবং একটি পণ্যের নাম উল্লেখ না করে বর্ণিত এগারোটি সাধারণ লেআউট দিয়েছি। তারপর রয়েছে একটি ডিজাইন চেকলিস্ট, এড়ানোর মতো ভুল এবং নিজের ড্যাশবোর্ড বানানোর উপায়।

এক নজরে ১৪টি উদাহরণ

পাবলিক ড্যাশবোর্ড উদাহরণ

এগুলো অক্টোবর ২০২৬ অনুযায়ী বর্ণিত।

১. Plausible-এর লাইভ ডেমো

Plausible, একটি গোপনীয়তা-কেন্দ্রিক ওয়েব অ্যানালিটিক্স টুল, তাদের নিজের সাইটের অ্যানালিটিক্সের একটি লাইভ ডেমো প্রকাশ করে, যা যে কেউ ঘুরে দেখতে পারে। এর ডকুমেন্টেশনে Top Pages-এর মতো রিপোর্টের বর্ণনা আছে, যাতে পেজ ভিউ, বাউন্স রেট, পেজে কাটানো সময় ও স্ক্রল গভীরতা থাকে, সাথে প্রবেশ ও প্রস্থান পেজও। একটি ফিল্টার বোতাম আপনাকে "is", "is not" ও "contains" নিয়মে পেজ অনুযায়ী ভাগ করতে দেয়, এবং ডকুমেন্টেশনে সময়ের সাথে পরিসংখ্যান তুলনার বিষয়টিও আছে।

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

২. Stripe ড্যাশবোর্ড

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

এখান থেকে শিখুন: "আমরা কেমন করছি?" ভিউয়ের সাথে "কোনটিতে আমার মনোযোগ দরকার?" সতর্কতা যুক্ত করুন, এবং প্রত্যেককে নিজের ওভারভিউ কাস্টমাইজ করতে দিন।

৩. Grafana

Grafana-এর ডকুমেন্টেশন প্যানেল দিয়ে তৈরি ড্যাশবোর্ডের বর্ণনা দেয়, যেখানে প্রতিটি প্যানেল একটি ডেটা সোর্সে একটি কোয়েরি চালায়, এবং সারি বা ট্যাবে সাজানো থাকে। ভেরিয়েবল একটি ড্যাশবোর্ডকে যেমন সার্ভার বা এনভায়রনমেন্টের মধ্যে বদলাতে দেয়।

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

কপি করার মতো ড্যাশবোর্ড লেআউট

৪. SaaS মেট্রিক্স ড্যাশবোর্ড

উপরের সারিতে: মাসিক পুনরাবৃত্ত আয়, নতুন গ্রাহক, চলে যাওয়া গ্রাহক এবং সক্রিয় ব্যবহারকারী, প্রতিটির সাথে গত মাসের তুলনায় পরিবর্তন। নিচে: MRR-এর প্রবণতা রেখা, প্ল্যান অনুযায়ী ভাগ, এবং সাম্প্রতিক সাইন-আপের তালিকা। প্রতিটি সংখ্যা বুঝতে আমাদের SaaS মেট্রিক্স গাইডটি দেখুন।

৫. সেলস পাইপলাইন ড্যাশবোর্ড

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

৬. ই-কমার্স অ্যাডমিন

উপরে আজকের অর্ডার, রাজস্ব ও গড় অর্ডার মূল্য; মূল অংশ হিসেবে "পূরণ হয়নি এমন অর্ডার" তালিকা; পাশে কম মজুদের পণ্য ও সাম্প্রতিক রিভিউ। সবচেয়ে সাধারণ কাজ, অর্ডার পাঠানো হিসেবে চিহ্নিত করা, এক ক্লিকেই হওয়া উচিত।

৭. সাপোর্ট ড্যাশবোর্ড

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

৮. ইনভেন্টরি ড্যাশবোর্ড

পুনর্মজুদের সীমার নিচে থাকা আইটেম আগে, সাথে একটি "পুনর্মজুদ" কাজ। তারপর ক্যাটাগরি অনুযায়ী মজুদের মূল্য, সাম্প্রতিক চলাচল, এবং নির্দিষ্ট সময়ে বিক্রি না হওয়া আইটেম। দেখুন ইনভেন্টরি ম্যানেজমেন্ট অ্যাপ কীভাবে বানাবেন।

৯. প্রজেক্ট ড্যাশবোর্ড

প্রতিটি প্রজেক্টের জন্য একটি সারি, সাথে অবস্থা, মালিক, শেষ তারিখ ও শতাংশ সম্পন্ন, এবং সব প্রজেক্ট জুড়ে মেয়াদোত্তীর্ণ কাজের তালিকা। শুধু ব্যতিক্রমগুলো (দেরি, আটকে থাকা) রঙ করুন, যাতে সেগুলো আলাদা করে চোখে পড়ে।

১০. মার্কেটিং ড্যাশবোর্ড

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

১১. ফাইন্যান্স ড্যাশবোর্ড

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

১২. ক্লিনিক বা বুকিং ড্যাশবোর্ড

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

১৩. ব্যক্তিগত ট্র্যাকার ড্যাশবোর্ড

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

১৪. ক্লায়েন্ট-মুখী ড্যাশবোর্ড

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

সেরা ড্যাশবোর্ডগুলোর সাধারণ বৈশিষ্ট্য

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

সাধারণ ভুল

• যা মাপা যায় সবকিছু দেখানো। বেশি চার্ট মানে প্রতিটি চার্ট কম নজরে পড়ে।
• প্রসঙ্গ ছাড়া সংখ্যা। "১,২৪০" আগের সময় বা লক্ষ্য ছাড়া প্রায় অর্থহীন।
• অনেক টুকরোসহ পাই চার্ট। তুলনা কঠিন; সাজানো বার চার্ট সাধারণত বেশি স্পষ্ট।
• অনেক রঙ। জোরালো রঙ সতর্কতা ও একটি হাইলাইট সিরিজের জন্য সংরক্ষিত রাখুন।
• সময়চিহ্নছাড়া পুরনো ডেটা। সবসময় দেখান ডেটা কখন শেষবার আপডেট হয়েছে।
• মোবাইল ভিউ না থাকা, যেসব ড্যাশবোর্ড মানুষ চলতে চলতে দেখে।
• ভিন্ন শ্রোতা মেশানো। বোর্ড রিপোর্ট ও দৈনিক অপারেশন ভিউ খুব কমই একই পেজে থাকে।

নিজের ড্যাশবোর্ড কীভাবে বানাবেন

১. প্রশ্নগুলো লিখুন যার উত্তর ড্যাশবোর্ডকে দিতে হবে, এবং কারা সেগুলো জিজ্ঞাসা করে। ২. ডেটা সোর্সের তালিকা করুন: আপনার অ্যাপের ডেটাবেস, একটি স্প্রেডশিট, বা অন্য টুলের API। ৩. লেআউটের খসড়া করুন: প্রধান সংখ্যা, দুই থেকে চারটি চার্ট, একটি কাজের তালিকা। ৪. বানান। Mythex-এর সাথে আপনি চ্যাটে ড্যাশবোর্ডের বর্ণনা দেন এবং লাইভ প্রিভিউতে সেটি কাজ করতে দেখেন। এটি আপনার ড্যাশবোর্ডের প্রয়োজনীয় ডেটাবেস, লগ-ইন ও ভূমিকা তৈরি করতে পারে, এবং একটি ক্লিকে একটি URL-এ প্রকাশ করতে পারেন। শুরুর জন্য টেমপ্লেট ব্রাউজ করুন। যদি আপনার ডেটা ইতিমধ্যে একটি ওয়্যারহাউসে থাকে এবং অ্যাড-হক বিশ্লেষণ দরকার, তাহলে একটি BI টুল বেশি উপযুক্ত হতে পারে; যদি স্প্রেডশিটে থাকে, দেখুন কীভাবে Google Sheets আপনার অ্যাপের সাথে যুক্ত করবেন। ৫. আসল ব্যবহারকারীর সাথে পরীক্ষা করুন। এক সপ্তাহ তারা কীভাবে ব্যবহার করে লক্ষ্য করুন, এবং যা তারা উপেক্ষা করে তা সরিয়ে দিন।

পূর্ণ নির্দেশিকার জন্য পড়ুন কীভাবে ড্যাশবোর্ড বানাবেন।

এই উদাহরণগুলো কীভাবে বেছেছি

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

প্রশ্নোত্তর