What is UI or User Interface Design Bangla

UI কি? UI means User Interface and UX means User Experience Design. একটা প্রফেশনাল ওয়েব অ্যাপ্লিকেশন তৈরীর আগে এর Prototype তৈরী করে নেয়া হয়। Prototype কি বা এই টার্মটার মানে আপনারা একটু গুগলে সার্চ করে দেখে নিবেন।

একটা অ্যাপ্লিকেশন তৈরী করার আগে তাতে কি কি থাকবে, কোথায় কোন বাটন বা ছবি অর্থাৎ কন্টেন্ট যাবে, তার কালার কি হবে, সেটাতে ক্লিক করলে কি কাজ করবে, ডাবল ক্লিকে কি হবে, ওই বাটনের ওপরে মাউসের কারসর নিলে কি হবে এইসব কিছুর প্ল্যানিং করাকেই মুলত প্রোটোটাইপিং বলা হয়।

প্রোটোটাইপিং এর অনেকগুলো স্টেপ আছে। যেমন পেপার প্রোটোটাইপিং, ডিজিটাল প্রোটোটাইপিং, স্কেচিং ইত্যাদি।

Power of data ভিডিওতে আমি আপনাদের হিউম্যান সাইকোলজি নিয়ে কথা বলছিলাম যে কিভাবে গুগল ফেসবুকের মতো বড় বড় কোম্পানীগুলো আমাদের ব্রেইন নিয়ে খেলছে বা আমাদের সাবকনসাচ মাইন্ড কে তারা কিভাবে ট্রিগার করে আমাদের থেকে ডেটা নিচ্ছে এবং সেটাকে কাজে লাগিয়ে হাজার কোটি টাকা ইনকাম করছে। এটারই কিছু ছোট এক্সাম্পেল দেখাব এই ভিডিওতে।

মুল কথায় আসি। UI Design এর মধ্যে শুধুমাত্র একটা ওয়েবসাইটের ডিজাইনের প্ল্যানিং অন্তর্ভুক্ত। এর মধ্যে অনেক কিছু আছে যেমন আপনি যে ওয়েব অ্যাপ্লিকেশনটি তৈরী করবেন, তাতে কোন যায়গায় কোন লেখা যাবে, কোন বাটন যাবে, বাটনে কি আইকন যাবে। লেখার কালার কি হবে etc.।

আপনারা যদি গুগলের বিভিন্ন ওয়েবসাইট বা অ্যাপ্লিকেশনগুলো ফলো করেন তবে দেখতে পারবেন যে গুগল তাদের সমস্ত প্রোডাক্টে ৫টা কালার ইউজ করে। অর্থাৎ তাদের সকল অ্যাপ্লিকেশনগুলো মাল্টিকালার্ড হয়ে থাকে। কখনও ভেবে দেখেছেন এর কারণ কি। কেন গুগল সবসময় এত কালারফুল থাকে? বস এখানেই হচ্ছে আসল খেলা।

চলেন একটু খুজে দেখি। গুগলের অডিয়েন্সদের দিকে যদি নজর দেন তবে দেখতে পারবেন যে গুগল কিন্তু সমাজের সব ক্লাসের মানুষদের নিয়ে কাজ করে। অর্থাৎ সমাজের যে তিনটি শ্রেণির লোক আছে, এলিট ক্লাস, মিডল ক্লাস এবং লোয়ার ক্লাস। এই তিন ক্লাসের মানুষই কিন্তু গুগলের অডিয়েন্স বা এরা সবাই কিন্তু গুগল ইউজ করে।

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

কিন্তু আপনি যদি অ্যাপলের দিকে নজর দেন। সেখানে কিন্তু আপনি এত কালার খুজে পাবেন না। অ্যাপলের সমস্ত প্রোডাক্টে আপনি শুধুমাত্র Black and white এই দুটি কালার দেখতে পারবেন। এর কারণ কি? কারণ অ্যাপল কিন্তু ম্যাস অডিয়েন্স নিয়ে কাজ করে না। তারা শুধুমাত্র সমাজের এলিট ক্লাসের যে মানুষগুলো আছে তাদের নিয়ে কাজ করে। অ্যাপলের প্রোডাক্ট সবার জন্য না। বস দেড় লাখ টাকার আইফোন সবাই কিনবে না। এটা খালি এলিট ক্লাসের মানুষই কিনবে। সো অ্যাপল কাজ করে শুধুমাত্র এই ক্লাসের মানুষদের মাইন্ডসেটের উপর ভিত্তি করে।

