ساخت منوی همبرگری – راهی برای بهینه سازی فضا وبسایت

ساخت منوی همبرگری ساده ولی پر کاربرده و سایت های بسیاری با ساخت منو با دکمه همبرگری یا منو جمع شو نسخه مویبایل و تبلت شون رو با استایل زیبای این نوع منو ایجاد کردن. این نوع منو که به منوی کرکره ای هم معروفه دارای یک دکمه است که به شکل ۳ یا ۴ خط موازی با همه که با کلیک روی اون منو ظاهر و با کلیک مجدد منو پنهان میشه.

ساخت منوی همبرگری در طراحی رابط کاربری

شاید از شنیدن اسم منوی همبرگری تعجب کرده باشین و با خودتون بگین این چی میتونه باشه؟ باید بگم که هیچ ربطی به منوی غذا و رستوران نداره! و صرفاً به خاطر شباهت این منو با همبرگر اسم گذاری شده.

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

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

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

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

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

منوی همبرگری در طراحی رابط کاربری و تجریه کاربری نقش کاربردی داره. برای درک بهتر اینکه درست کردن منوی همبرگری در طراحی UI به اشباع زیادی در صنعت طراحی وب و برنامه‌ها رسیده، باید توضیحات بیشتری رو ارائه بدم.

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

در دهه 80، Norm Cox پدر منوی همبرگر، یک ابزار کاری شخصی رو طراحی کرد. اون نمادی با چهار خط تولید کرد تا علامتی از این باشه که یک لیستی از موارد رو باز میکنه. بعدها اسم این نماد به عنوان منوی همبرگری معروف و شناخته شد. Norm اظهار داشت، هدفش از طراحی منوی همبرگری این بوده که زمانی که کاربر روی اون منو کلیک میکنه، با انفجاری از گزینه‌ها روبرو بشه. کار عجیب غریبیه، نه؟ بعد از چند دهه تلفن‌های هوشمند باب شد و در دسترس همه قرار گرفت. طراحان رابط کاربری بار دیگه‌ روح تازه‌ای به منوی همبرگری بخشیدن و اسم اون رو در فرهنگ طراحی زنده کردن. این‌بار طراحان سعی کردن که از این منو در طراحی وب سایت برای موبایل بهره بگیرن. به عبارت دیگه، اونها سعی کردن روی صفحات تلفن‌های هوشمند سرمایه گذاری کنن.

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

قبول نداشتن منوی همبرگری

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

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

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

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

هزینه تعامل منوی همبرگری

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

منوی همبرگری – یک مدل ذهنی شناخته شده

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

چه زمانی باید ساخت منوی همبرگری را اعمال کرد؟

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

پنهان کردن ویژگی‌های ثانویه

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

ذخیره کردن حالت واقعی صفحه

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

چه زمانی نباید از منوی همبرگری استفاده کرد؟

وقتی که ویژگی‌های اصلی رو پنهان میکنه

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

وقتی که تعامل وبسایت در حال حاضر سنگینه

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

وقتی منوی همبرگری، Native Navigation رو پنهان میکنه

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

بهترین روش‌های ساخت منوی همبرگری

سمت چپ یا راست صفحه؟

وقتی که طراحان تصمیم میگیرن مسیر منوی همبرگری رو انتخاب کنن، یک مشکل بزرگ پیش میاد؛ منوی همبرگری در سمت چپ قرار بگیره بهتره یا سمت راست؟

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

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

ساخت منوی همبرگری شناور

یک راه حل عالی برای این مسئله، داشتن دکمه منوی همبرگر شناور با یک موقعیت ثابت در صفحه(اصولاً سمت راست پایین صفحه) است. همچنین این منو به کاربر پیغام میده که گزینه‌هایی وجود داره تا کاربر برای دسترسی به تمامی برنامه‌ها، از اون استفاده کنه. حتی این منو اجازه میده تا صفحات موبایل زیاد شلوغ و اشغال نشن. پس یک تجربه فوق العاده‌ای رو به ارمغان میاره.

کاهش تدریجی

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

نمونه های موفق ساخت منوی همبرگری

در اینجا نمونه‌هایی از برنامه‌های محبوب آورده شده که از منوی همبرگری استفاده کردن:

1. Amazon

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

2. Telegram

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

3. Discord

پلتفرم پیام رسان Discord، جذاب‌ترین استفاده رو از منوی همبرگری انجام داده. کاربر یک منوی همبرگری در گوشه بالا سمت چپ مشاهده میکنه که به اون امکان میده از چت یا گروه خارج بشه و سایر گزینه‌ها رو ببینه. استفاده از منوی همبرگری به جای دکمه برگشت برای ترک چت، تصمیم کاملاً هوشمندانه‌ای بود.

4. Amazon Alexa

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

5. Google Pay

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

6. Just Eat

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

7. LinkedIn

این برنامه رویکردی منحصر به فرد در منوی همبرگری داره. اونها به جای اینکه نماد رو با کلمه “Menu” ترکیب کنن، منوی خودشون رو سمت چپ گوشه با عکس پروفایل کاربر ترکیب کردن.

8. Dropbox

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

9. Google Drive

دقیقاً مثل برنامه قبلی عمل میکنه؛ تمامی پرونده‌های اخیر در اولویت قرار میگیرن.

10. Uber

دز این برنامه، کل صفحه برای پیدا کردن اتومبیل به محض بازکردن برنامه به کاربر اختصاص یافته. تمام گزینه‌های ثانویه‌ای که ممکن کاربر اونها رو بخواد در منوی همبرگری پنهان شده.

برترین نمونه‌های ساخت منوی همبرگری وبسایت پاسخگو

1. Shopify
2. Github
3. NBC News
4. CSS Tricks
5. Starbucks

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