مگا-فوتر و شیوه‌های طراحی آن

گردآوری و تالیف : ارسطو عباسی
تاریخ انتشار : 16 مهر 1397
دسته بندی ها : طراحی وب

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

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

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

اهمیت فوترها

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

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

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

بسته به نوع وبسایت و اهدافی که دارید معمولا در قسمت فوتر یک وبسایت اطلاعات زیر قرار داده می‌شود:

  • Sitemap;
  • Copyright statement;
  • A link to the Terms of Use page;
  • Privacy policy statement;
  • Contact information;
  • A map or address;
  • Social icons;
  • Social media widgets;
  • Email signup;
  • A search bar;
  • Your mission statement;
  • Tags and categories;
  • Awards and certifications;
  • Association memberships;
  • Testimonials;
  • Latest articles;
  • Upcoming events;
  • An explainer video;
  • Audio;
  • Call to action.

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

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

۴ مورد از بهترین رویکردها برای طراحی فوتر وبسایت‌های بزرگ

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

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

۱. قرار دادن المان‌های برندینگ

فوتر وبسایت شما یک فرصت برای بازبینی ذهن کاربران در جهت مشاهده برند و هویت وبسایت شما است. شما می‌توانید از این فضا برای نمایش وضعیت برندتان استفاده بکنید.

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

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

Hustle Panda نیز یکی دیگر از مثال‌های این بخش است که در آن سعی شده با استفاده کردن از یک الگوی رنگی ثابت و کار روی اندازه‌های مختلف لوگو همه چیز را ساده نگه دارد. استفاده دائمی از پاندا به کاربران پیغام ثابت و هدفمندی را می‌دهد.

۲. جمع‌آوری اطلاعات

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

در قسمت فوتر Zoyo Yogurt می‌توانید یک فرم ثبت نام را در پایین‌ترین نقطه مشاهده کنید. این کار به کاربران فرصتی می‌دهد که همه چیز را به خوبی مشاهده کند و در نهایت تصمیم به ثبت نام در آن بکند.

۳. افزودن دکمه شبکه‌های اجتماعی

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

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

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

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

۴. ایجاد فهرست ناوبری

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

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

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

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

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

در پایان

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

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

منبع

مقالات پیشنهادی

روند طراحی مبتنی بر ذخیره زمان و چگونگی استفاده از آن

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

چگونه ترافیک وبسایت را بعد از طراحی مجدد آن کنترل کنیم؟

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

طراحی وب اتمی چیست و آیا من به آن نیاز دارم ؟

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

زبان های محبوب طراحی وبسایت. چه‌کاری کاری انجام می‌دهند و چرا شما باید از آن‌ها استفاده کنید

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