چک لیست طراحی Footer

نوشتن این مقاله رو به صورت یه چالش برای خودم در آوردم. یه فرضیه‌ای دارم که آیا می‌شه فقط با دیدن نمونه‌های مختلف، دانش طراحی تجربه کاربری رو به دست آورد یا لازمه که حتما مطالعه مرتبط کرد.برای همین تصمیم گرفتم که در ابتدا تمام چیزهایی که از سایت‌گردی آخر هفته‌ای در مورد فوتر سایت یاد گرفتم رو در این مقاله بیارم و در انتهای مقاله هم چیزهای اضافه‌ای که با مطالعه و تحقیق به دست آوردم اضافه کنم.اگر فرضیه‌ام درست باشه و من بتونم بدون مطالعه یه چک‌لیست قابل توجه‌ای درست کنم احتمالا دلیل خوبیه که شما هم - حتی اگر انگلیسیتون خوب نیست که منابع انگلیسی رو مطالعه کنین - تنها با دقت و توجه به نمونه‌های ایرانی و خارجی بتونین مهارت‌های طراحی تجربه کاربری خودتون رو افزایش بدین.برای نوشتن این مقاله تصویر بیش از ۱۰۰ فوتر رو تو صفحه‌ی نمونه فوتر وبسایت‌های ایرانی برای ایده‌گرفتن جمع کردم که دیدنش خالی از لطف نیست.فوتر سایت فونت ایرانفرضم اینه که می‌دونین Footer (پاورقی) چیه اما اگر نمی‌دونین همون بخش مجزاییه که معمولا در انتهای سایت میاد و شامل یه سری لینک و آیکن شبکه‌های اجتماعی و در برخی مواقع اینماد و امثالهمه.فوتر لزوما در انتهای سایت نمیادهمینطور که در مقاله‌ی اسکرول بینهایت در مقابل صفحه‌بندی توضیح دادم در برخی سایت‌ها که اسکرول بینهایت دارن و عملا هیچ وقت امکان رسیدن به انتهای سایت وجود نداره می‌شه فوتر رو در Sidebar هم قرار داد.فوتر ویرگول در سایدبارهمینطور که در تصویر می‌بینین فوتر ویرگول در سایدبار سمت چپ سایت قرار گرفته. رنگ‌بندی و ابعاد فوترهمینطور که تو صفحه‌ی نمونه فوتر وبسایت‌های ایرانی برای ایده‌گرفتن می‌بینین تنوع رنگ و ابعاد فوتر واقعا زیاده و هیچ استاندارد مشخصی وجود نداره.فوتر سینما تیکتفوتر کشموناین تنوع رنگ و سایز ممکنه حتی در یک سایت هم اتفاق بیوفته و نه تنها فوتر نسخه موبایل سایت بسیار متفاوت از نسخه دسکتاپ باشه بلکه تو صفحات مختلف وبسایت هم ظاهر متفاوتی داشته باشه.فوتر صفحه اصلی ایرانیکارتفوتر صفحه پنل کاربری ایرانیکارتهمینطور که در این ۲ تصویر بالا می‌بینین نه تنها سایز فوتر در دو صفحه متفاوته بلکه اطلاعات نمایش داده شده در فوتر دوم به شدت محدودتر از فوتر اول است.از طرفی صفحه‌ی خرید اشتراک فیلیمو رو ببینین که اصلا فوتر نداره چون طراح نمی‌خواد وقتی وارد این صفحه شدین چیز دیگه‌ای جز خرید اشتراک رو کلیک کنین.فوتر نسخه دسکتاپ ایران تیکو یا فوتر نسخه موبایل ایران تیک فقط شامل اطلاعات سمت راست فوتر بالا است و مابقی لینک‌ها در نسخه موبایل وجود ندارند.تصمیم اینکه در چه صفحه/دیوایسی چه لینکی نمایش داده شود یک تصمیم برگرفته از معماری اطلاعات است که همانطور که مشخصه ایران تیک بدترین تصمیم ممکن رو گرفته که تصمیم گرفته به جای پرسش‌های متدوال در موبایل آدرس دفتر رو نمایش بده.در مورد معماری اطلاعات توی این لینک یوتیوب توضیح دادم که می‌تونه در پیدا کردن سرنخ بهتون کمک کنه. https://www.youtube.com/watch?v=M7gIcIUPPic&list=PLT4L2_8BD6pkaJObrjmMwUmKRZVDjXD-F&index=8 فوتر زومیتالبته همیشه اینجوری نیست که تمامی لینک‌ها ثابت باشن بلکه می‌تونه مثل اکثر سایت‌های خبری توی فوتر تعدادی از مقالات پرمخاطب روز رو هم قرار داد.همینطور که تو مقاله‌ی کوتاه در مورد Mental Design و یوتیوب Consistency چیست؟ مطرح کردم بر اساس قانون جیکوب از اونجایی که کاربرا بیشتر زمان خودشون رو تو وبسایت‌های دیگه می‌گذرونن انتظار دارن تو سایت ما هم چیزهایی یکسانی رو توی فوتر پیدا کنن.لینک صفحات داخلیلازم نیست کلی فوتر ببینین تا بدونین که معمولا ما انتظار داریم لینک‌های درباره ما، تماس با ما و قوانین و مقررات رو توی فوتر ببینیم.فوتر پونیشابسته به کسب‌وکار شما ممکنه لینکها و دیتاهای مهم دیگه‌ای هم باشه که جاش توی فوتره. با تست‌های کاربردپذیری که به Findability اختصاص دارن ( مثلا شبیه Tree Testing) می‌شه پس از طراحی بررسی کرد که آیا انتخاب لینک‌ها درست بوده یا نه.به عنوان نمونه معمولا انتظار داریم که تغییر زبان و گزینه‌های منوی ناوبری رو توی هدر ببینیم نه فوتر.اینماد و سایر مجوزهااینماد باعث می‌شه کاربر با خیال راحت به خرید از سایت اعتماد کنه. بدیهیه که برای سایت‌هایی که به هر نحوی پرداخت اینترنتی دارن داشتن اینماد نه تنها الزامی بلکه خیلی هم مفیده.فوتر دلیونتجربه من نشون داده در زمانی که اینماد در سایت وجود نداره یا منقضی شده نرخ پرداخت مشتری‌های جدید تا سی درصد کم می‌شه. این عدد برای برندهای تازه‌وارد می‌تونه بیشتر هم باشه.فوتر سیبچهمی‌دونم که شما هم با من هم نظرین که اینماد خیلی زشته و تو طراحی‌های مینیمال سایت‌ها هیچ‌جوره نمی‌شینه. یه راهش اینه که مثل سیبچه بیاییم و خودمون بازطراحیش کنیم. هر چند من هم از این ایده خیلی لذت بردم اما به نظرم با هدف اصلی قرار دادن اینماد که جلبه اعتماده در تضاده.البته این موضوع برای بعضی سایت‌ها که مخاطب خاص دارن مثل سیبچه ممکنه جواب باشه اما برای عموم سایت‌ها نیاز به بررسی و تست داره.از طرفی رنگ تیره نوشته‌های اینماد باعث می‌شه مثل فوتر فونت ایران (عکس اول مقاله) روی فوتر‌های تیره کنتراست کافی رو نداشته باشه.منتال مدل و برداشت شخصی من بر اساس فوترهایی که بررسی کردم اینه که تمایل بیشتری به قراردادن و دیدنه لوگوها در سمت چپ فوتر وجود داره.فوتر موتن روفارغ از اینماد سایر مجوزها و جوایز وبسایت هم می‌تونه داخل فوتر قرار بگیره که باعث بیشتر شدن اعتماد می‌شه. البته نباید مینیمال بودن رو فراموش کرد و یه عدد بهینه‌ای برای تعداد در نظر گرفت.آیکن شبکه‌های اجتماعیبدیهیه که آیکن شبکه‌های اجتماعی رو تو فوتر قرار بدیم و از این طریق تعامل رو با کاربران به شبکه‌های اجتماعی هم که بیشتر حضور دارن بکشیم اما مهمه که دچار افراط نشیم و تعداد این شبکه‌ها را خیلی زیاد نکنیم به خصوص وقتی که ما یا کاربران تو اون شبکه‌های اجتماعی خیلی فعال نیستیم.فوتر فرانشمثلا در تصویر بالا آیکن فیسبوک و گوگل پلاس اولویتی ندارن. از طرفی هم ممکنه به دلیل نوع بیزینس اون سایت یه سری از شبکه‌های اجتماعی تخصصی هم بد نباشه گذاشتنش.فوتر پوشهمثلا در وبسایت پوشه آیکن github و stackoverflow رو قرار دادن. البته که بهتر بود برای خلوت‌تر شدن آیکن لینکدین رو حذف می‌کردن که طرح شلوغ نشه.عضویت در خبرنامهدر کنار آیکن‌های شبکه‌های اجتماعی، عضویت در خبرنامه هم برای وبسایت‌ها جذابه چون موجب بازگشت مجدد (retargeting) کاربر می‌شه.فوتر تگ مونداما مهم اینه که توجه کنیم تعداد اکشن‌های اصلی فوتر انقدر زیاد نشه که کاربر دچار پارادکس انتخاب بشه.دانلود اپلیکیشنوبسایت‌هایی که اپلیکیشن دارن یکی از KPIهای اصلی برای موفقیت خودشون رو تعداد نصب اپلیکیشن می‌دونن. در نتیجه اینکه نصب اپلیکیشن رو توی فوتر قرار بدیم یه راهکار مناسبه.فوتر سیب ایرانیوبسایت سیب‌ایرانی یه کار خوبی که کرده اینه که تو نسخه دسکتاپ QRcode دانلود اپلیکیشن رو قرار داده که کاربر بتونه با موبایلش اسکن کنه و بره برای نصب اپلیکیشن. بدیهیه که تو نسخه موبایل می‌شه لینک مرتبط گذاشت. مثلا تو فوتر موبایل‌های اندرویدی فقط لینک اپلیکیشن اندرویدی گذاشت و تو نسخه iOS هم لینک‌های متناظر رو گذاشت به جای اینکه شلوغش کنیم.شماره پشتیبانیاگر تعداد قابل قبولی و به صورت ۲۴ ساعته پشتیبان تلفنی دارین یا در شروع کار هستین اینکه شماره تلفن پشتیبانیتون رو خیلی مشهود توی فوتر قرار بدین یه راه ارتباطی خوبه که بتونین مشکلات سایت رو خیلی راحت پیدا کنین و باعث جلب اعتماد کاربر هم می‌شه.فوتر منتوریکسفقط یادتون از کد tel: برای شماره استفاده کنین که کاربر بتونه تنها با زدن روش و بدون Interaction Cost اضافه با پشتیبانی تماس بگیره و نیاز به وارد کردن شماره تلفن نباشه.فوتر شاپفااینکه شماره تلفن رو هم به صورت شناور قرار بدیم گزینه‌ی خوبیه برای زمانی که می‌خواهیم تماس با پشتیبانی رو اضافه کنیم. فقط دقت کنیم مثل تصویر بالا سایر آیتم‌های فوتر رو نپوشونه.معرفی USPمزیت فروش منحصربه فرد (unique selling point) یکی را راه‌هایی که می‌تونین باهاش افراد رو ترغیب به خرید کنین. اینکه بگین نسبت به رقبای احتمالی و حد سطح انتظار کاربر چه خدمات ویژه‌ای می‌دین باعث جلب اعتماد بیشتر و کاهش نگرانی از خرید کاربر می‌شه.فوتر دیجیکالابه عنوان مثلا در فوتر دیجیکالا، ضمانت بازگشت کالا باعث می‌شه که کاربر در لحظه خرید نگرانی کمتری داشته باشه، چون می‌دونه که در صورت عدم رضایت می‌تونه خریدشو پس بده (User Control &amp;amp;amp; Freedom) و در نتیجه بار روانی کمتری روشه.متن معرفی برای SEOاگر دیجیکالا رو با عینک تحلیل بررسی کرده باشین ممکنه براتون سوال شده باشه که چرا توی فوتر یه متن طولانی معرفی دیجیکالا گذاشته که باعث شده فوتر خیلی طولانی داشته باشه.فوتر فیدیبودلیلش بر می‌گرده به بهینه‌سازی برای موتورهای جستجو (SEO) که روی کلمات پر جستجو تاکید داشته باشه. مثلا فوتر فیدیبو رو ببینین که چند تا لینک توشه از جمله شعر عاشقانه و رمان عاشقانه که مشخصه جز کلمات پر مخاطبه و آوردنش توی همه‌ی صفحات باعث می‌شه که شانس بیشتری برای دیده شدن تو گوگل داشته باشین.مالکیت حقوق مادی و معنویاحتمالا شما هم متوجه متن انتهایی فوتر شده باشین که معمولا یه چنین چیزیه.کلیه حقوق مادی و معنوی سایت محفوظ است.فوتر فیدیلیوراستیتش اگر محتوایی که ارائه دادین اصلی نیست و سایت خبری هم نیستین و ترجیح می‌دین که فوتر خلوت‌تری داشته باشین می‌تونین بیخیالش بشین.فوتر کاوه‌نگارمثل سایت کاوه‌نگار که ترجیح داده این موضوع رو نیاره توی فوتر. به نظرم این جز مواردیه که خیلی‌ها میارنش چون نمی‌دونن که بعضی وقتها می‌شه توی فوتر نزاریمش.همینطور که ابتدای مقاله گفتم تمامی این موارد جز مواردی بود که تنها با دیدن نمونه به دست آوردم. در روزهای آینده نتایج مطالعاتمم به این مقاله اضافه می‌کنم که ببینیم فقط با دیدن چقدر چیز از دست می‌دیم.اگر به این مقاله علاقه‌مند بودید، مقالات زیر را نیز پیشنهاد می‌کنم.چک لیست طراحی Search Boxچک لیست طراحی Splash Screenچک لیست طراحی فرم ثبت‌نامچک لیست طراحی Tab Bar / Bottom Navigationچک ‌لیست طراحی User Onboarding اپلیکیشنچک لیست طراحی صفحه‌ی تنظیماتچک لیست طراحی Modals چک لیست طراحی Date Pickerچک لیست طراحی Avatarچک لیست طراحی تجربه‌ی کاربری موبایلچک لیست طراحی Footer - در حال مطالعه