چرا منوی همبرگری گاهی افتضاح است؟ (+ معرفی جایگزین‌ها)

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

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

اما …

همیشه هم استفاده از منوی همبرگری ضامن یک طراحی بی‌نقص نیست!

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

قبل از هر صحبتی، بیایید یک آشنایی مختصر با این منوی خوشمزه و تاریخچۀ آن داشته باشیم.

منوی همبرگری چیست؟

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

داستان منوی همبرگری به ۴۰ سال پیش برمی‌گردد

Norm Cox کسی است که برای اولین بار از آیکون همبرگری، در رابط کاربری استفاده کرد؛ البته نه در تلفن‌های همراه؛ بلکه در گوشه‌ای از نرم‌افزار زیراکس استار.

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

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

معایب منوی همبرگری چیست؟

در این بخش کلاً به ۳ نکته اشاره می‌کنم؛ اما ۳ نکته‌ای که مهمند و جای فکر کردن زیادی دارند!

۱. منوی همبرگری فیچرها را به‌خوبی نمایان نمی‌کند

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

جالب است بدانید که ۲۵% از برنامه‌ها، بعد از اولین استفاده، توسط کاربران حذف می‌شوند. این اتفاق دلایل مختلفی می‌تواند داشته باشد؛ اما در کل،  اگر برنامه‌ای نتواند خیلی سریع قابلیت‌هایش را به نمایش بگذارد ، به این سرنوشت دچار می‌شود.

هنگامی که کاربران برای اولین بار وارد یک اپلیکیشن می‌شوند، به دنبال نشانه‌های واضحی می‌گردند که مشخص کند چه ویژگی‌ها و ارزش‌هایی برای آنها قابل دسترسی است. پنهان کردن این ویژگی‌ها (Features) در منویِ کشویی مانندِ همبرگری، کشف آنها را دشوار می‌کند و کاربران بی‌حوصله (!) را مجبور می‌کند که به جستجوی آنها بروند.

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

طراح تجربه کاربری برند اپل، مایک استرن (Mike Stern)، طی سخنرانی در کنفرانس جهانی توسعه‌دهندگان در سال ۲۰۱۴، با انتقاد از منوی همبرگری گفت:

«به یاد داشته باشید که دو نکته کلیدی در مورد یک منوی بصری وجود دارد: آنها باید به شما بگویند کجا هستید، و به شما نشان بدهند که کجا می‌توانید بروید.

منوهای همبرگری در هر دو مورد وحشتناک هستند؛ زیرا محتویات منو روی صفحه نمایش قابل دیدن نیست و فقط دکمه نمایش منو است که کاربر می‌تواند ببیند.»

نظر شما چیست؟ آیا وقت آن رسیده که منوی همبرگری را کلاً فراموش کنیم؟

۲. دسترسی به دکمه‌های ناوبری در بالای صفحه سخت است

همین الان موبایل‌تان را بردارید و آنلاک کنید؛ سپس سعی کنید با انگشت شست دست راست‌تان گوشۀ سمت چپ و بالای صفحه را لمس کنید (اگر چپ‌دست هستید با دست چپ‌تان گوشه سمت راست را لمس کنید).

همانطور که می‌بینید، این کار راحت نیست؛ مگر اینکه دست‌های خیلی بزرگی داشته باشید! حتی با گوشی‌های هوشمند کوچک‌تر، انگشتان ما معمولاً می‌توانند بدون تنظیمات خاص به ⅔ پایینی صفحه نمایش برسند، اما ما باید برای دسترسی به ⅓ بالایی، دست‌های خودمان را تنظیم کنیم.

حتی اگر دقت کرده باشید، به گوشی‌های جدید قابلیت Readability نیز اضافه شده است. اما با این حال، شما هنوز هم نمی‌توانید راحت همه‌جای صفحه را لمس کنید. به خصوص در گوشی‌هایی با اندازۀ بزرگ، مثل آیفون.

✅ وقتی که از منوی همبرگری استفاده می‌کنید، خیلی باید به اینکه توجه داشته باشید که آیا منو راحت در دسترس کاربر قرار می‌گیرد یا نه؟! اگر دقت کرده باشید، جدیداً خیلی از طراحان، منوی همبرگری را در پایین صفحه قرار می‌دهند تا راحت لمس شود. مثل همان اپ بانک ملت که در بخش قبلی دیدید.

۳. منوی همبرگری ممکن است کاربر را خسته کند

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

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

۸ مثال از منوی همبرگری را با هم ببینیم

در حین تحقیقات این مقاله، به سایت invisionapp رسیدیم که خیلی مرتب و منظم، نمونه‌هایی متحرک از منوی همبرگری را آورده بود و خیلی دوست داشتیم که شما هم این نمونه‌ها را ببینید. با این مثال‌ها، مزایای منوی همبرگری را نیز مرور می‌کنیم.

پس، این شما و این هم ۸ مثال خوب از کاربرد منوی همبرگری.

