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

مگا‌منو (Mega Menu) چیست؟

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

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

همان یک جمله، کل قاعدهٔ تصمیم است.

تعریف

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

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

تفاوتش با کشویی معمولی

• - ساختار: مگا‌منو پهن‌تر است و آیتم‌ها را در ستون و سطر می‌چیند؛ کشویی معمولی باریک است و یک ستون عمودی.
• - ظرفیت محتوا: مگا‌منو متن و تصویر و حتی ابزارک را بی نیاز به اسکرول جا می‌دهد و چند سطح سلسله‌مراتب را همزمان نشان می‌دهد.
• - تعامل: مگا‌منو معمولاً بخشی از نوار پیمایش سراسری است و با هاور یا کلیک باز می‌شود.
• - معماری اطلاعات: مگا‌منو برای سایت‌های با معماری عمیق مناسب است و کشویی معمولی برای معماری تخت.
• - نمایش بصری: مگا‌منو می‌تواند تیتر و آیکون و تصویر به‌کار ببرد؛ کشویی معمولی فهرست متنی است.

و در بخش کاربرد، نکتهٔ مهمی می‌گوید: در موبایل مگا‌منو محدود است به‌دلیل جهت عمودی صفحه — و مثال می‌آورد که John Lewis در موبایل حتی در حالت افقی هم سراغش نمی‌رود.

ده ملاحظهٔ منبع

روشنی و سازمان با تیتر و گروه‌بندی منطقی · طراحی واکنش‌گرا · دسترس‌پذیری با پیمایش صفحه‌کلید و نقش‌های ARIA · سادگی و پرهیز از شلوغی · سلسله‌مراتب بصری · رفتار هاور و کلیک — با این تذکر که هاور می‌تواند به فعال‌شدن تصادفی برسد · کارایی و سرعت بارگذاری · یکدستی پیمایش در کل سایت · استفاده از تصویر بی آنکه حواس را ببرد · و آزمون و تکرار.

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

مگا‌منو یک شرط‌بندی است

این بخش افزودهٔ مترجم است، و صورت تعمیم‌یافتهٔ همان جملهٔ ابتدای متن.

مگا‌منو یک شرط‌بندی است بر اینکه کاربر از قبل دسته‌بندی شما را می‌شناسد. چون تمام آن سلسله‌مراتب را یک‌جا نشان می‌دهد و هیچ راهی برای یاد‌گرفتنش نمی‌گذارد. سه نتیجه:

• - اگر دسته‌ها متعارفاند (پوشاک ← زنانه/مردانه/بچگانه)، شرط را می‌برید: کاربر یک نگاه می‌کند و یک کلیک می‌زند.
• - اگر دسته‌ها هم‌پوشاناند (خواروبار: «لبنیات» یا «صبحانه»؟)، مگا‌منو تصمیم را سخت‌تر می‌کند، نه آسان‌تر — چون هر دو گزینه را همزمان نشان می‌دهد.
• - و اگر دسته‌ها نمودار سازمانی شمااند، مگا‌منو فقط سرگشتگی شما را در اندازهٔ بزرگ نمایش می‌دهد.

و آزمون تشخیصی‌اش یک جمله است: آیا کاربر تازه می‌تواند پیش از باز‌کردن منو حدس بزند فلان کالا زیر کدام تیتر است؟

اگر نه، مسئله‌تان با پنل بزرگ‌تر حل نمی‌شود؛ به جست‌وجو یا پیمایش تدریجی نیاز دارید — همان که منبع «بازخورد ناوبری» می‌نامدش: صفحهٔ جدیدی که با مثال و توضیح به کاربر یاد می‌دهد دسته‌بندی چطور کار می‌کند.

«هاور» یک ملاحظه نیست

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

• - هاور روی لمس وجود ندارد. پس مگا‌منویی که فقط با هاور باز می‌شود، هیچ داستان موبایلی ندارد — و آن نسخهٔ جانشین موبایل معمولاً طراحی دیگری است که کسی رویش وقت نگذاشته.
• - مسئلهٔ حرکت مورب. وقتی کاربر می‌خواهد به آیتمی در گوشهٔ دور پنل برسد، مسیر مورب ماوس از ناحیهٔ فعال بیرون می‌زند و منو بسته می‌شود. یعنی این نقص دقیقاً کسانی را جریمه می‌کند که عمیق‌تر می‌روند. و رفعش نیاز به تحمل زمانی یا ناحیهٔ امن دارد؛ اگر از وجودش خبر نداشته باشید، منوی شما همین‌طور می‌ماند.
• - و هاور برای صفحه‌کلید هیچ معنایی ندارد؛ پس اگر پیاده‌سازی کلیک/فوکوس جدا نوشته نشود، منو برای کاربر صفحه‌کلید و صفحه‌خوان وجود ندارد.

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

