40 صفحة خطأ 404 ذكية من مواقع الويب الحقيقية

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

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

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

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

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

ما هو خطأ 404؟

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

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

تتضمن بعض صفحات الخطأ 404 المخصصة صورة رئيسية أو وصفًا ذكيًا أو خريطة موقع أو نموذج بحث أو معلومات اتصال أساسية.

أفضل أمثلة لصفحة ويب 404

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

الصفحة غير موجودة: Creative 404 Error Pages

1. الذرة الصفراء

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

2. سبوتيفي

غطت شركة Spotify العملاقة لتدفق الموسيقى قواعدها بصفحة ذكية 404. مع تورية بارعة من ألبوم Kanye West "808s and Heartbreak" وتسجيل الرسوم المتحركة ، يقدم الموقع الترفيه لفترة وجيزة ثم يرسل الزوار مرة أخرى إلى الصفحة التي أتوا منها.

3. بلطف

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

4. Adobe

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

5. كلوروكس

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

6. دوما الجماعية

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

7. تشيل هاوس

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

8. قليلا

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

9. ايكيا

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

10. Moxie Design Co.

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

11. McKissack & McKissack

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

12. الحيل CSS

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

13. الألعاب القديمة الجيدة

بالنسبة إلى مواقع الويب الأخرى ، تقوم بإزالة غلاف الواجهة الأمامية ويوجد ... مجرد فراغ شاسع في المساحة. هذه الصفحة هي مرجع ذكي لـ GOG Galaxy ، وهو عميل ألعاب الفيديو الأصلي لـ Good Old Games. لحسن الحظ ، توجد شخصية لعبة فيديو صغيرة لمنح الزائرين مكانًا للإبلاغ عن خطأ إذا أرادوا.

14. كانفا

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

15. Innotech

على غرار نهج Canva ، تتميز Innotech بلعبة Pong-esque على صفحة 404 لتقديم بعض الترفيه القصير. من المحتمل أن تتذكر موقعًا مثل هذا. بالإضافة إلى ذلك ، فإن الالتفاف الممتع يكمل موقعًا مثيرًا للإعجاب حقًا - على محمل الجد ، عندما تنتهي من اللعب ، توجه إلى الصفحة الرئيسية واستمتع بكل شيء.

16. لا تعد ولا تحصى

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

17. كونماري

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

18. BrandCrowd

ليس الرسم التوضيحي على صفحة الخطأ هذه مفصلاً وجذابًا فحسب - بل إن النسخة ذكية أيضًا. نحن نحب الإشارة إلى أغنية Semisonic "Closing Time": "يمكنك النقر في أي مكان آخر ، لكن لا يمكنك النقر هنا."

19. شركة Hot Dot للإنتاج

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

20. OrangeCoat

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

21. إرفين وسميث

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

22. DayCloud Studios

... أو ، يمكن أن يكون 404 مكانًا لإضاعة الوقت لمدة دقيقة ، كما يمكن رؤيته على موقع الويب الخاص بـ DayCloud Studios. يؤدي تحريك المؤشر حول الشاشة إلى إظهار رسالة 404 مضيئة بواسطة أشعة الليزر التي تنطلق من عيون قطة. لماذا لا؟

23. فراغ الرأس

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

24. مخابز وايلدوود

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

الصفحة غير موجودة: Funny 404 Error Pages

25. Astuteo

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

26. ليغو

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

27. Magnt

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

28. IconFinder

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

29. أحلام سعيدة

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

30. جيثب

يشير السطر "هذه ليست الأجهزة الروبوتية التي تبحث عنها" إلى خدعة Jedi لأوبي وان كينوبي على Stormtroopers في Star Wars Episode IV ، وقد أصبحت عبارة معروفة تُستخدم لإخبار شخص ما بأنه يلاحق الخطأ مسار العمل. يلعب GitHub على هذا الخط الشهير في رسالة الخطأ 404.

31- باتاغونيا

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

32. كلاود سيجما

تحقق من ذلك: تسمح لنا Cloud Sigma بالدخول في بعض الأحداث من وراء الكواليس. صفحة الخطأ 404 الخاصة بهم تتظاهر بأنها "الصفحة الرئيسية لمطور مبتدئ" - هذا المطور الصغير ، حسنًا ، قطة.

33. AMC Theatre

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

34. برونو

ليس من قبيل المصادفة أن الوكالات الإبداعية بارعة في ابتكار صفحات 404 رائعة. إليكم واحدًا آخر من المبدعين في Bruno يلعب دور الكوميديا ​​الكلاسيكية الشهيرة Dude، Where's My Car؟ لا ، لا علاقة له بالشركة أو موقع الويب ، لكن من المؤكد أنها ستحصل على ضحكة مكتومة.

35. NPR

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

36. متوسطة

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

37. HomeStarRunner

HomeStarRunner.com ، موطن سلسلة الرسوم المتحركة ذات الرسوم المتحركة Flash ، كان لديه سلسلة من صفحات الخطأ 404 المرحة على مر السنين. تتميز أحدث الشخصيات من سلسلة الرسوم المتحركة في مشهد كان من الممكن أن يأتي مباشرة من إحدى حلقاتهم. إذا قمت بتشغيل الصوت عند تحميل الصفحة ، فسوف تسمع شخصيتهم Strong Bad - المعروف بعبارات الصراخ بصوت عالٍ - يقول ، "404'd!"

38. بليزارد إنترتينمنت

إليك فكرة بسيطة تنتهي بمظهر رائع: صفحة 404 من Blizzard Entertainment تعرض شخصية متحركة فقدت في عاصفة ثلجية فعلية وبعض الفكاهة التي سيقدرها معجبو World of Warcraft.

39. مرحبا فكرة كبيرة

رحلة سريعة حول خبراء التسويق ووسائل التواصل الاجتماعي موقع Hello Big Idea سيخبرك بما تحتاج لمعرفته حول أسلوب النسخ الجريء والصريح. وبالطبع ، صفحة الخطأ 404 ليست استثناءً.

40. HubSpot

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

حوّل صفحة خطأ 404 إلى لحظة مبهجة

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

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

ملاحظة المحرر: تم نشر هذا المنشور في الأصل في ديسمبر 2015 وتم تحديثه للشمول.