مجله خبری هاست ایران » طراحی و توسعه » 4 روش برای طراحی مگا فوتر وب‌سایت
طراحی و توسعه طراحی وب

4 روش برای طراحی مگا فوتر وب‌سایت

4 روش برای طراحی مگا فوتر وب‌سایت

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

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

چرا فوترها مهم هستند

صاحبان وب سایت‌ها، تمام تلاششان را می‌کنند تا مهم­‌ترین اجزای سایت را در بالای صفحه قرار دهند، با این تفکر که به محض ورود کاربر به وب سایت، محتوا را مشاهده کند. این مسئله باعث می‌شود، فراموش کنیم که فوترها نیز به همان اندازه قابل‌رؤیت هستند و دیده می‌شوند.

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


مقاله مرتبط: ١٠ عنصری که صفحه «درباره ما» وب‌سایت باید داشته باشد


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

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

  • نقشه سایت (Sitemap)
  • شرایط و توضیحات کپی‌رایت
  • لینک به صفحه شرایط استفاده (Terms of Use)
  • سیاست­های حفظ حریم خصوصی (Privacy Policy)
  • اطلاعات تماس
  • نقشه یا آدرس
  • ویجت‌های شبکه‌های اجتماعی
  • آیکون‌­های شبکه‌­های اجتماعی
  • عضویت یا واردکردن ایمیل
  • جستجو
  • بیانیه مربوط به مأموریت شما
  • تگ‌ها و دسته‌بندی‌ها
  • جوایز و گواهینامه‌ها
  • عضویت انجمن‌ها
  • نظرات و پیشنهاد‌ها کاربران
  • آخرین مقالات
  • رویدادهای پیش رو
  • یک ویدیوی توضیح‌دهنده
  • صوت
  • فراخوان عمل (Call to action)

عناصر مهم بسیاری وجود دارند که شما می‌توانید به فوتر وب‌سایت اضافه کنید و هر یک از آن­ها هدف منحصر به خود را دنبال می‌کنند. اگر می‌خواهید بازدیدکنندگان شما مدت بیشتری را روی وب‌سایت‌تان بمانند و بلاگ شما را بخوانند، می‌توانید ویجت محبوب‌­ترین مقالات را به فوتر سایت خود اضافه کنید. اگر هدف شما بالا بردن نرخ تبدیل (conversion) باشد، می‌توانید در فوتر، CTA و فرم عضویت یا آدرس ایمیل را قرار دهید.

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

۴ روش برای طراحی مگا فوتر

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


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


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

قرار گرفتن عناصر برندینگ

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

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

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

Hustle Panda

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

Miki Mottes

راهنمایی کاربر

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


مقاله مرتبط: ١٠ راه برای طراحی منو اسلاید اوت در وب‌ سایت


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

Zoyo Yogurt

اضافه کردن دکمه‌های مربوط به شبکه‌های اجتماعی

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

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

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

Capsicum Mediaworks

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

Holiday Harold

ایجاد لینک به صفحات داخلی

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

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

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

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

TrueCar’s

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

GitHub

جمع‌بندی نهایی

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

ابزار بهینه سازی وب هاست ایران

افزودن دیدگاه

کلیک برای ثبت دیدگاه