পাঠ ০৮ · ৫৭-এর মধ্যে · মডিউল ২
Home / Courses / Human-Computer Interaction / গেস্টাল্ট প্রিন্সিপল

ভিজ্যুয়াল পারসেপশন — UI-এর জন্য গেস্টাল্ট প্রিন্সিপল

Visual perception — Gestalt principles for UI
৮ মিনিট পড়া মধ্যম · Intermediate সম্পূর্ণ বাংলায়

এই পাঠে যা শিখবেন

  • গেস্টাল্ট সাইকোলজির মূল ধারণা — "সমগ্র তার অংশগুলোর যোগফলের চেয়ে ভিন্ন"
  • প্রক্সিমিটি (নৈকট্য) — কাছাকাছি উপাদান একসাথে গোষ্ঠীবদ্ধ মনে হয়
  • সিমিলারিটি (সাদৃশ্য) — একই রকম দেখতে উপাদান সম্পর্কিত মনে হয়
  • ক্লোজার (সমাপ্তি) ও কন্টিনিউটি (ধারাবাহিকতা) — মস্তিষ্ক কীভাবে অসম্পূর্ণ প্যাটার্ন পূরণ করে
  • ফিগার-গ্রাউন্ড — কীভাবে চোখ "বিষয়বস্তু" ও "পটভূমি" আলাদা করে

১ · গেস্টাল্ট সাইকোলজি — সমগ্র অংশের যোগফলের চেয়ে ভিন্ন

গেস্টাল্ট সাইকোলজি (জার্মান শব্দ "Gestalt" মানে "আকার" বা "গঠন") ১৯২০-এর দশকে ম্যাক্স ভার্টহাইমার, কুর্ট কফকা ও ভলফগ্যাং কোহলারের কাজের মাধ্যমে প্রতিষ্ঠিত একটি সাইকোলজি স্কুল, যার কেন্দ্রীয় দাবি — মানুষের পারসেপশন বিচ্ছিন্ন উপাদানকে আলাদাভাবে প্রসেস করে না, বরং স্বয়ংক্রিয়ভাবে সেগুলোকে অর্থবহ গোষ্ঠী, প্যাটার্ন ও আকারে "সংগঠিত" করে দেখে। এই স্বয়ংক্রিয় সংগঠন এতটাই শক্তিশালী যে এটি প্রায়ই সচেতন নিয়ন্ত্রণের বাইরে ঘটে — আপনি চাইলেও একটি সু-ডিজাইন করা গ্রুপকে "আলাদা আলাদা বিন্দু" হিসেবে দেখা কঠিন। HCI-এর জন্য এর ব্যবহারিক তাৎপর্য বিশাল: একজন ডিজাইনার এই স্বয়ংক্রিয় সংগঠন প্রক্রিয়াকে ব্যবহার করে স্ক্রিনের উপাদানগুলোকে সঠিকভাবে গোষ্ঠীবদ্ধ দেখাতে পারেন — কোনো অতিরিক্ত টেক্সট বা ব্যাখ্যা ছাড়াই।

২ · প্রক্সিমিটি ও সিমিলারিটি — গোষ্ঠীকরণের দুটি প্রধান সংকেত

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

এই দুটি নীতি প্রায়ই একসাথে কাজ করে, এবং কখনো কখনো একে অপরের বিরুদ্ধেও যেতে পারে — যেমন যদি দুটি ভিন্ন ফাংশনের বাটন কাছাকাছি রাখা হয় (প্রক্সিমিটি বলে "এরা সম্পর্কিত") কিন্তু ভিন্ন রঙে রঙিন করা হয় (সিমিলারিটি বলে "এরা আলাদা"), ব্যবহারকারী একটি মিশ্র, দ্বিধাগ্রস্ত সংকেত পায়। ভালো ডিজাইন এই দুটি সংকেতকে সবসময় একই দিকে নির্দেশ করায়।

৩ · ক্লোজার ও কন্টিনিউটি — মস্তিষ্ক ফাঁক পূরণ করে

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

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

৪ · ফিগার-গ্রাউন্ড — কী "সামনে" আর কী "পেছনে"

ফিগার-গ্রাউন্ড নীতি বর্ণনা করে চোখ কীভাবে একটি দৃশ্যকে "ফিগার" (মনোযোগের বিষয়বস্তু) ও "গ্রাউন্ড" (পটভূমি) — এই দুই ভাগে ভাগ করে দেখে। একটি মডাল ডায়ালগ যখন পেছনের কন্টেন্ট অন্ধকার/ঝাপসা করে (dim/blur overlay) সামনে আসে, এটি সরাসরি ফিগার-গ্রাউন্ড নীতি ব্যবহার করছে — ব্যবহারকারীর চোখ তাৎক্ষণিকভাবে বুঝে যায় ডায়ালগটিই এখন "ফিগার" (মনোযোগ দেওয়ার বিষয়), আর বাকি সব "গ্রাউন্ড" (সাময়িকভাবে অপ্রাসঙ্গিক)। যখন এই বৈসাদৃশ্য দুর্বল থাকে (যেমন একটি ডায়ালগ যার পটভূমি প্রায় একই উজ্জ্বলতার), ব্যবহারকারীর চোখ কোথায় মনোযোগ দেবে তা নিয়ে দ্বিধায় পড়ে — এটি M5/L05-এ আলোচিত অ্যাটেনশন-ফিল্টারিং সমস্যার সরাসরি একটি ভিজ্যুয়াল রূপ।

মূল কথা · Key takeaway