আপনি যদি কোন এলিট ক্লাসের মানুষের দিকে খেয়াল করেন তবে দেখতে পারবেন, যে তারা কিন্তু মিডল বা লোয়ার ক্লাসের মানুষের মতো সবসময় এত খুশি থাকে না। কেন? কারণ এই ক্লাসের মানুষজন সবসময় অনেক কিছু ভেবে চিন্তে তারপর একটা ডিসিশন নেয়। তারা সবার সাথে মিশে না। অনেকটা আলাদা থাকতে পছন্দ করে। কারণ সবসময়ই তাদের ব্রেনে কিছু না কিছু ডিপ চিন্তা ভাবনা চলতে থাকে। সো সেদিক থেকে তারা কিন্তু  ব্ল্যাক কালারটা বেশি প্রেফার করে।

অন্যদিকে এই ক্লাসের মানুষদের মধ্যে আরেকটা স্বভাব দেখতে পারবেন যে তারা অনেকটা পরিষ্কার পরিচ্ছন্ন এবং অর্গানাইজড বা গোছালো। এদের টেবিলে কখনও দেখবেন না যে বইপত্র বা তাদের ব্যবহার্য জিনিসপত্রগুলো ছড়ানো ছিটানো অবস্থায় থাকে। যেরকমটা বাকি দুইক্লাসের মানুষেরা বেশি করে থাকে। একটা নরমাল কোম্পানীর অফিস যদি দেখেন তবে সেখানো কিন্তু এত পরিপাটি দেখবেন না। যেটা একটা হাই ক্লাস বিদেশী কোম্পানীর অফিসে দেখবেন। তাদের ইন্টেরিয়রের বেশিরভাগ যায়গায়ই হোয়াইট কালার থাকে। কারণ এটা one kind of তাদের পরিচ্ছনতা এবং অর্গানাইজড কাজের মনোভাবকে রিপ্রেজেন্ট করে। এই কারণেই কিন্তু অ্যাপলেরও সব যায়গায় ব্ল্যাক এন্ড হোয়াইট ইউজ করা হয়।

এবার বুঝলেন বস জাস্ট সিম্পেল একটা কালার কিভাবে আপনার মাইন্ডকে ট্রিগার করে ফেলে। ওয়েবসাইটের ক্ষেত্রেও কিন্তু এই ছোট ছোট বিষয়গুলো হিউজ ইমপ্যাক্ট তৈরী করে। ওয়েব অ্যাপ্লিকেশন ডেভলপমেন্টের একটা বড় পার্ট হল এই Prototyping. কিন্তু আমরা এগুলো নিয়ে কখনও চিন্তাও করি না।

এইযে কালার কনসেপ্টের কথা বললাম এটা ইউ ডিজাইনের জাস্ট ছোট্ট একটা পার্ট। বলতে পারেন ১০০% এর মাত্র ২%। এবার চিন্তা করেন যে এই First step টা কতটা গভীর জানার বিষয়, পড়াশোনার বিষয়, প্র্যাক্টিসের বিষয়।

ম্যাকডোনাল্ডস রেস্টুরেন্টের নাম আশাকরি অনেকেই শুনেছেন। তাদের লোগো থেকে শুরু করে সমস্ত ব্রান্ডিং গ্রাফিক্স, ব্যানার পোষ্টার সবযায়গায় হলুদ কালারের ব্যবহার বেশি দেখতে পারবেন। কেন কখনও চিন্তা করেছেন?

হিউম্যান সাইকোলজিষ্টদের মতে হলুদ কালার hungriness কে রিপ্রেজেন্ট করে। That's why আপনি যখনই ম্যাকডোনাল্ডসের কোন ব্যানার বা ছবি দেখেন তখনই আপনার মধ্যে অটোমেটিকালি একটা খিদের তৈরী হয়। আপনি রেস্টুরেন্টে যান, কিছু কিনেন। তার মানেই তাদের সেল কয়েকগুণ বৃদ্ধি পেয়ে গেল।

এবার বুঝলেন একটা সিম্পেল কালার আপনার ব্রেনে কতটা এফেক্ট করে।

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

এখন তিন হাজার টাকায়ও ওয়েবসাইট পাওয়া যায়। শুধু যে কথার কথা বলছি সেটা ভাববেন না, লাইভ এক্সাম্পেল দিচ্ছি।

স্ক্রিনে একটি ওয়েবসাইট দেখতে পাচ্ছেন। NCB IT Institute নামে এক প্রতিষ্ঠানের। তারা ২৯৯৯ টাকায় নিউজপেপার সাইট তৈরী করে দেয়ার অফার করছে। তাও .কম ডোমেইন, ১০ জিবি হোষ্টিং, এসএসএল সার্টিফিকেট সবসহ। এবার আসেন একটু ডেমো দেখি।

