অ্যাফোর্ডেন্স ও সিগনিফায়ার
এই পাঠে যা শিখবেন
- অ্যাফোর্ডেন্স ও সিগনিফায়ারের সংজ্ঞা এবং নরম্যানের এই দুইয়ের মধ্যে পার্থক্য
- বাস্তব ভৌত ও ডিজিটাল উদাহরণে অ্যাফোর্ডেন্স/সিগনিফায়ার মিসম্যাচ শনাক্ত করা ("নরম্যান ডোর", স্ক্রলবার, বাটন)
- ভৌত (real) অ্যাফোর্ডেন্স ও পারসিভড (perceived) অ্যাফোর্ডেন্সের মধ্যে পার্থক্য — বিশেষত GUI ডিজাইনে
- এই ফ্রেমওয়ার্ক ব্যবহার করে যেকোনো ইন্টারফেসের সমালোচনামূলক মূল্যায়ন করা
১ · অ্যাফোর্ডেন্স কী — সম্ভাব্য অ্যাকশন
অ্যাফোর্ডেন্সAffordanceকোনো বস্তুর ভৌত বৈশিষ্ট্যের কারণে তার সাথে কোন কোন অ্যাকশন সম্ভব — এই সম্ভাবনাটাই অ্যাফোর্ডেন্স, বস্তুটি নিজে বা তার লেবেল নয়। ধারণাটি এসেছে পারসেপচুয়াল সাইকোলজিস্ট জেমস জে. গিবসনের কাছ থেকে, এবং ডোনাল্ড নরম্যান একে ডিজাইনের জন্য অভিযোজিত করেন তাঁর The Design of Everyday Things বইয়ে। একটি চেয়ার বসার জন্য "আফোর্ড" করে, একটি সমতল প্লেট ঠেলার জন্য "আফোর্ড" করে, একটি হাতল ধরে টানা বা ঝুলে থাকার জন্য "আফোর্ড" করে, একটি স্ক্রলবারের ট্র্যাক ড্র্যাগ করার জন্য "আফোর্ড" করে। লক্ষ্যণীয় — অ্যাফোর্ডেন্স ব্যবহারকারী দেখুক বা না দেখুক, বুঝুক বা না বুঝুক, বস্তুগতভাবে বিদ্যমান থাকে; এটি বস্তুর একটি প্রকৃত ভৌত সম্পর্ক, নিছক ধারণা নয়।
২ · সিগনিফায়ার — অ্যাফোর্ডেন্স কীভাবে বোঝানো হয়
সিগনিফায়ারSignifierএকটি উপলব্ধিযোগ্য সংকেত যা ব্যবহারকারীকে জানায় কোন অ্যাকশন সম্ভব এবং কোথায়/কীভাবে সেটি করতে হবে — অ্যাফোর্ডেন্স নিজে নয়, বরং তার প্রতি ইঙ্গিত। হলো সেই দৃশ্যমান বা উপলব্ধিযোগ্য সংকেত যা একজন ব্যবহারকারীকে জানায় কী অ্যাকশন সম্ভব এবং সেটা কোথায় ঘটাতে হবে। নরম্যান নিজেই পরে স্বীকার করেছিলেন — তাঁর প্রথম বইয়ে "অ্যাফোর্ডেন্স" শব্দটি প্রায়ই আসলে "সিগনিফায়ার"-কে বোঝাতে ব্যবহৃত হয়েছিল, এবং পরবর্তী সংস্করণে তিনি স্পষ্টভাবে দুটোকে আলাদা করেন।
ডিজাইনের ইতিহাসে সবচেয়ে বহুল-উদ্ধৃত কেস স্টাডি — যাকে ডিজাইন সম্প্রদায়ে সরাসরি "নরম্যান ডোর" বলা হয়: একটি দরজায় একটি ফ্ল্যাট হাতল লাগানো আছে, যা তার আকৃতির কারণে "ধরে টানুন" — এই সিগনাল দেয়। কিন্তু দরজাটি যদি প্রকৃতপক্ষে ঠেলে খুলতে হয়, তাহলে ব্যবহারকারী প্রতিবারই ভুল করে টানার চেষ্টা করবে — কারণ হাতলের সিগনিফায়ার একটি অ্যাফোর্ডেন্সের ইঙ্গিত দিচ্ছে যা আসলে বিদ্যমান নেই। এই সমস্যার "সমাধান" হিসেবে দরজায় "PUSH" লেখা স্টিকার লাগানো একটি প্যাচ মাত্র, প্রকৃত ফিক্স নয় — প্রকৃত ফিক্স হলো এমন একটি ফ্ল্যাট প্লেট লাগানো যার আকৃতিই বলে দেয় "ঠেলুন", আলাদা কোনো লেবেল ছাড়াই।
হাতল = টানার সিগনিফায়ার। ফ্ল্যাট প্লেট = ঠেলার সিগনিফায়ার। সঠিক পছন্দ হলে কোনো লেবেলের প্রয়োজনই হয় না।
একটি সরু, ছায়াযুক্ত ট্র্যাক ও একটি হাইলাইটেড থাম্ব দৃশ্যত ইঙ্গিত দেয় — "এখানে ড্র্যাগ করা যায়", নিজে থেকেই কোনো নির্দেশনা ছাড়াই।
একটি বাটনের হালকা উত্থিত, ছায়াযুক্ত চেহারা "এটি চাপা যায়" — এই পারসিভড অ্যাফোর্ডেন্স তৈরি করে, যদিও পিক্সেলে আক্ষরিক কোনো উচ্চতা নেই।
৩ · ফিজিক্যাল বনাম পারসিভড অ্যাফোর্ডেন্স — ডিজিটাল ইন্টারফেসে
একটি ফিজিক্যাল বস্তুর অ্যাফোর্ডেন্স তার প্রকৃত জ্যামিতি থেকে আসে — একটি হাতল সত্যিই টানা সম্ভব, ভৌতভাবেই। কিন্তু একটি স্ক্রিনের পিক্সেলে "ক্লিক করা সম্ভব" — এটি কোনো আক্ষরিক ভৌত অ্যাফোর্ডেন্স নয়, কারণ পিক্সেল নিজে কোনো ভৌত ক্রিয়া "আফোর্ড" করে না। নরম্যান পরে এই পার্থক্য স্পষ্ট করতে পারসিভড অ্যাফোর্ডেন্স (perceived affordance) শব্দটি প্রবর্তন করেন — GUI-তে যা গুরুত্বপূর্ণ তা হলো ব্যবহারকারী কী *মনে করে* সম্ভব, এবং সেই ধারণা সম্পূর্ণভাবে তৈরি হয় সিগনিফায়ার দিয়ে: শ্যাডো, রঙ, বেভেল, কার্সর হোভারে বদলে যাওয়া, আন্ডারলাইন করা নীল টেক্সট (যা "এটি একটি লিংক" বোঝায়)।
এই কারণেই ডিজিটাল UI ডিজাইনে অ্যাফোর্ডেন্স ও সিগনিফায়ার প্রায় একই ডিজাইন সমস্যায় মিশে যায় — ডিজাইনারের কাজ হলো এমন সিগনিফায়ার তৈরি করা যা ব্যবহারকারীর মনে ঠিক সেই অ্যাফোর্ডেন্সের ধারণা তৈরি করে যা আসলে ইন্টারফেসে বাস্তবায়িত।
অ্যাফোর্ডেন্স = কী সম্ভব। সিগনিফায়ার = সেই সম্ভাবনাটি কীভাবে জানানো হয়। দুটো মিলে গেলে ইন্টারফেস স্বজ্ঞাত মনে হয় — ব্যবহারকারীর কোনো নির্দেশনা পড়তে হয় না। দুটো না মিললে ("নরম্যান ডোর"-এর মতো), হয় ব্যবহারকারী ভুল করে, নয়তো ডিজাইনার একটি লেবেল/নির্দেশনা যোগ করে প্যাচ দিতে বাধ্য হয় — যা মূল সমস্যার সমাধান নয়।
৪ · মিসম্যাচ হলে কী হয়
দুই ধরনের মিসম্যাচ ঘটতে পারে, দুটোই ভিন্নভাবে ক্ষতিকর:
- সিগনিফায়ার আছে, অ্যাফোর্ডেন্স নেই: ব্যবহারকারী ভুল অ্যাকশন চেষ্টা করে, ভুল করে, বিরক্ত হয় (নরম্যান ডোর, অথবা একটি ধূসর/অস্পষ্ট কিন্তু আসলে ক্লিকযোগ্য নয় এমন টেক্সট যা লিংকের মতো দেখতে)।
- অ্যাফোর্ডেন্স আছে, সিগনিফায়ার নেই: ফিচারটি আবিষ্কারযোগ্য (discoverable) থাকে না — যেমন একটি হিডেন সোয়াইপ জেসচার যার কোনো দৃশ্যমান ইঙ্গিত নেই, অথবা শুধু হোভার করলে দেখা যায় এমন একটি মেনু যা টাচস্ক্রিনে কখনোই আবিষ্কৃত হয় না (M9/M41-এ টাচ ইন্টারঅ্যাকশন নিয়ে বিস্তারিত)।
ভালো ইন্টারফেস ডিজাইনের লক্ষ্য তাই সোজা: প্রতিটি প্রকৃত অ্যাফোর্ডেন্সের জন্য স্পষ্ট, দ্ব্যর্থহীন সিগনিফায়ার থাকা, এবং যেসব অ্যাকশন সম্ভব নয় তার জন্য বিভ্রান্তিকর সিগনিফায়ার এড়ানো (M4-এ নীলসেনের হিউরিস্টিক্সে "recognition rather than recall" নীতির সাথে এই ধারণা সরাসরি যুক্ত)।
ভাবনার প্রশ্ন
প্রতিটি প্রশ্ন নিজে কিছুক্ষণ ভাবুন — তারপর "→ উত্তর" চাপুন।
প্র ০১ একটি মোবাইল অ্যাপে "তিনটি ডট" (⋮) আইকন প্রায়ই "আরও অপশন" মেনু খোলে। এটি কি একটি অ্যাফোর্ডেন্স, নাকি একটি সিগনিফায়ার? ব্যাখ্যা করুন।
এটি একটি সিগনিফায়ার। আইকনটির নিজস্ব কোনো ভৌত অ্যাফোর্ডেন্স নেই — এটি শুধু একটি শেখা সংকেত (learned convention) যা ব্যবহারকারীকে জানায় "এখানে ট্যাপ করলে আরও অপশন দেখা যাবে"। এই সিগনিফায়ারটি কাজ করে কারণ এটি এখন এত ব্যাপকভাবে ব্যবহৃত যে একটি সাংস্কৃতিক কনভেনশনে পরিণত হয়েছে (M12/L14-তে কালচারাল কনস্ট্রেইন্ট নিয়ে আরও আলোচনা হবে) — একজন প্রথমবার দেখা ব্যবহারকারী নিজে থেকে এটি অনুমান নাও করতে পারে।
প্র ০২ একটি ওয়েবসাইটে একটি টেক্সট ধূসর রঙে দেখানো হয়েছে, যা সাধারণত "ডিজেবলড/ক্লিকযোগ্য নয়" বোঝায় — কিন্তু আসলে সেটি ক্লিকযোগ্য একটি লিংক। এখানে কী সমস্যা হচ্ছে?
এটি একটি সিগনিফায়ার-অ্যাফোর্ডেন্স মিসম্যাচ — ধূসর রঙ একটি সিগনিফায়ার যা প্রচলিতভাবে "এই অ্যাকশন সম্ভব নয়" বোঝায়, কিন্তু প্রকৃত অ্যাফোর্ডেন্স (ক্লিক করা সম্ভব) বিদ্যমান। ফলাফল: ব্যবহারকারী লিংকটি এড়িয়ে যাবে, ভাববে এটি নিষ্ক্রিয়, এবং ফিচারটি কার্যত আবিষ্কারযোগ্য থাকবে না — এটি "অ্যাফোর্ডেন্স আছে, সিগনিফায়ার নেই" ধরনের সমস্যার একটি রূপ, যেখানে ভুল সিগনিফায়ার সঠিক সিগনিফায়ারের অভাবের মতোই ক্ষতিকর।
প্র ০৩ একজন ডিজাইনার একটি "নরম্যান ডোর" সমস্যা সমাধান করতে দরজায় একটি "PUSH" লেবেল স্টিকার লাগালেন। এটি কি একটি ভালো সমাধান? কেন বা কেন নয়?
না, এটি একটি প্যাচ, প্রকৃত ফিক্স নয়। লেবেলটি সমস্যার মূল কারণ — ভুল সিগনিফায়ার (হাতল) — দূর করে না, শুধু একটি অতিরিক্ত নির্দেশনা যোগ করে যা ব্যবহারকারীকে পড়তে হবে ও মনে রাখতে হবে। প্রকৃত সমাধান হলো হাতলটি বদলে এমন একটি ফ্ল্যাট প্লেট বসানো যার আকৃতিই "ঠেলুন" বোঝায় — তাহলে কোনো লেবেলের প্রয়োজনই হয় না, এবং ডিজাইনটি নিজেই স্বজ্ঞাতভাবে সঠিক আচরণের দিকে ব্যবহারকারীকে পরিচালিত করে।
অনুশীলন
-
প্রয়োগ করুন: আপনার ফোনের হোম স্ক্রিন বা প্রতিদিন ব্যবহার করা কোনো অ্যাপে অন্তত ৩টি
অ্যাফোর্ডেন্স/সিগনিফায়ার মিসম্যাচ খুঁজে বের করুন (হয় সিগনিফায়ার আছে কিন্তু অ্যাফোর্ডেন্স নেই, নয়তো
উল্টো) এবং প্রতিটির জন্য একটি নির্দিষ্ট ফিক্স প্রস্তাব করুন।
একটি বাস্তবসম্মত উদাহরণসেট: (১) একটি "স্ট্যাটিক-দেখতে" টগল সুইচ আইকন যা আসলে একটি লেবেল মাত্র, ট্যাপযোগ্য নয় — ফিক্স: হয় এটিকে সত্যিই ইন্টারঅ্যাকটিভ করুন, নয়তো এর ছায়া/রঙ সরিয়ে দিন যাতে টগলের মতো না দেখায়। (২) একটি "সোয়াইপ করে ডিলিট করুন" জেসচার যার কোনো দৃশ্যমান সিগনিফায়ার নেই — ফিক্স: একটি সূক্ষ্ম আইকন বা কিনারার হালকা ছায়া যোগ করুন যা ইঙ্গিত দেয় "এখানে আরও কিছু আছে"। (৩) একটি ফ্ল্যাট, বর্ডারহীন টেক্সট বাটন যা ক্লিকযোগ্য কিন্তু সাধারণ প্যারাগ্রাফ টেক্সটের মতো দেখতে — ফিক্স: একটি সামান্য রঙ পার্থক্য বা আন্ডারলাইন যোগ করে এটিকে স্পষ্টভাবে "এটি একটি অ্যাকশন" হিসেবে সিগনিফাই করুন। প্রতিটি ফিক্সের মূল নীতি একই: সিগনিফায়ার যেন প্রকৃত অ্যাফোর্ডেন্সের সাথে হুবহু মিলে যায়, কম বা বেশি প্রতিশ্রুতি না দেয়।
-
বিশ্লেষণ করুন: একটি ফিজিক্যাল উদাহরণ ভাবুন — একটি রিমোট কন্ট্রোল, একটি লিফট প্যানেল,
অথবা একটি গাড়ির ড্যাশবোর্ড। এতে কি এমন কোনো বাটন/কন্ট্রোল আছে যার সিগনিফায়ার (আকৃতি, রঙ, অবস্থান)
তার প্রকৃত ফাংশনের সাথে মেলে না? আপনার পর্যবেক্ষণ লিখুন।
একটি সাধারণ বাস্তব উদাহরণ: বহু লিফটে "দরজা খোলা রাখুন" ও "দরজা বন্ধ করুন" বাটন দুটি প্রায় একই আকৃতির, একই আকারের, পাশাপাশি বসানো থাকে — কোনো শক্তিশালী ভিজ্যুয়াল সিগনিফায়ার (রঙ, আকৃতির পার্থক্য, আইকনের স্পষ্টতা) দুটোকে আলাদা করে না, ফলে তাড়াহুড়ায় ভুল বাটনে চাপ পড়ে। একটি ভালো ফিক্স হবে দুটি বাটনের আইকনকে আরও দৃশ্যত বিপরীতমুখী করা (যেমন তীরচিহ্নের দিক স্পষ্টভাবে ভিন্ন করা) এবং সম্ভব হলে রঙ বা আকারে পার্থক্য আনা — এটি ঠিক সেই নীতি যা দরজার হাতল বনাম পুশ-প্লেট উদাহরণেও প্রযোজ্য।
আরও পড়ুন · ABCL TECH-এ আপনার পরবর্তী পদক্ষেপ
- কোর্সের সম্পূর্ণ সিলেবাস দেখুন ৫৭টি পাঠ কগনিটিভ সাইকোলজি, ইন্টারঅ্যাকশন ডিজাইন, ইউজেবিলিটি হিউরিস্টিক্স, ইউজার রিসার্চ, প্রোটোটাইপিং, ইভালুয়েশন মেথড, ভিজ্যুয়াল ডিজাইন, অ্যাক্সেসিবিলিটি ও ক্যাপস্টোন — সম্পূর্ণ মডিউল ম্যাপ এখানে।
- Human-Centered AI কোর্স সহোদর কোর্স ট্রাস্ট ক্যালিব্রেশন, এক্সপ্লেইনেবিলিটি ও হিউম্যান-ইন-দ্য-লুপ ডিজাইনের গভীর কভারেজ — এই কোর্স সেই একই ভিত্তির উপর সাধারণ ইন্টারঅ্যাকশন ডিজাইনের দিকটি যোগ করে।
- সব Courses দেখুন ABCL TECH C, C++, Python, Java, JavaScript, DSA, Machine Learning, Deep Learning, System Design, Cybersecurity, Cloud Computing & DevOps, এবং আরও অনেক কোর্স — সব এক জায়গায়।