طراحی صفحه 404 استاندارد چه عناصری دارد؟ +معرفی منابع

1 رای

در ادامه مقاله “صفحه ارور ۴۰۴ چیست؟ نحوه رفع مشکل آن” امروز میخواهیم در مورد المان‌هایی که باید در طراحی صفحه 404 وجود داشته باشد صحبت کنیم. برای UX یا تجربه کاربری برای این صفحه موارد دقیقی مطرح نشده است و بنده شخصا با تحقیق و مشاهده چند صد صفحه ۴۰۴ ایرانی و خارجی به […]

در ادامه مقاله “صفحه ارور ۴۰۴ چیست؟ نحوه رفع مشکل آن” امروز میخواهیم در مورد المان‌هایی که باید در طراحی صفحه 404 وجود داشته باشد صحبت کنیم. برای UX یا تجربه کاربری برای این صفحه موارد دقیقی مطرح نشده است و بنده شخصا با تحقیق و مشاهده چند صد صفحه ۴۰۴ ایرانی و خارجی به یک سری نقاط مشترک رسیده ام که در زیر میتوانید با دقت بخوانید:

۱- اِلِمان گرافیکی را در طراحی صفحه ۴۰۴ فراموش نکنید

برای اینکه یک صفحه ۴۰۴ جذاب داشته باشید چند راه دارید:

طراحی صفحه ۴۰۴ یک سایت گل و گیاه آنلاین
طراحی صفحه ۴۰۴ یک سایت گل و گیاه آنلاین
  • اگر فنی هستید و متخصص گرافیک، یک تصویر سازی قوی انجام دهید. ترجیحاً مرتبط با حوزه کاری خودتان (مانند تصویر سازی سایت زودفود)
  • اگر ایده طراحی تصویر ندارید یا آنقدر متخصص نیستید میتوانید از ایده های سایر طراحان سایت در دریبل از طریق “این لینک” استفاده کنید.
  • اگر گرافیست نیستید و میخواهید طرح آماده داشته باشید طرح‌های آماده و ۱۰۰٪ رایگان فری‌پیک را از طریق “این لینک” پیشنهاد میکنم، دانلود کنید. (تصویر شاخص همین مقاله هم از همین سایت دانلود کرده‌ایم  ^_^ )
  • یک پیشنهاد خلاقانه برای افراد شجاع: استفاده از گیف های متحرک که در سایت Gify میتوانید استفاده کنید. گیف هایی با کانسپ ناراحت یا شوکه شده.
استفاده از المان های متحرک (Gif) به عنوان یک عکس در صفحه ۴۰۴

۲- عنوان خطا را بنویسید

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

  • خطای ۴۰۴ صفحه مورد نظر شما پیدا نشد
  • ۴۰۴! محتوایی که دنبالش بودید احتمالا حذف یا جایگزین شده است.

 ۳- فرم جستجو را فراموش نکنید

صفحه ۴۰۴ یک سایت دکوراسیون داخلی که از فرم جستجو استفاده کرده است
صفحه ۴۰۴ یک سایت دکوراسیون داخلی که از فرم جستجو استفاده کرده است

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

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

۴- محتواهای برتر یا مرتبط را نمایش دهید.

کار خوبی که دی‌جی‌کالا در صفحه ۴۰۴ سایت خود انجام داده بود (اگر صفحه ۴۰۴ Digikala را ندیدید به مقاله سری اول نمونه صفحات ۴۰۴ زیبای سایت های ایرانی مراجعه کنید)، این بود که محصولات مرتبطی بر اساس بازدیدهای قبلی شما به شما پیشنهاد میداد. این پیشنهاد با هوش مصنوعی، واقعا فوق العاده و پربازده است ولی اگر نتوانستید از هوش مصنوعی در سایت خود استفاده کنید سعی کنید مطالب/محصولات پر بازدید خود را به نمایش بگذارید و بگویید “بابت پیدا نشدن صفحه مورد نظرتان متاسف هستیم، اما فرصت خوبی است که از پربازدیدترین مطالب/محصولات ما بازدید نمائید

۵- لینک های کاربردی را فراموش نکنید

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

از سری لینک های کاربردی هم که میتواند کاربر را از این سردرگمی رها کند لینک های دسته‌های پرکاربرد مقالات/محصولات سایت شما میباشد.

چگونه این طراحی ها را پیاده سازی کنیم؟

۱- راهکاری برای برای کلیه وبسایت‌ها

اگر کدنویسی و طراحی سایت میدانید، کافی است یک فایل به نام notfound.html بسازید و در روت سایت خود آپلود کنید و سپس کد زیر را در فایل .htaccess روت هاست خود بیافزایید:

ErrorDocument 404 /notfound.html

۲- راهکاری برای طراحان قالب های وردپرس

هر قالبی دارید یک فایل 404.php در فولدر قالب شما هست که میتوانید با ویرایش این فایل طراحی صفحه ۴۰۴ سایت وردپرسی خود را دگرگون نمایید.

۳- راهکاری برای وبمستران (مدیران سایت) های وردپرسی

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

404page – your smart custom 404 error page (دانلود رایگان از مخزن وردپرس)

افزونه وردپرسی که به شما اجازه میدهد تا صفحه 404 دلخواه انتخاب نمائید
افزونه وردپرسی که به شما اجازه میدهد تا صفحه 404 دلخواه انتخاب نمائید

 

همین الان دست بکار شوید

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

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

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

نظرات

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

پاسخی بگذارید