كيفية إنشاء صفحة 404 رائعة لمستخدميك

نشرت: 2021-11-04

الوصول إلى صفحة 404 ليس تجربة ممتعة. ولكن هناك أشياء يمكنك القيام بها للتأكد من أنها ليست التجربة النهائية للمستخدم مع موقع الويب الخاص بك.

لتصميم صفحة 404 رائعة ، تحتاج إلى معرفة العناصر الأكثر فائدة للمستخدمين ويمكن أن تساعد صفحتك في التميز.

فيما يلي قائمة من 6 ميزات لمساعدتك في تحقيق أقصى استفادة من صفحة 404.

المحتويات تخفي
1 ما هو كود 404؟
2 لماذا يجب عليك إنشاء صفحة 404 مخصصة
3 كيفية إنشاء صفحة 404 مخصصة رائعة
3.1 مسح رسالة الخطأ
3.2 شريط البحث
3.3 قائمة الموارد
3.4 زر الحث على الشراء
3.5 روابط لأفضل محتوى
3.6 هوية العلامة التجارية
4 التفاف

ما هو كود 404؟

404 هو أحد رموز حالة HTTP التي تظهر عندما يتعذر العثور على الصفحة.

404 ينتمي إلى مجموعة 4xx ، مما يشير إلى أنه خطأ من جانب العميل. وبشكل أكثر تحديدًا ، فهذا يعني أن العميل وصل إلى الخادم الخاص بك ، لكن الخادم لم يعثر على الملف المطلوب.

يمكن أن يظهر رمز 404 لأسباب مختلفة ، مثل:

  • تم حذف الصفحة ،
  • قام المستخدم بخطأ إملائي أثناء كتابة عنوان URL ،
  • الارتباط الذي يشير إلى الصفحة غير صحيح.

بغض النظر عن سبب رمز 404 ، لن يتمكن المستخدمون من الوصول إلى الصفحة لأنه ببساطة لا يمكن العثور عليها.

تكون الصفحة التي سيراها المستخدم بدلاً من الصفحة المفقودة تحت سيطرتك. تشمل خياراتك ما يلي:

  • صفحة 404 قياسية ، أو
  • صفحة 404 مخصصة.

قد تحتوي صفحة 404 القياسية غير المخصصة على جزء بسيط من النص على خلفية بيضاء تقول فقط "لم يتم العثور عليها". الخادم الخاص بك يقوم تلقائيا بإنشاء هذه الصفحة.

لقطة شاشة لصفحة 404 غير مخصصة تظهر بها رسالة "غير موجود"

من ناحية أخرى ، يمكنك اختيار تخصيص صفحة 404 الخاصة بك - قم بتصميمها لتناسب بقية موقع الويب الخاص بك وتحديد العناصر التي تريد تضمينها.

لماذا يجب عليك إنشاء صفحة 404 مخصصة

تعد صفحة 404 المخصصة المصممة جيدًا مفيدة لكل من المستخدمين وعملك.

عندما يدخل المستخدم صفحة 404 قياسية ، فإنه يفهم فقط أنه حدث خطأ ما ، ولم يتم العثور على الصفحة. إنهم لا يعرفون ما حدث أو ما يجب عليهم فعله بعد ذلك.

نتيجة لذلك ، قد يخرج عميلك من موقعك دون تلبية احتياجاته. هذا أبعد ما يكون عن المثالية. لم يكن المستخدم راضيًا عن بحثه ، وفقدت نشاطه التجاري.

باستخدام صفحة 404 مخصصة ، يمكنك تغيير الصفحة الافتراضية غير المفيدة إلى شيء مفيد لكل من المستخدمين وعملك.

تتيح لك صفحة 404 المخصصة:

  • ساعد المستخدمين في العثور على المعلومات التي يبحثون عنها ،
  • شجع المستخدمين على استكشاف صفحتك ،
  • أظهر صوت علامتك التجارية وإبداعها.

بالإضافة إلى ذلك ، يوصى Google بإنشاء صفحة 404 مخصصة .

إذا كان لديك حق الوصول إلى ملفات تكوين الخادم الخاص بك ، فيمكنك جعل صفحات الخطأ هذه مفيدة للمستخدمين من خلال تخصيصها. تساعد صفحة 404 المخصصة الجيدة الأشخاص في العثور على المعلومات التي يبحثون عنها ، وتوفر أيضًا محتوى مفيدًا آخر يشجع الأشخاص على استكشاف موقعك بشكل أكبر.
المصدر: جوجل

