আইকনোগ্রাফি ও ভিজ্যুয়াল ল্যাঙ্গুয়েজ সিস্টেম
এই পাঠে যা শিখবেন
- কেন আইকন ডিজাইন করা আপাতদৃষ্টিতে সহজ কিন্তু আসলে কঠিন একটি কাজ
- স্বীকৃত ও দ্ব্যর্থহীন আইকন ডিজাইনের ব্যবহারিক নীতি
- ভিজ্যুয়াল ল্যাঙ্গুয়েজ সিস্টেম কী এবং একটি প্রোডাক্টে কনসিস্টেন্সি কেন গুরুত্বপূর্ণ
- M4/L18-এর কনসিস্টেন্সি নীতির সাথে ভিজ্যুয়াল ডিজাইন সিস্টেমের সম্পর্ক
১ · আইকন ডিজাইন কেন কঠিন
একটি আইকন মূলত একটি ভিজ্যুয়াল সংক্ষেপ — একটি সম্পূর্ণ শব্দ বা ধারণাকে খুবই ছোট জায়গায় একটি সরল আকৃতিতে প্রকাশ করার চেষ্টা। এটি দুটি প্রতিযোগী লক্ষ্যের মধ্যে টানাপোড়েন — যথেষ্ট সরল হতে হবে যাতে ছোট আকারেও পরিষ্কার দেখা যায়, কিন্তু যথেষ্ট নির্দিষ্ট হতে হবে যাতে অন্য কোনো অর্থের সাথে গুলিয়ে না যায়। একটি সুপরিচিত উদাহরণ — "সেভ" বোঝাতে ব্যবহৃত ফ্লপি ডিস্ক আইকন। বর্তমান প্রজন্মের বহু ব্যবহারকারী কখনো আসল ফ্লপি ডিস্ক ব্যবহার করেননি, তবু আইকনটি এখনও কার্যকর — কারণ এটি আক্ষরিক বস্তুর প্রতিনিধিত্ব করার বদলে একটি শেখা কনভেনশনে পরিণত হয়েছে। এটি দেখায়, আইকন ডিজাইনে "এটি বাস্তব বস্তুর মতো দেখতে হবে" নীতি সবসময় সবচেয়ে গুরুত্বপূর্ণ নয় — ব্যাপক পরিচিতিও সমানভাবে গুরুত্বপূর্ণ।
২ · স্বীকৃত ও দ্ব্যর্থহীন আইকন ডিজাইনের নীতি
অপ্রয়োজনীয় বিস্তারিত বাদ দিয়ে শুধু চেনার জন্য প্রয়োজনীয় ন্যূনতম আকৃতি রাখা — এটি M8/L37-এর ডেটা-ইঙ্ক রেশিও নীতির মতোই, শুধু চার্টের বদলে আইকনের জন্য।
একটি নতুন আইকন ডিজাইন করার পর ব্যবহারকারীদের জিজ্ঞাসা করা "এই আইকনটি দেখে আপনার কী মনে হয় এটি করবে?" — অনুমান নয়, প্রকৃত পরীক্ষা (M7-এর ইভালুয়েশন মেথড এখানেও প্রযোজ্য)।
যখন কোনো আইকনের অর্থ সম্পূর্ণ স্পষ্ট নয় (বিশেষত কম-পরিচিত অ্যাকশনের জন্য), একটি ছোট টেক্সট লেবেল যোগ করা অস্পষ্টতা দূর করে — সব আইকন একা দাঁড়াতে সক্ষম নয়।
নতুন করে "সেভ", "সার্চ", "সেটিংস"-এর জন্য মৌলিকভাবে ভিন্ন আইকন উদ্ভাবন করার বদলে, ব্যবহারকারী ইতিমধ্যে যা শিখেছেন তা ব্যবহার করা — এটি M4/L18-এর কনসিস্টেন্সি ও স্ট্যান্ডার্ড নীতিরই একটি রূপ।
৩ · ভিজ্যুয়াল ল্যাঙ্গুয়েজ সিস্টেম — একক আইকনের বাইরে
একটি একক আইকন ভালোভাবে ডিজাইন করাই যথেষ্ট নয় — একটি পুরো প্রোডাক্টে ব্যবহৃত সব আইকন ও ভিজ্যুয়াল উপাদান একে অপরের সাথে সামঞ্জস্যপূর্ণ হওয়া উচিত। এটাই ভিজ্যুয়াল ল্যাঙ্গুয়েজ সিস্টেম (বা প্রচলিতভাবে "ডিজাইন সিস্টেম")-এর মূল ধারণা — একটি সামঞ্জস্যপূর্ণ ভিজ্যুয়াল ভোকাবুলারি যা পুরো প্রোডাক্ট জুড়ে পুনরাবৃত্তি হয়।
সব আইকন যদি "আউটলাইন" স্টাইলে হয়, একটি মাঝখানে "ফিল্ড/সলিড" স্টাইলে থাকলে সেটি চোখে বেমানান লাগবে — একই স্ট্রোক-প্রস্থ ও কোণের ধরন পুরো সেট জুড়ে বজায় রাখা দরকার।
একটি সুনির্দিষ্ট স্পেসিং ইউনিট (যেমন ৪px বা ৮px-এর গুণিতক) পুরো প্রোডাক্টে ব্যবহার করলে মার্জিন/প্যাডিং এলোমেলো না হয়ে একটি অনুমানযোগ্য ছন্দ তৈরি করে (M8/L35-এর গ্রিড-নীতির সাথে সম্পর্কিত)।
সব বাটন/কার্ড/মোডাল যদি একই কর্নার-রেডিয়াস (যেমন সবসময় ৮px গোলাকার কোণা) মেনে চলে, প্রোডাক্টটি একটি সুসংগত "ব্যক্তিত্ব" নিয়ে অনুভূত হয় — একটি উপাদান তীক্ষ্ণ কোণা আর আরেকটি খুব গোলাকার হলে এটি ভাঙা/অসামঞ্জস্যপূর্ণ মনে হয়।
একটি আইকন যত ভালোই ডিজাইন করা হোক না কেন, বাকি প্রোডাক্টের সাথে সামঞ্জস্যপূর্ণ না হলে তা ব্যবহারকারীর মানসিক মডেলকে (M2/L07) বিভ্রান্ত করে। M4/L18-এর "কনসিস্টেন্সি ও স্ট্যান্ডার্ড" নীতি এখানেই সরাসরি প্রযোজ্য — শুধু ইন্টারঅ্যাকশন প্যাটার্নে নয়, ভিজ্যুয়াল ভাষাতেও। এই দিয়ে M8 (ভিজ্যুয়াল ও ইনফরমেশন ডিজাইন) মডিউল শেষ হলো — পরবর্তী মডিউল M9-এ ইনপুট, আউটপুট ও ইন্টারঅ্যাকশন ডিভাইস নিয়ে আলোচনা শুরু হবে।
ভাবনার প্রশ্ন
প্রতিটি প্রশ্ন নিজে কিছুক্ষণ ভাবুন — তারপর "→ উত্তর" চাপুন।
প্র ০১ একজন ডিজাইনার একটি সম্পূর্ণ নতুন, মৌলিক আইকন তৈরি করেছেন "শেয়ার করুন" অ্যাকশনের জন্য, যা প্রচলিত কোনো শেয়ার-আইকনের মতো দেখতে নয়। এটি কী ঝুঁকি তৈরি করে?
ব্যবহারকারীরা ইতিমধ্যে অন্যান্য অ্যাপে প্রচলিত শেয়ার-আইকনের (সাধারণত একটি নোড/লাইন-সংযোগ আকৃতি বা একটি বক্স-থেকে-বেরিয়ে-আসা তীর) সাথে পরিচিত — একটি সম্পূর্ণ নতুন আকৃতি সেই শেখা কনভেনশন ভেঙে দেয়, ব্যবহারকারীকে নতুন করে অনুমান করতে বাধ্য করে। যদি নতুন আইকনটি ব্যাপকভাবে পরীক্ষিত না হয় এবং সুনির্দিষ্ট সুবিধা না দেয়, পরিচিত কনভেনশন মেনে চলাই সাধারণত নিরাপদ।
প্র ০২ একটি অ্যাপে কিছু আইকন "আউটলাইন" স্টাইলে (শুধু রেখা) আর কিছু "সলিড" স্টাইলে (পূর্ণ ভরাট) ব্যবহার করা হয়েছে, কোনো স্পষ্ট নিয়ম ছাড়াই। ব্যবহারকারীর অভিজ্ঞতায় এর প্রভাব কী হতে পারে?
এটি ভিজ্যুয়াল ল্যাঙ্গুয়েজ সিস্টেমের ভাঙন — ব্যবহারকারী হয়তো অজান্তেই স্টাইলের পার্থক্যকে একটি অর্থপূর্ণ সংকেত ধরে নিতে পারেন (যেমন "সলিড মানে সক্রিয়/নির্বাচিত, আউটলাইন মানে নিষ্ক্রিয়")। যদি এই পার্থক্যের পেছনে কোনো ইচ্ছাকৃত অর্থ না থাকে, এটি একটি মিথ্যা সংকেত তৈরি করে বিভ্রান্তি বাড়ায় — অসামঞ্জস্যপূর্ণ ডিজাইন প্রায়ই "এলোমেলো/অ-পেশাদার" অনুভূতিও তৈরি করে, এমনকি ব্যবহারকারী সুনির্দিষ্টভাবে কারণ ব্যাখ্যা করতে না পারলেও।
প্র ০৩ হ্যামবার্গার মেনু আইকনের উদাহরণে দেখা গেছে "ব্যাপক ব্যবহার" আর "স্বজ্ঞাত বোধগম্যতা" সবসময় এক নয়। একজন ডিজাইনার কীভাবে যাচাই করবেন তাদের কোনো নির্দিষ্ট আইকন প্রকৃতপক্ষে স্বজ্ঞাতভাবে বোঝা যাচ্ছে কিনা?
অনুমান না করে সরাসরি ব্যবহারকারী পরীক্ষা করা দরকার — M7-এর ইভালুয়েশন মেথড থেকে থিংক-অ্যালাউড প্রোটোকল (M7/L31) বা একটি সাধারণ "আইকন শনাক্তকরণ" পরীক্ষা চালানো যেতে পারে, যেখানে ব্যবহারকারীদের শুধু আইকনটি দেখানো হয় (কোনো লেবেল ছাড়া) এবং জিজ্ঞাসা করা হয় এটি কী করবে বলে তারা মনে করেন। যদি একটি বড় অংশ ভুল অনুমান করেন, আইকনটি পুনর্বিবেচনা প্রয়োজন — বা অন্তত একটি টেক্সট লেবেল যোগ করা উচিত।
অনুশীলন
-
প্রয়োগ করুন: আপনি একটি নতুন টু-ডু লিস্ট অ্যাপের জন্য "টাস্ক আর্কাইভ করুন" অ্যাকশনের একটি
আইকন ডিজাইন করছেন — এমন একটি অ্যাকশন যার কোনো ব্যাপকভাবে-স্বীকৃত প্রচলিত আইকন নেই। আজকের নীতি প্রয়োগ করে
আপনি কী পদ্ধতি অনুসরণ করবেন?
যেহেতু কোনো প্রচলিত কনভেনশন নেই, শুরুতে একটি যুক্তিসঙ্গত রূপক বাছাই করা যেতে পারে (যেমন একটি "বক্স" বা "ট্রে" আকৃতি, যা ফাইল-আর্কাইভিং-এর সাথে কিছুটা সাদৃশ্যপূর্ণ), কিন্তু যেহেতু এটি সম্পূর্ণ দ্ব্যর্থহীন হবে না, একটি টেক্সট লেবেল ("আর্কাইভ") আইকনের পাশে বা টুলটিপে যোগ করা উচিত। এরপর ব্যবহারকারী পরীক্ষার মাধ্যমে (আইকনটি একা দেখিয়ে জিজ্ঞাসা করে এটি কী করবে মনে হয়) যাচাই করে প্রয়োজনে পুনর্ডিজাইন করা।
-
প্রয়োগ করুন: আপনার প্রোডাক্ট টিম সিদ্ধান্ত নিয়েছে সব নতুন আইকন "সলিড" স্টাইলে হবে, কিন্তু
অ্যাপে ইতিমধ্যে ৪০টি "আউটলাইন" স্টাইলের আইকন আছে। ভিজ্যুয়াল ল্যাঙ্গুয়েজ সিস্টেমের দৃষ্টিকোণ থেকে এই
পরিস্থিতিতে কী সমস্যা তৈরি হবে এবং কীভাবে সমাধান করবেন?
যদি নতুন সলিড-স্টাইল আইকন পুরনো আউটলাইন-স্টাইল আইকনের পাশাপাশি একসাথে থাকে, পুরো ইন্টারফেসটি অসামঞ্জস্যপূর্ণ ও এলোমেলো দেখাবে — এটি M4/L18-এর কনসিস্টেন্সি নীতির সরাসরি লঙ্ঘন। সঠিক সমাধান হলো একটি স্পষ্ট মাইগ্রেশন পরিকল্পনা করা — হয় সব ৪০টি পুরনো আইকন ধীরে ধীরে সলিড স্টাইলে পুনর্ডিজাইন করা, অথবা নতুন আইকনগুলোকে বিদ্যমান আউটলাইন কনভেনশনে রাখা — কিন্তু দুটি স্টাইল স্থায়ীভাবে মিশ্রিত রাখা উচিত নয়।
আরও পড়ুন · ABCL TECH-এ আপনার পরবর্তী পদক্ষেপ
- পরবর্তী পাঠ — ইনপুট ডিভাইস — পয়েন্টিং, টাচ, জেসচার L39 M9 মডিউল শুরু — বিভিন্ন ইনপুট ডিভাইস ও মোডালিটির নকশা বিবেচনা।
- আগের পাঠ — ডেটা-ইঙ্ক রেশিও ও চার্ট ডিজাইন প্রিন্সিপল L37 চার্ট ডিজাইনে অপ্রয়োজনীয় ভিজ্যুয়াল উপাদান কমানোর একই নীতি এই পাঠের আইকন-সরলতা নীতির সাথে সরাসরি সম্পর্কিত।
- কোর্সের সম্পূর্ণ সিলেবাস দেখুন ৫৭টি পাঠ কগনিটিভ সাইকোলজি, ইন্টারঅ্যাকশন ডিজাইন, ইউজেবিলিটি হিউরিস্টিক্স, ইউজার রিসার্চ, প্রোটোটাইপিং, ইভালুয়েশন মেথড, ভিজ্যুয়াল ডিজাইন, অ্যাক্সেসিবিলিটি ও ক্যাপস্টোন।