لیست‌ باکس‌ها و دراپ داون‌ها، در طراحی UI

سعی کردم یکی از مقالات NNgroup رو در اینجا براتون به‌طور خلاصه ترجمه کنم. امیدوارم که مفید واقع بشه.

به طور خلاصه، لیست‌ باکس‌ها و دراپ داون‌ها المان‌های فشرده و کم حجمی هستند که امکان انتخاب گزینه‌های متعددی را به کاربر می‌دهند. با این تفاوت که لیست‌باکس‌ها در لحظه، گزینه‌ها را به کاربر نمایش می‌دهند و از انتخاب چندگانه (multi-selection) پشتیبانی می‌کنند. اما دراپ‌داون‌ها برای نمایش گزینه‌ها، نیاز به کلیک شدن دارند و فقط از انتخاب یک‌گانه (single-selection) پشتیبانی می‌کنند.

لیست‌ باکس‌ها

لیست‌ باکس ها معمولا شامل سه قسمت اصلی می‌شوند:

• کانتینر یا محدوده ای برای لیست
• لیستی از موارد
• برچسب یا عنوان

کاربران می‌توانند با کلیک بر روی هرکدام از ‌موارد درون لیست، یک یا تعداد زیادی از آن‌ها را انتخاب کنند.

با توجه به تعداد موارد موجود، لیست‌باکس می‌تواند اسکرول بخورد. همچنین گاهی اوقات درون لیست باکس‌ها چک باکس هایی قرار می‌گیرند که به راحتی به کاربر نشان دهند موارد درون لیست قابلیت انتخاب چند گزینه‌ای دارند.

همچنین لیست‌ باکس‌های پیچیده‌تر به کاربر امکان تغییر اندازه لیست‌ و مرتب سازی مجدد موارد لیست را می دهند.

لیست‌ باکس‌ها را می‌توان به ۴ دسته طبقه بندی کرد، که هرکدام از این دسته‌ها می‌توانند بسته به شرایط اسکرول بخورند.

• لیست‌ باکس تک گزینه‌ای (single-select listbox): در این دسته کاربران می‌توانند فقط یک مورد را از بین گزینه‌های لیست انتخاب کنند.
• لیست‌ باکس چند گزینه‌ای (multi-select listbox): کاربران می توانند با نگه داشتن کلید Shift، Command یا Control و با کلیک بر روی آیتم‌ها، یک یا چند مورد را انتخاب یا از حالت انتخاب خارج کنند.
• لیست‌ باکس چند گزینه‌ای همراه با چک باکس (Multiselect listbox with checkboxes): این دسته شامل چک باکس‌هایی است که قابل انتخاب بودن گزینه‌های درون لیست را آشکارتر می‌کند.
• لیست‌ باکس چندگزینه‌ای دوگانه (Multiselect Dual listbox ): این مورد شامل دو نوع لیست‌ باکس است. در یک سمت گزینه‌های موجود را نمایش می‌دهد و در سمت دیگر موارد انتخاب شده را. این لیست باکس شامل یک دکمه "افزودن" است که موارد را از لیست موجود به لیست انتخاب شده منتقل می‌کند و یک دکمه "حذف" که مورد انتخاب شده را به لیست اصلی برمی‌گرداند. کاربران همچنین می‌توانند گزینه‌های درون لیست را با توجه به نیاز خود جا به جا کنند.

دراپ داون‌ها

دراپ داون‌ها در ساده‌ترین حالت شامل ۴ بخش می‌شوند:

• کانتینر یا محدوده
• یک دکمه فلش رو به پایین
• لیستی از موارد
• برچسب یا عنوان

کاریران با کلیک بر روی فلش می‌توانند لیستی از مواردی را مشاهده کنند که فقط یکی از آنها قابل انتخاب است. دراپ داون‌ها هم با توجه به تعداد موارد موجود، می‌توانند اسکرول بخورند.

ما در داخل فیلد دراپ داون می‌توانیم مورد انتخاب شده یا پیش‌فرض را مشاهده کنیم و باقی گزینه ها تنها در صورت کلیک بر روی فلش رو به پایین قابل مشاهده هستند.

کاربرد لیست باکس‌ها و دراپ داون‌ها

هنگامی که ما نیاز به استفاده از یک لیست طولانی با چک باکس‌ها، سوییچ باتن‌ها و انواع گزینه‌های انتخابی داریم، استفاده از این لیست‌باکس‌ها و دراپ داون ها باعث می‌شود تا فضای کمتری رو اشغال کنیم. همچنین استفاده از دراپ‌داون‌ها با محدود کردن گزینه‌ها درصد خطای کاربر را کمتر می‌کند.

