منبع: بنیاد طراحی تعامل (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 بومی هدف و رفتارش را خودکار اعلام می‌کند · منوی سفارشی برای همان سطح کار زیادی می‌خواهد
• - آزمون سه‌گانه: فقط صفحه‌کلید · صفحه‌خوان · و دستگاه لمسی واقعی نه شبیه‌ساز
• - و در فارسی: بازهٔ عددی به ۵ تا ۱۰ نزدیک‌تر است · آبشار افقی باید به چپ باز شود · مرتب‌سازی الفبایی قابل اتکا نیست پس تکرار استفاده امن‌تر است · و عنصر بومی وزن مضاعف دارد