منبع: بنیاد طراحی تعامل (IxDF) · بازنویسی آزاد: سپنتا پویا با کمک هوش مصنوعی · مهر ۱۴۰۵ · زمان مطالعه: حدود ۱۲ دقیقه

فوتر نقشهٔ سایت (Sitemap Footer) چیست؟

💡 این متن «بازنویسی آزاد» است: ایده‌ها و مفاهیم مطلب اصلی با نگارش کاملاً مستقل فارسی و مثال‌های تازه بازگو شده‌اند و ترجمهٔ کلمه‌به‌کلمه نیست. بخش‌های افزودهٔ مترجم در جعبهٔ منبع مشخص شده‌اند. ترجمه و بازنویسی این متن با کمک هوش مصنوعی انجام شده است.

شب است و روی گوشی، صفحهٔ یک هدفون را در یک فروشگاه اینترنتی می‌خوانید. مشخصات فنی را رد کرده‌اید، نظرهای خریداران را خوانده‌اید و به انتهای صفحه رسیده‌اید. حالا می‌خواهید بدانید اگر هدفون خراب برسد، شرایط مرجوعی چیست. دکمه‌اش کجاست؟

دو جور سایت داریم. در یکی، ته صفحه فقط یک خط کم‌رنگ هست که سال تأسیس را می‌گوید. باید با شست چند ثانیه تا بالا برگردید، منو را باز کنید و دنبال «راهنمای خرید» بگردید. در دیگری، همان‌جا که خواندن تمام شده، چند ستون مرتب منتظر شماست. یکی از آن‌ها «خدمات مشتریان» نام دارد و «رویهٔ بازگرداندن کالا» دومین لینکش است. فرق این دو سایت یک الگوی ساده است به اسم فوتر نقشهٔ سایت.

فوتر نقشهٔ سایت چیست؟

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

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

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

ته صفحه، لحظهٔ تصمیم

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

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

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

سه کار فوتر خوب

منبع سه نقش برای این الگو برمی‌شمارد. هر کدام را با یک مثال آشنا می‌گویم.

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

چیزهای پنهان را دیدنی می‌کند. بعضی صفحه‌ها مهم‌اند ولی کسی دنبالشان نمی‌گردد تا وقتی که لازمشان شود. پیگیری سفارش، کارت هدیه، فهرست شعبه‌ها، فرصت‌های شغلی. منبع از فوتر یک فروشگاه کفش ورزشی مثال می‌زند که دقیقاً همین‌ها را آنجا گذاشته است. کاربری که برای خرید یک کفش آمده، شاید هیچ‌وقت سراغ «کارت هدیه» نمی‌رفت. ولی وقتی آن را در فوتر می‌بیند، یک گزینهٔ تازه در ذهنش باز می‌شود.

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

چه چیزی کجا می‌رود

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

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

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

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

کالبد یک فوتر خوب

بیشتر فوترهای موفق سه لایه دارند و ترتیب این لایه‌ها از بالا به پایین تقریباً ثابت است.

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

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

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

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

وقتی فوتر خراب می‌شود

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

فوتری که به آن نمی‌رسید. صفحه‌ای که با اسکرول بی‌پایان کار می‌کند، فوتر را عملاً غیرقابل دسترس می‌کند. کاربر نزدیک انتها می‌رسد، فوتر لحظه‌ای پیدا می‌شود و دسته‌ای تازه از کالاها آن را دوباره پایین هل می‌دهد. این تجربه از نبودن فوتر بدتر است، چون کاربر می‌بیند ولی نمی‌تواند بگیرد. راه‌حل‌ها ساده‌اند. یا بعد از چند دسته دکمهٔ «نمایش بیشتر» بگذارید تا بارگذاری خودکار متوقف شود، یا مهم‌ترین پیوندهای فوتر را در منوی کناری هم بیاورید.

تکرار کامل منوی بالا. بعضی تیم‌ها همهٔ پیوندهای ناوبری اصلی را عیناً در فوتر تکرار می‌کنند. ظاهرش کامل است، ولی کاربر چیز تازه‌ای نمی‌بیند. فوتر ارزشش را از تفاوتش با منوی بالا می‌گیرد. چند پیوند پراستفادهٔ مشترک اشکالی ندارد. کپی کامل یعنی فرصت هدر رفته.

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

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

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

در بافت فارسی

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

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

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

سه: تاریخ و شماره را فارسی و درست بنویسید. سال حق نشر را یک بار با سال شمسی بنویسید و هر سال خودکار به‌روزش کنید. فوتری که هنوز سال سه سال پیش را نشان می‌دهد، حس رهاشدگی می‌دهد. شمارهٔ تلفن را با ارقام فارسی نشان دهید، ولی پیوندش را از نوع تماس بسازید تا روی گوشی با یک ضربه شماره گرفته شود. ساعت پاسخ‌گویی و روزهای تعطیل را هم بنویسید. «هر روز به جز جمعه» برای کاربر از یک شمارهٔ بی‌توضیح مفیدتر است.

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

پنج: فوتر انبار کلیدواژه نیست. در بسیاری از فروشگاه‌های فارسی، ته صفحه فهرستی بلند از عبارت‌هایی مثل «خرید فلان در تهران» و «قیمت فلان در اصفهان» دیده می‌شود. این فهرست برای خواننده هیچ معنایی ندارد و فوتر واقعی را زیر خودش دفن می‌کند. اگر صفحه‌های شهری واقعاً لازم‌اند، یک پیوند «شعبه‌ها» کافی است.

جمع‌بندی

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

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

اگر بخواهم یک پرسش بگذارم: همین حالا به ته صفحهٔ محصول خودتان روی گوشی بروید. سه پیوندی که کاربر آنجا بیشتر از همه لازم دارد، با یک ضربه در دسترس‌اند؟