একটি ইন্টারঅ্যাকটিভ সিস্টেম ডিজাইন করা — রিসার্চ থেকে প্রোটোটাইপ
এই পাঠে যা শিখবেন
- একটি নির্দিষ্ট সিনারিওর জন্য ব্যবহারকারী ও প্রেক্ষাপট চিহ্নিত করতে ইউজার-রিসার্চ চিন্তা (M5) প্রয়োগ করা
- অ্যাফোর্ডেন্স, ম্যাপিং ও ফিডব্যাকের বাস্তব ডিজাইন সিদ্ধান্ত নেওয়া (M3), শুধু সংজ্ঞা মুখস্থ করা নয়
- নীলসেনের ১০টি হিউরিস্টিকের মধ্যে কোনগুলো একটি নির্দিষ্ট সিনারিওতে সবচেয়ে বেশি গুরুত্বপূর্ণ তা যুক্তিসহ বেছে নেওয়া (M4)
- একটি নির্দিষ্ট ব্যবহারকারী-গোষ্ঠীর জন্য প্রাসঙ্গিক ডিজেবিলিটি ক্যাটাগরি ও পরিস্থিতিগত সীমাবদ্ধতা চিহ্নিত করা (M10)
- একটি সত্যিকারের ফিটস'স ল গণনা দিয়ে একটি মূল বাটনের আকার/অবস্থান যুক্তিসঙ্গত করা
১ · সিনারিও ও ব্যবহারকারী রিসার্চ
আমাদের সিনারিও: মেডিরিমাইন্ড — একটি মোবাইল অ্যাপ যা বয়স্ক রোগীদের প্রতিদিনের একাধিক ওষুধ সময়মতো খাওয়ার কথা মনে করিয়ে দেয়, এবং একজন কেয়ারগিভার (সাধারণত ছেলে/মেয়ে বা নার্স) দূর থেকে অগ্রগতি দেখতে পারেন। এটি সম্পূর্ণভাবে কাল্পনিক ও ইলাস্ট্রেটিভ — কোনো বাস্তব প্রোডাক্টের রেফারেন্স নয়। M5-এর কন্টেক্সচুয়াল ইনকোয়ারি (L20) ও পার্সোনা (L22)-এর প্যাটার্নে, আমরা প্রথমে ব্যবহারকারী ও প্রেক্ষাপট স্পষ্ট করি।
উচ্চ রক্তচাপ ও ডায়াবেটিসের জন্য দিনে ৩ বার ৪টি ভিন্ন ওষুধ খান। হালকা বয়সজনিত দৃষ্টি সমস্যা, মাঝেমধ্যে কোন ওষুধ খেয়েছেন তা ভুলে যান। স্মার্টফোন ব্যবহারে মোটামুটি স্বচ্ছন্দ কিন্তু জটিল মেনু এড়িয়ে চলেন।
রহিমার ছেলে, কর্মব্যস্ত, দূরে থাকেন। মায়ের ওষুধ ঠিকমতো নেওয়া হচ্ছে কি না তা মাঝেমধ্যে চেক করতে চান, কিন্তু প্রতিনিয়ত মনিটর করার সময় নেই।
বাড়িতে, প্রায়ই একহাতে ব্যবহার (আরেক হাতে ওষুধের পাতা/গ্লাস), কখনও রোদে স্ক্রিনের ঔজ্জ্বল্য কম দেখা যায়, তাড়াহুড়োর মধ্যে বা ঘুম থেকে উঠে সবে চোখ খুলে ব্যবহার।
M5-এর গবেষণা-প্রশ্নগুলো এখানে প্রয়োগ করলে: রহিমা কোথায় অ্যাপটি ব্যবহার করবেন (বাড়িতে, তাড়াহুড়োয়), কখন (দিনে ৩ বার, প্রায়ই ব্যস্ত মুহূর্তে), এবং সবচেয়ে গুরুত্বপূর্ণ প্রশ্ন — কী ভুল হতে পারে (একটি ডোজ ভুলে যাওয়া, দুইবার নেওয়া, বা ভুল ওষুধ নেওয়া — এমন ভুলের বাস্তব স্বাস্থ্য-পরিণতি আছে, যা এই সিনারিওকে একটি সাধারণ টু-ডু অ্যাপের চেয়ে অনেক বেশি ঝুঁকিপূর্ণ করে তোলে)।
২ · ইন্টারঅ্যাকশন ডিজাইন সিদ্ধান্ত
M3-এর ভোকাবুলারি ব্যবহার করে এখন কংক্রিট ডিজাইন সিদ্ধান্ত নেওয়া যাক।
প্রতিটি ওষুধ একটি বড়, "উঁচু" দেখতে কার্ড হিসেবে দেখানো হয়, তার উপর একটি স্পষ্টভাবে বাটন-সদৃশ "নিয়েছি" বাটন — ছায়া ও রঙ দিয়ে সিগনাল দেয় এটি চাপা যায়, নিছক তথ্য নয়।
ট্রাফিক-লাইট-সদৃশ রঙ ম্যাপিং: সবুজ = নেওয়া হয়েছে, লাল = মিস করা হয়েছে, নীল = আসন্ন। এটি রহিমার আগে থেকে জানা একটি মানসিক মডেলের (ট্রাফিক লাইট) সাথে মেলে, নতুন কিছু শেখার দরকার নেই।
"নিয়েছি" চাপার সাথে সাথে তাৎক্ষণিক ভিজ্যুয়াল (কার্ড সবুজ হয়ে যায়) + হ্যাপটিক কম্পন ফিডব্যাক — শুধু ভিজ্যুয়াল নয়, কারণ রহিমা কখনও স্ক্রিনের দিকে না তাকিয়েও বাটন চাপতে পারেন।
ডাইরেক্ট ম্যানিপুলেশন (কার্ডে সরাসরি ট্যাপ) বেছে নেওয়া হয়েছে, জটিল মেনু-নির্ভর WIMP স্টাইলের বদলে — নেভিগেশনের গভীরতা ন্যূনতম রাখা হয়েছে।
একটি নির্দিষ্ট প্রশ্ন: "নিয়েছি" বাটনটি কত বড় ও কোথায় রাখা উচিত? M2/L09-এর ফিটস'স ল প্যাটার্ন এখানে সরাসরি প্রযোজ্য — এটি সবচেয়ে ঘন ঘন ব্যবহৃত বাটন (দিনে একাধিকবার), তাই এর সিলেকশন-টাইম সবচেয়ে বেশি গুরুত্বপূর্ণ। নিচের কোড সেলে চারটি সম্ভাব্য ডিজাইন তুলনা করা হয়েছে — একটি বড় বাটন থাম্ব-জোনে (স্ক্রিনের নিচের দিকে, যেখানে একহাতে ধরা ফোনে আঙুল সহজে পৌঁছায়) বনাম একটি ছোট আইকন স্ক্রিনের উপরে।
import math
a = 0.1 # সেকেন্ড -- বেস (স্টার্ট) টাইম
b = 0.15 # সেকেন্ড প্রতি বিট -- ডিভাইস-নির্ভর ধ্রুবক (ইলাস্ট্রেটিভ মান, L01-এর সাথে সামঞ্জস্যপূর্ণ)
def fitts_mt(D, W):
ID = math.log2(2 * D / W + 1) # Index of Difficulty (বিট-এ)
MT = a + b * ID # প্রেডিক্টেড মুভমেন্ট টাইম (সেকেন্ডে)
return ID, MT
targets = [
("বড় 'নিয়েছি' বাটন, থাম্ব-জোনে", 150, 120),
("বড় বাটন, স্ক্রিনের উপরে (দূরে)", 500, 120),
("ছোট চেকমার্ক আইকন, থাম্ব-জোনে", 150, 32),
("ছোট চেকমার্ক আইকন, দূরে", 500, 32),
]
for name, D, W in targets:
ID, MT = fitts_mt(D, W)
print(f"{name:32s} D={D:4d}px W={W:3d}px -> ID={ID:.3f} bit MT={MT*1000:.1f} ms")৩ · ইউজেবিলিটি হিউরিস্টিক্স প্রয়োগ
নীলসেনের ১০টি হিউরিস্টিক (M4/L16) সবগুলোই সাধারণভাবে প্রযোজ্য, কিন্তু মেডিরিমাইন্ডের জন্য চারটি বিশেষভাবে সিদ্ধান্তমূলক — কারণ ভুল হলে বাস্তব স্বাস্থ্য-ঝুঁকি আছে এবং ব্যবহারকারী-গোষ্ঠী বয়স্ক ও কম টেক-অভিজ্ঞ।
রহিমার সবসময় স্পষ্টভাবে জানা দরকার আজ কোন ওষুধ নেওয়া হয়েছে, কোনটি বাকি — অনুমান করতে হবে না। বড়, রঙিন ব্যাজ এটি নিশ্চিত করে।
একটি ওষুধ ভুলবশত "নিয়েছি" বা "মিস করা" হিসেবে মার্ক হয়ে যাওয়া বিভ্রান্তিকর ও ঝুঁকিপূর্ণ হতে পারে — তাই ডাবল-মার্কিং প্রতিরোধ ও সহজ আনডু আবশ্যক।
রহিমাকে ওষুধের নাম মুখস্থ রাখতে বলার বদলে প্রতিটি ওষুধের একটি ছবি/আইকন দেখানো হয় — চেনা সহজ, মনে রাখা কঠিন কাজ এড়ানো যায়।
করিম (কেয়ারগিভার) দূর থেকে সময়সূচি সেট/সম্পাদনা করতে পারেন, কিন্তু রহিমার নিজের অ্যাপে হস্তক্ষেপ ছাড়াই — দুই ভূমিকার জন্য আলাদা নিয়ন্ত্রণ-স্তর।
বাকি হিউরিস্টিক্স (কনসিস্টেন্সি, নান্দনিকতা, হেল্প ডকুমেন্টেশন ইত্যাদি) এখনও প্রাসঙ্গিক, কিন্তু এই চারটি সরাসরি এই সিনারিওর সবচেয়ে বড় ঝুঁকির (একটি ভুলভাবে ট্র্যাক করা ডোজ) সাথে জড়িত। M4-এর সাধারণ শিক্ষা হলো — সব হিউরিস্টিক সবসময় সমান গুরুত্বপূর্ণ নয়; প্রতিটি সিনারিওর নিজস্ব সর্বোচ্চ-ঝুঁকির পয়েন্ট চিহ্নিত করে সেখানে সবচেয়ে বেশি মনোযোগ দিতে হয়।
৪ · অ্যাক্সেসিবিলিটি বিবেচনা
M10-এর ডিজেবিলিটি-ক্যাটাগরি কাঠামো (L43) মেডিরিমাইন্ডের ব্যবহারকারী-গোষ্ঠীর জন্য বিশেষভাবে প্রাসঙ্গিক, কারণ বয়স্ক ব্যবহারকারীদের মধ্যে একাধিক ধরনের ক্ষমতা-হ্রাস একসাথে দেখা যাওয়া সাধারণ।
বড় টেক্সট সাইজ (ডিফল্টভাবেই বড়, ঐচ্ছিক আরও বড় মোড), উচ্চ-কনট্রাস্ট রঙ পছন্দ — এই ডিজাইনের প্রকৃত কনট্রাস্ট সংখ্যা L57-এ যাচাই করা হবে।
বড়, দূরে-দূরে স্পেসড টাচ টার্গেট (উপরের ফিটস'স ল গণনার সরাসরি প্রয়োগ) — ছোট আইকন ও ঘন-বসানো বাটন এড়ানো।
ছোট, সরল ধাপ; আইকনের উপর নির্ভরতা; একবারে একটি সিদ্ধান্ত (মাল্টি-স্টেপ ফর্ম বা জটিল নেভিগেশন এড়ানো)।
রিমাইন্ডার শুধু শব্দের উপর নির্ভর করে না — ভিজ্যুয়াল নোটিফিকেশন ও কম্পন সবসময় সাথে থাকে, যাতে শ্রবণ-সীমাবদ্ধ ব্যবহারকারীও মিস না করেন।
এছাড়া একটি গুরুত্বপূর্ণ পরিস্থিতিগত সীমাবদ্ধতা (situational constraint, স্থায়ী ডিজেবিলিটি না হলেও M10-এর "ইনক্লুসিভ ডিজাইন" আলোচনার অংশ, L45): রোদে স্ক্রিনের ঔজ্জ্বল্য কমে যাওয়া বা একহাতে ব্যবহার — এই দুটোই মূলত একই সমাধান দাবি করে যা উপরে বলা হয়েছে (বড় টার্গেট, উচ্চ কনট্রাস্ট, একক-ট্যাপ ইন্টারঅ্যাকশন)। এটি একটি সাধারণ অ্যাক্সেসিবিলিটি নীতির উদাহরণ — স্থায়ী ও সাময়িক সীমাবদ্ধতার জন্য প্রায়ই একই ভালো ডিজাইন কাজ করে।
মেডিরিমাইন্ডের প্রতিটি ডিজাইন সিদ্ধান্ত — বড় থাম্ব-জোন বাটন, ট্রাফিক-লাইট রঙ ম্যাপিং, আইকন-ভিত্তিক রিকগনিশন, ও ডাবল-লেয়ার নিয়ন্ত্রণ — কোনোটাই নির্বিচারে নেওয়া হয়নি; প্রতিটি নির্দিষ্ট ব্যবহারকারী, প্রেক্ষাপট, হিউরিস্টিক ও অ্যাক্সেসিবিলিটি প্রয়োজন থেকে সরাসরি অনুসৃত। পরবর্তী পাঠে, ক্যাপস্টোনে, আমরা এই ডিজাইনকে মুখের কথায় "ভালো লাগছে" বলার বদলে সত্যিকারের সংখ্যা দিয়ে প্রমাণ করব — এটাই কেন এই কোর্স শুরু থেকেই HCI-কে একটি পরিমাপযোগ্য বিজ্ঞান হিসেবে উপস্থাপন করেছে।
ভাবনার প্রশ্ন
প্রতিটি প্রশ্ন নিজে কিছুক্ষণ ভাবুন — তারপর "→ উত্তর" চাপুন।
প্র ০১ একটি সাধারণ টু-ডু লিস্ট অ্যাপের তুলনায় "এরর প্রিভেনশন" হিউরিস্টিক মেডিরিমাইন্ডে কেন অনেক বেশি গুরুত্বপূর্ণ?
একটি টু-ডু আইটেম ভুলভাবে "সম্পন্ন" মার্ক হলে সাধারণত সহজেই ঠিক করা যায় ও গুরুতর পরিণতি নেই। কিন্তু মেডিরিমাইন্ডে একটি ওষুধ ভুলভাবে "নেওয়া হয়েছে" মার্ক হলে — এবং সেই তথ্যের উপর ভিত্তি করে কেয়ারগিভার বা রোগী নিজে সিদ্ধান্ত নেন — বাস্তব স্বাস্থ্য-ঝুঁকি তৈরি হতে পারে (যেমন একটি ডোজ আসলে না নেওয়া সত্ত্বেও তা লুকিয়ে যাওয়া)। উচ্চ-ঝুঁকির ডোমেইনে হিউরিস্টিকের গুরুত্ব তার পরিণতির তীব্রতার সমানুপাতিক হয়ে ওঠে।
প্র ০২ রহিমার জন্য সরলতা সবচেয়ে গুরুত্বপূর্ণ, কিন্তু করিম (কেয়ারগিভার) হয়তো বিস্তারিত ইতিহাস ও অ্যাডভান্সড সেটিংস চান। এই দুই চাহিদার মধ্যে দ্বন্দ্ব কীভাবে সমাধান করা যায়?
রোল-ভিত্তিক ভিউ (role-based views) দিয়ে — রহিমার প্রধান স্ক্রিন শুধু আজকের সাধারণ কার্ড দেখায়, কোনো অতিরিক্ত অপশন নয়। করিমের জন্য আলাদা একটি "কেয়ারগিভার ড্যাশবোর্ড" থাকে যেখানে ইতিহাস, ট্রেন্ড ও সেটিংস অ্যাক্সেসযোগ্য। এটি প্রোগ্রেসিভ ডিসক্লোজারের একটি প্রয়োগ — প্রতিটি ব্যবহারকারী শুধু তার প্রয়োজনীয় জটিলতা দেখেন, পুরো সিস্টেমের সব জটিলতা একসাথে নয়।
প্র ০৩ ম্যাপিংয়ে শুধু রঙ (সবুজ/লাল/নীল) ব্যবহার করা কেন M10-এর অ্যাক্সেসিবিলিটি নীতির আলোকে একটি সমস্যা হতে পারে, এবং এর সমাধান কী?
রঙ-অন্ধ ব্যবহারকারীদের জন্য (বিশেষত লাল-সবুজ কালার ব্লাইন্ডনেস, যা পুরুষদের মধ্যে তুলনামূলক সাধারণ) শুধু রঙের উপর নির্ভর করা তথ্য হারিয়ে ফেলতে পারে। WCAG-এর "শুধু রঙের উপর নির্ভর না করা" নীতি অনুযায়ী প্রতিটি স্ট্যাটাসের সাথে একটি আইকন ও টেক্সট লেবেলও (✓ নেওয়া হয়েছে / ✗ মিস করা হয়েছে / ⏰ আসন্ন) যোগ করা উচিত, যাতে রঙ ছাড়াও তথ্য বোঝা যায়।
অনুশীলন
-
চিন্তা করুন: উপরের ফিটস'স ল কোড সেলে যদি "ছোট চেকমার্ক আইকন, থাম্ব-জোনে" (D=150, W=32)-এর
আকার বাড়িয়ে W=80 করা হয় (কিন্তু এখনও "বড় বাটন"-এর W=120 এর চেয়ে ছোট), MT কি "বড় বাটন, থাম্ব-জোনে"-এর
৩৭১.১ ms-এর কাছাকাছি হবে, নাকি এখনও অনেক বেশি হবে?
যেহেতু সম্পর্কটি লগারিদমিক, W বাড়ানোর প্রভাব ক্রমহ্রাসমান (diminishing returns) — W=32 থেকে W=80-এ যাওয়ার লাভ, W=80 থেকে W=120-এ যাওয়ার লাভের চেয়ে বেশি হবে। তাই MT ৩৭১.১ ms-এর কাছাকাছি আসবে কিন্তু ঠিক সমান হবে না, W=120-এর তুলনায় এখনও কিছুটা বেশি সময় লাগবে।
-
পরীক্ষা করুন: উপরের কোড সেলে
targetsতালিকায় একটি নতুন লাইন যোগ করুন —("মাঝারি আইকন, থাম্ব-জোনে", 150, 80)— এবং Run চেপে আপনার অনুমান যাচাই করুন।D=150, W=80-এ ID≈২.২৪৮ বিট এবং MT≈৪৩৭.২ ms — যা "বড় বাটন, থাম্ব-জোনে"-এর ৩৭১.১ ms-এর তুলনামূলক কাছাকাছি (মাত্র ~৬৬ ms বেশি), কিন্তু "ছোট চেকমার্ক আইকন, থাম্ব-জোনে"-এর ৬০৬.৩ ms-এর চেয়ে অনেক কম। এটি নিশ্চিত করে — অনুমানটি সঠিক ছিল, লাভ ক্রমহ্রাসমান।
আরও পড়ুন · ABCL TECH-এ আপনার পরবর্তী পদক্ষেপ
- ক্যাপস্টোন পাঠ দেখুন L57 · শেষ পাঠ এই একই মেডিরিমাইন্ড ডিজাইনকে সত্যিকারের ওয়েটেড হিউরিস্টিক স্কোর, WCAG কনট্রাস্ট চেক, SUS স্কোর ও টাস্ক সাকসেস রেট দিয়ে মূল্যায়ন করা হবে।
- কোর্সের সম্পূর্ণ সিলেবাস দেখুন ৫৭টি পাঠ কগনিটিভ সাইকোলজি, ইন্টারঅ্যাকশন ডিজাইন, ইউজেবিলিটি হিউরিস্টিক্স, ইউজার রিসার্চ, প্রোটোটাইপিং, ইভালুয়েশন মেথড, ভিজ্যুয়াল ডিজাইন, অ্যাক্সেসিবিলিটি ও ক্যাপস্টোন — কোর্সের সবগুলো পাঠ।
- Human-Centered AI কোর্স সহোদর কোর্স যদি মেডিরিমাইন্ডে ভবিষ্যতে কোনো AI-চালিত ফিচার (যেমন স্মার্ট ডোজ-সাজেশন) যোগ করতে চান, ট্রাস্ট ক্যালিব্রেশন ও এক্সপ্লেইনেবিলিটির জন্য এই সহোদর কোর্স দেখুন।