পাঠ ১৩ · ৫৭-এর মধ্যে · মডিউল ৩
Home / Courses / Human-Computer Interaction / কনসেপচুয়াল ডিজাইন

কনসেপচুয়াল ডিজাইন — রিকোয়ারমেন্ট থেকে ইন্টারঅ্যাকশন মডেল

Conceptual design — from requirements to interaction model
৭ মিনিট পড়া মধ্যম · Intermediate কনসেপচুয়াল আলোচনা সম্পূর্ণ বাংলায়

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

  • কনসেপচুয়াল ডিজাইন কী এবং ডিজাইন লাইফসাইকেলে (M1/L03) এটি কোথায় বসে তা ব্যাখ্যা করা
  • ইন্টারঅ্যাকশন মডেল সংজ্ঞায়িত করা এবং মেন্টাল মডেলের (M2/L07) সাথে এর সম্পর্ক ব্যাখ্যা করা
  • ডিজাইন মেটাফর কী তা বাস্তব শক্তিশালী ও দুর্বল উদাহরণসহ ব্যাখ্যা করা
  • একটি সাধারণ ব্যবহারকারী-রিকোয়ারমেন্টের সেট থেকে একটি প্রাথমিক ইন্টারঅ্যাকশন মডেল তৈরি করা

১ · কনসেপচুয়াল ডিজাইন কোথায় বসে

HCI ডিজাইন লাইফসাইকেলে (M1/L03-এ বিস্তারিত) রিকোয়ারমেন্ট গ্যাদারিং ও টাস্ক অ্যানালাইসিসের (M5, বিশেষত M5/L23) পরপরই, কিন্তু ওয়্যারফ্রেমিং বা ভিজ্যুয়াল প্রোটোটাইপিং (M6/L26) শুরুর আগে, একটি গুরুত্বপূর্ণ ধাপ আছে — সিদ্ধান্ত নেওয়া এই সিস্টেমটা কনসেপচুয়ালি কী, তার আগে যে এটা দেখতে কেমন হবে। এই ধাপকে বলা হয় কনসেপচুয়াল ডিজাইন। এখানে যে সিদ্ধান্তগুলো নেওয়া হয় তা পরবর্তী প্রতিটি স্ক্রিন, প্রতিটি মেনু, প্রতিটি লেবেলের ডিজাইনে প্রভাব ফেলে — তাই ভুল কনসেপচুয়াল মডেল দিয়ে শুরু করলে পরবর্তী ধাপে যত সুন্দর ভিজ্যুয়াল ডিজাইনই করা হোক না কেন, ভিত্তিগত বিভ্রান্তি রয়ে যায়।

২ · ইন্টারঅ্যাকশন মডেল কী

ইন্টারঅ্যাকশন মডেলInteraction modelব্যবহারকারীর নিজস্ব ভাষায় বর্ণনা করা একটি বিবরণ — সিস্টেম কী কী বস্তু/ধারণা উপস্থাপন করে, সেগুলোর উপর কী অপারেশন সম্ভব, এবং সেগুলো একে অপরের সাথে কীভাবে সম্পর্কিত। হলো ব্যবহারকারীর নিজস্ব ভাষায় লেখা একটি বিবরণ — সিস্টেম কী কী বস্তু/ধারণা উপস্থাপন করে, সেগুলোর উপর কী অপারেশন সম্ভব, এবং সেগুলো একে অপরের সাথে কীভাবে সম্পর্কিত। এই মডেলের লক্ষ্য একটি টার্গেট মেন্টাল মডেল তৈরি করা যা ব্যবহারকারীর বিদ্যমান ধারণার সাথে যতটা সম্ভব মেলে (M2/L07-এ মেন্টাল ও কনসেপচুয়াল মডেলের পার্থক্য নিয়ে বিস্তারিত)।

একটি ইমেইল অ্যাপের উদাহরণ: কনসেপচুয়াল ডিজাইনেই ঠিক করতে হয় — একটি "মেসেজ" কী, একটি "ফোল্ডার"/"লেবেল" কী, একটি মেসেজ কি একসাথে একাধিক জায়গায় থাকতে পারে (লেবেল-ভিত্তিক সিস্টেমে হ্যাঁ, কড়া ফোল্ডার-ভিত্তিক সিস্টেমে না)। এই সিদ্ধান্তগুলো পরবর্তীতে প্রতিটি স্ক্রিনে প্রভাব ফেলবে — কীভাবে সার্চ কাজ করবে, কীভাবে একটি মেসেজ "সরানো" যাবে, ইত্যাদি সবকিছু এই প্রাথমিক কনসেপচুয়াল সিদ্ধান্তের উপর নির্ভর করে।

৩ · মেটাফর — পরিচিত অভিজ্ঞতার সাথে সংযোগ

