امیر تقی آبادی
امیر تقی آبادی
خواندن ۷ دقیقه·۴ سال پیش

چک لیست طراحی 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 & Freedom) و در نتیجه بار روانی کمتری روشه.


متن معرفی برای SEO

اگر دیجیکالا رو با عینک تحلیل بررسی کرده باشین ممکنه براتون سوال شده باشه که چرا توی فوتر یه متن طولانی معرفی دیجیکالا گذاشته که باعث شده فوتر خیلی طولانی داشته باشه.


فوتر فیدیبو
فوتر فیدیبو


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


مالکیت حقوق مادی و معنوی

احتمالا شما هم متوجه متن انتهایی فوتر شده باشین که معمولا یه چنین چیزیه.

کلیه حقوق مادی و معنوی سایت محفوظ است.


فوتر فیدیلیو
فوتر فیدیلیو


راستیتش اگر محتوایی که ارائه دادین اصلی نیست و سایت خبری هم نیستین و ترجیح می‌دین که فوتر خلوت‌تری داشته باشین می‌تونین بیخیالش بشین.


فوتر کاوه‌نگار
فوتر کاوه‌نگار


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





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




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

چک لیستفوترfooteruxui
راوی تجربه کاربری در #ویرگول و مدرس در #یوتیوب https://www.youtube.com/c/AmirTaqiabadi
شاید از این پست‌ها خوشتان بیاید