পরিচিতি

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

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

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

‘’Our brain is always trying to fill the gaps’’

কাছাকাছি স্থাপিত বস্তুগুলোকে স্বয়ংক্রিয়ভাবে একটি গোষ্ঠী হিসেবে বোঝা হয়। তাদের দূরে রাখলে এটি এমন ইঙ্গিত দেয় যে তারা সম্পূর্ণ পৃথক সত্তা।

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

এটি এমন একটি গুরুত্বপূর্ণ নিয়ম যা সরাসরি ইন্টারফেসের ব্যবহারযোগ্যতাকে প্রভাবিত করে। কোনো প্রোডাক্ট যদি এই নিয়ম মেনে না চলে (এবং এর পরিবর্তে এলোমেলো দূরত্ব ব্যবহার করে), তবে সেটি বিশৃঙ্খল হবে এবং বুঝতে অনেক কঠিন হবে।

“সব ভিজ্যুয়ালি অনুরূপ বস্তু একটি গোষ্ঠীর অংশ হিসেবে বিবেচিত হয়। যেসব উপাদান ভিজ্যুয়ালি আলাদা, আমাদের মস্তিষ্ক সেগুলোকে পৃথক বস্তু হিসেবে দেখে।

কিন্তু আমরা সাদৃশ্য বলতে কী বুঝি? এটি হলো সব ধরনের নির্ধারক বৈশিষ্ট্য, যেমন রঙ, আকার, মাপ, টেক্সচার, বা স্থানে অবস্থান। এই বৈশিষ্ট্যগুলোর কিছু আমরা অন্যগুলোর চেয়ে দ্রুত প্রক্রিয়া করি। সবচেয়ে শক্তিশালী সাদৃশ্য হয় রঙের সাথে, তারপর মাপ ও আকারের সাথে।

মনে রাখবেন, একটি বস্তু যদি সবকিছুর থেকে সম্পূর্ণ ভিন্ন হয় (একটি ব্যতিক্রম), তবে সেটি কোনো বিদ্যমান গোষ্ঠীর সাথে মানানসই হবে না – ফলে এটি খুব সহজেই চোখে পড়বে। আপনি এই ভিন্নতার প্রভাবটি ব্যবহার করে আপনার কল টু অ্যাকশনগুলোকে আরও দৃশ্যমান করতে পারেন।

একটি গোষ্ঠীভুক্ত বস্তুসমূহ প্রাকৃতিকভাবে একটি পরিচিত আকৃতি গঠন করতে পারে। সেই বস্তুর মধ্যে থাকা সব ফাঁকা জায়গা আমরা অবচেতনে পূরণ করি। এর অর্থ হলো আমাদের মস্তিষ্ক অসম্পূর্ণ আকৃতিগুলোকে আমাদের জন্য সম্পূর্ণ করতে গিয়ে অনুপস্থিত অংশগুলো যোগ করে দেয়।

ক্লোজারের নিয়মটি বিভিন্নভাবে ব্যবহার করা যেতে পারে। একটি উদাহরণ হলো বিন্দুযুক্ত বা ড্যাশযুক্ত তীর চিহ্ন। আমাদের মস্তিষ্ক ফাঁকা জায়গাগুলো পূরণ করে বিন্দুগুলোকে সংযুক্ত করে। আমরা এই ফলাফলকে বিন্দু বা ড্যাশের একটি গোষ্ঠী হিসেবে নয়, বরং একটি সম্পূর্ণ রেখা হিসেবে দেখি।

এটি আইকনের মধ্যে আরও বিমূর্ত আকৃতি শনাক্ত করতে এবং তাদের অর্থ দিতে সহায়তা করে। বেশিরভাগ আইকন ইচ্ছাকৃতভাবে সহজ করা হয় যাতে আমাদের তথ্যের ভারে আচ্ছন্ন না করে, এবং আমাদের মস্তিষ্ক ফাঁকা জায়গাগুলো পূরণ করে।

ফাঁকা জায়গা অবচেতনভাবে সংযুক্ত করার আরও একটি চমৎকার উদাহরণ হলো WWF লোগোর পাণ্ডা আকৃতি বা IBM লোগো, যেখানে ড্যাশযুক্ত রেখাগুলো অক্ষর তৈরি করে।

সম্মিলিতভাবে সারিবদ্ধ বস্তুগুলোকে আমরা সংযুক্ত হিসেবে বুঝি, তাদের মধ্যে যেকোনো ফাঁকা জায়গা থাকলেও। সম্মতি থাকলেই সেখানে শৃঙ্খলা থাকে, এবং আমরা এটি খুব দ্রুত দেখে এবং বুঝতে পারি।

আমাদের মস্তিষ্ক প্রতিসাম্য পছন্দ করে!  সমানভাবে সাজানো সব বস্তু দেখতে বেশি সুন্দর এবং আনন্দদায়ক মনে হয়। কেউ কেউ বলেন প্রতিসাম্য বোকার সৌন্দর্যবোধ, এবং এটি হয়তো প্রিন্ট ও গ্রাফিক ডিজাইনে সত্যি, কিন্তু ইউআই-এর ক্ষেত্রে তা নয়। UI-তে প্রতিসাম্যই রাজা।

আবার সান্নিধ্যের নিয়মের মতোই, কোনো বস্তুকে অসমমিতভাবে স্থাপন করলে তা তাৎক্ষণিকভাবে চোখে পড়বে। আরও জানতে