UX Myths (পর্ব ৭): আইকন ইউজ্যাবিলিটি এনহ্যান্স করে!
ডিজাইনারদের মধ্যে একটি লোভনীয় প্রবণতা আছে: "স্ক্রিনে অনেক লেখা দেখতে ভালো লাগছে না। কেমন যেন হিজিবিজি লাগে! চলুন, লেখাগুলো সরিয়ে এর বদলে সুন্দর সুন্দর কিছু আইকন বসিয়ে দেই। তাহলেই ডিজাইনটা একদম 'মডার্ন' আর 'ক্লিন' হয়ে যাবে!"
Credit:
Toptal
এই 'ক্লিন' ডিজাইন করার তীব্র আকাঙ্ক্ষা থেকেই জন্ম নিয়েছে একটি জনপ্রিয় মিথ: আইকন ব্যবহার করলেই ওয়েবসাইটের বা অ্যাপের ইউজেবিলিটি (ব্যবহারযোগ্যতা) বেড়ে যায়।
কিন্তু সত্যিটা হলো, ভুল জায়গায় বা ভুল আইকন ব্যবহার করাটা উপকারের চেয়ে অপকারই বেশি করে। একটি দুর্বোধ্য আইকন ব্যবহারকারীর মনে বিরক্তি আর কনফিউশন তৈরি করা ছাড়া আর কিছুই করতে পারে না।
এই মিথটা ভাঙতে আজ আমরা কোনো অ্যাপের স্ক্রিনশট দেখব না। আমরা আজ ঢাকার রাস্তায় লোকাল বাসের পেছনে দৌড়াবো!
গল্প: লোকাল বাসের গায়ে আঁকা চিহ্ন
ঢাকার লোকাল বাসগুলোর দিকে ভালো করে খেয়াল করেছেন? প্রতিটি কোম্পানির বাসের গায়ে আলাদা আলাদা চিহ্ন বা প্রতীক আঁকা থাকে—কোনোটায় দেখবেন গোলাপ ফুল, কোনোটায় হরিণ, কোনোটায় হয়তো একটা তারা। তত্ত্বীয়ভাবে, এই চিহ্নগুলো দিয়ে বাসের নির্দিষ্ট রুট চেনার কথা।
বাস্তবতার মুখোমুখি: এখন নিজেকে সৎভাবে প্রশ্ন করুন, আপনি কি আসলেই 'হরিণ মার্কা' বাসটা দেখেই একশ ভাগ নিশ্চিত হয়ে বলে দিতে পারেন যে এটা মতিঝিল হয়ে সদরঘাট যাবে? কিংবা 'তারা মার্কা' বাসটা কি আসলেই ফার্মগেট যাবে?
ঢাকার ৯৯% সাধারণ যাত্রীর জন্য উত্তরটি হলো একটি বড় 'না'।
তাহলে আসল সমাধানটা কী? আমরা তাহলে বাস চিনি কীভাবে? আমরা মূলত দুটি জিনিসের উপর নির্ভর করি:
বাসের হেল্পারের উদাত্ত গলার চিৎকার: "এই যে গুলিস্তান, প্রেস ক্লাব, শাহবাগ, ডাইরেক্ট!"
বাসের সামনে বা পাশে বড় করে লেখা গন্তব্যের নাম বা রুট নম্বর।
অর্থাৎ, দিনশেষে আমরা স্পষ্ট টেক্সট বা লেখার উপরই আস্থা রাখি, দুর্বোধ্য চিহ্ন বা আইকনের উপর নয়। বাসের গায়ের এই চিহ্নগুলো হলো ঠিক সেই সব অ্যাপের আইকনের মতো, যেগুলো দেখতে হয়তো সুন্দর, কিন্তু ব্যবহারকারীকে কোনো স্পষ্ট বার্তা দিতে পুরোপুরি ব্যর্থ।
তাহলে কি সব আইকনই খারাপ?
না, অবশ্যই সব আইকন খারাপ নয়। কিছু আইকন বিশ্বজুড়ে এতটাই প্রচলিত যে সেগুলোকে আমরা সর্বজনীন বা Universal Icons বলতে পারি। এদের অর্থ বোঝার জন্য আলাদা করে কোনো লেখার প্রয়োজন হয় না। যেমন:
বাড়ি (Home) আইকন
সার্চ (Search) করার জন্য আতস কাঁচের আইকন
প্রিন্ট (Print) করার জন্য প্রিন্টারের আইকন
শপিং কার্ট (Shopping Cart) এর আইকন
এগুলো অনেকটা ট্র্যাফিক সিগন্যালের লাল-সবুজ বাতির মতো, যার অর্থ পৃথিবীর সবাই জানে।
বিপদের নাম 'অস্পষ্ট আইকন'
সমস্যাটা হয় তখনই, যখন ডিজাইনাররা 'ক্রিয়েটিভ' হতে গিয়ে নতুন বা অস্পষ্ট আইকন ব্যবহার করেন। যেমন:
একটি স্টার (⭐) আইকনের মানে কী? ফেভারিট? বুকমার্ক? নাকি ৫-স্টার রেটিং দেওয়া?
একটি হার্ট (❤️) আইকনের মানে কী? লাইক দেওয়া? নাকি পছন্দের তালিকায় (Wishlist) যোগ করা?
একেক অ্যাপে এর মানে একেক রকম, যা ব্যবহারকারীকে ঠিক সেই 'হরিণ মার্কা' বাসের সামনে দাঁড়ানো যাত্রীর মতো দ্বিধায় ফেলে দেয়।
Golden Rule: Icons + Labels = Love ❤️
তাহলে এই সমস্যার সবচেয়ে সহজ, কার্যকর এবং সুন্দর সমাধান কী? সমাধান হলো: আইকনের সাথে তার কাজটি কী, তা টেক্সট বা লেবেল হিসেবে লিখে দিন।
উদাহরণ:
❌ শুধু একটি ⚙️ আইকন (এটা কিসের সেটিংস? প্রোফাইল? অ্যাপ? বোঝা কঠিন)
✅ ⚙️ সেটিংস (Settings) - এটা পানির মতো পরিষ্কার এবং সহজবোধ্য।
এতে ডিজাইনের সৌন্দর্যও রক্ষা পেল, আবার ব্যবহারকারীর বুঝতেও কোনো অসুবিধা হলো না। এটা হলো বাসের গায়ের 'গোলাপ ফুল' চিহ্ন এবং হেল্পারের "প্রেস ক্লাব, গুলিস্তান" চিৎকার—দুটোরই সুবিধা একসাথে পাওয়ার মতো!
শেষ কথা
আইকন হলো ডিজাইনের মসলার মতো। পরিমাণ মতো সঠিক মসলা দিলে খাবারের স্বাদ বহুগুণে বেড়ে যায়, কিন্তু বেশি বা ভুল মসলা দিলে পুরো খাবারটাই নষ্ট হয়ে যেতে পারে। একটি অ্যাপ বা ওয়েবসাইটের মূল উপাদান হলো তার কনটেন্ট বা লেখা, আইকন হলো সাহায্যকারী মাত্র।
তাই, পরেরবার আপনার ডিজাইনকে 'ক্লিন' করার লোভে সব লেখা মুছে ফেলে শুধু আইকন বসানোর আগে নিজেকে একবার প্রশ্ন করবেন:
"আমি কি আমার ব্যবহারকারীকে বাসের হেল্পারের মতো পরিষ্কারভাবে পথ দেখিয়ে সাহায্য করছি, নাকি বাসের গায়ের দুর্বোধ্য চিহ্ন দেখিয়ে তাকে কনফিউশনের রাস্তায় একা ছেড়ে দিচ্ছি?"
এই 'ক্লিন' ডিজাইন করার তীব্র আকাঙ্ক্ষা থেকেই জন্ম নিয়েছে একটি জনপ্রিয় মিথ: আইকন ব্যবহার করলেই ওয়েবসাইটের বা অ্যাপের ইউজেবিলিটি (ব্যবহারযোগ্যতা) বেড়ে যায়।
কিন্তু সত্যিটা হলো, ভুল জায়গায় বা ভুল আইকন ব্যবহার করাটা উপকারের চেয়ে অপকারই বেশি করে। একটি দুর্বোধ্য আইকন ব্যবহারকারীর মনে বিরক্তি আর কনফিউশন তৈরি করা ছাড়া আর কিছুই করতে পারে না।
এই মিথটা ভাঙতে আজ আমরা কোনো অ্যাপের স্ক্রিনশট দেখব না। আমরা আজ ঢাকার রাস্তায় লোকাল বাসের পেছনে দৌড়াবো!
গল্প: লোকাল বাসের গায়ে আঁকা চিহ্ন
ঢাকার লোকাল বাসগুলোর দিকে ভালো করে খেয়াল করেছেন? প্রতিটি কোম্পানির বাসের গায়ে আলাদা আলাদা চিহ্ন বা প্রতীক আঁকা থাকে—কোনোটায় দেখবেন গোলাপ ফুল, কোনোটায় হরিণ, কোনোটায় হয়তো একটা তারা। তত্ত্বীয়ভাবে, এই চিহ্নগুলো দিয়ে বাসের নির্দিষ্ট রুট চেনার কথা।
বাস্তবতার মুখোমুখি: এখন নিজেকে সৎভাবে প্রশ্ন করুন, আপনি কি আসলেই 'হরিণ মার্কা' বাসটা দেখেই একশ ভাগ নিশ্চিত হয়ে বলে দিতে পারেন যে এটা মতিঝিল হয়ে সদরঘাট যাবে? কিংবা 'তারা মার্কা' বাসটা কি আসলেই ফার্মগেট যাবে?
ঢাকার ৯৯% সাধারণ যাত্রীর জন্য উত্তরটি হলো একটি বড় 'না'।
তাহলে আসল সমাধানটা কী? আমরা তাহলে বাস চিনি কীভাবে? আমরা মূলত দুটি জিনিসের উপর নির্ভর করি:
বাসের হেল্পারের উদাত্ত গলার চিৎকার: "এই যে গুলিস্তান, প্রেস ক্লাব, শাহবাগ, ডাইরেক্ট!"
বাসের সামনে বা পাশে বড় করে লেখা গন্তব্যের নাম বা রুট নম্বর।
অর্থাৎ, দিনশেষে আমরা স্পষ্ট টেক্সট বা লেখার উপরই আস্থা রাখি, দুর্বোধ্য চিহ্ন বা আইকনের উপর নয়। বাসের গায়ের এই চিহ্নগুলো হলো ঠিক সেই সব অ্যাপের আইকনের মতো, যেগুলো দেখতে হয়তো সুন্দর, কিন্তু ব্যবহারকারীকে কোনো স্পষ্ট বার্তা দিতে পুরোপুরি ব্যর্থ।
তাহলে কি সব আইকনই খারাপ?
না, অবশ্যই সব আইকন খারাপ নয়। কিছু আইকন বিশ্বজুড়ে এতটাই প্রচলিত যে সেগুলোকে আমরা সর্বজনীন বা Universal Icons বলতে পারি। এদের অর্থ বোঝার জন্য আলাদা করে কোনো লেখার প্রয়োজন হয় না। যেমন:
বাড়ি (Home) আইকন
সার্চ (Search) করার জন্য আতস কাঁচের আইকন
প্রিন্ট (Print) করার জন্য প্রিন্টারের আইকন
শপিং কার্ট (Shopping Cart) এর আইকন
এগুলো অনেকটা ট্র্যাফিক সিগন্যালের লাল-সবুজ বাতির মতো, যার অর্থ পৃথিবীর সবাই জানে।
বিপদের নাম 'অস্পষ্ট আইকন'
সমস্যাটা হয় তখনই, যখন ডিজাইনাররা 'ক্রিয়েটিভ' হতে গিয়ে নতুন বা অস্পষ্ট আইকন ব্যবহার করেন। যেমন:
একটি স্টার (⭐) আইকনের মানে কী? ফেভারিট? বুকমার্ক? নাকি ৫-স্টার রেটিং দেওয়া?
একটি হার্ট (❤️) আইকনের মানে কী? লাইক দেওয়া? নাকি পছন্দের তালিকায় (Wishlist) যোগ করা?
একেক অ্যাপে এর মানে একেক রকম, যা ব্যবহারকারীকে ঠিক সেই 'হরিণ মার্কা' বাসের সামনে দাঁড়ানো যাত্রীর মতো দ্বিধায় ফেলে দেয়।
Golden Rule: Icons + Labels = Love ❤️
তাহলে এই সমস্যার সবচেয়ে সহজ, কার্যকর এবং সুন্দর সমাধান কী? সমাধান হলো: আইকনের সাথে তার কাজটি কী, তা টেক্সট বা লেবেল হিসেবে লিখে দিন।
উদাহরণ:
❌ শুধু একটি ⚙️ আইকন (এটা কিসের সেটিংস? প্রোফাইল? অ্যাপ? বোঝা কঠিন)
✅ ⚙️ সেটিংস (Settings) - এটা পানির মতো পরিষ্কার এবং সহজবোধ্য।
এতে ডিজাইনের সৌন্দর্যও রক্ষা পেল, আবার ব্যবহারকারীর বুঝতেও কোনো অসুবিধা হলো না। এটা হলো বাসের গায়ের 'গোলাপ ফুল' চিহ্ন এবং হেল্পারের "প্রেস ক্লাব, গুলিস্তান" চিৎকার—দুটোরই সুবিধা একসাথে পাওয়ার মতো!
শেষ কথা
আইকন হলো ডিজাইনের মসলার মতো। পরিমাণ মতো সঠিক মসলা দিলে খাবারের স্বাদ বহুগুণে বেড়ে যায়, কিন্তু বেশি বা ভুল মসলা দিলে পুরো খাবারটাই নষ্ট হয়ে যেতে পারে। একটি অ্যাপ বা ওয়েবসাইটের মূল উপাদান হলো তার কনটেন্ট বা লেখা, আইকন হলো সাহায্যকারী মাত্র।
তাই, পরেরবার আপনার ডিজাইনকে 'ক্লিন' করার লোভে সব লেখা মুছে ফেলে শুধু আইকন বসানোর আগে নিজেকে একবার প্রশ্ন করবেন:
"আমি কি আমার ব্যবহারকারীকে বাসের হেল্পারের মতো পরিষ্কারভাবে পথ দেখিয়ে সাহায্য করছি, নাকি বাসের গায়ের দুর্বোধ্য চিহ্ন দেখিয়ে তাকে কনফিউশনের রাস্তায় একা ছেড়ে দিচ্ছি?"
এই 'ক্লিন' ডিজাইন করার তীব্র আকাঙ্ক্ষা থেকেই জন্ম নিয়েছে একটি জনপ্রিয় মিথ: আইকন ব্যবহার করলেই ওয়েবসাইটের বা অ্যাপের ইউজেবিলিটি (ব্যবহারযোগ্যতা) বেড়ে যায়।
কিন্তু সত্যিটা হলো, ভুল জায়গায় বা ভুল আইকন ব্যবহার করাটা উপকারের চেয়ে অপকারই বেশি করে। একটি দুর্বোধ্য আইকন ব্যবহারকারীর মনে বিরক্তি আর কনফিউশন তৈরি করা ছাড়া আর কিছুই করতে পারে না।
এই মিথটা ভাঙতে আজ আমরা কোনো অ্যাপের স্ক্রিনশট দেখব না। আমরা আজ ঢাকার রাস্তায় লোকাল বাসের পেছনে দৌড়াবো!
গল্প: লোকাল বাসের গায়ে আঁকা চিহ্ন
ঢাকার লোকাল বাসগুলোর দিকে ভালো করে খেয়াল করেছেন? প্রতিটি কোম্পানির বাসের গায়ে আলাদা আলাদা চিহ্ন বা প্রতীক আঁকা থাকে—কোনোটায় দেখবেন গোলাপ ফুল, কোনোটায় হরিণ, কোনোটায় হয়তো একটা তারা। তত্ত্বীয়ভাবে, এই চিহ্নগুলো দিয়ে বাসের নির্দিষ্ট রুট চেনার কথা।
বাস্তবতার মুখোমুখি: এখন নিজেকে সৎভাবে প্রশ্ন করুন, আপনি কি আসলেই 'হরিণ মার্কা' বাসটা দেখেই একশ ভাগ নিশ্চিত হয়ে বলে দিতে পারেন যে এটা মতিঝিল হয়ে সদরঘাট যাবে? কিংবা 'তারা মার্কা' বাসটা কি আসলেই ফার্মগেট যাবে?
ঢাকার ৯৯% সাধারণ যাত্রীর জন্য উত্তরটি হলো একটি বড় 'না'।
তাহলে আসল সমাধানটা কী? আমরা তাহলে বাস চিনি কীভাবে? আমরা মূলত দুটি জিনিসের উপর নির্ভর করি:
বাসের হেল্পারের উদাত্ত গলার চিৎকার: "এই যে গুলিস্তান, প্রেস ক্লাব, শাহবাগ, ডাইরেক্ট!"
বাসের সামনে বা পাশে বড় করে লেখা গন্তব্যের নাম বা রুট নম্বর।
অর্থাৎ, দিনশেষে আমরা স্পষ্ট টেক্সট বা লেখার উপরই আস্থা রাখি, দুর্বোধ্য চিহ্ন বা আইকনের উপর নয়। বাসের গায়ের এই চিহ্নগুলো হলো ঠিক সেই সব অ্যাপের আইকনের মতো, যেগুলো দেখতে হয়তো সুন্দর, কিন্তু ব্যবহারকারীকে কোনো স্পষ্ট বার্তা দিতে পুরোপুরি ব্যর্থ।
তাহলে কি সব আইকনই খারাপ?
না, অবশ্যই সব আইকন খারাপ নয়। কিছু আইকন বিশ্বজুড়ে এতটাই প্রচলিত যে সেগুলোকে আমরা সর্বজনীন বা Universal Icons বলতে পারি। এদের অর্থ বোঝার জন্য আলাদা করে কোনো লেখার প্রয়োজন হয় না। যেমন:
বাড়ি (Home) আইকন
সার্চ (Search) করার জন্য আতস কাঁচের আইকন
প্রিন্ট (Print) করার জন্য প্রিন্টারের আইকন
শপিং কার্ট (Shopping Cart) এর আইকন
এগুলো অনেকটা ট্র্যাফিক সিগন্যালের লাল-সবুজ বাতির মতো, যার অর্থ পৃথিবীর সবাই জানে।
বিপদের নাম 'অস্পষ্ট আইকন'
সমস্যাটা হয় তখনই, যখন ডিজাইনাররা 'ক্রিয়েটিভ' হতে গিয়ে নতুন বা অস্পষ্ট আইকন ব্যবহার করেন। যেমন:
একটি স্টার (⭐) আইকনের মানে কী? ফেভারিট? বুকমার্ক? নাকি ৫-স্টার রেটিং দেওয়া?
একটি হার্ট (❤️) আইকনের মানে কী? লাইক দেওয়া? নাকি পছন্দের তালিকায় (Wishlist) যোগ করা?
একেক অ্যাপে এর মানে একেক রকম, যা ব্যবহারকারীকে ঠিক সেই 'হরিণ মার্কা' বাসের সামনে দাঁড়ানো যাত্রীর মতো দ্বিধায় ফেলে দেয়।
Golden Rule: Icons + Labels = Love ❤️
তাহলে এই সমস্যার সবচেয়ে সহজ, কার্যকর এবং সুন্দর সমাধান কী? সমাধান হলো: আইকনের সাথে তার কাজটি কী, তা টেক্সট বা লেবেল হিসেবে লিখে দিন।
উদাহরণ:
❌ শুধু একটি ⚙️ আইকন (এটা কিসের সেটিংস? প্রোফাইল? অ্যাপ? বোঝা কঠিন)
✅ ⚙️ সেটিংস (Settings) - এটা পানির মতো পরিষ্কার এবং সহজবোধ্য।
এতে ডিজাইনের সৌন্দর্যও রক্ষা পেল, আবার ব্যবহারকারীর বুঝতেও কোনো অসুবিধা হলো না। এটা হলো বাসের গায়ের 'গোলাপ ফুল' চিহ্ন এবং হেল্পারের "প্রেস ক্লাব, গুলিস্তান" চিৎকার—দুটোরই সুবিধা একসাথে পাওয়ার মতো!
শেষ কথা
আইকন হলো ডিজাইনের মসলার মতো। পরিমাণ মতো সঠিক মসলা দিলে খাবারের স্বাদ বহুগুণে বেড়ে যায়, কিন্তু বেশি বা ভুল মসলা দিলে পুরো খাবারটাই নষ্ট হয়ে যেতে পারে। একটি অ্যাপ বা ওয়েবসাইটের মূল উপাদান হলো তার কনটেন্ট বা লেখা, আইকন হলো সাহায্যকারী মাত্র।
তাই, পরেরবার আপনার ডিজাইনকে 'ক্লিন' করার লোভে সব লেখা মুছে ফেলে শুধু আইকন বসানোর আগে নিজেকে একবার প্রশ্ন করবেন:
"আমি কি আমার ব্যবহারকারীকে বাসের হেল্পারের মতো পরিষ্কারভাবে পথ দেখিয়ে সাহায্য করছি, নাকি বাসের গায়ের দুর্বোধ্য চিহ্ন দেখিয়ে তাকে কনফিউশনের রাস্তায় একা ছেড়ে দিচ্ছি?"
এইসব লেখা নিয়ে কি একটা নিউজলেটার চালু করা উচিত?
মেইলে জানাতে পারেন, ভালো সাড়া পেলে শুরু করতে পারি!