Hamburger Menu | منوی همبرگری

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

سه خط افقی و قرارداد پنهان‌سازی ناوبری

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

از دید سیستم طراحی، باید محرک و محتوای بازشونده را جدا مدل کرد. دکمهٔ همبرگر مالک حالت باز و بسته، نام دسترس‌پذیر، و مدیریت فوکوس است؛ کشوی ناوبری مالک فهرست، اسکرول، و سلسله‌مراتب مقصدهاست. روی صفحهٔ عریض گاهی همان کشو همیشه باز می‌ماند و دیگر به آیکون نیازی نیست. یکی‌پنداری این دو قطعه باعث مستندسازی مبهم و پیاده‌سازی ناهمگون می‌شود.

شواهد پژوهش دربارهٔ کشف‌پذیری و جریمهٔ دو ضربه

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

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

کجا همبرگر درست و مفید کار می‌کند

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

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

جایگزین‌ها: نوار پایین، تب بالا، کشو و منوی تمام‌صفحه

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

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

دسترس‌پذیری: نام، هدف لمسی، فوکوس و حالت باز

آیکون تنها برای بخشی از کاربران کافی نیست. برچسب دیداری «منو» کنار سه خط، به‌ویژه برای کاربران کم‌آشناتر با قراردادهای دیجیتال و در بازارهای جهانی، هدف کنترل را روشن می‌کند. صفحه‌خوان به نام دسترس‌پذیر روی دکمه نیاز دارد؛ بدون آن فقط «دکمه» اعلام می‌شود. هدف لمسی باید حداقل‌های پلتفرم را رعایت کند—حدود چهل‌وچهار نقطه در iOS و چهل‌وهشت واحد چگالی در اندروید—حتی اگر خود خطوط کوچک به نظر برسند؛ ناحیهٔ کلیک با پدینگ گسترش می‌یابد.

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

تصمیم محصولی در اپ فارسی و وب واکنش‌گرا

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

در جمع، منوی همبرگری ابزار فشرده‌سازی است نه استراتژی کشف. برای مقصدهایی که باید پیدا شوند ضعیف است و برای مقصدهایی که جست‌وجو می‌شوند کارآمد. تیم بالغ همبرگر را دشمن یا بت نمی‌کند؛ آن را برای سرریز و ثانویه به کار می‌گیرد، مقاصد اصلی را دیداری نگه می‌دارد، و دسترس‌پذیری باز و بسته را بخشی از تعریف انجام‌شده می‌داند—نه جزئیات اختیاری بعد از انتشار.

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

سوالات متداول

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

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

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

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

نام دسترس‌پذیر یا برچسب منو، هدف لمسی کافی، جابه‌جایی فوکوس هنگام باز و بسته، aria-expanded، و احترام به کاهش حرکت.