تصميم صفحات 404 بديهية وسهلة الاستخدام

نشرت: 2019-10-16

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

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

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

هل أنت مستعد لتعلم كيفية تحويل السيئ إلى خير؟ دعنا نكتشف ذلك.

تخصيص صفحة 404 لموقعك

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

قليلا من المستيقظ ، أليس كذلك؟

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

Specialized.com 404 Page

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

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

اشرح ما حدث

إذا نظرنا إلى صفحة 404 الافتراضية ضمن Apache ، فسنرى ما يلي:

Codinghorror.com 404 Page

وهذا كل شيء. ليس لدى المستخدم أي فكرة عما حدث بالفعل وماذا يفعل بعد ذلك.

نظرًا لأنك تهتم بعملائك وتريد استبعاد أي تجربة غير سارة ، قدِّم تفسيرًا للخطأ. الأسباب الرئيسية لخطأ 404 هي عادة:

  • أخطأ المستخدم في كتابة شيء ما ،
  • الارتباط معطل ،
  • الصفحة غير موجودة
  • الاتصال بالخادم مقطوع.

Marvelapp.com 404 Page

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

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

قم بإنشاء رسالة جذابة

تعد صفحة 404 فرصة مثالية للعلامة التجارية لعرض هويتها من خلال رسالة جيدة الصنع.

غالبًا ما تتميز أفضل أمثلة 404 صفحة بما يلي:

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

Github.com 404 Page

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

قام GitHub بعمل رائع من حيث تصميم صفحة 404 الخاصة به. استخدمت الصورة النمطية للمطورين وحبهم لسلسلة "Star Wars" واستخدمتها لمصلحتهم الخاصة من خلال جعل كل من العناصر المرئية ورسالة الصفحة يسهل التعرف عليها على الفور حتى من قبل الأشخاص الذين لم يشاهدوا أي فيلم من أفلام حرب النجوم.

اعرض إجراءً لتتخذه

تعد عبارة الحث على اتخاذ إجراء مهمة حقًا وضرورة مطلقة لتصميم 404 صفحة.

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

Pagecloud.com 404 Page

بعض عبارات الحث على اتخاذ إجراء الأكثر شيوعًا لصفحة 404 هي:

  • شريط البحث
  • الصفحة الرئيسية
  • أعلى المنتجات / الخدمات
  • قم بالتسجيل في منتج أو رسالة إخبارية
  • عرض إصدار تجريبي مجاني

انتبه إلى تصميم أزرار الحث على الشراء. يجب أن يتم رصدها بسهولة ويجب ألا تمتزج مع الخلفية ، وإلا فلن يلاحظها المستخدم. كذلك ، فكر في رسالة زر الحث على الشراء: بدلاً من العبارات المبتذلة مثل "انقر هنا" ، انتقل بشيء أكثر إبداعًا ("انظر ما حصلنا عليه").

أضف شريط البحث

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

يمكنك دعمه برسالة مثل: "يبدو أن استفسارك غير موجود في أي مكان ... لماذا لا تحاول مرة أخرى؟" تتمتع عبارات الحث على اتخاذ إجراء المكتوبة جيدًا بمعدل مشاركة مرتفع وتعمل بشكل جيد مع الصور.

كذلك ، أضف نص تلميح إلى شريط البحث. يحصل الشريط الذي يحتوي على نص على تفاعل أفضل من الارتباط الفارغ.

أضف نقاط الخروج

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

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

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

اعرض منتجاتك / خدماتك

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

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

اجعلها ممتعة

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

imdb.com 404 Page

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

تتبع الخطأ 404

الخطأ 404 ليس من شأن المستخدم. لكن مهمتك هي تتبعها وتحديد سبب الخطأ ورحلة المستخدم.

هناك بعض الأشياء التي يجب وضعها في الاعتبار عند اختيار أداة لتتبع الخطأ 404.

ضع في اعتبارك جميع مصادر الخطأ 404

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

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

تقرير عن تكلفة الخطأ 404

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

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

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

المراقبة المستمرة

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

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

أنواع أدوات التتبع

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

أدوات الزحف

تعتبر أدوات الزحف مثل Screaming Frog مثالية لفحص موقع الويب الخاص بك بسرعة والتحقق من الروابط المعطلة.

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

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

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

أدوات الباك لينك

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

يعد Link Explorer by Moz أحد الأدوات التي تساعدك في العثور على مواقع الويب التي تنقل المستخدمين إلى موقعك. هذا التحليل مفيد حقًا لتحسين محركات البحث لديك حيث يمكنك التخلص من روابط 404 وتحسين ترتيب موقعك.

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

التتبع مع Google Analytics

يعد Google Analytics أحد أكثر الطرق شيوعًا وفعالية لتتبع خطأ 404 صفحة.

لذلك ، ستحتاج إلى نسخ هذا الرمز:

<script>  
   // Create Tracker - Send to GA
   // Replace UA-11111111-11 with your own Tracking ID
 ga('create', 'UA-11111111-11');
   ga('send', {
     hitType: 'event',
     eventCategory: '404 Response',
     eventAction: window.location.href,
     eventLabel: document.referrer
});
</script>

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

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

وأخيرًا: أصلح المشكلة!

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

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

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

بشكل عام ، يجب أن تجلب صفحة 404 سهلة الاستخدام قيمة للمستخدم ، وأن تكون متسقة من حيث التصميم العام لموقع الويب ، وتساعد في التنقل في الموقع. باتباع هذه القواعد ، ستحتفظ بالمستخدمين وفي نفس الوقت تعزز تحويلاتك.