صفحه 404 چیست؟ چگونه صفحه 404 بهتری داشته باشیم؟

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

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

یک صفحه‌ی خطای ۴۰۴ به کاربران اطلاع می‌دهد که به دنبال یک لینک بدون صفحه هستند یا آدرس صفحه وبی را تایپ کرده‌اند که وجود خارجی ندارد.

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

در این مقاله، ما با ارائه نمونه‌هایی تصویری، به شما نشان می‌دهیم که چگونه یک صفحه خطای ۴۰۴ زیبا، آموزنده و کاربر-محور طراحی کنید.

عناصری که باید به صفحه ۴۰۴ اضافه کنید:

1. لوگوی شرکت
2. استفاده از عباراتی که با حال و هوای سایت شما سازگاری داشته باشد مانند «صفحه خطا»، «۴۰۴»، یا «اوه!»
3. توضیحی کوتاه در مورد دلیل خطا
4. لینکی به صفحه اصلی وب‌سایت یا یک باکس جستجو

نکته‌ها و ایده‌های انگیزه دهنده برای طراحی صفحه ۴۰۴

• به استایل کلی وب‌سایت خود وفادار باشید.

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

• گزینه‌های دیگری را به کاربر پیشنهاد دهید.

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

مقاله مرتبط: چگونه صفحه ٤٠٤ را کاربردی تر کنیم؟

Coffee mate کاربران خود را نه‌تنها به یک باکس جستجو بلکه به یک فرم جستجوی سریع و خرید آنلاین هدایت می‌کند.

Github نیز، یکی از بزرگ‌ترین وب‌سایت‌های ارائه خدمات میزبانی وب، کاربران خود را به یک باکس جستجو راهنمایی می‌کند.

• توضیح دهید که چه مشکلی باعث ایجاد خطا شده است.

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

• از قرار دادن لینک‌های بیش از حد، خودداری کنید.

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

• کمی سرگرمی و طنز به این صفحه اضافه کنید.

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

تصویر پایین متعلق به شرکتی است که محصولات تخصصی حیوانات خانگی تولید می‌کند و هنگامی‌که کاربران در صفحه خطای ۴۰۴ فرود می‌آیند، آن‌ها را سرگرم می‌کند:

• به احساسات کاربر پاسخ دهید.

برخی از طراحان، عمداً عدد ۴۰۴ را از صفحه خطا حذف کرده و به‌جای آن از عبارات «Oops!»، «Hmmm» و یا «Oh» به همراه یک انیمیشن یا طرح استفاده می‌کنند تا به احساس کاربر پاسخ داده باشند. این رویکرد، کاربران را تشویق می‌کند تا از سایر صفحات وب‌سایت برای یافتن اطلاعات مورد نظر خود بازدید کنند.

• صفحه خطای خود را تعاملی کنید.

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

مقاله مرتبط: آیا ارور ٤٠٤ به شاخص گذاری و رتبه‌بندی وب سایت ضربه می‌زند؟

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

در صفحه خطای وب‌سایت bitly.com، اگر مکان‌نما را روی دریا قرار دهید، ماهی تکان می‌خورد و همچنین می‌توانید لینک‌های موجود در فوتر صفحه را دنبال کنید.

یک طراح فونت سفارشی در صفحه خطای وب‌سایت خود به کاربران پیشنهاد می‌دهد که قلم رایانه‌ای Vintage Mono pro 1403 را در وب‌سایت ۱۴۰۳.slantedhall امتحان کنند:

صفحه ۴۰۴ وب‌سایت Marvel نیز با هر بار به‌روزرسانی صفحه، مجموعه‌ی متفاوتی از قهرمانان خود را نشان می‌دهد:

• از محصول خود استفاده کنید.

برای شرکت‌هایی که محصولات متفاوت می‌فروشند، بهتر است که از تصاویر همان محصولات استفاده کنند. در تصاویر زیر می‌بینید که Starbucks چگونه این کار را با موفقیت انجام می‌دهد:

در این تصویر هم یک طراح وب، از طراحی‌های خود استفاده می‌کند تا نشان دهد که در جستجوی یک صفحه مناسب روی وب‌سایت خود، Chrisglass.com است:

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

شما حتی می‌توانید از لوگو یا کاراکترهای اختصاصی خود استفاده کرده تا صفحه خطای خود را متنوع کنید.

Pixar یک کاراکتر از فیلم Inside Out خود را انتخاب کرده است. این کاراکتر، ناراحت و متناسب با صفحه خطا و احساس کاربر است.

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

پس صفحه خطای ۴۰۴ خود را خلاقانه و قابل فهم ایجاد کنید.

نتیجه‌گیری

شما درهرحال به طراحی یک صفحه خطا احتیاج دارید، با این وجود بهتر است که لینک‌های شکسته در وب‌سایت خود نداشته باشید. از ابزار Google search console که برای جستجوی لینک‌های شکسته ایجاد شده است، می‌توانید برای بررسی سلامت لینک‌های وب‌سایت خود استفاده کنید.

برای طراحی صفحه خطای ۴۰۴ هم از نکته‌های این مقاله استفاده کنید و خلاقیت خود را به‌کار گیرید تا صفحه‌ای منحصربه‌فرد و متناسب با وب‌سایت و برند خود طراحی کنید.