মেটাফরDesign metaphorএকটি বিমূর্ত সিস্টেম ধারণাকে ব্যবহারকারীর পরিচিত বাস্তব-জগতের অভিজ্ঞতার সাথে সংযুক্ত করে, যাতে নতুন ব্যবহারকারী দ্রুত অনুমান করতে পারে সিস্টেমটি কীভাবে আচরণ করবে। একটি বিমূর্ত সিস্টেমকে পরিচিত অভিজ্ঞতার সাথে যুক্ত করে ব্যবহারকারীকে দ্রুত অনুমান করতে সাহায্য করে।

"ডেস্কটপ" মেটাফর
জেরক্স PARC/ম্যাকিন্টোশের ক্লাসিক উদাহরণ — ফাইল কাগজের ডকুমেন্টের মতো, ফোল্ডার ফিজিক্যাল ফোল্ডারের মতো, ট্র্যাশ ক্যান ডিলিটের জন্য — ১৯৮০-এর দশকের অফিস-কর্মীদের কাছে সহজে অনুমানযোগ্য।
"শপিং কার্ট" মেটাফর
আইটেম এখনই "কেনা" হয় না, বরং পরে পর্যালোচনা ও পেমেন্টের জন্য "কার্টে" রাখা হয় — ফিজিক্যাল রিটেইল থেকে সর্বজনীনভাবে পরিচিত একটি অভিজ্ঞতা।

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

৪ · রিকোয়ারমেন্ট থেকে মডেল — একটি ছোট উদাহরণ

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

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

লক্ষণীয় — রিকোয়ারমেন্টের প্রতিটি শব্দ (তৈরি করা, বকেয়া, সম্পন্ন, স্নুজ) সরাসরি মডেলের একটি বিশেষ্য বা ক্রিয়ায় রূপান্তরিত হয়েছে। এই ম্যাপিং যত স্পষ্ট, পরবর্তী প্রোটোটাইপিং ধাপ (M6) তত সহজ হয় — কারণ মূল কনসেপচুয়াল সিদ্ধান্তগুলো ইতিমধ্যেই নেওয়া হয়ে গেছে।

মূল কথা · Key takeaway

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

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

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

প্র ০১ একটি নতুন ফাইল-স্টোরেজ অ্যাপ ডিজাইনার "ফোল্ডার" মেটাফরের বদলে "ট্যাগ" মেটাফর ব্যবহার করার সিদ্ধান্ত নিলেন (একটি ফাইল একাধিক ট্যাগে থাকতে পারে, একটি ফোল্ডারে নয়)। এই সিদ্ধান্ত কনসেপচুয়াল মডেলে কী প্রভাব ফেলবে?

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

প্র ০২ কেন কনসেপচুয়াল ডিজাইন ভিজ্যুয়াল ডিজাইনের (রঙ, ফন্ট, লেআউট) আগে করা উচিত, পরে নয়?

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

প্র ০৩ "শপিং কার্ট" মেটাফর একটি ফুড-ডেলিভারি অ্যাপে ভালো কাজ করে, কিন্তু একটি ক্লাউড স্টোরেজ সাবস্ক্রিপশন সার্ভিসে (যেমন মাসিক ফি দিয়ে স্টোরেজ স্পেস কেনা) একই মেটাফর কেন সমস্যাযুক্ত হতে পারে?

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

অনুশীলন

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

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

  2. মূল্যায়ন করুন: একটি মিউজিক স্ট্রিমিং অ্যাপ "প্লেলিস্ট"-কে "ফোল্ডার" হিসেবে না বলে "মিক্সটেপ" নামে ডাকে এবং একটি ক্যাসেট-টেপ আইকন ব্যবহার করে। এই মেটাফর পছন্দের সম্ভাব্য সুবিধা ও ঝুঁকি কী?

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

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

  • কোর্সের সম্পূর্ণ সিলেবাস দেখুন ৫৭টি পাঠ কগনিটিভ সাইকোলজি, ইন্টারঅ্যাকশন ডিজাইন, ইউজেবিলিটি হিউরিস্টিক্স, ইউজার রিসার্চ, প্রোটোটাইপিং, ইভালুয়েশন মেথড, ভিজ্যুয়াল ডিজাইন, অ্যাক্সেসিবিলিটি ও ক্যাপস্টোন — সম্পূর্ণ মডিউল ম্যাপ এখানে।
  • Human-Centered AI কোর্স সহোদর কোর্স ট্রাস্ট ক্যালিব্রেশন, এক্সপ্লেইনেবিলিটি ও হিউম্যান-ইন-দ্য-লুপ ডিজাইনের গভীর কভারেজ — এই কোর্স সেই একই ভিত্তির উপর সাধারণ ইন্টারঅ্যাকশন ডিজাইনের দিকটি যোগ করে।
  • সব Courses দেখুন ABCL TECH C, C++, Python, Java, JavaScript, DSA, Machine Learning, Deep Learning, System Design, Cybersecurity, Cloud Computing & DevOps, এবং আরও অনেক কোর্স — সব এক জায়গায়।
আগের পাঠ
ইন্টারঅ্যাকশন স্টাইল — ডাইরেক্ট ম্যানিপুলেশন, মেনু, WIMP