۱. Coachella

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

۲. Frame.io

در صفحۀ اصلی سایت Frame.io، هدف اصلی که طراحان دنبال می‌کنند، تنها یک چیز است: جمع کردن Lead یا سرنخ!

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

۳. Google Drive

گوگل دقیقاً همان چیزی را که کاربر می‌خواهد (یعنی اسناد و فایل‌ها) را جلوی چشم کاربر گذاشته و از منوی همبرگری برای عناصر کم‌اهمیت‌تر (یعنی تنظیمات و help) استفاده می‌کند. با پنهان شدن دکمه‌های ناوبری در منوی همبرگری، توجه کاربر بیشتر روی کار اصلی‌اش متمرکز می‌شود.

۴. People Nerds

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

۵. Codrops

در این سایت، نمونه کارهای طراحان مختلف به نمایش گذاشته شده و دموی آن‌ها قابل مشاهده است. در این سایت مینیمال، منوی همبرگری با ظرافت خاصی استفاده شده است. به تغییر شکل آن به ضربدر دقت کنید!

۶. Portuguese Chimneys

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

۷. My Fitness Pal

این یک منوی همبرگری برای ردیابی همبرگرهایی است که می‌خورید؛ و اگر فکر می‌کنید که ما با شما شوخی داریم، حق با شماست!

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

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

۸. Memrise

احتمالاً خیلی‌هایتان اپلیکیشن محبوب آموزش زبان Memrise را می‌شناسید.

منوی همبرگری در این برنامه واقعاً یک ایدۀ عالی است! چرا؟!

چون هدف شما با Memrise یادگیری زبان است و به محض ورود به اپ، درسنامه‌های‌تان را می‌بینید. اطلاعات دیگر مانند سایر دوره‌ها – برای سوئیچ کردن – در سمت چپ اپ و داخل منوی همبرگری گذاشته شده و هر وقت که نیاز داشته باشید، با یک لمس ساده به آن‌ها می‌رسید!

خب؛ درست است که ۸ نمونۀ عالی را بررسی کردیم؛ اما اگر یادتان باشد گفتیم که همیشه هم استفاده از منوی همبرگری خوب نیست. پس چاره چیست؟

بیایید در بخش بعدی این مقاله جواب سوال‌مان را پیدا کنیم.

جایگزین‌های منوی همبرگری چه هستند؟

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

۱. دکمه‌های ناوبری پایین صفحه

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

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

۲. منوی Tabbed

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

دقت کنید که این منو اگر در ⅓ بالایی صفحه نمایش قرار بگیرد، دسترسی به آن کمی سخت می‌شود؛ برای همین در صورت امکان، بهتر است پایین صفحه جای گیرد.

۳. منوی عمودی

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

منوی عمودی، فضای کمی را اشغال می‌کند، اما از نظر بصری وزن بالایی دارد و به قول معروف حسابی تو چشم است!

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

۴. دکمه، با برچسب منو

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

جیمز عزیز دریافت که دکمه‌هایی که با کلمه «منو» برچسب‌گذاری شده‌اند، میزان کلیک‌ها را در مقایسه با یک منوی همبرگری معمولی، تا ۲۰ درصد افزایش می‌دهند.

۵. استفاده از More

یک راهکار دیگر برای اینکه هم کاربر راحت باشد و هم صفحه شلوغ نشود، این است که برای نمایش بخش‌های اصلی از دکمه‌ها یا آیکون‌های پایین صفحه استفاده کنید و بقیۀ بخش‌ها را که به نسبت اهمیت کمتری دارند، در منوی همبرگری، با برچسب More یا بیشتر یا هر کلمۀ مناسب دیگری قرار دهید.

مثال این منو را در اپ بانک پاسارگاد هم می‌توانید ببینید، البته آنجا به‌جای More، کلمۀ سایر نوشته شده است.

من ۵ جایگزین مختلف برای منوی همبرگری را معرفی کردم؛ اگر شما هم پیشنهاد دیگری دارید، خوشحال می‌شوم که بخوانم و یاد بگیرم.

یک نکتۀ مهم: همه‌چیز را تست کنید

کلاً در دنیای دیزاین و تجربۀ کاربری، همه‌چیز تا قبل از اینکه توسط کاربر تست و دیتاهای آن بررسی شود، باحال و بی‌نظیر به نظر می‌رسد!

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

مثلاً گروه سنی کاربران، شرایط استفاده از محصول، سطح تحصیلات، زبان و … گاهی ممکن است تمام معادلات را برهم بزند!

برای همین است که توصیه می‌کنیم حتماً از ابزارها و تست‌های موجود، برای بررسی رفتار کاربران و نحوۀ تعامل آن‌ها با محصول استفاده کنید. تست A/B و بررسی هیت‌مپ، از ساده‌ترین و بهترین روش‌های بررسی رفتار کاربر هستند.

پایان

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

در پایان، یادتان باشد که:

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

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

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