منبع: بنیاد طراحی تعامل (IxDF) · بازنویسی آزاد: سپنتا پویا · ترجمه: ۶ شهریور ۱۴۰۵ · زمان مطالعه: حدود ۱۰ دقیقه

منوی کشویی (Dropdown Menu) چیست؟

💡 این متن «بازنویسی آزاد» است: ایده‌ها و مفاهیم مطلب اصلی با نگارش کاملاً مستقل فارسی و مثال‌های تازه بازگو شده‌اند و ترجمهٔ کلمه‌به‌کلمه نیست. بخش‌های افزودهٔ مترجم در جعبهٔ منبع مشخص شده‌اند.

منوی کشویی ساده‌ترین کنترل رابط به‌نظر می‌رسد و پرتکرارترین جای شکست حسابرسی دسترس‌پذیری است. این تناقض تصادفی نیست.

تعریف

منوی کشویی کنترلی است که فهرستی از گزینه‌ها را پنهان می‌کند تا کاربر فعالش کند — با کلیک، لمس، یا فشردن کلید.

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

و همین «پنهان‌کردن» هستهٔ کل بحث است. منوی کشویی یک معامله است: فضا می‌خرید و کشف‌پذیری می‌فروشید.

چهار گونه

• - منوی انتخاب. در فرم، برای انتخاب یک گزینه — مثل انتخاب کشور.
• - منوی ناوبری. در نوار ناوبری سایت. یک قلم سطح بالا باز می‌شود و زیرصفحه‌ها یا دسته‌ها را نشان می‌دهد.
• - منوی کنش. فهرستی از کارها به‌جای مقصدها. دکمهٔ «گزینه‌های بیشتر» با ویرایش و تکثیر و حذف.
• - مگا‌منو. پنل بزرگ چندستونی که از قلم ناوبری باز می‌شود. در فروشگاه اینترنتی رایج است.

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

عددی که تصمیم را می‌گیرد

مهم‌ترین قاعدهٔ این بحث یک بازهٔ عددی است: منوی کشویی برای ۵ تا ۱۵ گزینه درست است.

و بیرون از این بازه، هر بار ابزار دیگری بهتر است:

• - کمتر از ۵ گزینه · دکمهٔ رادیویی، کلید دیدنی، یا کنترل بخش‌بندی‌شده. تا کاربر همهٔ گزینه‌ها را هم‌زمان ببیند.
• - بیش از ۱۵ گزینه · فهرست قابل جست‌وجو یا فیلترشونده، برای کشف سریع‌تر.
• - انتخاب دوتایی (بله/خیر، روشن/خاموش) · کلید ضامن یا چک‌باکس.
• - وقتی باید جای کاربر در سایت را نشان بدهید · تب ناوبری.
• - وقتی کاربر باید چند منو را با هم ببیند، یا وقتی دسته فقط یک قلم دارد.

آن مورد آخر ساده به‌نظر می‌رسد و پرتکرار است. منویی که یک گزینه دارد، منو نیست؛ یک کلیک اضافه است.

یازده قاعدهٔ عملی

• - برچسب ماندگار بگذارید. «هر منوی کشویی باید برچسب دیدنیِ ماندگاری داشته باشد که بگوید کاربر دارد چه چیزی را انتخاب می‌کند.» و برچسب نباید بعد از انتخاب ناپدید شود.
• - نشانگر وضعیت بگذارید. فلش یا شِورونی که هنگام باز‌شدن جهتش عوض می‌شود — بازخورد فوری دربارهٔ حالت.
• - با کلیک باز کنید، نه با هاور. «منویی که با هاور باز می‌شود برای کاربر صفحه‌کلید، کاربر با دشواری حرکتی، و هر کسی روی دستگاه لمسی مشکل می‌سازد.»
• - گزینهٔ در‌دسترس‌نبودن را کم‌رنگ کنید، حذف نکنید. حذف‌کردن، فهم کاربر از توانایی‌های سیستم را می‌شکند. و تولتیپ می‌تواند بگوید چرا در دسترس نیست و چطور فعال می‌شود.
• - هدف لمسی دست‌کم ۴۴×۴۴ پیکسل. حداقل WCAG 2.2 عدد ۲۴×۲۴ است، ولی اپل و گوگل ۴۴ را توصیه می‌کنند.
• - بازخورد هاور بدهید. با رنگ پس‌زمینه نشان بدهید کدام گزینه انتخاب می‌شود.
• - ۲۰۰ تا ۳۰۰ میلی‌ثانیه تأخیر در بسته‌شدن بگذارید. فاصلهٔ میان دور‌شدن نشانگر و ناپدید‌شدن منو، کلافگی کاربر با دشواری حرکتی را کم می‌کند.
• - دسته‌ها را منطقی بچینید. بر پایهٔ تکرار استفاده یا الفبا. و برای مگا‌منو از سرتیتر و جداکننده و فضای خالی استفاده کنید.
• - عمق تودرتویی را محدود کنید. کاربر با بیش از دو سطح دچار مشکل می‌شود، و مسئلهٔ دسترس‌پذیری جدی می‌سازد.
• - برای فهرست بلند جست‌وجو بگذارید. اگر کاربر نمی‌تواند همه را در یک نگاه اسکن کند.
• - ساختار را با دسته‌بندی کارت دربیاورید، نه از نمودار سازمانی.

