اذهب إلى المحتوى

خمس إرشادات لجعل صفحة الخطأ 404 أكثر فعالية


Jana-alhob Shalgheen

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

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

1- تخلص من الصفحة القياسية

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

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

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

2- أبق الصفحة مألوفة

yahoo.thumb.png.e7ff2046077bdf39bcbfa71d

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

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

أقل ما يمكنك فعله هو أن تبقي لافتة تعريف أو شعار يدلّ على الموقع والذي يمكن للمستخدم ربطه بشكل مباشر مع رسالة الخطأ 404، وذلك لأنّ رؤية لافتة أو شعار الموقع سيكون ببساطة مطمئنًا بشكل كافٍ لمعظم المستخدمين.

3- أبق الصفحة قاعدية

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

digital-photography-school.thumb.png.c64

فعلى سبيل المثال تقوم مدونة Digital Photography School بربط المستخدمين الذين يحصلون على صفحة الخطأ 404 بأحدث المحتويات التي نشرت في موقعهم.

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

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

4- تقديم بعض التوجيهات

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

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

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

5- كن خلاقا ولكن باعتدال

bad-404-page.thumb.png.6b8fdb280357f3ab6

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

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

ألق نظرة على صفحة الخطأ 404 الخاصة بموقع WP Candy’s WP Candy’s 404 Page ستلاحظ أنّ الهيكلية الأساسية للموقع بقيت على حالها مع إضافة خيار لتصفح الموقع وآخر للبحث، بالإضافة إلى شعار جميل يخبرك عن موضعك في الموقع، ورسالة تؤكد على أنه من الممكن أن تكون قد تمّت إزالة بعض الصفحات. ولكن الأمر غير العادي في رسالة الخطأ 404 تلك هو وجود شريط مصور قصير لمؤسس الموقع نفسه يشجعك أنت كمستخدم على متابعة البحث عن الصفحة التي تريدها (كما أنه أضاف لحن مناسب من فيلم Indiana Jones). وبهذا تكون صفحة الخطأ قد حافظت على فعاليتها مع لمسة من الخصوصيّة.

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

نحن فخورون بصفحة الخطأ 404 التي أنشأنناها

تعرض هذه الصّفحة UX Booth 404 Page الجوانب المفصلة لصفحة الخطأ 404 الخاصة بموقع UX Booth، تفضلوا بإلقاء نظرة عليها فنحن فخورون بها ونشعر بأنها مثال جيد لما يجب أن تبدوا عليه هذه الصفحات.

لمعرفة المزيد عن صفحات الخطأ 404 تفضل بزيارة الروابط التالي:


ترجمة -وبتصرّف- للمقال Five 5 Tips to Make Your 404 Page More Usable لصاحبه Matthew Kammerer.

01_Final.jpg

02_image_black.JPG

03_gradient_fill.JPG

04_Gradient.JPG

05_after_.Gradient.JPG

06_Mask.JPG

07_Blur_gussiian.JPG

08_after_Blur_Gaussian.jpg

09_Fusion_layer.JPG

10_Filter_Pixelate_color_halftone.JPG

11_after_Pexilate_halftone.jpg

12_image_adjustment_hueSaturation.JPG

13_after_HeuSaturation.jpg

13_After_image_adjustment_hueSaturation.JPG

15_After_Range_Color.JPG

16_1_after_Black_Layer.jpg

16_Brush.jpg

17_Orange.jpg

18_Other_Orange.jpg

19_Screen.JPG

20_Use_Pen_Tool.JPG

21_1_Eraser.JPG

21_Eraser.JPG

22_other_pens_Eraser.JPG

23_1_Blending_Option_Gradiant.JPG

23_Blending_Option_Gradiant.JPG

24_after_Blenfing_Option.jpg

25_after_Copy_Layer.jpg

26_Blending_options1.JPG

27_Blending_options2.JPG

28_Blending_options3.JPG

29_After_Blending_options.JPG

30_add_basket_1jpg.jpg

31_add_basket_2.jpg

32_1_Inner_Shadow.jpg

32_After_Inner_Shadow.jpg

33_Duplicate_layer.JPG

34_Gussian_Blur.JPG

35_After_Gussian_Blur.JPG

36_Blending_Options_general.JPG

37_Blending_Options_InnerShadow.JPG

38_After_Blending_Options.JPG

39_feu-TutsPS-dot-com.jpg

40_Transform_Vertical.jpg

41_Filter_Distor_Poolar_cordinate.JPG

43_add_fire.JPG

44_blending_fire.JPG

45_after_blending_fire.JPG

46_Layer_Adjustment_Color_LooKupM.JPG

47_change_Blending_mode.JPG

48_Final.jpg

un-panier-de-feu-avec-photoshop.zip


تفاعل الأعضاء

أفضل التعليقات

لا توجد أية تعليقات بعد



انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أضف تعليق

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • أضف...