কোনো SaaS সফটওয়্যারে নতুন অ্যাকাউন্ট খুলে ড্যাশবোর্ডে ঢুকেই যদি ব্যবহারকারী শুধু ফাঁকা জায়গা দেখেন, তাহলে তাঁর প্রথম প্রশ্ন হয়—এখন কী করব?
প্রজেক্ট নেই, রিপোর্ট নেই, কোনো তথ্যও নেই। কিন্তু সফটওয়্যারটি যদি এটুকুও না জানায় যে কেন কিছু দেখা যাচ্ছে না, তাহলে ব্যবহারকারীর পক্ষে বোঝা কঠিন হয় তিনি ঠিক জায়গায় আছেন কি না। তথ্য এখনো আসছে, কোনো সমস্যা হয়েছে, নাকি আগে তাঁকেই কিছু যোগ করতে হবে—সবকিছুই অনিশ্চিত থেকে যায়।
এখানেই SaaS empty state কাজে আসে। একটি ভালো Empty State ফাঁকা জায়গা ঢেকে রাখে না; বরং কেন জায়গাটি খালি এবং এরপর কী করা যায়, তা বুঝিয়ে দেয়। কখনো এর জন্য এক লাইনের বার্তাই যথেষ্ট। আবার কোথাও একটি বোতাম, ছোট ব্যাখ্যা বা নমুনা তথ্য দরকার হতে পারে। প্রতিটি ফাঁকা স্ক্রিনে একই নকশা বসালে তাই ভালো ফল পাওয়া যায় না।
Empty State বলতে আসলে কী বোঝায়
কোনো পেজ, তালিকা, টেবিল বা ড্যাশবোর্ডে দেখানোর মতো তথ্য না থাকলে যে অবস্থা দেখা যায়, সেটিই Empty State। এটি খুব সাধারণ কয়েকটি পরিস্থিতিতে দেখা যায়। যেমন, নতুন অ্যাকাউন্টে এখনো কোনো প্রজেক্ট তৈরি হয়নি, CRM-এ কোনো গ্রাহকের তথ্য যোগ করা হয়নি, ইনবক্স খালি, কোনো নোটিফিকেশন নেই কিংবা সার্চ করে কিছু পাওয়া যায়নি।
সমস্যা শুধু জায়গাটি ফাঁকা হওয়া নয়। ব্যবহারকারী যদি বুঝতেই না পারেন কেন এটি ফাঁকা, তখন তাঁকে নিজে থেকেই পরবর্তী পথ খুঁজে বের করতে হয়।
একটি ফাঁকা ড্যাশবোর্ড তাই শুধু নকশার বিষয় নয়। এটি ব্যবহারকারী ও সফটওয়্যারের মধ্যে যোগাযোগেরও একটি অংশ।
আরও পড়ুন: SaaS Onboarding কী: Signup-এর পর User-কে দ্রুত Value দেখানোর কৌশল
নতুন ব্যবহারকারী কোথায় বেশি বিভ্রান্ত হন
ধরা যাক, কেউ প্রথমবার একটি হিসাবরক্ষণভিত্তিক SaaS সফটওয়্যারে ঢুকলেন। সামনে একটি চার্ট থাকার কথা, কিন্তু সেখানে কিছুই নেই।
এখন তাঁর মনে কয়েকটি প্রশ্ন আসতে পারে:
- অ্যাকাউন্ট তৈরির কাজ কি শেষ হয়েছে?
- আগে কোনো ফাইল আপলোড করতে হবে?
- ব্যাংক অ্যাকাউন্ট বা অন্য কোনো সেবা যুক্ত করতে হবে?
- তথ্য আসতে সময় লাগছে?
- নাকি সফটওয়্যারেই কোনো সমস্যা হয়েছে?
স্ক্রিন যদি এর কোনো উত্তর না দেয়, তাহলে ব্যবহারকারীকে মেনু ঘেঁটে নিজেই পথ বের করতে হবে।
এই সমস্যা শুধু প্রথম লগইনে হয় না। একজন পুরোনো ব্যবহারকারীও এমন কোনো ফিচারে প্রথমবার ঢুকতে পারেন, যেখানে আগে তাঁর কোনো তথ্য ছিল না। তাই Welcome Tour শেষ হলেই Onboarding শেষ হয়ে যায়—এমনভাবে ভাবা ঠিক নয়।
সব ফাঁকা অবস্থাকে একইভাবে দেখাবেন না
Empty State তৈরির আগে প্রথমেই বুঝতে হবে—জায়গাটি কেন ফাঁকা।
প্রথমবার ব্যবহার
ব্যবহারকারী এখনো কিছু তৈরি করেননি।
উদাহরণ:
আপনার এখনো কোনো প্রজেক্ট নেই।
প্রথম প্রজেক্ট তৈরি করে কাজ সাজানো শুরু করুন।
প্রজেক্ট তৈরি করুন
এখানে একটি স্পষ্ট বোতাম দরকার, কারণ ব্যবহারকারীর পরবর্তী কাজটি জানা আছে।
কাজ শেষ হয়ে গেছে
ধরা যাক, সব নোটিফিকেশন দেখা হয়ে গেছে। তখন দীর্ঘ ব্যাখ্যা বা নতুন কোনো কাজ চাপিয়ে দেওয়ার দরকার নেই।
নতুন কোনো নোটিফিকেশন নেই।
এই বার্তাই যথেষ্ট হতে পারে।
সার্চে কিছু পাওয়া যায়নি
এটি আবার ভিন্ন অবস্থা। এখানে “কোনো তথ্য নেই” বললে ব্যবহারকারী ভুল বুঝতে পারেন।
বরং লেখা যেতে পারে:
এই ফিল্টারের সঙ্গে মিলে কোনো ইনভয়েস পাওয়া যায়নি।
তারিখ বা স্ট্যাটাস বদলে আবার দেখুন।
এতে ব্যবহারকারী বুঝতে পারেন তথ্য নেই এমন নয়; তাঁর বর্তমান সার্চ বা ফিল্টারের সঙ্গে কিছু মেলেনি।
প্রয়োজনীয় সেটআপ হয়নি
কোনো রিপোর্ট দেখার আগে যদি ডেটা সোর্স যুক্ত করা বাধ্যতামূলক হয়, তাহলে সেটিই সরাসরি বলা উচিত।
রিপোর্ট দেখতে আগে একটি ডেটা সোর্স যুক্ত করুন।
ডেটা সোর্স যুক্ত করুন
বোতামটি এমন জায়গায় নেওয়া উচিত, যেখানে কাজটি সত্যিই শুরু করা যায়।
Loading, Empty আর Error এক জিনিস নয়
এই জায়গায় ভুল হলে ভালো Empty State-ও উল্টো বিভ্রান্তি তৈরি করতে পারে।
ধরা যাক, ড্যাশবোর্ড খুলতেই লেখা এল:
- কোনো রিপোর্ট পাওয়া যায়নি।
কিন্তু কয়েক সেকেন্ড পর রিপোর্ট চলে এল। এক্ষেত্রে প্রথম বার্তাটি ভুল ছিল। তখন আসলে তথ্য ছিল না—এমন নয়; তথ্য আসছিল।
এই তিনটি অবস্থা আলাদা রাখা দরকার:
| অবস্থা | কী বোঝানো উচিত |
| Loading | তথ্য আসছে |
| Empty | দেখানোর মতো তথ্য নেই |
| No results | বর্তমান সার্চ বা ফিল্টারে কিছু মেলেনি |
| Error | তথ্য আনা বা কাজটি সম্পন্ন করতে সমস্যা হয়েছে |
Loading চললে লোডিং সূচক বা Skeleton ব্যবহার করা যায়। তথ্য আনার কাজ শেষ হওয়ার পর সত্যিই কিছু না থাকলে Empty State দেখানো উচিত। আর তথ্য আনতে ব্যর্থ হলে ব্যবহারকারীকে Error Message দেখাতে হবে।
“কিছু নেই” এবং “কিছু আসতে পারেনি”—এই দুই বার্তার পার্থক্য ব্যবহারকারীর জন্য গুরুত্বপূর্ণ।
একটি ভালো Empty State-এ কতটুকু লেখা দরকার
অনেক ডিজাইনার এখানে অপ্রয়োজনীয়ভাবে বেশি তথ্য দেন। আসলে বেশির ভাগ ক্ষেত্রে তিনটি বিষয়ই যথেষ্ট:
- কী হয়েছে?
- কেন হয়েছে?
- এখন কী করা যায়?
ধরা যাক, CRM-এর গ্রাহক তালিকা খালি।
খুব সাধারণ একটি বার্তা হতে পারে:
এখনো কোনো গ্রাহক যোগ করা হয়নি। গ্রাহকের যোগাযোগের তথ্য ও ফলো-আপ এক জায়গায় রাখতে প্রথম গ্রাহক যোগ করুন।
গ্রাহক যোগ করুন
এর বেশি ব্যাখ্যার প্রয়োজন নাও থাকতে পারে।
অন্যদিকে এমন লেখা—
আপনার টিমের সহযোগিতার নতুন সম্ভাবনা উন্মোচন করতে সদস্য যোগ করে যাত্রা শুরু করুন।
—শুনতে প্রচারণার ভাষার মতো। ব্যবহারকারী এখানে বিজ্ঞাপন পড়তে আসেননি। তিনি জানতে চান কী হয়েছে এবং কী করতে হবে।
Empty State-এর ভাষা তাই ছোট, সরাসরি এবং কাজের হওয়া ভালো।
বোতামে অস্পষ্ট শব্দ কমান
“Continue”, “Get Started” বা “Learn More” ধরনের বোতাম সব সময় খারাপ নয়। কিন্তু নির্দিষ্ট কাজ জানা থাকলে নির্দিষ্ট নাম ব্যবহার করা বেশি পরিষ্কার।
যেমন:
- প্রজেক্ট তৈরি করুন
- গ্রাহক যোগ করুন
- ফাইল আপলোড করুন
- ডেটা সোর্স যুক্ত করুন
একই জায়গায় অনেক বোতাম দিলেও সমস্যা তৈরি হতে পারে।
ধরা যাক, একটি ফাঁকা Project Dashboard-এ পাশাপাশি আছে:
Create Project
Import Project
Browse Templates
Watch Tutorial
Read Documentation
Contact Support
প্রতিটি অপশন কাজে লাগতে পারে। কিন্তু নতুন ব্যবহারকারী কোনটি আগে করবেন, সেটি আবার তাঁকেই ঠিক করতে হচ্ছে।
এক্ষেত্রে প্রধান কাজটি সামনে রাখা ভালো।
প্রজেক্ট তৈরি করুন
তার নিচে ছোট লিংক রাখা যেতে পারে:
“টেমপ্লেট থেকে শুরু করতে চান?”
এতে অন্য পথ বন্ধ হচ্ছে না, আবার প্রধান কাজটিও হারিয়ে যাচ্ছে না।
Illustration কখন দরকার, কখন নয়
Empty State বললেই বড় Illustration দরকার—এমন কোনো নিয়ম নেই।
একটি সুন্দর ছবি স্ক্রিনটিকে বন্ধুত্বপূর্ণ করে তুলতে পারে। কিন্তু একই ড্যাশবোর্ডে চার-পাঁচটি খালি Widget থাকলে প্রতিটির সঙ্গে আলাদা Illustration যোগ করলে স্ক্রিন উল্টো ভারী হয়ে যেতে পারে।
ছোট জায়গায় শুধু শিরোনাম ও সংক্ষিপ্ত বার্তাই যথেষ্ট।
Illustration ব্যবহার করলে সেটি যেন প্রসঙ্গ বুঝতে সাহায্য করে। শুধু খালি জায়গা পূরণের জন্য ছবি বসানোর প্রয়োজন নেই।
কখন Demo Data বেশি কাজে দেয়
কিছু সফটওয়্যারে Empty State-এর চেয়ে নমুনা তথ্য বেশি কার্যকর।
বিশেষ করে Analytics বা জটিল Reporting Tool-এ নতুন ব্যবহারকারী ফাঁকা Dashboard দেখে বুঝতেই পারেন না শেষ পর্যন্ত সেখানে কী দেখা যাবে।
সেখানে দুটি পথ রাখা যেতে পারে:
- নিজের ডেটা যুক্ত করুন
- Demo Data দিয়ে দেখুন
Demo Data ব্যবহারকারীকে সফটওয়্যারের সম্ভাব্য চেহারা ও কাজ বোঝার সুযোগ দেয়।
তবে এখানে একটি সতর্কতা জরুরি। নমুনা তথ্যকে এমনভাবে দেখানো উচিত নয়, যাতে সেটিকে নিজের অ্যাকাউন্টের বাস্তব তথ্য বলে মনে হয়। Demo বা Sample Data স্পষ্টভাবে চিহ্নিত থাকা দরকার।
বাংলা Interface হলে ভাষায়ও ধারাবাহিকতা দরকার
বাংলা ব্যবহারকারীর জন্য Interface তৈরি করলে শুধু মূল লেখা বাংলায় করলেই কাজ শেষ হয় না।
একই স্ক্রিনে যদি লেখা থাকে—
“নতুন প্রজেক্ট তৈরি করুন”
তার নিচে—
“Create Task”
আর পাশে—
“সদস্য Invite করুন”
তাহলে ভাষার ছন্দ ভেঙে যায়।
ব্র্যান্ডের নাম বা বহুল পরিচিত প্রযুক্তিগত শব্দ অপরিবর্তিত রাখা যেতে পারে। কিন্তু বোতাম, নির্দেশনা ও ছোট বার্তায় একই ভাষার ধরন বজায় রাখলে Interface পড়া সহজ হয়। এখানে উদ্দেশ্য প্রতিটি ইংরেজি শব্দ জোর করে অনুবাদ করা নয়। বরং যেখানে সহজ বাংলা আছে, সেখানে অকারণে ইংরেজি না বসানো।
Accessibility পরে ভাবার বিষয় নয়
Empty State দেখতে সুন্দর হলেও Keyboard বা Screen Reader ব্যবহারকারী যদি সেটি বুঝতে না পারেন, তাহলে নকশাটি অসম্পূর্ণ।
বিশেষ করে কয়েকটি বিষয় পরীক্ষা করা দরকার:
- বোতামে Keyboard দিয়ে যাওয়া যাচ্ছে কি না।
- কোন উপাদানটি Focus-এ আছে, তা চোখে বোঝা যাচ্ছে কি না।
- বোতামের দৃশ্যমান লেখা এবং Screen Reader-এ পড়া নাম মিলছে কি না।
- প্রয়োজনীয় নির্দেশনা শুধু ছবির ভেতরে দেওয়া হয়েছে কি না।
- লেখা ও পটভূমির মধ্যে যথেষ্ট Contrast আছে কি না।
- Screen Reader-এ বার্তা ও বোতামটি যৌক্তিক ক্রমে পড়া যাচ্ছে কি না।
WCAG 2.2 অনুযায়ী সাধারণ লেখার জন্য Level AA-তে অন্তত ৪.৫:১ Contrast এবং বড় লেখার জন্য ৩:১ Contrast প্রয়োজন; কিছু ক্ষেত্রে ব্যতিক্রম রয়েছে। Decorative Illustration হলে Screen Reader-কে সেটি আলাদা করে পড়ানোর প্রয়োজন নাও থাকতে পারে।
নিজের প্রোডাক্টে কোথা থেকে শুরু করবেন
পুরো SaaS পণ্য নতুন করে ডিজাইন করার দরকার নেই। আগে এমন স্ক্রিনগুলো খুঁজুন, যেখানে ব্যবহারকারীর সামনে তথ্য না থাকার সম্ভাবনা বেশি।
বিশেষ করে দেখুন:
- অ্যাকাউন্ট খোলার পর প্রথম ড্যাশবোর্ড
- প্রথমবার কোনো মূল ফিচারে ঢোকার সময়
- নতুন প্রজেক্ট বা Workspace
- খালি Inbox বা Notification
- সার্চে ফল না পাওয়া
- Integration বা Data Setup-এর আগের অবস্থা
প্রতিটি জায়গায় তিনটি প্রশ্ন করুন:
- এটি কেন ফাঁকা?
- ব্যবহারকারী কি কারণটি বুঝতে পারছেন?
- এখন তাঁর সবচেয়ে যৌক্তিক কাজ কী?
এরপর দরকারমতো শিরোনাম, ছোট ব্যাখ্যা ও একটি প্রধান বোতাম দিন। কোনো কোনো জায়গায় শুধু এক লাইনের বার্তাই যথেষ্ট হবে।
পরিবর্তনের পর কী দেখবেন
Empty State নতুন করে সাজানোর পর শুধু দেখতে ভালো লাগছে কি না, সেটি দেখে থামলে চলবে না।
দেখা যেতে পারে:
- প্রধান বোতামে কতজন ক্লিক করছেন।
- কাজ শুরু করার পর কতজন তা শেষ করছেন।
- প্রথম প্রজেক্ট বা রিপোর্ট তৈরির পথে কোথায় ব্যবহারকারী থেমে যাচ্ছেন।
- Empty State দেখার পর তাঁরা অন্য কোথাও চলে যাচ্ছেন কি না।
- একই জায়গা নিয়ে সহায়তা চাওয়ার ধরন বদলাচ্ছে কি না।
তবে এখানে একটি সীমাবদ্ধতা আছে। Empty State পরিবর্তনের পর Activation বা Retention বাড়লেই ধরে নেওয়া যাবে না যে এই একটি পরিবর্তনের কারণেই ফল ভালো হয়েছে। একই সময়ে Onboarding, Pricing, Audience বা Product-এর অন্য অংশ বদলালে সেগুলোও প্রভাব ফেলতে পারে।
তাই এই পরিমাপগুলোকে ব্যবহারকারীর আচরণ বোঝার সূত্র হিসেবে দেখা ভালো।
প্রথমে ফাঁকা জায়গার কারণটি ঠিক করুন
একটি SaaS empty state ভালো করতে সবচেয়ে আগে Illustration আঁকার প্রয়োজন নেই। আগে বুঝুন ব্যবহারকারী কেন এই স্ক্রিনে এসেছেন এবং এখান থেকে তাঁর কোথায় যাওয়া উচিত।
কোথাও একটি ছোট বার্তা যথেষ্ট। কোথাও বোতাম দরকার। জটিল সফটওয়্যারে Demo Data বেশি কাজে দিতে পারে। আবার কোনো কাজ ইতিমধ্যে শেষ হয়ে গেলে ব্যবহারকারীকে নতুন Action দেখানোরও প্রয়োজন নেই।
Empty State-এর কাজ ব্যবহারকারীকে প্রভাবিত করা নয়; তাঁকে অবস্থাটি বুঝতে সাহায্য করা। ফাঁকা স্ক্রিন দেখেও যদি ব্যবহারকারী বুঝতে পারেন কেন এখানে কিছু নেই এবং এরপর কী করা যায়, তাহলে নকশাটি তার কাজ করছে।
প্রায় জিজ্ঞাসিত প্রশ্ন
১. ফাঁকা পর্দা দেখলে নতুন ব্যবহারকারী কেন বিভ্রান্ত হন?
ফাঁকা পর্দায় কোনো ব্যাখ্যা না থাকলে ব্যবহারকারী বুঝতে পারেন না তথ্য এখনো আসছে, কোনো সমস্যা হয়েছে, নাকি আগে তাঁকেই কিছু যোগ করতে হবে। তাই সংক্ষিপ্ত নির্দেশনা দিলে পরবর্তী কাজ বোঝা সহজ হয়।
২. ফাঁকা অবস্থায় সব সময় কি বোতাম রাখা দরকার?
না। ব্যবহারকারীর করণীয় থাকলেই বোতাম দরকার। যেমন নতুন প্রকল্প তৈরি বা তথ্যের উৎস যুক্ত করার ক্ষেত্রে বোতাম উপকারী। কিন্তু নতুন কোনো বিজ্ঞপ্তি না থাকলে শুধু একটি ছোট বার্তাই যথেষ্ট হতে পারে।
৩. ফাঁকা অবস্থা আর ত্রুটির বার্তা কি একই?
না। ফাঁকা অবস্থা মানে দেখানোর মতো তথ্য নেই। ত্রুটির অর্থ হলো তথ্য আনা বা কোনো কাজ সম্পন্ন করতে সমস্যা হয়েছে। এই দুই পরিস্থিতিতে একই বার্তা দেখালে ব্যবহারকারী ভুল বুঝতে পারেন।
৪. ফাঁকা পর্দায় ছবি ব্যবহার করা কি বাধ্যতামূলক?
না। ছবি তখনই ব্যবহার করা ভালো, যখন সেটি পরিস্থিতি বুঝতে সাহায্য করে। ছোট জায়গা বা একই পাতায় একাধিক ফাঁকা অংশ থাকলে শুধু শিরোনাম ও সংক্ষিপ্ত নির্দেশনাই যথেষ্ট হতে পারে।
৫. নিজের সফটওয়্যারে ফাঁকা অবস্থা উন্নত করতে প্রথমে কী করা উচিত?
আগে গুরুত্বপূর্ণ ফাঁকা পর্দাগুলো চিহ্নিত করুন। এরপর প্রতিটির জন্য দেখুন কেন জায়গাটি ফাঁকা, ব্যবহারকারী কারণটি বুঝতে পারছেন কি না এবং তাঁর পরবর্তী স্বাভাবিক কাজ কী। সেই অনুযায়ী ছোট বার্তা ও প্রয়োজন হলে একটি প্রধান বোতাম যোগ করুন।
