طراحی صفحات خطا: ۴۰۴ که کاربر را نگه دارد

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

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

خطای ۴۰۴ چه چیزی را توضیح می‌دهد؟

طبق تعریف 404 در MDN، سرور منبع درخواستی را پیدا نکرده است. این کد به‌تنهایی علت حذف یا مدت نبودن منبع را تعیین نمی‌کند. متن صفحه بهتر است همین حد از اطمینان را حفظ کند: «صفحه‌ای با این نشانی پیدا نکردیم» دقیق‌تر از «این مطلب برای همیشه حذف شده» است، مگر اینکه سامانه واقعاً حذف دائمی را تشخیص داده باشد.

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

ابتدا خبر را واضح بگویید

عنوان اصلی را کوتاه و قابل فهم بنویسید. «این صفحه پیدا نشد» برای مخاطب عمومی کافی است. عدد ۴۰۴ می‌تواند کنار آن قرار بگیرد تا افراد فنی وضعیت را سریع تشخیص دهند؛ لازم نیست بزرگ‌ترین عنصر صفحه باشد. توضیح بعدی بهتر است علت‌های محتمل را با احتیاط بیان کند: نشانی ممکن است تغییر کرده باشد یا لینک قدیمی باشد. فهرست طولانی علت‌ها کمکی به انتخاب قدم بعدی نمی‌کند.

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

اقدام اصلی را از قصد کاربر انتخاب کنید

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

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

جستجو را با داده واقعی همراه کنید

وجود یک کادر جستجو وقتی نتایج ضعیف یا خالی دارد، صرفاً ظاهر راه‌حل است. جستجوی صفحه خطا باید به همان مجموعه‌ای وصل شود که مخاطب انتظار دارد: مقاله‌ها، محصولات یا راهنماها. برای مسیرهای شناخته‌شده می‌توان عبارت اولیه را پیشنهاد کرد؛ مثلاً از عنوان قدیمی ثبت‌شده در سامانه استفاده شود. استخراج کورکورانه واژه‌ها از URL همیشه معنی مناسبی تولید نمی‌کند و نیاز به قواعد مشخص دارد.

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

محتوای پیشنهادی باید دلیل داشته باشد

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

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

طنز و تصویر چه زمانی کمک می‌کنند؟

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

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

صفحه باید در شرایط خراب هم کار کند

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

عنوان سند نیز وضعیت را بیان کند تا کاربر در تب‌ها سردرگم نشود. یک heading اصلی، ناحیه محتوای مشخص و ترتیب منطقی لینک‌ها برای استفاده با صفحه‌کلید کمک می‌کنند. اطلاعات ضروری را فقط با رنگ نمایش ندهید. اگر در اپلیکیشن تک‌صفحه‌ای مسیر به صفحه خطا تغییر می‌کند، عنوان و مدیریت focus باید متناسب با ناوبری به‌روزرسانی شوند؛ تغییر ظاهری بدون اعلام مقصد تازه ممکن است برای برخی کاربران نامفهوم بماند.

ظاهر خطا و پاسخ سرور را هماهنگ کنید

نوشتن عدد ۴۰۴ در HTML به معنای ارسال وضعیت 404 نیست. تنظیم پاسخ بر عهده سرور یا لایه مسیریابی است. صفحه‌ای که می‌گوید منبع وجود ندارد اما پاسخ موفق می‌دهد، به ابزارها اطلاعات متناقض می‌رساند. راهنمای Google درباره وضعیت‌های HTTP این تفاوت و مسئله Soft 404 را توضیح می‌دهد. این بخش یک تصمیم فنی مستقل از رنگ و چیدمان صفحه است.

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

نگهداری را به یک مسئول مشخص بسپارید

در گزارش خطاها، نشانی درخواستی، محل ارجاع و زمان رخداد به تشخیص مشکل کمک می‌کند، اما ثبت داده باید با محدودیت حریم خصوصی همراه باشد. اطلاعات حساس query string را بی‌دلیل نگه ندارید. درخواست‌های ربات، مسیرهای اسکن امنیتی و ورود واقعی کاربران را از نظر تحلیل تفکیک کنید؛ تعداد خام ۴۰۴ به‌تنهایی نمی‌گوید چند نفر نتوانسته‌اند کارشان را انجام دهند.

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