ينص الاقتباس بوضوح على أن Google تعتبر صفحة 404 مخصصة مفيدة للمستخدم وتشجع مالكي المواقع على تخصيص صفحات 404 الخاصة بهم.

كيفية إنشاء صفحة 404 مخصصة رائعة

حتى إذا قمت بتخصيص صفحة 404 الخاصة بك بالكامل ، فتأكد من أن الخادم لا يزال يعرض رمز حالة 404 HTTP. إنها ممارسة سيئة أن تقوم بإعداد 200 كود ، مما يشير إلى استجابة ناجحة عندما لا تكون الصفحة موجودة بالفعل.

عند تحديد ما يجب تضمينه في صفحة 404 الخاصة بك ، فإن أحد العناصر الأساسية هو الرسالة التي تنص بوضوح على أنها صفحة خطأ . أبلغ المستخدمين بحدوث خطأ ما بطريقة ودية ومباشرة.

لكن هذه مجرد البداية. فيما يلي الميزات الرئيسية التي يمكنك إضافتها إلى صفحة 404 المخصصة لجعلها أكثر فائدة:

  • شريط البحث ،
  • قائمة الموارد المتاحة على موقع الويب الخاص بك ،
  • زر الحث على الشراء ،
  • روابط لأهم محتوى لديك ،
  • تصميم يتماشى مع علامتك التجارية.

المفتاح لصفحة 404 جيدة هو فائدتها للمستخدمين. لا تحتاج إلى تضمين جميع العناصر من القائمة أعلاه - فقط العناصر التي ستساعد المستخدمين في العثور على طريقهم حول موقع الويب الخاص بك.

مسح رسالة الخطأ

يجب أن تتضمن صفحة 404 الجيدة دائمًا رسالة واضحة مفادها أنها صفحة خطأ. بغض النظر عن التصميم الذي تختاره ، يجب أن تخبر المستخدمين دائمًا بحدوث خطأ ما ولم يتم العثور على الصفحة.

Ikea يفعل هذا بشكل جيد جدا. إنها توفر رسالة واضحة تتضمن كلاً من رمز 404 وشرحًا موجزًا ​​يجعلها سهلة الفهم للمستخدمين.

لقطة شاشة لصفحة 404 من إيكيا

شريط البحث

يتيح شريط البحث للمستخدمين الذين يبحثون عن محتوى معين إعطائه لقطة أخرى والبحث عما كانوا يبحثون عنه على موقع الويب الخاص بك.

من الأمثلة الجيدة لصفحة 404 مع شريط بحث Moz.com:

لقطة شاشة لصفحة Moz's 404 مع شريط بحث

لذلك إذا كنت تبحث عن شيء محدد على Moz.com ولكنك لم تجده ، يمكنك البحث مرة أخرى مباشرة في صفحة 404.

قائمة الموارد

إذا انتهى الأمر بالمستخدم في صفحة 404 ولكن لم يكن لديه شيء معين في ذهنه لكتابته في شريط البحث ، فيمكنك تقديم قائمة بالموارد التي يمكن العثور عليها على موقع الويب الخاص بك.

يحتوي Backcountry على صفحة 404 مخصصة بتصميم بسيط يناسب موقع الويب وقائمة بالصفحات الأساسية.

لقطة شاشة لصفحة 404 في Backcountry مع قائمة بالموارد

هذه الصفحة ليست مفيدة للمستخدمين فحسب ، ولكنها تتيح أيضًا لـ Backcountry عرض محتواها وتشجيع الأشخاص على استكشاف موقع الويب.

مثال آخر لصفحة 404 بها قائمة بالموارد هو Tripadvisor. مع قليل من الفكاهة وأربعة أزرار بسيطة ، يوفر Tripadvisor خيارًا سهلاً لتصفح الأقسام التي قد تهم المستخدمين أكثر من غيرها.

لقطة شاشة لصفحة Tripadvisor 404 مع 4 أزرار لموارد الموقع

زر الحث على الشراء

من خلال تضمين زر CTA ، يمكنك أن تظهر للمستخدمين الخطوة التالية التي يمكنهم اتخاذها.

أبسط استخدام لزر الحث على الشراء هو توجيه المستخدمين إلى صفحتك الرئيسية . طريقة بسيطة لكنها فعالة لمنح المستخدمين بعض الإرشادات.