و دو ملاحظهٔ منبع با هم می‌جنگند بی آنکه عددی بدهد: «مگا‌منو می‌تواند اطلاعات بیشتری از کشویی نشان بدهد» در برابر «از شلوغی بپرهیزید». آستانهٔ عملی این است:

پنل باید در یک الگوی نگاه اسکن شود: حدود ۳ تا ۵ ستون، هر ستون ۵ تا ۸ آیتم، و بی اسکرول درونی.

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

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

در بافت فارسی: تعداد ستون را اول در فارسی تعیین کنید

این بخش هم افزودهٔ مترجم است و سه نکته دارد.

یک: در راست‌به‌چپ، لنگر پنل و ترتیب ستون‌ها هر دو برمی‌گردند — پنل از یک محرکِ راست‌چین به سمت چپ باز می‌شود. و باگ رایج این است که پنل از لبهٔ راست بیرون می‌زند یا روی محرک می‌افتد. و مسئلهٔ حرکت مورب هم با آن برمی‌گردد، پس ناحیهٔ امن را باید در جهت جدید بازطراحی کرد. این را در ۳۶۰ و ۱۴۴۰ پیکسل روی دستگاه واقعی چک کنید، نه در ماکت آینه‌شده.

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

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

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

دو کار عملی:

• - برای هر برچسبی که دو نام محتمل دارد، هر دو را بگذارید — مثل «کیف پول (والت)». زشت است و کار می‌کند.
• - و مهم‌تر: دسته‌بندی را از لاگ جست‌وجوی خودتان دربیاورید، نه از نمودار سازمانی. آنچه کاربران تایپ می‌کنند دسته‌بندی واقعی‌شان است، و جست‌وجوهای بی‌نتیجه دقیقاً نام‌هایی را می‌گویند که شما ندارید. این ارزان‌ترین پژوهش معماری اطلاعات موجود است و از قبل در سرور شما نشسته.

جمع‌بندی

• - مگا‌منو پنل کشویی پهنی است که چند سطح سلسله‌مراتب را همزمان نشان می‌دهد و کلیک لازم را کم می‌کند؛ برای معماری عمیق مناسب است و در موبایل محدود.
• - اما در اساس یک شرط‌بندی است بر اینکه کاربر از قبل دسته‌بندی شما را می‌شناسد، چون راهی برای یاد‌گرفتنش نمی‌گذارد. برای دسته‌های متعارف می‌برید؛ برای دسته‌های هم‌پوشان تصمیم را سخت‌تر می‌کند؛ و برای نمودار سازمانی، سرگشتگی‌تان را بزرگ نمایش می‌دهد.
• - آزمونش: آیا کاربر تازه پیش از باز‌کردن منو می‌تواند حدس بزند فلان کالا زیر کدام تیتر است؟ اگر نه، جست‌وجو یا پیمایش تدریجی لازم دارید.
• - «هاور» ملاحظه نیست: روی لمس وجود ندارد، مسئلهٔ حرکت مورب می‌سازد که عمیق‌روها را جریمه می‌کند، و برای صفحه‌کلید بی‌معناست. پس کلیک پیش‌فرض است و هاور شتاب‌دهندهٔ اختیاری روی آن.
• - آستانهٔ اندازه: ۳ تا ۵ ستون، ۵ تا ۸ آیتم، بی اسکرول درونی — و اگر برای فهم آیتم‌ها به تصویر نیاز دارید، برچسب‌ها غلط‌اند.
• - و درس آمازون: مگا‌منو راه‌حل میان‌مقیاس است؛ در کاتالوگ بزرگ، مرور از مقیاس می‌افتد و جست‌وجو جایش را می‌گیرد.
• - در بافت ما: لنگر پنل و ناحیهٔ امن را برای راست‌به‌چپ بازطراحی کنید · تعداد ستون را اول در فارسی تعیین کنید · و دسته‌بندی را از لاگ جست‌وجو دربیاورید، نه از نمودار سازمانی.