و یک قاعدهٔ فنی که همهٔ این‌ها را نگه می‌دارد: کارکرد اصلی باید بدون جاوااسکریپت هم کار کند. عنصر select بومی این را به‌طور پیش‌فرض رعایت می‌کند.

دسترس‌پذیری: پنج رفتار صفحه‌کلید

این بخش قابل مذاکره نیست. «منویی که از پیمایش با صفحه‌کلید پشتیبانی نمی‌کند، دسترس‌ناپذیر است. و این یکی از پرتکرارترین شکست‌های حسابرسی دسترس‌پذیری است.»

• - Tab فوکوس را روی محرک منو می‌برد.
• - Enter یا Space منو را باز می‌کند.
• - کلیدهای جهت میان گزینه‌ها حرکت می‌کنند.
• - Enter انتخاب را تأیید می‌کند.
• - Escape منو را می‌بندد و فوکوس را به محرک برمی‌گرداند.

و چهار الزام دیگر:

• - صفحه‌خوان. ساده‌ترین راه، استفاده از کنترل بومی HTML است. عنصر select بومی هدف و رفتارش را خودکار اعلام می‌کند، در همهٔ مرورگرها و فناوری‌های کمکی. منوی سفارشی برای رسیدن به همان سطح، کار زیادی می‌خواهد.
• - دیده‌شدن فوکوس. عنصری که فوکوس می‌گیرد باید برجستگی روشنی نشان بدهد. WCAG 2.2 این الزام را سفت‌تر کرده، و نشانگر فوکوس کم‌رنگ یک شکست رایج است.
• - کنتراست رنگ. و گزینه‌های کم‌رنگ‌شده معمولاً همین‌جا رد می‌شوند — پس نیاز به توجه ویژه دارند.
• - ساختار معنایی. عنصر nav با فهرست نامرتب از لینک‌ها، اعلام صفحهٔ جاری، و لینک «پرش از ناوبری» در بالای صفحه.

و پایهٔ حقوقی‌اش هم روشن است: WCAG 2.2 که W3C در ۲۰۲۳ نهایی کرد، استانداردی است که تنظیم‌گران اتحادیهٔ اروپا و بریتانیا و آمریکا با آن هم‌راستا می‌شوند.

سه جایگزین، و کِی هر کدام

و بیشتر مشکل‌های منوی کشویی با عوض‌کردن خودِ الگو حل می‌شوند، نه با بهتر‌کردنش.

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

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

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

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

و اگر گزینه‌ها ساختار دارند، عدد اصلاً مهم نیست — ساختار را نشان دهید.

چطور آزمونش کنیم

سه روش، و هر سه لازم‌اند:

• - فقط با صفحه‌کلید، با غیرفعال‌کردن ماوس.
• - با صفحه‌خوان — VoiceOver یا NVDA.
• - روی دستگاه لمسی واقعی، نه شبیه‌ساز.

و در موبایل یک نکتهٔ مهم هست: عنصر select بومی، انتخابگر داخلی دستگاه را باز می‌کند — چیزی که کاربر از قبل می‌شناسد و قابل اتکاست. منوی سفارشی باید همین رفتار را دستی بازتولید کند.

