گرایش‌های پرطرفدار طراحی مگا منو در وب‌سایت‌های مدرن

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

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

در ادامه این مطلب با ما همراه باشید تا به گرایش‌های رایج طراحی منو در وب‌سایت‌های مدرن نگاهی بیندازیم.

دسته‌بندی‌های عمیق

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

مقاله مرتبط: منوی سایت ؛ افقی یا عمودی

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

به وب‌سایت Wayfair که مگامنوی بسیار منحصربه‌فردی دارد نگاه کنید.

آن‌ها لینکی تحت عنوان departments در منویشان دارند که کاربر می‌تواند دسته‌بندی‌های زیرین آن را هم به ترتیب مشاهده کند.

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

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

وب‌سایت فروشگاه اینترنتی برند Puma نیز از چنین طراحی بهره می‌برد.

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

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

وب‌سایت‌ Lucky Brand هم از چنین روشی برای طراحی منوی اصلی بهره می‌برد اما برخی موارد آن کمی متفاوت هستند.

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

جلوه‌های ویژه متحرک هم در منوی وب‌سایت luckybrand به‌خوبی به کار رفته است و می‌توانید این ایده را هم در طراحی منوی پروژه‌تان در نظر بگیرید.

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

منوی Dropdown با عرض تمام صفحه

این ترند نمی‌تواند برای همه وب‌سایت‌ها مناسب باشد، اما امروزه بسیاری طراحان از آن بهره می‌برند.

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

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

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

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

طراحی مشابه این ایده را می‌توانید در وب‌سایت Digital Spy مشاهده کنید.

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

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

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

همچنین می‌توانید ساختار ستونی لینک‌ها را با ایده منوی تمام صفحه ادغام کنید و هر دو را در یک طراحی به اجرا درآورید.

این ایده در طراحی وب‌سایت OARS نیز دیده می‌شود.

این وب‌سایت نمونه مناسبی از طراحی و تجربه کاربری بسیار خوب است.

ترکیب تصاویر و متن

اضافه کردن تصاویر مرتبط هم می‌تواند تصمیم مناسبی باشد چراکه این محتواهای تصویری کمک می‌کنند متن‌هایی که معمولاً شاهدشان هستیم، جذاب‌تر به نظر برسند.

مقاله مرتبط: چگونه از سلسله مراتب بصری در طراحی وب‌سایت استفاده کنیم؟

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

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

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

البته همواره می‌توانید وب‌سایتتان را مانند PlayStation با یک منوی کوچک‌تر طراحی کنید.

منوی اصلی این وب‌سایت شامل ترکیبی از متن و تصاویر متعدد است که بسیاری از آن‌ها برچسب‌هایی برای صفحه‌های شخصی هستند.

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

تکنیک های طراحی مگامنو را تغییر دهید

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

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

اگر ذهنتان پذیرای تغییر و آزمودن ایده‌های تازه باشد، همیشه می‌توانید قوانین نانوشته اما مرسوم طراحی را کمی به بازی بگیرید.

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

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

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

بهره گرفتن از این ایده در ابتدا به میزان تمایل شما به‌عنوان طراح بستگی دارد. اگر مایل هستید از این روش برای طراحی مگامنوی پروژه‌ استفاده کنید، حتماً قابلیت استفاده آن را بوسیله تست A/B مورد آزمون قرار دهید.

وب‌سایت Waterworks هم مثال بارز دیگری در همین مورد است. کاربر برای مشاهده منو این وب‌سایت حتماً باید روی آن کلیک کند.

منوی این وب‌سایت هم درست مانند سایر منوهای مرسوم به نظر می‌رسد. وجه تمایز این منو با طراحی‌های سنتی آنجاست که کاربر باید برای مشاهده به‌جای منتظر ماندن و نگه‌داشتن اشاره‌گر روی منو حتماً کلیک کند.

در این منو همچنین یک دکمه کوچک مخصوص در یک گوشه طراحی شده است که کاربر با انتخاب آن می‌تواند منو را ببندد. البته این ایده ممکن است برای هر وب‌سایتی مناسب نباشد؛ اما راهکار مناسبی برای بستن مگامنو های بلند است.

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