هنگام استفاده از لیست‌ باکس‌ها و دراپ داون‌هایی که اسکرول می‌خورند باید به این نکته توجه کنیم که اندازه‌ی کانتینر لیست ما مناسب با حرکت دست یا نشانگر کاربر باشد. لیست های خیلی طویل و باریک باعث می‌شوند کاربر به صورت تصادفی نشانگر خود را از لیست خارج کند و باعث بسته شدن آن شود. درنتیجه مجبور می‌شود از اول به روند انتخاب بپردازد.

مزایا و معایب لیست باکس‌ها

ابتدا به چند مورد از مزایای این مدل می‌پردازیم.

• هزینه تعامل کم: لیست باکس‌ها نیاز ندارند تا کاربران قبل از انتخاب گزینه های مورد نظر خود، روی چیزی کلیک کنند.
• افزایش دید آیتم‌ها: امکان مشاهده چندین گزینه به طور هم زمان می تواند باعث افزایش تصمیم گیری شود و دقت در انتخاب را افزایش دهد.
• نمای ستون‌های تکی و چندتایی: لیست باکس ها فقط به یک ستون محدود نمی‌شوند و گاهی در عرض آن گزینه های بیشتری قابل مشاهده است. با این حال، بهتر است از لیست باکس‌های چند ستونی کمتر استفاده شود.
• بررسی اجمالی و تنظیم مجدد: با استفاده از لیست های انتخابی چندگانه (multi-selection)، لیست های دوگانه (dual listboxes)، کاربران کنترل خود را نسبت به ترتیب نمایش آیتم ها حفظ می کنند و یک نمای کلی از موارد انتخاب شده را پیش رو دارند.

در زیر به برخی از معایب لیست باکس‌ها می‌پردازیم .

• فضای صفحه: با وجود کم حجم بودن، نسبت به دراپ داون ها فضای بیشتری را اشغال می‌کنند.
• ناآشنایی: ممکن است کاربران بلافاصله نحوه ارتباط برقرار کردن با لیست باکس‌ها را ندانند. برای مثال اگر در حالت‌های چند انتخابی (multi select) از چک باکس استفاده نشده باشد، ممکن است کاربران در نگاه اول متوجه نشوند می‌توانند از دکمه‌های control، command یا shift استفاده کنند.
• ممکن است کاربران نتوانند همه گزینه های انتخاب شده را به طور همزمان مشاهده کنند: برای جلوگیری از این اشکال، موارد انتخابی را در بالای لیست باکس بطور جداگانه نشان دهید یا موارد انتخاب شده را در یک لیست غیر قابل اسکرول نشان دهید.

مزایا یا معایب دراپ داون‌ها

دراپ داون‌ها بیشتر از لیست باکس‌ها استفاده می‌شوند. آنها فضای صفحه کمتری را اشغال می کنند، درصورتی که می‌توانند به تعداد آیتم‌های لیست باکس‌ها آیتم داشته باشند. مزایای دیگر دراپ داون ها شامل موارد زیر است:

• امکان ارائه گزینه بهینه به کاربران، بصورت انتخاب پیش فرض: می‌توان گزینه مناسب‌تر را، به منظور کاهش خطا به صورت پیش فرض داخل فیلد دراپ داون به کاربر نشان داد.
• پایین آمدن گزینه‌ها: از آنجایی که دراپ داون‌ها گزینه‌های موجود دیگر را در خود پنهان می‌کنند، به خوبی کم اهمیت بودن سایر گزینه‌ها را نشان می دهند.(این امر در مواردی که حالت پیش فرض نیاز اکثر کاربران را برآورده می کند و یا مواردی که گزینه های جایگزین ممکن است برای کاربران غیرمتعارف، خطرناک یا گیج کننده باشد مفید است.)
• آشنایی (Familiarity): دراپ داون‌ مکانیسم‌ انتخابی مناسبی برای اکثر کاربران است، زیرا از آنها به طور گسترده در وب و در برنامه های بومی استفاده می شود.

از نقاط ضعف دراپ داون‌ها می‌توان به این اشاره کرد که برای فاش کردن گزینه های داخل خود، به کلیک کردن نیاز دارند. سایر معایب دراپ داون‌ها شامل موارد زیر است:

• کاهش سرعت کاربر: هنگام استفاده از گزینه‌های آشنا برای کاربر، مثل تاریخ تولد, تایپ کردن بسیار آسان‌تر از تعامل با دراپ داون است.
• احتیاط: از آنجا که بسیار کم حجم هستند، کاربران ممکن است به طور تصادفی از دراپ داون‌ها در فرم ها، صفحات وب و برنامه ها غافل شوند.
• انحراف آسان: با انحراف موس از روی دراپ داون و کلیک اشتباهی بر روی صفحه، دراپ داون بسته شده و کاربر مجبور می‌شود فرایند انتخاب را از اول انجام دهد.

باتوجه به موارد گفته شده, می‌توانید تصمیم بگیرید که کدام عنصر برای کار شما مناسب است.