তাহলে কম্বোবক্স, মাল্টিসিলেক্ট, লিস্টবক্স এবং ড্রপডাউনের মধ্যে পার্থক্য কী? যদিও এই সমস্ত UI উপাদান দেখতে একই রকম হতে পারে, তবে তারা বিভিন্ন উদ্দেশ্যে কাজ করে। পছন্দ প্রায়ই নিচে আসে উপলব্ধ বিকল্প সংখ্যা এবং তাদের দৃশ্যমানতা।
আসুন দেখি তারা কীভাবে আলাদা হয়, তারা কি উদ্দেশ্যে পরিবেশন করেএবং কীভাবে সঠিকটি বেছে নেবেন – পথের মধ্যে ভুল বোঝাবুঝি এবং মিথ্যা প্রত্যাশাগুলি এড়ানো।
সব তালিকার ধরণ সমান নয়
উপরে হাইলাইট করা সমস্ত UI উপাদানগুলির মধ্যে একটি জিনিস মিল রয়েছে: তারা তালিকার সাথে ব্যবহারকারীদের মিথস্ক্রিয়া সমর্থন করে। যাইহোক, তারা এটি একটু ভিন্নভাবে করে।
আসুন একে একে একে একে দেখে নেওয়া যাক:
- ড্রপ ডাউন → তালিকাটি ট্রিগার না হওয়া পর্যন্ত লুকানো থাকে।
- কম্বো বক্স → ফিল্টার করতে + 1 টাইপ করুন এবং বিকল্পটি নির্বাচন করুন।
- একাধিক নির্বাচন → টাইপ করুন + ফিল্টার করতে একাধিক বিকল্প নির্বাচন করুন।
- তালিকা বাক্স → সমস্ত তালিকা বিকল্পগুলি ডিফল্টরূপে দৃশ্যমান (+স্ক্রোল)।
- দ্বৈত তালিকা বাক্স → 2টি তালিকা বাক্সের মধ্যে আইটেমগুলি সরান৷
অন্য কথায়, কম্বো বক্স একটি ড্রপডাউন তালিকার সাথে একটি পাঠ্য ইনপুট ক্ষেত্রকে একত্রিত করে, যাতে ব্যবহারকারীরা পারেন৷ ফিল্টার করতে টাইপ করুন এবং একটি বিকল্প চয়ন করুন. সঙ্গে একাধিক নির্বাচনব্যবহারকারীরা বিভিন্ন বিকল্প থেকে বেছে নিতে পারেন (প্রায়শই বড়ি বা চিপস হিসাবে প্রদর্শিত হয়)।
তালিকা বাক্স প্রদর্শন সমস্ত তালিকা বিকল্প দৃশ্যমান হয় ডিফল্টরূপে, ঘন ঘন স্ক্রোলিং সহ। ব্যবহারকারীদের দ্রুত উপলব্ধ সমস্ত বিকল্প দেখতে হলে এটি সহায়ক। দ্বৈত তালিকা বাক্স (এছাড়াও বলা হয় স্থানান্তর তালিকা) একটি তালিকা বাক্সের একটি ফর্ম যা ব্যবহারকারীদের অনুমতি দেয় দুটি তালিকা বাক্সের মধ্যে আইটেম সরান (বাম ↔ ডান), সাধারণত বাল্ক নির্বাচনের জন্য।
প্রায়শই ব্যবহৃত বিকল্পগুলি কখনই লুকাবেন না
উপরে উল্লিখিত হিসাবে, সঠিক UI উপাদান নির্বাচন করা নির্ভর করে 2 কারণ: কতগুলি তালিকা বিকল্প উপলব্ধ, এবং এই সমস্ত বিকল্পগুলি ডিফল্টরূপে দৃশ্যমান হওয়া প্রয়োজন কিনা। সমস্ত তালিকায় গাছের কাঠামো, বাসা তৈরি এবং গ্রুপ নির্বাচন থাকতে পারে।
যে কোনো UI উপাদানের জন্য আমি বছরের পর বছর ধরে অনুসরণ করছি এমন একটি নীতি রয়েছে: প্রায়শই ব্যবহৃত বিকল্পগুলি কখনই লুকাবেন না. ব্যবহারকারীরা ঘন ঘন একটি নির্দিষ্ট নির্বাচনের উপর নির্ভর করলে, তাদের কাছ থেকে এটি লুকিয়ে রাখার কোন মানে নেই।
আমরা হয় এটা করতে পারে প্রাক-নির্বাচিতঅথবা (যদি শুধুমাত্র 2-3টি প্রায়শই ব্যবহৃত বিকল্প থাকে) তাদের হিসাবে দেখান চিপ বা বোতামএবং তারপর মিথস্ক্রিয়া উপর তালিকার বাকি দেখান. সাধারণভাবে, সর্বদা জনপ্রিয় বিকল্পগুলি প্রদর্শন করা একটি ভাল ধারণা – এমনকি এটি UI কে বিশৃঙ্খল করে।
কোনটি কিভাবে নির্বাচন করবেন?
প্রতিটি তালিকার জন্য একটি জটিল নির্বাচন পদ্ধতির প্রয়োজন হয় না। সঙ্গে তালিকা জন্য 5টিরও কম আইটেমসাধারণ রেডিও বোতাম বা চেকবক্স সাধারণত সবচেয়ে ভালো কাজ করে। তবে ব্যবহারকারীদের মধ্যে নির্বাচন করতে হবে বড় তালিকা বিকল্পগুলির মধ্যে (উদাহরণস্বরূপ, 200+ আইটেম), ComboBox + MultiSelect দ্রুত ফিল্টারিংয়ের কারণে সহায়ক (উদাহরণস্বরূপ, দেশ নির্বাচন)।
তালিকা বাক্স মানুষের অ্যাক্সেসের প্রয়োজন হলে তারা সহায়ক একবারে একাধিক বিকল্পবিশেষ করে যদি তাদের সেই তালিকা থেকেও একাধিক বিকল্প নির্বাচন করতে হয়। এগুলি প্রায়শই ব্যবহৃত ফিল্টারগুলির জন্য সহায়ক হতে পারে।
দ্বৈত তালিকা বাক্স প্রায়ই উপেক্ষা করা হয় এবং উপেক্ষা করা হয়। কিন্তু এটি জটিল কাজের জন্য খুব সহায়ক হতে পারে, যেমন গণ নির্বাচন, বা ভূমিকা, কাজ, দায়িত্ব বরাদ্দ করা। এটিই একমাত্র UI উপাদান যা ব্যবহারকারীদের প্রতিশ্রুতি দেওয়ার আগে উত্স তালিকার পাশাপাশি তাদের সম্পূর্ণ নির্বাচন তালিকা পর্যালোচনা করতে দেয় (এ নামেও পরিচিত “হস্তান্তর তালিকা”)
প্রকৃতপক্ষে, ডুয়াল লিস্ট বক্স প্রায়ই দ্রুত, আরো নির্ভুল এবং ড্র্যাগ-এন্ড-ড্রপের চেয়ে বেশি অ্যাক্সেসযোগ্য।
ব্যবহারযোগ্যতা বিবেচনা
মনে রাখা একটি গুরুত্বপূর্ণ বিষয় হল যে সব ধরনের তালিকা সমর্থন করা প্রয়োজন। কীবোর্ড নেভিগেশন (উদাহরণস্বরূপ, ↑/↓ তীর কী) অ্যাক্সেসের জন্য। কিছু লোক টাইপ করা শুরু করার পরে বিকল্পগুলি নির্বাচন করতে প্রায় সবসময় কীবোর্ডের উপর নির্ভর করবে।
এর বাইরে:
- সঙ্গে তালিকা জন্য 7+ বিকল্পব্যবহারকারীর ইন্টারঅ্যাকশনগুলিকে স্ট্রীমলাইন করতে “সমস্ত নির্বাচন করুন” এবং “সমস্ত সাফ করুন” কার্যকারিতা যোগ করার কথা বিবেচনা করুন৷
- কম্বোবক্স সহ দীর্ঘ তালিকার জন্য, সমস্ত বিকল্প হাইলাইট করুন ক্লিক/ট্যাপের ব্যবহারকারীদের জন্য, অন্যথায় তাদের দেখা হবে না,
- সবচেয়ে গুরুত্বপূর্ণ, অ-ইন্টারেক্টিভ উপাদানগুলি বোতাম হিসাবে প্রদর্শন করবেন না এবং ইন্টারেক্টিভ উপাদানগুলিকে স্ট্যাটিক লেবেল হিসাবে প্রদর্শন করবেন না – বিভ্রান্তি এড়াতে।
সমাপ্তি: সবকিছুই ড্রপডাউন নয়
নাম গুরুত্বপূর্ণ। ক বিকল্পগুলির উল্লম্ব তালিকা এটি সাধারণত একটি “ড্রপডাউন” হিসাবে বর্ণনা করা হয় – তবে প্রায়শই এটি অর্থপূর্ণ হওয়ার জন্য কিছুটা সাধারণ। “ড্রপ ডাউন” নির্দেশ করে যে তালিকাটি ডিফল্টরূপে লুকানো আছে। “একাধিক নির্বাচন” একটি তালিকার মধ্যে বহু-নির্বাচন (চেকবক্স) বোঝায়। “কম্বো বক্স” মানে টেক্সট ইনপুট। এবং “লিস্টবক্স” হল শুধুমাত্র নির্বাচনযোগ্য আইটেমগুলির একটি তালিকা, যা সর্বদা দৃশ্যমান।
লক্ষ্যটি কেবল উপরের সংজ্ঞাগুলির সাথে সামঞ্জস্য করা নয়। বরং সারিবদ্ধ অভিপ্রায় – সিদ্ধান্ত নেওয়ার সময়, ডিজাইন করার, তৈরি করার এবং তারপরে এই UI উপাদানগুলি ব্যবহার করার সময় একই ভাষায় কথা বলুন৷
এটা সবার জন্য কাজ করা উচিত — ডিজাইনার, প্রকৌশলী এবং শেষ ব্যবহারকারীরা — যতক্ষণ স্ট্যাটিক লেবেলগুলি ইন্টারেক্টিভ বোতামের মতো না দেখায়, এবং রেডিও বোতামগুলি চেকবক্সের মতো কাজ করে না৷
“এআই ইন্টারফেসের জন্য ডিজাইন প্যাটার্নস” এর সাথে দেখা করুন
দেখা এআই ইন্টারফেসের জন্য ডিজাইন প্যাটার্নভাইটালি নতুন ভিডিও কোর্স লাইভ UX প্রশিক্ষণ শীঘ্রই আসছে – বাস্তব জীবনের পণ্য থেকে বাস্তব উদাহরণ সহ। বিনামূল্যে প্রিভিউ দেখুন.
দরকারী সম্পদ
- স্বয়ংসম্পূর্ণ: UX নির্দেশিকা, Vitaly Fridman দ্বারা
- কম্বোবক্স, ইবে দ্বারা 👍
- কম্বোবক্স, ইলাস্টিক দ্বারা
- কম্বোবক্স, অ্যালিসা দ্বারা
- ComboBox, MongoDB দ্বারা 👍
- কম্বোবক্স, ভিসা দ্বারা 👍
- কম্বোবক্স, ওয়াটসন দ্বারা (ডকপ্লানার)
- কম্বোবক্স, উইকিমিডিয়ার মাধ্যমে
- Zendesk দ্বারা কম্বোবক্স
- মাল্টিসিলেক্ট (মঙ্গোডিবি কম্বোবক্স ডিজাইন ডক্স), মঙ্গোডিবি 👍 দ্বারা
- উইকিমিডিয়ার মাল্টিসিলেক্ট লুকআপ
- Vaadin দ্বারা মাল্টি-সিলেক্ট কম্বো বক্স
- মাল্টিপল চয়েস, ভিসা দ্বারা
- স্থানান্তর (লিস্টবক্স উদাহরণ), পিঁপড়া ডিজাইন দ্বারা
- Hopper দ্বারা তালিকাবক্স
- vaadin দ্বারা তালিকা বাক্স
- লিস্টবক্স, ভিসা দ্বারা
- Red Hat দ্বারা দ্বৈত তালিকা নির্বাচক (প্যাটার্নফ্লাই)
- সেলসফোর্স দ্বারা ডুয়াল লিস্টবক্স (লাইটনিং ডিজাইন সিস্টেম)
- স্থানান্তর তালিকা, রক্ষণাবেক্ষণ দ্বারা
- ড্যাশলাইট দ্বারা ডুয়াল লিস্টবক্স
- ভিটালি ফ্রিডম্যানের ব্যাজ বনাম পিল বনাম চিপস বনাম ট্যাগ
- তালিকাবক্স বনাম ড্রপডাউন তালিকা (NN/G) আনা কেলি দ্বারা
(yk)
