💡 [AI-Augmented UI/UX Design Series]
এটি ৪ পর্বের একটি প্র্যাক্টিক্যাল গাইডলাইন সিরিজ, যেখানে এআই-কে অন্ধের মতো প্রম্পট না দিয়ে কাস্টম প্রোজেক্ট সেটআপ, ফিগমা অটো-লেআউট এবং লজিক্যাল ইউজার রিসার্চ ওয়ার্কফ্লোতে এআই-কে লিভারেজ করার প্রসেস দেখানো হয়েছে। নতুন ডিজাইনারদের লজিক্যাল ও গোছানো কাজের গাইডলাইন দেওয়াই এই সিরিজের মূল উদ্দেশ্য।
গত পর্বে আমরা দেখেছি কীভাবে .md ফাইল এবং জেমিনি জেমস বা ক্লড প্রজেক্টস ব্যবহার করে একটি পার্সোনাল "ডিজাইন কো-পাইলট" সেটআপ করতে হয়। আশা করি আপনারা অলরেডি আপনাদের প্রোজেক্টের সোর্স অফ ট্রুথ রেডি করে ফেলেছেন।
আজকে আমরা দেখব কীভাবে এই সেটআপ ব্যবহার করে ৫ দিনের ইউজার রিসার্চ এবং ইনফরমেশন আর্কিটেকচার (IA)-এর কাজ মাত্র ৫ ঘণ্টায় নামিয়ে আনা যায়।
ক্লিকবাজি বা শর্টকাটের পেছনে না ছুটে, চলুন একচুয়াল স্কিল এবং লজিক্যাল প্রসেসটা বুঝি।
১. প্রম্পট লেয়ারিং (Prompt Layering) দিয়ে কম্পিটিটর অ্যানালাইসিস
ইউজার রিসার্চের প্রথম ধাপ হলো কম্পিটিটরদের দুর্বলতা এবং শক্তির জায়গাগুলো খুঁজে বের করা। আমরা অনেক সময় ঘণ্টার পর ঘণ্টা প্লে-স্টোরের রিভিউ বা ব্লগ পড়ে সময় নষ্ট করি।
এখানে আমরা ব্যবহার করব প্রম্পট লেয়ারিং। আপনার কো-পাইলট চ্যাটে নিচের ৩টি লেয়ার মেনে প্রম্পট করুন:
- Role (ভূমিকা): "You are an expert user research specialist working on fintech conversion rates..."
- Situation (প্রেক্ষাপট): "We are analyzing competitor apps in Bangladesh. Here are 20 raw negative reviews scraped from competitor apps showing checkout drops. Highlight the 3 most critical pain points..."
- Constraints (সীমাবদ্ধতা): "Do not give generic summaries. Group them strictly into usability, technical failure, and trust-related issues. Present in a markdown table."
এই লেয়ারিংয়ের ফলে এআই আপনাকে সরাসরি অ্যাকশনেবল ডেটা দেবে, কোনো আজাইরা ফিল্টার বা ডামি সামারি দেবে না।
২. ইনফরমেশন আর্কিটেকচার (IA) ও ইউজার ফ্লো জেনারেট করা
রিসার্চের ডেটা চলে আসার পর ডিজাইনারের কাজ হলো স্ক্রিনের আর্কিটেকচার বা ম্যাপিং করা। এআই আপনাকে স্ক্রিন ড্র করে দেবে না, কিন্তু ফ্লো-এর লজিক তৈরিতে সাহায্য করবে।
আপনার কো-পাইলটকে বলুন:
"Based on the checkout pain points we found, generate a step-by-step User Flow for our app's payment page. Define the primary path and list all critical edge cases."
এআই এখানে আপনাকে ৩টি অত্যন্ত গুরুত্বপূর্ণ জিনিস ধরিয়ে দেবে যা সাধারণত জুনিয়র ডিজাইনাররা মিস করে যান:
- Empty States (খালি অবস্থা): যখন ইউজার প্রথমবার পেইজে আসে এবং কোনো ডেটা থাকে না, তখন স্ক্রিন কেমন দেখাবে?
- Error States (ভুল অবস্থা): পেমেন্ট ফেইল করলে বা ভুল কার্ড নাম্বার দিলে ইউজার কীভাবে রিকভার করবে?
- Loading States (লোডিং অবস্থা): প্রসেসিং চলার সময় ইউজার যাতে প্যানিক না করে সেজন্য ভিজ্যুয়াল ফিডব্যাক কেমন হবে?
এই এজ কেসগুলো ক্লিয়ার থাকলে ক্লায়েন্ট বা টিম লিডের মুখোমুখি হয়ে কথা বলার কনফিডেন্স পাবেন।
৩. টেক্সট ফ্লো থেকে ওয়্যারফ্রেম (Wireframe)
এআই থেকে যখন আপনি একটি সলিড ইনফরমেশন আর্কিটেকচার এবং স্টেপ-বাই-স্টেপ ফ্লো পেয়ে গেলেন, আপনার কাজ হলো সেটাকে ভিজ্যুয়াল ওয়্যারফ্রেমে রূপান্তর করা।
ফিগমা ওপেন করুন। এআই-এর দেওয়া টেক্সট ফ্লো-কে এক পাশে রাখুন এবং প্রতিটা স্টেপকে ব্ল্যাক-অ্যান্ড-হোয়াইট বক্স এবং রিয়েল কপি দিয়ে সাজান। মনে রাখবেন, ওয়্যারফ্রেমে কোনো "Lorem Ipsum" বা ডামি টেক্সট ব্যবহার করবেন না। এআই-কে দিয়ে রিয়েল-ওয়ার্ল্ড কপি লিখিয়ে ওয়্যারফ্রেমে বসান।
পরিশেষে:
ডিজাইন সুন্দর করার আগে এর পেছনের লজিক ও আর্কিটেকচার ঠিক রাখা জরুরি। এআই আপনাকে ইনফরমেশন প্রসেস করে স্পিড বাড়িয়ে দেবে, কিন্তু কোন ফ্লো-টি আপনার ইউজারের জন্য বেস্ট হবে, সেই জাজমেন্ট নেওয়ার দায়িত্ব আপনার নিজের।
পরবর্তী পর্বে আমরা দেখব কীভাবে ফিগমার কম্পোনেন্ট ও এআই প্লাগইন ব্যবহার করে ভিজ্যুয়াল ডিজাইন ফাস্ট করা যায়।
ধন্যবাদ সবাইকে।
এই সিরিজের অন্যান্য পর্বগুলো:
- 🔗 পর্ব ১: AI দিয়ে ডিজাইন শুরু করার প্রথম ধাপ: PRD, MD ফাইল এবং কাস্টম প্রোজেক্ট সেটআপ
- 📌 পর্ব ২ (আপনি এখানে আছেন): কাস্টম জেমস (Gems) দিয়ে User Research ও ইনফরমেশন আর্কিটেকচার তৈরির প্রসেস
- 🔗 পর্ব ৩: ফিগমা (Figma) ও এআই প্লাগইনস: দ্রুত ভিজ্যুয়াল ডিজাইন ও কম্পোনেন্ট তৈরির কৌশল
- 🔗 পর্ব ৪: এআই দিয়ে Usability Audit এবং ROI-ফোকাসড কেস স্টাডি লেখার কমপ্লিট গাইড