এইযে দেখতে পাচ্ছেন তারা এরকম সাইট তৈরী করে দিবে ৩০০০ টাকায়। এবার বস আপন‌‌ারাই বলেন, কোন ধরনের নিউজপেপার সাইটে এই কালার মানুষ ইউজ করে। যারা নিউজ পেপার পড়ে তারা স্বভাবতই একটু ভাবুক মানুষ হয়ে থাকে। এখন আপনি কোন দিক থেকে আপনার মনে হয় এই গ্রুপের মানুষগুলোকে এই কালারটা ট্রিগার করবে। এটাতো গেল একটা বিষয়। এবার আসি আরেকটাতে। এখানে দেখতে পাচ্ছেন শিরোনাম লেখা আছে। এই ব্যাকগ্রাউন্ড কালার এর উপর যে টেক্সট কালার দিয়েছে এটা আপনি পড়তে পারছেন যে এখানে কি লেখা আছে? এই যে এখানে আবার দেখতে পাচ্ছেন যে লেখা এত বেশি যে ছবি শেষে লেখা নিচে চলে আসছে।

কিন্তু আপনি প্রথম আলোর সাইটে দেখছেন যে কখনও এরকমটা হইছে? যে ছবি ভেঙে লেখা উপরে বা নিচে চলে আসছে? প্রথম আলো তাদের ডিজাইনের ব্যাপারে কতটা কনসার্নড সেটা একটা এক্সাম্পেল দিয়ে বোঝাচ্ছি, এখানে এই বক্সটা থেকে এই বক্সটার width যে দুরত্ব দেখতে পাচ্ছেন এই বক্স থেকে নিচের বক্স পর্যন্ত হাইটেও কিন্তু সেই দুরত্বটা সেম। তাদের সমস্ত ছবির সাইজ রেশিও এক। প্রয়োজনে তারা ছবি ক্রপ করে কিছু অংশ বাদ দিয়ে দেয় তাও কখনও এই রেশিও পরিবর্তন করে না। তারা তাদের ওয়েবসাইটে প্রত্যেক পিক্সেল যায়গা ইউটিলাইজ করে। এই ওয়েবসাইটে কখনও আপনি কোন যায়গা অকারণেই খালি পড়ে আছে বা কোন যায়গায় অতিরিক্ত লেখা বা ছবি দিয়ে রেখেছে এরকম দেখবেন না।

এখন আপনি বলেন, আপনি প্রথম আলো দেখবেন না এইযে দৈনিক খবর ২৪.কম এই সাইট দেখবেন। ইউজার কার বেশি হবে।

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

এমন অনেক লোক আছে যারা ইভেন জানেও না প্রোটোটাইপিং বা ইউআই ডিজাইন কি। অথচ তাদের প্রোফাইলে ঢুকলেই দেখতে পারবেন। I'm web designer. I'm web developer etc. etc. Html/css জানি মানেই আমি ওয়েব ডিজাইনার। আর Php, laravel জানি মানেতো আমি বস। গ্রুপে গ্রুপে পোষ্ট আমি একজন web designer, expert in html css bootstrap, php. যদি কারো কোন ওয়েবসাইটের প্রয়োজন হয় ইনবক্স মি। কিছু বলার নাই ভাই।

কয়েকদিন আগে আমি প্রথম আলোতে একটি আর্টিকেল লিখেছিলাম, করোনায় বাড়ছে প্রযুক্তির সঠিক ব্যবহার এই সম্পর্কিত। সেটা পড়ে ইথিওপিয়ায় নিযুক্ত বাংলাদেশি রাষ্ট্রদুত আমাকে মেইল করেন। অর্থাৎ তারাও প্রথম আলো পড়েন। কেন? কেন তারা বাংলাদেশের যে এই প্রায় ১০ হাজারের ওপরে অনলাইন নিউজ পোর্টাল আছে সেগুলো পড়েন না। কারণ একটাই প্রথম আলো যেভাবে কাজ করে তার ১% নিয়েও সেসব পত্রিকা ভাবে না। এখানেই আসে ডিফরেন্স।

যাইহোক অনেক কথা বললাম। এই ভিডিওতে শুধুমাত্র UI Design নিয়ে কথা বলেছি। Next video তে UX Design নিয়ে কথা বলব। আসল মজা দেখবেন তখন। সবাই ভালো থাকবেন, সুস্থ থাকবেন। আল্লাহ হাফেজ।