তাহলে কম্বোবক্স, মাল্টিসিলেক্ট, লিস্টবক্স এবং ড্রপডাউনের মধ্যে পার্থক্য কী? যদিও এই সমস্ত UI উপাদানগুলি একই রকম প্রদর্শিত হতে পারে, তারা বিভিন্ন উদ্দেশ্যে কাজ করে৷ পছন্দটি প্রায়শই উপলব্ধ বিকল্পের সংখ্যা এবং তাদের দৃশ্যমানতার উপর নির্ভর করে। আসুন দেখি তারা কীভাবে আলাদা, তারা কী উদ্দেশ্যে কাজ করে এবং কীভাবে সঠিকটি বেছে নিতে হয় — পথের মধ্যে ভুল বোঝাবুঝি এবং ভুল প্রত্যাশাগুলি এড়িয়ে চলুন।
সমস্ত তালিকা প্যাটার্ন একই নয় উপরে হাইলাইট করা সমস্ত UI উপাদানগুলির মধ্যে একটি জিনিস মিল রয়েছে: তারা তালিকার সাথে ব্যবহারকারীদের মিথস্ক্রিয়া সমর্থন করে। যাইহোক, তারা এটি কিছুটা ভিন্নভাবে করে। একে একে একে একে দেখে নেওয়া যাক:
ড্রপডাউন → তালিকাটি ট্রিগার না হওয়া পর্যন্ত লুকানো থাকে। কম্বোবক্স → ফিল্টার করতে টাইপ করুন + 1টি বিকল্প নির্বাচন করুন। মাল্টিসিলেক্ট → ফিল্টার করতে টাইপ করুন + অনেকগুলি বিকল্প নির্বাচন করুন। তালিকাবক্স → সমস্ত তালিকা বিকল্পগুলি ডিফল্টরূপে দৃশ্যমান (+ স্ক্রোল)। দ্বৈত তালিকাবাক্স → 2টি তালিকাবক্সের মধ্যে আইটেম সরান।
অন্য কথায়, কম্বোবক্স একটি ড্রপডাউন তালিকার সাথে একটি পাঠ্য ইনপুট ক্ষেত্রকে একত্রিত করে, যাতে ব্যবহারকারীরা ফিল্টার করতে টাইপ করতে পারে এবং একটি একক বিকল্প নির্বাচন করতে পারে। মাল্টিসিলেক্টের মাধ্যমে, ব্যবহারকারীরা অনেকগুলি বিকল্প নির্বাচন করতে পারে (প্রায়শই বড়ি বা চিপস হিসাবে প্রদর্শিত হয়)। তালিকাবক্সগুলি ডিফল্টরূপে দৃশ্যমান সমস্ত তালিকা বিকল্পগুলি প্রদর্শন করে, প্রায়শই স্ক্রোলিং সহ। ব্যবহারকারীদের অবিলম্বে উপলব্ধ সমস্ত পছন্দ দেখতে হলে এটি সহায়ক। ডুয়াল লিস্টবক্স (যাকে স্থানান্তর তালিকাও বলা হয়) হল একটি তালিকাবক্সের একটি বৈচিত্র যা ব্যবহারকারীদের দুটি তালিকাবক্সের (বাম ↔ ডানে) মধ্যে আইটেম সরাতে দেয়, সাধারণত বাল্ক নির্বাচনের জন্য। প্রায়শই ব্যবহৃত বিকল্পগুলি কখনই লুকাবেন না উপরে উল্লিখিত হিসাবে, সঠিক UI উপাদানের পছন্দ 2টি বিষয়ের উপর নির্ভর করে: কতগুলি তালিকা বিকল্প উপলব্ধ রয়েছে এবং যদি এই সমস্ত বিকল্পগুলি ডিফল্টরূপে দৃশ্যমান হওয়া প্রয়োজন। সমস্ত তালিকায় গাছের কাঠামো, বাসা তৈরি এবং গ্রুপ নির্বাচনও থাকতে পারে।
একটি নীতি রয়েছে যা আমি বছরের পর বছর ধরে যেকোন UI উপাদানের জন্য অনুসরণ করছি: ঘন ঘন ব্যবহৃত বিকল্পগুলি কখনই লুকাবেন না। ব্যবহারকারীরা ঘন ঘন একটি নির্দিষ্ট নির্বাচনের উপর নির্ভর করলে, তাদের কাছ থেকে এটি লুকানোর খুব কম মূল্য আছে। আমরা হয় এটিকে প্রাক-নির্বাচিত করতে পারি, অথবা (যদি শুধুমাত্র 2-3টি ঘন ঘন ব্যবহার করা বিকল্প থাকে) সেগুলিকে চিপ বা বোতাম হিসাবে দেখাতে পারি, এবং তারপর মিথস্ক্রিয়ায় তালিকার বাকি অংশটি দেখাতে পারি। সাধারণভাবে, সর্বদা জনপ্রিয় বিকল্পগুলি প্রদর্শন করা একটি ভাল ধারণা - এমনকি এটি UI কে বিশৃঙ্খল করতে পারে। কোনটি কিভাবে নির্বাচন করবেন? প্রতিটি তালিকার একটি জটিল নির্বাচন পদ্ধতির প্রয়োজন হয় না। 5 টিরও কম আইটেমের তালিকার জন্য, সাধারণ রেডিও বোতাম বা চেকবক্সগুলি সাধারণত সবচেয়ে ভাল কাজ করে। কিন্তু যদি ব্যবহারকারীদের বিকল্পগুলির একটি বড় তালিকা থেকে নির্বাচন করতে হয় (যেমন, 200+ আইটেম), কম্বোবক্স + মাল্টিসিলেক্ট দ্রুত ফিল্টারিংয়ের (যেমন, দেশ নির্বাচন) কারণে সহায়ক।
তালিকাবক্সগুলি সহায়ক হয় যখন লোকেদের একসাথে অনেকগুলি বিকল্প অ্যাক্সেস করতে হয়, বিশেষত যদি তাদের সেই তালিকা থেকেও অনেকগুলি বিকল্প বেছে নিতে হয়। তারা প্রায়শই ব্যবহৃত ফিল্টার জন্য সহায়ক হতে পারে.
ডুয়াল লিস্টবক্স প্রায়ই উপেক্ষা করা হয় এবং উপেক্ষা করা হয়। কিন্তু এটি জটিল কাজের জন্য খুব সহায়ক হতে পারে, যেমন .. বাল্ক নির্বাচন, বা ভূমিকা, কাজ, দায়িত্ব বরাদ্দ করা। এটি একমাত্র UI উপাদান যা ব্যবহারকারীদের প্রতিশ্রুতি দেওয়ার আগে উত্স তালিকার সাথে তাদের সম্পূর্ণ নির্বাচন তালিকা পাশাপাশি পর্যালোচনা করতে দেয় (যাকে "স্থানান্তর তালিকা"ও বলা হয়)। প্রকৃতপক্ষে, ডুয়াল লিস্টবক্স প্রায়শই দ্রুত, আরও নির্ভুল এবং ড্র্যাগ-এন্ড-ড্রপের চেয়ে আরও অ্যাক্সেসযোগ্য। ব্যবহারযোগ্যতা বিবেচনা মনে রাখার জন্য একটি গুরুত্বপূর্ণ দ্রষ্টব্য হল যে সমস্ত তালিকার ধরনগুলি অ্যাক্সেসযোগ্যতার জন্য কীবোর্ড নেভিগেশন (যেমন, ↑/↓ তীর কীগুলি) সমর্থন করতে হবে৷ কিছু লোক টাইপ করা শুরু করার পরে বিকল্পগুলি নির্বাচন করতে প্রায় সবসময় কীবোর্ডের উপর নির্ভর করবে।
এর বাইরে:
7+ বিকল্পের তালিকার জন্য, ব্যবহারকারীর মিথস্ক্রিয়াকে স্ট্রীমলাইন করতে "সমস্ত নির্বাচন করুন" এবং "সমস্ত সাফ করুন" কার্যকারিতা যোগ করার কথা বিবেচনা করুন। একটি কম্বোবক্স সহ দীর্ঘ তালিকার জন্য, ক্লিক/ট্যাপে ব্যবহারকারীদের কাছে সমস্ত বিকল্প প্রকাশ করুন, অন্যথায় সেগুলি কখনই দেখা যাবে না, সবচেয়ে গুরুত্বপূর্ণ, বিভ্রান্তি এড়াতে অ-ইন্টারেক্টিভ উপাদানগুলিকে বোতাম হিসাবে প্রদর্শন করবেন না — এবং ইন্টারেক্টিভ উপাদানগুলিকে স্ট্যাটিক লেবেল হিসাবে প্রদর্শন করবেন না।
মোড়ানো: সবকিছুই ড্রপডাউন নয় নাম গুরুত্বপূর্ণ। বিকল্পগুলির একটি উল্লম্ব তালিকাকে সাধারণত একটি "ড্রপডাউন" হিসাবে বর্ণনা করা হয় — তবে প্রায়শই এটি অর্থপূর্ণ হওয়ার জন্য কিছুটা সাধারণ। "ড্রপডাউন" ইঙ্গিত দেয় যে তালিকাটি ডিফল্টরূপে লুকানো আছে। "মাল্টিসিলেক্ট" একটি তালিকার মধ্যে বহু-নির্বাচন (চেকবক্স) বোঝায়। "কম্বোবক্স" টেক্সট ইনপুট বোঝায়। এবং "লিস্টবক্স" হল নির্বাচনযোগ্য আইটেমগুলির একটি তালিকা, যা সর্বদা দৃশ্যমান। লক্ষ্যটি এর খাতিরে উপরের সংজ্ঞাগুলির সাথে সামঞ্জস্যপূর্ণ হওয়া নয়। তবে উদ্দেশ্যগুলিকে সারিবদ্ধ করার জন্য - এই UI উপাদানগুলির উপর সিদ্ধান্ত নেওয়া, ডিজাইন করা, নির্মাণ এবং তারপর ব্যবহার করার সময় একই ভাষায় কথা বলুন। এটা জন্য কাজ করা উচিতপ্রত্যেকে — ডিজাইনার, প্রকৌশলী এবং শেষ ব্যবহারকারীরা — যতক্ষণ পর্যন্ত স্ট্যাটিক লেবেলগুলি ইন্টারেক্টিভ বোতামগুলির মতো না দেখায় এবং রেডিও বোতামগুলি চেকবক্সের মতো কাজ করে না৷ "এআই ইন্টারফেসের জন্য ডিজাইন প্যাটার্নস" এর সাথে দেখা করুন AI ইন্টারফেসের জন্য ডিজাইন প্যাটার্নের সাথে দেখা করুন, Vitaly-এর নতুন ভিডিও কোর্স বাস্তব জীবনের পণ্য থেকে ব্যবহারিক উদাহরণ সহ — একটি লাইভ UX প্রশিক্ষণ শীঘ্রই ঘটছে। একটি বিনামূল্যের পূর্বরূপ ঝাঁপ দাও. এআই ইন্টারফেসের জন্য ডিজাইন প্যাটার্নের সাথে দেখা করুন, ইন্টারফেস ডিজাইন এবং ইউএক্সের উপর ভিটালির ভিডিও কোর্স।
ভিডিও + UX প্রশিক্ষণ শুধুমাত্র ভিডিও ভিডিও + UX প্রশিক্ষণ$ 450.00 $ 799.00
ভিডিও + UX Training30 ভিডিও পাঠ (10h) + লাইভ UX প্রশিক্ষণ পান। 100 দিনের মানি-ব্যাক-গ্যারান্টি। ভিডিও শুধুমাত্র$ 275.00$ 395.00
ভিডিও কোর্স 30 ভিডিও পাঠ (10 ঘন্টা) পান। বার্ষিক আপডেট করা হয়। এছাড়াও 3টি ভিডিও কোর্স সহ একটি UX বান্ডেল হিসাবে উপলব্ধ।
দরকারী সম্পদ
স্বয়ংসম্পূর্ণ: UX নির্দেশিকা, Vitaly Friedman দ্বারা কম্বোবক্স, ইবে দ্বারা 👍 কম্বোবক্স, ইলাস্টিক দ্বারা কম্বোবক্স, এলিসা দ্বারা কম্বোবক্স, MongoDB 👍 দ্বারা কম্বোবক্স, ভিসা দ্বারা 👍 কম্বোবক্স, ওয়াটসন দ্বারা (ডকপ্লানার) কম্বোবক্স, উইকিমিডিয়া দ্বারা কম্বোবক্স, জেনডেস্ক দ্বারা MongoDB 👍 দ্বারা মাল্টিসিলেক্ট (মঙ্গোডিবি কম্বোবক্স ডিজাইন ডক্স), উইকিমিডিয়া দ্বারা মাল্টিসিলেক্ট লুকআপ Vaadin দ্বারা বহু-নির্বাচন কম্বো বক্স ভিসা দ্বারা মাল্টিসিলেক্ট স্থানান্তর (লিস্টবক্স উদাহরণ), পিঁপড়া ডিজাইন দ্বারা লিস্টবক্স, হপার দ্বারা তালিকা বক্স, Vaadin দ্বারা লিস্টবক্স, ভিসা দ্বারা দ্বৈত তালিকা নির্বাচক, রেড হ্যাট (প্যাটার্নফ্লাই) দ্বারা ডুয়াল লিস্টবক্স, সেলসফোর্স দ্বারা (লাইটনিং ডিজাইন সিস্টেম) স্থানান্তর তালিকা, Mantine দ্বারা ডুয়াল লিস্টবক্স, ড্যাশলাইট দ্বারা ব্যাজ বনাম পিলস বনাম চিপস বনাম ট্যাগ, ভিটালি ফ্রিডম্যান দ্বারা লিস্টবক্স বনাম ড্রপডাউন তালিকা, আনা ক্যালির (NN/g)