و منوی ناوبری در موبایل معمولاً بهتر است به منوی کشویی از کنار یا همبرگری تبدیل شود، نه به یک کشوییِ کوچک‌شده.

چهار خطای پرتکرار

و فارغ از انتخاب الگو، چهار خطا هست که در تقریباً هر فرمی دیده می‌شود.

یک: گزینهٔ پیش‌فرضی که یک انتخاب واقعی است. منویی که از اول روی «تهران» است، هزاران کاربر را در تهران ثبت می‌کند که آنجا نیستند. اگر انتخاب اهمیت دارد، پیش‌فرض باید خالی باشد.

دو: ترتیب دلبخواه. فهرستی که نه الفبایی است، نه بر اساس فراوانی، و نه منطقی — فقط به همان ترتیبی که در پایگاه داده بوده. کاربر ناچار است کل فهرست را بخواند.

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

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

در بافت فارسی

یک: بازهٔ ۵ تا ۱۵ در فارسی به ۵ تا ۱۰ نزدیک‌تر است. برچسب فارسی بلندتر است و فهرست کشویی زودتر شلوغ می‌شود.

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

دو: جهت شِورون یک تصمیم است، نه یک آینه‌سازی. فلشی که باز‌شدن را نشان می‌دهد رو به پایین است و در راست‌به‌چپ هم رو به پایین می‌ماند.

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

سه: مرتب‌سازی الفبایی فارسی پیش‌فرض درستی ندارد. ترتیب حروف در پیاده‌سازی‌های مختلف فرق می‌کند، و «آ» و «ا» و «ء» معمولاً جای غیرمنتظره‌ای می‌افتند.

پس در فارسی مرتب‌سازی بر پایهٔ تکرار استفاده انتخاب امن‌تری است — هم چون درست‌تر کار می‌کند و هم چون به پیاده‌سازی وابسته نیست.

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

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

و یک نکتهٔ آخر که به هر دو بخش بالا وصل است: منوی کشویی روی موبایل اصلاً همان چیزی نیست که روی دسکتاپ.

روی گوشی، سیستم‌عامل کنترل را در دست می‌گیرد و فهرست را به شکل خودش نشان می‌دهد — چرخ‌دنده‌ای در آی‌اواس، برگه‌ای در اندروید. یعنی هر چیزی که دربارهٔ ظاهر منو طراحی کرده‌اید، آنجا نادیده گرفته می‌شود.

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

و اگر فهرست بلند است، این تفاوت جدی‌تر هم می‌شود: چرخاندن یک چرخ‌دنده میان دویست گزینه، کندترین شکل ممکن انتخاب است — و همان جایی است که تکمیل خودکار بیشترین تفاوت را می‌سازد.

جمع‌بندی

• - منوی کشویی فهرست را پنهان می‌کند تا کاربر فعالش کند · یعنی فضا می‌خرید و کشف‌پذیری می‌فروشید · چهار گونه دارد: انتخاب، ناوبری، کنش، و مگا‌منو
• - بازهٔ درستش ۵ تا ۱۵ گزینه است · کمتر از پنج: رادیویی · بیش از پانزده: فهرست جست‌وجوشونده · دوتایی: کلید ضامن · و منوی تک‌گزینه‌ای فقط یک کلیک اضافه است
• - یازده قاعده، از برچسب ماندگار و نشانگر وضعیت تا هدف لمسی ۴۴ پیکسل و تأخیر ۲۰۰ تا ۳۰۰ میلی‌ثانیه و محدود‌کردن عمق به دو سطح
• - پنج رفتار صفحه‌کلید الزامی است: Tab، Enter/Space، کلید جهت، Enter، و Escape · و نبودشان پرتکرارترین شکست حسابرسی است
• - عنصر select بومی هدف و رفتارش را خودکار اعلام می‌کند · منوی سفارشی برای همان سطح کار زیادی می‌خواهد
• - آزمون سه‌گانه: فقط صفحه‌کلید · صفحه‌خوان · و دستگاه لمسی واقعی نه شبیه‌ساز
• - و در فارسی: بازهٔ عددی به ۵ تا ۱۰ نزدیک‌تر است · آبشار افقی باید به چپ باز شود · مرتب‌سازی الفبایی قابل اتکا نیست پس تکرار استفاده امن‌تر است · و عنصر بومی وزن مضاعف دارد