نوشتن این مقاله رو به صورت یه چالش برای خودم در آوردم. یه فرضیهای دارم که آیا میشه فقط با دیدن نمونههای مختلف، دانش طراحی تجربه کاربری رو به دست آورد یا لازمه که حتما مطالعه مرتبط کرد.
برای همین تصمیم گرفتم که در ابتدا تمام چیزهایی که از سایتگردی آخر هفتهای در مورد فوتر سایت یاد گرفتم رو در این مقاله بیارم و در انتهای مقاله هم چیزهای اضافهای که با مطالعه و تحقیق به دست آوردم اضافه کنم.
اگر فرضیهام درست باشه و من بتونم بدون مطالعه یه چکلیست قابل توجهای درست کنم احتمالا دلیل خوبیه که شما هم - حتی اگر انگلیسیتون خوب نیست که منابع انگلیسی رو مطالعه کنین - تنها با دقت و توجه به نمونههای ایرانی و خارجی بتونین مهارتهای طراحی تجربه کاربری خودتون رو افزایش بدین.
برای نوشتن این مقاله تصویر بیش از ۱۰۰ فوتر رو تو صفحهی نمونه فوتر وبسایتهای ایرانی برای ایدهگرفتن جمع کردم که دیدنش خالی از لطف نیست.
فرضم اینه که میدونین Footer (پاورقی) چیه اما اگر نمیدونین همون بخش مجزاییه که معمولا در انتهای سایت میاد و شامل یه سری لینک و آیکن شبکههای اجتماعی و در برخی مواقع اینماد و امثالهمه.
همینطور که در مقالهی اسکرول بینهایت در مقابل صفحهبندی توضیح دادم در برخی سایتها که اسکرول بینهایت دارن و عملا هیچ وقت امکان رسیدن به انتهای سایت وجود نداره میشه فوتر رو در Sidebar هم قرار داد.
همینطور که در تصویر میبینین فوتر ویرگول در سایدبار سمت چپ سایت قرار گرفته.
همینطور که تو صفحهی نمونه فوتر وبسایتهای ایرانی برای ایدهگرفتن میبینین تنوع رنگ و ابعاد فوتر واقعا زیاده و هیچ استاندارد مشخصی وجود نداره.
این تنوع رنگ و سایز ممکنه حتی در یک سایت هم اتفاق بیوفته و نه تنها فوتر نسخه موبایل سایت بسیار متفاوت از نسخه دسکتاپ باشه بلکه تو صفحات مختلف وبسایت هم ظاهر متفاوتی داشته باشه.
همینطور که در این ۲ تصویر بالا میبینین نه تنها سایز فوتر در دو صفحه متفاوته بلکه اطلاعات نمایش داده شده در فوتر دوم به شدت محدودتر از فوتر اول است.
از طرفی صفحهی خرید اشتراک فیلیمو رو ببینین که اصلا فوتر نداره چون طراح نمیخواد وقتی وارد این صفحه شدین چیز دیگهای جز خرید اشتراک رو کلیک کنین.
و یا فوتر نسخه موبایل ایران تیک فقط شامل اطلاعات سمت راست فوتر بالا است و مابقی لینکها در نسخه موبایل وجود ندارند.
تصمیم اینکه در چه صفحه/دیوایسی چه لینکی نمایش داده شود یک تصمیم برگرفته از معماری اطلاعات است که همانطور که مشخصه ایران تیک بدترین تصمیم ممکن رو گرفته که تصمیم گرفته به جای پرسشهای متدوال در موبایل آدرس دفتر رو نمایش بده.
در مورد معماری اطلاعات توی این لینک یوتیوب توضیح دادم که میتونه در پیدا کردن سرنخ بهتون کمک کنه.
البته همیشه اینجوری نیست که تمامی لینکها ثابت باشن بلکه میتونه مثل اکثر سایتهای خبری توی فوتر تعدادی از مقالات پرمخاطب روز رو هم قرار داد.
همینطور که تو مقالهی کوتاه در مورد Mental Design و یوتیوب Consistency چیست؟ مطرح کردم بر اساس قانون جیکوب از اونجایی که کاربرا بیشتر زمان خودشون رو تو وبسایتهای دیگه میگذرونن انتظار دارن تو سایت ما هم چیزهایی یکسانی رو توی فوتر پیدا کنن.
لازم نیست کلی فوتر ببینین تا بدونین که معمولا ما انتظار داریم لینکهای درباره ما، تماس با ما و قوانین و مقررات رو توی فوتر ببینیم.
بسته به کسبوکار شما ممکنه لینکها و دیتاهای مهم دیگهای هم باشه که جاش توی فوتره. با تستهای کاربردپذیری که به Findability اختصاص دارن ( مثلا شبیه Tree Testing) میشه پس از طراحی بررسی کرد که آیا انتخاب لینکها درست بوده یا نه.
به عنوان نمونه معمولا انتظار داریم که تغییر زبان و گزینههای منوی ناوبری رو توی هدر ببینیم نه فوتر.
اینماد باعث میشه کاربر با خیال راحت به خرید از سایت اعتماد کنه. بدیهیه که برای سایتهایی که به هر نحوی پرداخت اینترنتی دارن داشتن اینماد نه تنها الزامی بلکه خیلی هم مفیده.
تجربه من نشون داده در زمانی که اینماد در سایت وجود نداره یا منقضی شده نرخ پرداخت مشتریهای جدید تا سی درصد کم میشه. این عدد برای برندهای تازهوارد میتونه بیشتر هم باشه.
میدونم که شما هم با من هم نظرین که اینماد خیلی زشته و تو طراحیهای مینیمال سایتها هیچجوره نمیشینه. یه راهش اینه که مثل سیبچه بیاییم و خودمون بازطراحیش کنیم. هر چند من هم از این ایده خیلی لذت بردم اما به نظرم با هدف اصلی قرار دادن اینماد که جلبه اعتماده در تضاده.
البته این موضوع برای بعضی سایتها که مخاطب خاص دارن مثل سیبچه ممکنه جواب باشه اما برای عموم سایتها نیاز به بررسی و تست داره.
از طرفی رنگ تیره نوشتههای اینماد باعث میشه مثل فوتر فونت ایران (عکس اول مقاله) روی فوترهای تیره کنتراست کافی رو نداشته باشه.
منتال مدل و برداشت شخصی من بر اساس فوترهایی که بررسی کردم اینه که تمایل بیشتری به قراردادن و دیدنه لوگوها در سمت چپ فوتر وجود داره.
فارغ از اینماد سایر مجوزها و جوایز وبسایت هم میتونه داخل فوتر قرار بگیره که باعث بیشتر شدن اعتماد میشه. البته نباید مینیمال بودن رو فراموش کرد و یه عدد بهینهای برای تعداد در نظر گرفت.
بدیهیه که آیکن شبکههای اجتماعی رو تو فوتر قرار بدیم و از این طریق تعامل رو با کاربران به شبکههای اجتماعی هم که بیشتر حضور دارن بکشیم اما مهمه که دچار افراط نشیم و تعداد این شبکهها را خیلی زیاد نکنیم به خصوص وقتی که ما یا کاربران تو اون شبکههای اجتماعی خیلی فعال نیستیم.
مثلا در تصویر بالا آیکن فیسبوک و گوگل پلاس اولویتی ندارن. از طرفی هم ممکنه به دلیل نوع بیزینس اون سایت یه سری از شبکههای اجتماعی تخصصی هم بد نباشه گذاشتنش.
مثلا در وبسایت پوشه آیکن github و stackoverflow رو قرار دادن. البته که بهتر بود برای خلوتتر شدن آیکن لینکدین رو حذف میکردن که طرح شلوغ نشه.
در کنار آیکنهای شبکههای اجتماعی، عضویت در خبرنامه هم برای وبسایتها جذابه چون موجب بازگشت مجدد (retargeting) کاربر میشه.
اما مهم اینه که توجه کنیم تعداد اکشنهای اصلی فوتر انقدر زیاد نشه که کاربر دچار پارادکس انتخاب بشه.
وبسایتهایی که اپلیکیشن دارن یکی از KPIهای اصلی برای موفقیت خودشون رو تعداد نصب اپلیکیشن میدونن. در نتیجه اینکه نصب اپلیکیشن رو توی فوتر قرار بدیم یه راهکار مناسبه.
وبسایت سیبایرانی یه کار خوبی که کرده اینه که تو نسخه دسکتاپ QRcode دانلود اپلیکیشن رو قرار داده که کاربر بتونه با موبایلش اسکن کنه و بره برای نصب اپلیکیشن. بدیهیه که تو نسخه موبایل میشه لینک مرتبط گذاشت. مثلا تو فوتر موبایلهای اندرویدی فقط لینک اپلیکیشن اندرویدی گذاشت و تو نسخه iOS هم لینکهای متناظر رو گذاشت به جای اینکه شلوغش کنیم.
اگر تعداد قابل قبولی و به صورت ۲۴ ساعته پشتیبان تلفنی دارین یا در شروع کار هستین اینکه شماره تلفن پشتیبانیتون رو خیلی مشهود توی فوتر قرار بدین یه راه ارتباطی خوبه که بتونین مشکلات سایت رو خیلی راحت پیدا کنین و باعث جلب اعتماد کاربر هم میشه.
فقط یادتون از کد tel: برای شماره استفاده کنین که کاربر بتونه تنها با زدن روش و بدون Interaction Cost اضافه با پشتیبانی تماس بگیره و نیاز به وارد کردن شماره تلفن نباشه.
اینکه شماره تلفن رو هم به صورت شناور قرار بدیم گزینهی خوبیه برای زمانی که میخواهیم تماس با پشتیبانی رو اضافه کنیم. فقط دقت کنیم مثل تصویر بالا سایر آیتمهای فوتر رو نپوشونه.
مزیت فروش منحصربه فرد (unique selling point) یکی را راههایی که میتونین باهاش افراد رو ترغیب به خرید کنین. اینکه بگین نسبت به رقبای احتمالی و حد سطح انتظار کاربر چه خدمات ویژهای میدین باعث جلب اعتماد بیشتر و کاهش نگرانی از خرید کاربر میشه.
به عنوان مثلا در فوتر دیجیکالا، ضمانت بازگشت کالا باعث میشه که کاربر در لحظه خرید نگرانی کمتری داشته باشه، چون میدونه که در صورت عدم رضایت میتونه خریدشو پس بده (User Control & Freedom) و در نتیجه بار روانی کمتری روشه.
اگر دیجیکالا رو با عینک تحلیل بررسی کرده باشین ممکنه براتون سوال شده باشه که چرا توی فوتر یه متن طولانی معرفی دیجیکالا گذاشته که باعث شده فوتر خیلی طولانی داشته باشه.
دلیلش بر میگرده به بهینهسازی برای موتورهای جستجو (SEO) که روی کلمات پر جستجو تاکید داشته باشه. مثلا فوتر فیدیبو رو ببینین که چند تا لینک توشه از جمله شعر عاشقانه و رمان عاشقانه که مشخصه جز کلمات پر مخاطبه و آوردنش توی همهی صفحات باعث میشه که شانس بیشتری برای دیده شدن تو گوگل داشته باشین.
احتمالا شما هم متوجه متن انتهایی فوتر شده باشین که معمولا یه چنین چیزیه.
کلیه حقوق مادی و معنوی سایت محفوظ است.
راستیتش اگر محتوایی که ارائه دادین اصلی نیست و سایت خبری هم نیستین و ترجیح میدین که فوتر خلوتتری داشته باشین میتونین بیخیالش بشین.
مثل سایت کاوهنگار که ترجیح داده این موضوع رو نیاره توی فوتر. به نظرم این جز مواردیه که خیلیها میارنش چون نمیدونن که بعضی وقتها میشه توی فوتر نزاریمش.
همینطور که ابتدای مقاله گفتم تمامی این موارد جز مواردی بود که تنها با دیدن نمونه به دست آوردم. در روزهای آینده نتایج مطالعاتمم به این مقاله اضافه میکنم که ببینیم فقط با دیدن چقدر چیز از دست میدیم.
اگر به این مقاله علاقهمند بودید، مقالات زیر را نیز پیشنهاد میکنم.