في مجال الويب، يوجد بعض الصفحات المشهورة او التي لا غنى عنها إطلاقا التي لزم توافرها في الموقع الذي انت بصدد تطويره منها الصفحة الرئيسية و صفحة الإتصال، و الاشهر صفحة الـ 404 او صفحة الخطأ، و رغم ضروريتها في الصفحة و بساطتها أيضا، فإن الكثيرين يغفلون عن بعض أهم النقاط التي وجب الإلتزام بها أثناء تصميم و تطوير صفحة 404، خصوصا حين يتعلق الأمر بالـ UI/UX إذ وجب توفير مجموعة من العوارض في تصميم الصفحة، من خلال مقالنا هذا في قسم الـ UI/UX، سنقوم معا بتطوير صفحة الخطأ 404 و اهم الأشياء التي يجب توفيرها فيها كذلك من أجل الخروج بنتيجة متميزة.
مقالات مرتبطة عليك قرائتها قبل الغوص في هذا المقال :
- إليك أفضل المصادر لتعلم الـ UI/UX و قواعده بإحترافية
- 5 برامج تساعدك على تصميم UI/UX إحترافي قبل تطويره برمجياً
- دليلك لفهم منصة ProtoPie لصناعة و تجسيد تصاميم الـ UI/UX بإحترافية و صناعة نماذج Prototype تفاعلية
- ما هو الUI و الUX ؟ و ما الفرق بينهما ؟
- 5 أسباب جعلتني اسقط في حب برنامج Adobe XD أشاركها معك الآن
- ما هي صفحة الخطأ 404 ؟
قبل ان نقبل على التطوير و التصميم علينا ان نفهم ما الذي نحن بصدد العمل عليه، صفحة الخطأ 404 و هي صفحة مشهورة في مواقع الويب خاصة و هي الصفحة التي يتم توجيه الزائر او المستخدم إليها في حالة كان التوجيه (Routing) خاطئاً او غير موجود إطلاقا، إذ يحدد اي موقع روابط مخصصة لتوجيه المستخدم لصفحات مخصصة كذلك مثل رابط صفحة About او رابط صفحة الـ Home و غيرها، لكن في حالة أخطأ المستخدم في النقر على الرابط او كتبه بطريقة خاطئة علينا توجيهه لصفحة الخطأ 404 لنوصل له رسالة من خلالها، هذه الرسالة تتضمن بالطبع معلومات تخبره انه في الصفحة الخطأ و توفر له وسائل للعودة الى المسار الصحيح.
- الـ UX الخاص بصفحة الـ 404 :
لن نشرح الـ UX هنا فقد سبق لنا و إقترحنا رابطا في الأعلى لفهمه أكثر، عموما يسمح لنا الـ UX بدراسة تحركات المستخدم وسط الصفحة، في صفحة الـ 404 حين يلج المستخدم او الزائر إليها سيقوم بعدة حركات (Actions) من أجل الخروج منها او من أجل إستعادة السيطرة عن مساره في التصفح، حتى نضمن له نحن ذلك، على صفحتنا الـ 404 أن تتضمن عدة أشياء أهمها :
- الشعار / لوجو (Logo) : قد تكون المرة الاولى التي سيزور فيها مستخدم موقعك تلك الصفحة و لم يرى سابقتها إطلاقاً، لذلك يجب علين طمأنته بأنه لازال في الموقع الذي كان يتصفحه و لم يذهب الى موقع آخر، لنحقق له ذلك علينا إدراج شعار موقعنا او منصتنا في الصفحة ليدرك انه لازال في الموقع.
- العنوان : ما هي هذه الصفحة ؟ هل هي صفحة مقال؟ صفحة بحث ؟ صفحة تعريف ؟ على الصفحة ان تحمل عنوانا محدداً تشير الى انه داخل صفحة محددة و ليست إعتباطية، يمكن للعنوان ان يكون إبداعيا، او يكون فضوليا يجعل المستخدم يبحث أكثر عن وصف تلك الصفحة مما يأخذنا الى النقطة الثالثة.
- الشرح / الوصف : ما هي هذه الصفحة بالضبط؟ هنا نشير الى وصف الصفحة ما هي بالضبط و كيف وصل المستخدم الى تلك الصفحة، و كيف يمكنه أيضا الخروج من هذه الصفحة بالطبع.
- الروابط : و أخيراً، على صفحتك الخطأ 404 ان تتضمن روابط صحيحة تؤدي الى الصفحات الشغالة، يمكنك أيضا إضافة خاصية البحث الى جانب الروابط و هو عامل إختياري بينما روابط التنقل إجبارية.
لك حرية إضافة أشياء أخرى في صفحة الـ 404 مثل الفيديوهات مثلا، لكن العوارض الأربعة ملزمة في الصفحة و ضرورية، و لا ننسى انه من خلال النقاط الأربع وجب دائما طمأنة الزائر و تهدئته حتى لا يغادر الموقع بالمرة.
- الـ UI الخاص بصفحة الـ 404 :
يختلف الـ UI حسب المطلوب و حسب الموقع و الألوان التي يعتمدها، يمكنك إختيار كافة الألوان و التصاميم المناسبة لذوقك او المناسبة لذوق عميلك مع احترام عامل التناسق و التجاذب، لا تضف الكثير من الألوان و ابق الألوان دائما متناغمة، إستنبط من الطبيعة فهي أفضل شيئ، بالنسبة لصفحة الـ 404 التي سنقوم نحن بتصميمها، فقد إخترنا رابطة الالوان التالية :
بالنسبة لألوان الـ Gradient فسنتركها إختيارية، سنضيفها لكن لن نستخدمها، نحن نعلم ان الـ Gradient تقنية تصميم جميلة و بدأت تجتاح تصميمات الويب و الموبايل و يمكننا إستخدامها أيضا في تصميم هذه الصفحة، لكن سنعتمد فقط على اللون الاحادي في هذا المقال، و سنحاول إدراجها في الشروحات القادمة.
بعد تجهيز الألوان، قد نحتاج الى تجهيز الخطوط كذلك، بالنسبة للصفحة سنحاول تطويرها باللغة العربية، لذلك سنعتمد على خطوط عربية محضة، سنحتاج بالأساس الى نوعين من الخطوط رئيسيين و هما الخط الرئيسي الذي سنستخدمه في العناوين الكبرى او في المعلومات المهمة، ثم الخط الثانوي الذي سنستخدمه في الشروحات او الوصف و غيرها، نحن شخصيا قد إخترنا خط (Bein Arabic) كخط رئيسي، و خط (Noto Kufi Arabic) كخط ثانوي. حسنا الآن، نحن جاهزون إذن لبدأ التصميم.
- تصميم الـ Navbar :
يمكن للقائمة العلوية او الـ Navbar ان تحمل معها الكثير من الخصائص مثل خواص البحث و التنقل و غيرها، في صفحتنا هذه سنجعل الـ Navbar تؤدي وظيفتين : اولا ستغطي نقطة تعريف الموقع اي سنقوم بإظهار اللوغو او الشعار في القائمة العلوية، و ثانيا سنقوم بإضافة بعض الروابط للتنقل داخل الموقع او العودة للرئيسية او حتى مراسلتنا في حال كان هناك خطب بالصفحة، سنبقي تصميم الـ Navbar بسيطا للغاية :
بسيطة في شكلها و تؤدي المطلوب بكفاءة، يوجد روابط للتنقل خارج صفحة الـ 404 و الشعار لتأكيد هوية الموقع الذي يتصفحه الزائر، لأن اللون الرئيسي للخلفية أبيض، سنقوم بتمييز الـ Navbar ببعض الظلال السفلية من أجل إعطائها لمسة مخصصة، و بذلك ننتقل للجزء الثاني من تصميم الصفحة.
- تصميم محتوى الصفحة :
إخترنا ان يكون عنوان الصفحة هو " لست الوحيد الذي زارنا اليوم " و هو عنوان يبعث الطمأنينة في قلب الزائر، فهو ليس الوحيد الذي يزور هذه الصفحة و ليس الأخير كذلك و أن هذا الأمر إعتيادي و طبيعي و ليس شذوذا او نوعا من " الإختراقات " التي تعرض لها حتى إستطاع الوصول لهذه الصفحة، و لنفسر له الأمر أكثر إخترنا إضافة الوصف أسفل العنوان ليشرح للزائر او المستخدم كيف وصل الى هنا و كيف يستطيع الخروج، و لنقرب له يد المساعدة ( و إن اضفناها سابقا في الـ Navbar ) سنأتي بزرين أسفل الوصف كذلك الأول ياخذنا للرئيسية و الثاني للبحث مجددا في صفحة البحث.
نستوقف هنا للحظة و نتذكر درس الـ UI/UX الذي يقول ان العنصر الأهم يجب أن يكون باللون الأهم و الأقل اهمية بلون أقل أهمية، بين الزرين أعلاه سيختار قلبك تلقائيا - ربما - زر الرئيسية، مما سيمنحنا فرصة لإطلاع الزائر او المستخدم على ما نقدمه في موقعنا بشكل عام بصفحته الرئيسية، لذلك إخترنا له اللون الرئيسي، بينما خاصية البحث الذي توفره له خدمة البحث مجددا جعلناها بطريقة أقل أهمية.
للمساعدة في تنمية الرؤية البصرية و تأكيد انها صفحة خطأ 404، قمنا بإضافة Illustration توضح ان الإتصال منقطع مسبباً خطأ 404، الصورة وحدها كفيلة بجعل الفكرة تصل الى المستخدم.
- القائمة السفلية Footer :
قمنا تقريبا بتغطية كل الأساسيات من النقاط الأربعة في كل من الـ Navbar و محتوى الصفحة، و إن كان هناك أي شيئ مبهم فسنقوم في الفوتر Footer بتوضيحه أكثر، او تعزيز ما قمنا بذكره بشكل أفضل في الـ Footer، لك الحرية في عدم إستخدام ما جاء في الفوتر الخاص بنا، قمنا بإضافة 3 أشياء إضافية في الفوتر لتقوية الـ UX و هي : طلب المساعدة، ثم مراسلة الدعم الفني و أخيراً اعطاء الزائر فرصة للتعبير عن رأيه، و هي إضافية كما أشرنا، لنحصل على النتيجة التالية :
ثلاث نقاط أساسية لتعزيز الـ UX و تحترف الـ UI، فقد إستخدمنا في لون الأيقونات الرمادي الخافت، و في عنوان الفقرة اللون الأساسي الى جانب إستخدام الخط الرئيسي كذلك، بينما في وصفها إستخدمنا الرماضي المغمق قليلا مع الخط الثانوي، لنفصل بين الفقرات إستخدمنا فاصل عبارة عن خط عمودي يأخذ نفس لون الأيقونات مع نقص الـ Opacity لتوفير فروقات بين الفقرات بطريقة لا تعيب الـ UI.
- النتيجة النهائية :
يمكنك الإطلاع على هذه الصفحة بدقة أفضل من هنا .