আপনি সম্ভবত আগে সেখানে ছিল. ব্যবহারকারীদের কাছে একটি মডেল দেখানোর মধ্যে আমরা কীভাবে বেছে নেব এবং কখন আমরা তাদের একটি পৃথক, নতুন পৃষ্ঠায় নেভিগেট করব? এবং এটা কি আদৌ কোন ব্যাপার? আসলে, এটা করে. সিদ্ধান্তটি ব্যবহারকারীদের প্রবাহ, তাদের প্রেক্ষাপট, তাদের বিশদ অনুসন্ধান করার ক্ষমতা এবং এর সাথে ত্রুটির ফ্রিকোয়েন্সি এবং কাজ সমাপ্তির উপর প্রভাব ফেলে। উভয় বিকল্পই বিঘ্নিত এবং হতাশাজনক হতে পারে — ভুল সময়ে এবং ভুল জায়গায়। তাই আমরা এটি সঠিক পেতে ভাল হবে. ঠিক আছে, আসুন দেখি কিভাবে এটি করতে হয়। মডেল বনাম ডায়ালগ বনাম ওভারলে বনাম লাইটবক্স যদিও আমরা প্রায়শই একটি একক মডেল UI উপাদান সম্পর্কে কথা বলি, আমরা প্রায়শই সমস্ত বিভিন্ন ধরণের মডেলের মধ্যে সূক্ষ্ম, জটিল সূক্ষ্মতাগুলি উপেক্ষা করি। আসলে, প্রতিটি মডেল একই নয়। মোডাল, ডায়ালগ, ওভারলে এবং লাইটবক্স - সব একই রকম শোনাচ্ছে, কিন্তু আসলে সেগুলি বেশ আলাদা:
ডায়ালগ "কথোপকথন" (ব্যবহারকারী ↔ সিস্টেম) এর জন্য একটি সাধারণ শব্দ। ওভারলে একটি পৃষ্ঠার উপরে প্রদর্শিত একটি ছোট সামগ্রী প্যানেল৷ ModalUser অবশ্যই ওভারলে + ব্যাকগ্রাউন্ড অক্ষম করে ইন্টারঅ্যাক্ট করতে হবে। ননমোডাল ব্যবহারকারীকে অবশ্যই ওভারলে + ব্যাকগ্রাউন্ড সক্ষম করে ইন্টারঅ্যাক্ট করতে হবে। লাইটবক্স আবছা ব্যাকগ্রাউন্ড মোডালে মনোযোগ ফোকাস করতে।
আনা ক্যালি যেমন হাইলাইট করেছেন, বেশিরভাগ ওভারলে ভুল সময়ে প্রদর্শিত হয়, সমালোচনামূলক কাজের সময় ব্যবহারকারীদের বাধা দেয়, খারাপ ভাষা ব্যবহার করে এবং ব্যবহারকারীদের প্রবাহ ভেঙে দেয়। এগুলি প্রকৃতির দ্বারা বিঘ্নিত হয়, এবং সাধারণত এর জন্য একটি শক্তিশালী প্রয়োজন ছাড়াই উচ্চ স্তরের তীব্রতা সহ।
অবশ্যই ব্যবহারকারীদের তাদের কর্মের ফলাফলগুলি উচ্চ প্রভাব থাকলে অবশ্যই ধীর এবং বাধাগ্রস্ত করতে হবে, তবে বেশিরভাগ পরিস্থিতিতে নন-মডেলগুলি অনেক বেশি সূক্ষ্ম এবং ব্যবহারকারীর দৃষ্টিতে কিছু আনতে আরও বন্ধুত্বপূর্ণ বিকল্প। যদি কিছু হয়, আমি সবসময় এটি একটি ডিফল্ট হতে পরামর্শ. মডেল → একক, স্বয়ংসম্পূর্ণ কাজের জন্য ডিজাইনার হিসাবে, আমরা প্রায়শই মডেলগুলিকে অপ্রাসঙ্গিক এবং বিরক্তিকর হিসাবে বরখাস্ত করি — এবং প্রায়শই সেগুলি হয়! - তবুও তাদের মূল্যও আছে। তারা সম্ভাব্য ভুল সম্পর্কে ব্যবহারকারীদের সতর্ক করতে বা ডেটা ক্ষতি এড়াতে সাহায্য করতে খুব সহায়ক হতে পারে। তারা পৃষ্ঠার বর্তমান অবস্থাকে বাধা না দিয়ে সম্পর্কিত ক্রিয়া সম্পাদন করতে বা বিশদ বিবরণে ড্রিল ডাউন করতে সহায়তা করতে পারে। কিন্তু মডেলগুলির সবচেয়ে বড় সুবিধা হল তারা ব্যবহারকারীদের বর্তমান স্ক্রিনের প্রসঙ্গ রাখতে সাহায্য করে। এর মানে শুধু UI নয়, বরং সম্পাদিত ইনপুট, স্ক্রোলিং পজিশন, অ্যাকর্ডিয়ানের অবস্থা, ফিল্টার নির্বাচন, সাজানো ইত্যাদি।
মাঝে মাঝে, ব্যবহারকারীদের দ্রুত একটি নির্বাচন নিশ্চিত করতে হবে (যেমন, উপরে দেখানো ফিল্টার) এবং তারপর সেখান থেকে অবিলম্বে এগিয়ে যেতে হবে। স্বতঃ-সংরক্ষণ অবশ্যই একই অর্জন করতে পারে, তবে এটি সর্বদা প্রয়োজন বা কাঙ্ক্ষিত নয়। এবং UI ব্লক করা প্রায়শই একটি ভাল ধারণা নয়। যাইহোক, কোনো কাজের জন্য মডেল ব্যবহার করা হয় না। সাধারণত, আমরা সেগুলিকে একক, স্বয়ংসম্পূর্ণ কাজের জন্য ব্যবহার করি যেখানে ব্যবহারকারীদের ঝাঁপিয়ে পড়তে হবে, একটি কাজ সম্পূর্ণ করতে হবে এবং তারপরে তারা যেখানে ছিল সেখানে ফিরে যেতে হবে। আশ্চর্যজনকভাবে, তারা উচ্চ-অগ্রাধিকার, সংক্ষিপ্ত মিথস্ক্রিয়া (যেমন, সতর্কতা, ধ্বংসাত্মক ক্রিয়া, দ্রুত নিশ্চিতকরণ) জন্য ভাল কাজ করে। যখন মডেল সাহায্য করে: 🚫 মোডালগুলি প্রায়ই বিঘ্নিত, আক্রমণাত্মক এবং বিভ্রান্তিকর। ✅ শুধুমাত্র একটি মডেল দেখান যদি ব্যবহারকারীরা ব্যাঘাতকে মূল্য দেয়।✅ ডিফল্টভাবে, নন-ব্লকিং ডায়ালগ পছন্দ করুন ("ননমডাল")। পৃষ্ঠাগুলি → জটিল, বহু-পদক্ষেপ কর্মপ্রবাহের জন্য মডেলগুলির মধ্যে উইজার্ড বা ট্যাবড নেভিগেশন খুব ভাল কাজ করে না, এমনকি জটিল এন্টারপ্রাইজ পণ্যগুলিতেও - সেখানে, সাইড প্যানেল বা ড্রয়ারগুলি সাধারণত ভাল কাজ করে। সমস্যাগুলি শুরু হয় যখন ব্যবহারকারীদের ডেটা পয়েন্টের তুলনা বা রেফারেন্স করতে হয় — তবুও মডেলগুলি এই আচরণটিকে অবরুদ্ধ করে, তাই তারা পরিবর্তে একাধিক ট্যাবে একই পৃষ্ঠাটি পুনরায় খোলে।
আরও জটিল প্রবাহ এবং বহু-পদক্ষেপ প্রক্রিয়ার জন্য, স্বতন্ত্র পৃষ্ঠাগুলি সর্বোত্তম কাজ করে৷ পৃষ্ঠাগুলি আরও ভাল কাজ করে যখন তারা ব্যবহারকারীর সম্পূর্ণ মনোযোগ দাবি করে এবং পূর্ববর্তী স্ক্রিনের উল্লেখ খুব সহায়ক নয়। এবং ড্রয়ারগুলি সাব-টাস্কগুলির জন্য কাজ করে যা একটি সাধারণ মডেলের জন্য খুব জটিল, কিন্তু একটি সম্পূর্ণ পৃষ্ঠা নেভিগেশনের প্রয়োজন নেই। কখন মডেল এড়াতে হবে: 🚫 ত্রুটি বার্তার জন্য মডেল এড়িয়ে চলুন। দুটোই এড়িয়ে চলুনপুনরাবৃত্তিমূলক কাজের জন্য অনেক জটিল, টাস্ক-ভারী পণ্যগুলিতে, ব্যবহারকারীরা নিজেদেরকে বারবার, বারবার একই কাজ সম্পাদন করতে দেখবেন। সেখানে, মডেল এবং নতুন পৃষ্ঠা নেভিগেশন উভয়ই ঘর্ষণ যোগ করে কারণ তারা প্রবাহকে বাধা দেয় বা ব্যবহারকারীদের সমস্ত ভিন্ন ট্যাব বা ভিউয়ের মধ্যে অনুপস্থিত ডেটা সংগ্রহ করতে বাধ্য করে। প্রায়শই, ব্যবহারকারীরা একটি ভাঙা অভিজ্ঞতার সাথে শেষ হয়, যা কখনও শেষ না হওয়া নিশ্চিতকরণে পূর্ণ, অতিরঞ্জিত সতর্কতা, শব্দবাচক নির্দেশাবলী, বা শুধুমাত্র রেফারেন্স পয়েন্টগুলি অনুপস্থিত। Saulius Stebulis যেমন উল্লেখ করেছেন, এই পরিস্থিতিতে, প্রসারণযোগ্য বিভাগ বা ইন-প্লেস এডিটিং প্রায়শই ভাল কাজ করে — তারা বর্তমান স্ক্রিনে টাস্ককে নোঙর করে রাখে। অনুশীলনে, অনেক পরিস্থিতিতে, ব্যবহারকারীরা বিচ্ছিন্নভাবে তাদের কাজগুলি সম্পূর্ণ করেন না। তাদের ডেটা, কপি-পেস্ট মান, বিভিন্ন জায়গায় এন্ট্রি পরিমার্জন করতে হবে, অথবা তাদের কাজের মাধ্যমে কাজ করার সময় একই ধরনের রেকর্ড পর্যালোচনা করতে হবে। ওভারলে এবং ড্রয়ারগুলি টাস্ক চলাকালীন ব্যাকগ্রাউন্ড ডেটাতে অ্যাক্সেস বজায় রাখতে আরও সহায়ক। ফলস্বরূপ, প্রসঙ্গটি সর্বদা তার জায়গায় থাকে, রেফারেন্স বা কপি-পেস্টের জন্য উপলব্ধ। এমন মুহূর্তগুলির জন্য মডেল এবং পৃষ্ঠা নেভিগেশন সংরক্ষণ করুন যেখানে বাধা সত্যিকারের মূল্য যোগ করে — বিশেষ করে গুরুতর ভুলগুলি প্রতিরোধ করতে। মডেল বনাম পৃষ্ঠা: একটি সিদ্ধান্ত গাছ কিছুক্ষণ আগে, রায়ান নিউফেল্ড ডিজাইনারদের মডেল এবং পৃষ্ঠাগুলির মধ্যে বেছে নিতে সাহায্য করার জন্য একটি খুব সহায়ক গাইড একসাথে রেখেছিলেন। এটি একটি সহজ PNG চিটশিট এবং একটি Google ডক টেমপ্লেট সহ 7 টি বিভাগে বিভক্ত প্রশ্নগুলির সাথে আসে৷ এটি দীর্ঘ, অত্যন্ত পুঙ্খানুপুঙ্খ, কিন্তু অনুসরণ করা খুব সহজ:
এটি ভয়ঙ্কর দেখতে হতে পারে, তবে এটি একটি বেশ সহজ 4-পদক্ষেপ প্রক্রিয়া:
স্ক্রীনের প্রসঙ্গ টাস্কের জটিলতা এবং সময়কাল। সরল, ফোকাসড, অ-বিক্ষিপ্ত কাজ একটি মডেল ব্যবহার করতে পারে, কিন্তু দীর্ঘ, জটিল প্রবাহের জন্য একটি পৃষ্ঠা প্রয়োজন। অন্তর্নিহিত পৃষ্ঠার রেফারেন্স। তারপর, আমরা পরীক্ষা করি যে ব্যবহারকারীদের প্রায়শই ব্যাকগ্রাউন্ডে ডেটা উল্লেখ করতে হয় বা কাজটি একটি সাধারণ নিশ্চিতকরণ বা নির্বাচন হয় কিনা। সঠিক ওভারলে নির্বাচন করা। অবশেষে, যদি একটি ওভারলে সত্যিই একটি ভাল বিকল্প হয়, তাহলে এটি আমাদেরকে মডেল বা ননমোডাল (একটি ননমোডালের দিকে ঝুঁকে) এর মধ্যে বেছে নেওয়ার নির্দেশ দেয়।
আপ মোড়ানো যখনই সম্ভব, সমগ্র UI ব্লক করা এড়িয়ে চলুন। একটি ডায়ালগ ভাসমান, আংশিকভাবে UI কভার করে, কিন্তু নেভিগেশন, স্ক্রলিং এবং কপি-পেস্ট করার অনুমতি দেয়। অথবা পাশের ড্রয়ার হিসাবে মডেলের বিষয়বস্তু দেখান। অথবা পরিবর্তে একটি উল্লম্ব অ্যাকর্ডিয়ন ব্যবহার করুন। অথবা ব্যবহারকারীদের একটি পৃথক পৃষ্ঠায় আনুন যদি আপনার অনেক বিস্তারিত দেখানোর প্রয়োজন হয়। কিন্তু আপনি যদি ব্যবহারকারীদের দক্ষতা এবং গতি বাড়াতে চান, তাহলে যেকোন মূল্যে মডেলগুলি এড়িয়ে চলুন। ব্যবহারকারীদের ধীরগতি করতে, তাদের মনোযোগ বান্ডিল করতে, ভুলগুলি প্রতিরোধ করতে তাদের ব্যবহার করুন। থেরেসি ফেসেনডেন যেমন উল্লেখ করেছেন, কেউ বাধাগ্রস্ত হতে পছন্দ করে না, তবে আপনি যদি অবশ্যই করেন তবে নিশ্চিত করুন যে এটি একেবারে মূল্যবান। "স্মার্ট ইন্টারফেস ডিজাইন প্যাটার্নস" এর সাথে দেখা করুন আপনি স্মার্ট ইন্টারফেস ডিজাইন প্যাটার্নস-এ মডেল এবং বিকল্প সম্পর্কে একটি সম্পূর্ণ বিভাগ খুঁজে পেতে পারেন, আমাদের 15h-ভিডিও কোর্স বাস্তব-জীবনের প্রকল্প থেকে 100 এর বাস্তব উদাহরণ সহ — এই বছরের শেষের দিকে একটি লাইভ UX প্রশিক্ষণ সহ। মেগা-ড্রপডাউন থেকে জটিল এন্টারপ্রাইজ টেবিল পর্যন্ত সবকিছু — প্রতি বছর 5টি নতুন সেগমেন্ট যোগ করা হয়। একটি বিনামূল্যের পূর্বরূপ ঝাঁপ দাও. 15% ছাড় বাঁচাতে BIRDIE কোড ব্যবহার করুন। স্মার্ট ইন্টারফেস ডিজাইন প্যাটার্নের সাথে দেখা করুন, ইন্টারফেস ডিজাইন এবং ইউএক্স এর উপর আমাদের ভিডিও কোর্স।
ভিডিও + UX প্রশিক্ষণ শুধুমাত্র ভিডিও ভিডিও + UX প্রশিক্ষণ$ 495.00 $ 699.00
ভিডিও + UX Training25 ভিডিও পাঠ (15h) + লাইভ UX প্রশিক্ষণ পান। 100 দিনের মানি-ব্যাক-গ্যারান্টি। ভিডিও শুধুমাত্র$ 300.00$ 395.00
ভিডিও কোর্স 40 ভিডিও পাঠ (15 ঘন্টা) পান। বার্ষিক আপডেট করা হয়। এছাড়াও 2টি ভিডিও কোর্স সহ একটি UX বান্ডেল হিসাবে উপলব্ধ।
দরকারী সম্পদ
আনা ক্যালি দ্বারা পপআপের বিভিন্ন প্রকার Uxcel দ্বারা UI মডেল ডিজাইন করার জন্য সর্বোত্তম অনুশীলন আমরা খুব বেশি জঘন্য মডেল ব্যবহার করি: ইউএক্স নির্দেশিকা, অ্যাড্রিয়ান এগার দ্বারা থেরেসি ফেসেনডেনের দ্বারা মডেল এবং ননমোডাল ডায়ালগ আধুনিক এন্টারপ্রাইজ UI ডিজাইন: জেমস জ্যাকবস দ্বারা মডেল ডায়ালগ ডিজাইন সিস্টেমে মডেল
