بنابراین تفاوت بین جعبه ترکیبی، چند انتخابی، لیست باکس و کشویی چیست؟ در حالی که همه این مؤلفههای رابط کاربری ممکن است مشابه به نظر برسند، اما اهداف متفاوتی دارند. انتخاب اغلب به تعداد گزینه های موجود و قابل مشاهده بودن آنها بستگی دارد. بیایید ببینیم که آنها چگونه متفاوت هستند، چه هدفی را دنبال می کنند، و چگونه می توان مورد درست را انتخاب کرد - اجتناب از سوء تفاهم ها و انتظارات نادرست در طول مسیر.
همه الگوهای فهرست یکسان نیستند تمام اجزای رابط کاربری که در بالا مشخص شده اند دقیقاً یک چیز مشترک دارند: آنها از تعاملات کاربران با لیست ها پشتیبانی می کنند. با این حال، آنها این کار را کمی متفاوت انجام می دهند. بیایید یک به یک به هر یک نگاهی بیندازیم:
لیست کشویی ← تا زمانی که فعال نشود پنهان می شود. Combobox → تایپ کنید تا فیلتر + 1 گزینه را انتخاب کنید. چند انتخاب ← تایپ برای فیلتر + انتخاب گزینه های زیادی. لیست باکس → همه گزینه های لیست به طور پیش فرض قابل مشاهده است (+ اسکرول). جعبه فهرست دوتایی ← موارد را بین 2 جعبه فهرست جابه جا کنید.
به عبارت دیگر، Combobox یک فیلد ورودی متن را با یک لیست کشویی ترکیب می کند، بنابراین کاربران می توانند برای فیلتر کردن تایپ کرده و یک گزینه را انتخاب کنند. با Multiselect، کاربران می توانند گزینه های زیادی را انتخاب کنند (اغلب به صورت قرص یا چیپس نمایش داده می شوند). لیست باکسها همه گزینههای فهرست را بهطور پیشفرض قابل مشاهده هستند، اغلب با پیمایش. زمانی که کاربران نیاز دارند فوراً همه گزینه های موجود را ببینند مفید است. لیست باکس دوگانه (که لیست انتقال نیز نامیده می شود) نوعی از جعبه فهرست است که به کاربران امکان می دهد موارد را بین دو لیست باکس (چپ ↔ راست) جابجا کنند، معمولاً برای انتخاب انبوه. هرگز گزینه های استفاده شده را پنهان نکنید همانطور که در بالا ذکر شد، انتخاب مولفه UI مناسب به 2 عامل بستگی دارد: تعداد گزینه های لیست موجود است و اینکه آیا همه این گزینه ها باید به طور پیش فرض قابل مشاهده باشند. همه لیست ها می توانند ساختار درختی، تودرتو و انتخاب گروه نیز داشته باشند.
یک اصل وجود دارد که من سال ها برای هر مؤلفه UI دنبال می کنم: هرگز گزینه های پرکاربرد را پنهان نکنید. اگر کاربران به طور مکرر به یک انتخاب خاص تکیه کنند، مخفی کردن آن از آنها ارزش بسیار کمی دارد. میتوانیم آن را از پیش انتخاب کنیم، یا (اگر فقط ۲ تا ۳ گزینه پرکاربرد وجود دارد) آنها را بهعنوان تراشه یا دکمه نشان دهیم، و سپس بقیه لیست را در تعامل نشان دهیم. به طور کلی، ایده خوبی است که همیشه گزینه های محبوب را نمایش دهید - حتی اگر ممکن است رابط کاربری را به هم ریخته باشد. چگونه کدام را انتخاب کنیم؟ هر فهرستی به یک روش انتخاب پیچیده نیاز ندارد. برای لیست هایی با کمتر از 5 مورد، دکمه های رادیویی ساده یا چک باکس ها معمولا بهترین کار را دارند. اما اگر کاربران نیاز به انتخاب از لیست بزرگی از گزینهها دارند (به عنوان مثال، بیش از 200 مورد)، ترکیب باکس + چند انتخاب به دلیل فیلتر کردن سریعتر (مثلاً انتخاب کشور) مفید هستند.
لیست باکس ها زمانی مفید هستند که افراد نیاز به دسترسی همزمان به گزینه های زیادی داشته باشند، به خصوص اگر نیاز به انتخاب گزینه های زیادی از آن لیست نیز داشته باشند. آنها می توانند برای فیلترهای پرکاربرد مفید باشند.
لیست باکس دوگانه اغلب نادیده گرفته می شود و نادیده گرفته می شود. اما می تواند برای کارهای پیچیده، مانند انتخاب انبوه، یا تخصیص نقش ها، وظایف، مسئولیت ها بسیار مفید باشد. این تنها مؤلفه رابط کاربری است که به کاربران اجازه میدهد لیست کامل انتخاب خود را در کنار فهرست منبع قبل از انجام بررسی کنند (که «فهرست انتقال» نیز نامیده میشود). در واقع، لیست باکس دوگانه اغلب سریعتر، دقیقتر و در دسترستر از کشیدن و رها کردن است. ملاحظات قابلیت استفاده یکی از نکات مهمی که باید در نظر داشته باشید این است که همه انواع لیست برای دسترسی باید از پیمایش صفحه کلید (به عنوان مثال، کلیدهای جهت دار ↑/↓) پشتیبانی کنند. برخی از افراد تقریباً همیشه برای انتخاب گزینهها پس از شروع تایپ، به صفحه کلید متکی هستند.
فراتر از آن:
برای لیستهایی با بیش از ۷ گزینه، افزودن قابلیتهای «انتخاب همه» و «پاک کردن همه» را در نظر بگیرید تا تعامل کاربر را ساده کنید. برای لیست های طولانی با جعبه ترکیبی، همه گزینه ها را با کلیک/ضربه در معرض دید کاربران قرار دهید، زیرا در غیر این صورت ممکن است هرگز دیده نشوند. مهمتر از همه، برای جلوگیری از سردرگمی، عناصر غیرتعاملی را بهعنوان دکمهها نمایش ندهید - و عناصر تعاملی را بهعنوان برچسبهای ثابت نمایش ندهید.
جمع بندی: همه چیز کشویی نیست نام ها مهم است یک لیست عمودی از گزینه ها معمولاً به عنوان یک "کشویی" توصیف می شود - اما اغلب برای معنی دار بودن کمی بیش از حد عمومی است. "Dropdown" اشاره می کند که لیست به طور پیش فرض پنهان است. "Multiselect" به معنای انتخاب چندگانه (چک باکس) در یک لیست است. "Combobox" به معنای ورودی متن است. و "Listbox" به سادگی لیستی از موارد قابل انتخاب است که همیشه قابل مشاهده است. هدف این نیست که به خاطر آن با تعاریف بالا سازگار باشد. اما به جای تراز کردن اهداف - هنگام تصمیم گیری، طراحی، ساختن و سپس استفاده از این مؤلفه های UI به همان زبان صحبت کنید. باید برایهمه - طراحان، مهندسان و کاربران نهایی - تا زمانی که برچسب های استاتیک شبیه دکمه های تعاملی نباشند و دکمه های رادیویی مانند چک باکس عمل نکنند. با "الگوهای طراحی برای رابط های هوش مصنوعی" آشنا شوید با الگوهای طراحی برای رابطهای هوش مصنوعی، دوره ویدیویی جدید Vitaly با نمونههای عملی از محصولات واقعی - با آموزش زنده UX که به زودی برگزار میشود. پرش به یک پیش نمایش رایگان. Meet Design Patterns For AI Interfaces، دوره ویدیویی Vitaly در مورد طراحی رابط و UX.
ویدیو + آموزش تجربه کاربری فقط ویدیو ویدیو + آموزش تجربه کاربری 450.00 دلار 799.00 دلار
آموزش ویدیویی + UX 30 درس ویدیویی (10 ساعت) + آموزش UX زنده. 100 روز ضمانت بازگشت پول. فقط ویدیو 275.00 دلار 395.00 دلار
دوره ویدیویی 30 درس ویدیویی (10 ساعت) را دریافت کنید. سالانه بهروزرسانی میشود. همچنین بهعنوان بسته UX با 3 دوره ویدیویی موجود است.
منابع مفید
تکمیل خودکار: دستورالعمل های UX، توسط ویتالی فریدمن Combobox، توسط eBay 👍 Combobox، توسط Elastic Combobox، توسط Elisa Combobox، توسط MongoDB 👍 Combobox، توسط Visa 👍 Combobox، توسط Watson (Docplanner) Combobox، توسط Wikimedia Combobox، توسط Zendesk Multiselect (MongoDB Combobox Design Docs)، توسط MongoDB 👍 جستجوی چند انتخابی، توسط ویکیمدیا جعبه ترکیبی چند انتخابی، توسط Vaadin چند انتخاب، توسط ویزا انتقال (مثال جعبه فهرست)، توسط Ant Design لیست باکس، توسط هاپر فهرست جعبه، توسط Vaadin لیست باکس، توسط ویزا انتخابگر فهرست دوگانه، توسط Red Hat (PatternFly) Dual Listbox، توسط Salesforce (سیستم طراحی لایتنینگ) لیست انتقال، توسط Mantine Dual Listbox، توسط Dashlite نشان ها در مقابل قرص ها در برابر چیپس در مقابل برچسب ها، توسط ویتالی فریدمن جعبههای فهرست در برابر فهرستهای کشویی، توسط آنا کالی (NN/g)