فيما يلي مثال على صفحة 404 من Netflix مع زر CTA يؤدي إلى صفحتهم الرئيسية.

لقطة شاشة لصفحة Netflix 404 تحتوي على زر الصفحة الرئيسية لـ Netflix

حل آخر هو تضمين زر CTA "اتصل بنا" . على سبيل المثال ، إذا جاء أحد المستخدمين بسؤال معين وجعلت صفحة 404 من المستحيل الحصول على إجابة ، فقد يرغبون في الاتصال بك لطلب التفاصيل.

قد يستخدم المستخدمون أيضًا خيار "اتصل بنا" لإبلاغك بالخطأ.

يتضمن Kinsta كلاً من "الصفحة الرئيسية" وزر "اتصل بنا". يمكن للمستخدمين تصفح الموقع أو الاتصال بالشركة. وبالتالي ، فهو يوفر حلاً للأشخاص الذين يرغبون في استكشاف الموقع أو العثور على إجابة لسؤال معين.

لقطة شاشة لصفحة Kinsta 404 مع زر للصفحة الرئيسية والاتصال

يجب أن يساعد زر الحث على الشراء المستخدمين لديك ولكن أيضًا يناسب أهداف عملك. على سبيل المثال ، يمكنك تضمين خيار لترك بريد إلكتروني والاشتراك في رسالتك الإخبارية.

تستخدم 9gag صفحتها 404 لتشجيع الأشخاص على تنزيل التطبيق الخاص بها. تتناسب إضافة صورة gif الخلفية تمامًا مع أسلوب 9gag.

لقطة شاشة لصفحة 9gag's 404 مع زر "تنزيل التطبيق" وصورة gif في الخلفية

روابط لأعلى محتوى

يتمتع المحتوى الشائع الخاص بك بأفضل الفرص للحفاظ على تفاعل المستخدمين. يمنحك الفرصة لجذب انتباه المستخدمين قبل مغادرتهم صفحة 404 الخاصة بك.

يمكن أن تكون الروابط إلى المحتوى الأكثر شيوعًا لديك مفيدة بشكل خاص لمواقع التجارة الإلكترونية لأنه يمكنك الترويج لمنتجاتك الأكثر مبيعًا على صفحة تكون إلى حد ما في طريق مسدود.

يظهر مثال ممتاز لصفحة 404 تقدم أفضل محتوى على موقع Urban Outfitters . يحتوي على قسم "الأكثر شيوعًا" مع إمكانية شراء العناصر على الفور.

لقطة شاشة لصفحة 404 من Urban Outfitters تحتوي على روابط للعناصر الأكثر شيوعًا

هوية العلامة التجارية

من خلال تخصيص صفحة 404 الخاصة بك ومواءمتها مع تصميم موقع الويب الخاص بك ، يمكنك إظهار أنك تهتم حقًا بكامل رحلة عميلك عبر موقع الويب الخاص بك.

يمكن أن تُظهر صفحة 404 أسلوب وشخصية علامتك التجارية. يمكن أن يجعل التصميم الإبداعي الذي يتناسب مع أسلوب موقع الويب الناس يبتسمون وربما يشجعهم أيضًا على مشاركة الصفحة مع الأصدقاء.

تستخدم Pixar إحدى شخصياتها المعروفة في صفحة 404. على الرغم من أن الصفحة لا توفر ميزات تنقل شاملة ، إلا أن الرسومات والرسالة الحماسية تتناسب تمامًا مع أسلوب العلامة التجارية.

لقطة شاشة لصفحة Pixar's 404 مع شخصية من فيلم Inside Out

إلى جانب زر "خذني إلى المنزل" ، يتضمن Canva لغزًا صغيرًا يستمتع به المستخدمون. يبرز إبداعه وتفرده بين الصفحات الأخرى. إنه بديل ممتع لصفحة 404 القياسية.

لقطة شاشة لصفحة 404 من Canva بها أحجية

تغليف

لا تترك المستخدمين لوحدهم باستخدام صفحة 404 قياسية.

يجب ألا يترك المستخدمون مطلقًا دون أي معلومات حول ما حدث وما يجب عليهم فعله بعد ذلك.

بدلاً من ذلك ، حاول أن تخلق تجربة جيدة في جميع أنحاء موقعك. يتضمن صفحات الخطأ.