ওয়্যারফ্রেমিং ও ইনফরমেশন আর্কিটেকচার

১ · ওয়্যারফ্রেমিং কী

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

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

২ · ইনফরমেশন আর্কিটেকচার কী

ইনফরমেশন আর্কিটেকচার (IA)Information Architectureএকটি সিস্টেমের কন্টেন্টকে বোধগম্য বিভাগ, হায়ারার্কি ও লেবেলে সংগঠিত করার কাজ, যাতে ব্যবহারকারী সহজে যা খুঁজছেন তা খুঁজে পান — নেভিগেশন, ক্যাটাগরি ও সাইটম্যাপ এর মূল আউটপুট। ওয়্যারফ্রেমের আগে আসা প্রশ্নের উত্তর দেয় — "সাইটে কী কী বিভাগ থাকবে, কোনটি কোনটির ভেতরে থাকবে, এবং প্রতিটি বিভাগের নাম কী হবে?" এর মূল উপাদান তিনটি:

৩ · ওয়ার্কড উদাহরণ — একটি ই-কমার্স সাইটের ক্যাটাগরি স্ট্রাকচার

ধরা যাক আমরা একটি ছোট পোশাকের ই-কমার্স সাইটের জন্য IA ডিজাইন করছি। কাঁচা কন্টেন্ট তালিকা: পুরুষদের শার্ট, পুরুষদের প্যান্ট, নারীদের কুর্তি, নারীদের শাড়ি, বাচ্চাদের পোশাক, জুতা, ব্যাগ, সাইজ গাইড, রিটার্ন পলিসি, অর্ডার ট্র্যাকিং, অ্যাকাউন্ট সেটিংস, কার্ট। এলোমেলো এই তালিকাকে হায়ারার্কিতে সংগঠিত করলে দাঁড়ায়:

• হোম
  • পুরুষ
    • শার্ট
    • প্যান্ট
  • নারী
    • কুর্তি
    • শাড়ি
  • বাচ্চাদের পোশাক
  • জুতা ও ব্যাগ
    • জুতা
    • ব্যাগ
  • সাহায্য
    • সাইজ গাইড
    • রিটার্ন পলিসি
    • অর্ডার ট্র্যাকিং
  • আমার অ্যাকাউন্ট
    • অ্যাকাউন্ট সেটিংস
    • কার্ট

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

৪ · ওয়্যারফ্রেম কনভেনশন ও M3-এর সাথে সম্পর্ক

ওয়্যারফ্রেমিং সরাসরি M3-এর কনসেপচুয়াল ডিজাইনের (L13) একটি বাস্তবায়ন — একটি ইন্টারঅ্যাকশন মডেলকে প্রথমবার স্ক্রিনের আকারে রূপ দেওয়া। প্রচলিত কনভেনশন:

• ধূসর/সাদাকালো রঙ স্কিম — ভিজ্যুয়াল সিদ্ধান্ত ইচ্ছাকৃতভাবে এড়ানো হয়
• বাস্তব ছবির বদলে "X" চিহ্নিত বক্স বা প্লেসহোল্ডার আইকন
• টেক্সটের জন্য প্রকৃত কনটেন্ট বা সংক্ষিপ্ত প্লেসহোল্ডার লাইন — দৈর্ঘ্য বাস্তবসম্মত রাখা গুরুত্বপূর্ণ (একটি ৩-শব্দের প্লেসহোল্ডার বাস্তবে ১৫-শব্দের হেডলাইনের জায়গা মিথ্যা করে দেখাতে পারে)
• নেভিগেশন, বাটন, ফর্ম-এলিমেন্ট স্পষ্টভাবে চিহ্নিত করা, প্রতিটির আচরণ টীকায় ব্যাখ্যা করা