গেস্টাল্ট নীতিগুলো ঐচ্ছিক নয় — মানুষের চোখ ও মস্তিষ্ক এগুলো সবসময়, স্বয়ংক্রিয়ভাবে প্রয়োগ করে, ডিজাইনার চান বা না চান। তাই প্রশ্নটা কখনো "গেস্টাল্ট নীতি ব্যবহার করব কিনা" নয় — বরং "আমার লেআউট কি এই স্বয়ংক্রিয় গোষ্ঠীকরণের সাথে সামঞ্জস্যপূর্ণ, নাকি এর বিরুদ্ধে লড়ছে?" M8/L35-এ এই নীতিগুলো লেআউট, টাইপোগ্রাফি ও রঙের বাস্তব সিদ্ধান্তে আরও গভীরে প্রয়োগ করা হবে।

ভাবনার প্রশ্ন

প্রতিটি প্রশ্ন নিজে কিছুক্ষণ ভাবুন — তারপর "→ উত্তর" চাপুন।

প্র ০১ একটি সেটিংস পেজে ২০টি অপশন কোনো ভাগ ছাড়াই একটি সমান-দূরত্বের সরল তালিকায় দেখানো আছে। কোন গেস্টাল্ট নীতি প্রয়োগ করলে এটি সহজে স্ক্যান করার মতো হয়ে উঠবে, এবং কীভাবে?

প্রক্সিমিটি প্রয়োগ করে সম্পর্কিত অপশনগুলোকে (যেমন "নোটিফিকেশন সেটিংস", "প্রাইভেসি সেটিংস", "অ্যাকাউন্ট সেটিংস") ছোট ছোট গ্রুপে ভাগ করে, প্রতিটি গ্রুপের মধ্যে কম দূরত্ব রেখে এবং গ্রুপের মাঝে বেশি দূরত্ব (বা একটি হালকা বিভাজক রেখা) রেখে — চোখ স্বয়ংক্রিয়ভাবে ২০টি বিচ্ছিন্ন আইটেমের বদলে ৪-৫টি অর্থবহ গ্রুপ হিসেবে পেজটি "পড়বে", যা স্ক্যান করা এবং কাঙ্ক্ষিত অপশন খুঁজে পাওয়া অনেক দ্রুত করে তুলবে।

প্র ০২ একটি অ্যাপে "ডিলিট" ও "আর্কাইভ" বাটন পাশাপাশি রাখা আছে এবং দুটোই একই ধূসর রঙের। কীভাবে সিমিলারিটি নীতি এখানে সম্ভাব্য বিপদ তৈরি করছে, এবং সমাধান কী?

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

প্র ০৩ একটি অ্যাপ আইকন সেট ডিজাইনার ইচ্ছাকৃতভাবে কিছু আইকনের রেখা অসম্পূর্ণ রেখে দিয়েছেন (যেমন একটি বৃত্তের সম্পূর্ণ পরিধি না এঁকে)। এটি ক্লোজার নীতির কোন সুবিধা কাজে লাগাচ্ছে?

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

অনুশীলন

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

    সাধারণ কৌশলের মধ্যে আছে — পটভূমি অন্ধকার/স্বচ্ছভাবে ঢেকে দেওয়া (dim overlay), ফিগারের চারপাশে ছায়া (drop shadow) যোগ করা যা এটিকে "উপরে ভাসমান" মনে করায়, এবং ফিগারের রঙ/কনট্রাস্ট পটভূমির চেয়ে উজ্জ্বল রাখা। এই তিনটি একসাথে ব্যবহারকারীর চোখকে দ্রুত এবং দ্ব্যর্থহীনভাবে জানিয়ে দেয় এই মুহূর্তে কোন উপাদানটি মনোযোগের যোগ্য।

  2. ডিজাইন করুন: একটি ড্যাশবোর্ডে ৬টি ভিন্ন মেট্রিক কার্ড (যেমন "মোট বিক্রয়", "নতুন ব্যবহারকারী", "এরর রেট") এলোমেলোভাবে ছড়িয়ে আছে, কোনো ভিজ্যুয়াল গোষ্ঠীকরণ ছাড়া। প্রক্সিমিটি ও সিমিলারিটি নীতি ব্যবহার করে এই কার্ডগুলো পুনর্বিন্যাসের একটি সংক্ষিপ্ত পরিকল্পনা লিখুন।

    একটি ভালো পুনর্বিন্যাস কার্ডগুলোকে বিষয়ভিত্তিক গ্রুপে ভাগ করবে (যেমন "ব্যবসায়িক পারফরম্যান্স" — বিক্রয়/রাজস্ব সংশ্লিষ্ট কার্ড একসাথে; "সিস্টেম স্বাস্থ্য" — এরর রেট/আপটাইম সংশ্লিষ্ট কার্ড একসাথে), প্রতিটি গ্রুপের মধ্যে কম স্পেসিং ও গ্রুপের মাঝে বেশি স্পেসিং রেখে (প্রক্সিমিটি)। এছাড়া একই ধরনের মেট্রিক (যেমন সব "শতাংশ পরিবর্তন" নির্দেশক) একই ভিজ্যুয়াল স্টাইলে (আইকন, রঙ কোডিং) দেখানো (সিমিলারিটি) — যাতে ব্যবহারকারী প্যাটার্ন এক নজরে চিনে নিতে পারে, প্রতিটি কার্ড আলাদা করে পড়ার দরকার না হয়।

আরও পড়ুন · ABCL TECH-এ আপনার পরবর্তী পদক্ষেপ

এই পাঠে ভুল পেয়েছেন? জানান
আগের পাঠ
মেন্টাল মডেল ও কনসেপচুয়াল মডেল